1、本文章以制作一个简单界面为例讲述动态面板的简单用法,制作界面的最终效果如下图(展示最终效果的gif图片),
2、首先确定好需要动态显示的区域,比如我们想要图中的红框部分根据下方按钮的选择而动态显示,我们就可以先添加一块动态面板,然后调整到合适大小,并在右侧的【元件交互与说明】中设置动态面板名称,若该功能区被隐藏可在Axure界面上方的菜单中依次打开【视图】-【功能区】-【元件交互与说明】即可,
3、选中动态面板双击或者选中动态面板,右键选择【管理面板状态】就会弹出面板状态管理框,然后依次为动态面板增加几种状态,例如本例中的“个人板块/ VIP会员 / 更多功能”,
4、设置好动态面板的状态后,我们可以选中一个状态,鼠标双击即可进入该面板状态的编辑页面,例如我们双击“VIP会员”状态,进入编辑界面,在编辑界面添加需要展示的内容即可,下图中红框内的内容均为读者自行插入的内容,依次编辑好其他两个动态面板状态的内容,
5、为新增好的动态面板增加上边框和按钮,下图中边框和搜索框为读者自行添加内容,下方的图标可以自己动手制作,也可网上寻找免费的图标网站下载(作者推荐一个免费的图标网站:https://www.iconfinder.com/free_icons),该网站提供免费和付费图标下载,根据需要自行下载即可,
6、接下来我们为动态面板增加触发用例,点击图中”安卓“小人的图标,然后点击右侧的【元件交互与说明】功能区,双击“鼠标单击时”即可弹出【用例编辑框】,在【添加动作】中选择添加“设置面板状态”,在右侧的【配置动作】中,勾选刚才新增的动态面板,在下方的“选择状态为:”中选择具体需要点击此按钮设置的动态面板状态即可,这几步操作主要达到的目的是”设置单击按钮时,单击按钮的这个动作把XXX面板设置成XXX状态“,依次为三个按钮设置交互动作,
7、为每一个图标增加完动作后,就配置好了整个动态面板(本文只为展示动态面板的使用,因此许多效果均未设置,仅仅用了一些简单的操作,其实可以做的更精巧),点击Axure界面上的“预览”按钮,或者使用快捷键 F5 即可打开默认浏览器预览新增好的动态面板,点击设置好的动作即可预览动画效果,若预览效果符合预期,则保存设计文件即可。