Axure入门与基础 动态面板浅析
关关 2018-06-28 来源 : 阅读 1342 评论 0

摘要:动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。希望阅读本篇文章以后大家有所收获,帮助大家对Axure的掌握更加深入。

    动态面板,在Axure主界面的部件板块中,是这个样子滴:

 Axure入门与基础 动态面板浅析

    动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含多个状态,每个状态可包含一系列控件。每个状态也就是每个界面在任何时候都只有一个可见,当然整个页面时可以被隐藏的。简单来说,动态面板就是展示在页面不跳转的情况下所能实现的交互状态。

 

    如何使用?

    1.动态面板是Axure的一个组件,在使用时,直接将其拖到页面中即可。

    2.通过右击动态面板——>管理面板状态,或者双击动态面板来给其命名,删除、添加动态面板,对已有的动态面板进行编辑:

 Axure入门与基础 动态面板浅析

    第一遍看到原型图的时候,其中表层上有一层黄色,当时还以为是页面设置成了锁定状态,结果还真觉得自己可笑,人家是将动态面板设置为了隐藏。

    3.平时默认动态面板的状态是显示蓝色的,但如果将其设置为隐藏,就会变成黄色。如下图:

 Axure入门与基础 动态面板浅析

    4.注意:动态面板中要显示的内容,一定要完全包含在动态面板内部,超出边界范围的部分在生成的内容中是不可见的。

    5.在设置好动态面板之后,我们可以添加交互。

    

    按钮与面板间的交互

    1.首先在页面中添加一个按钮,并且将动态面板设置为隐藏,如图:

 Axure入门与基础 动态面板浅析

    2.对按钮进行设置:选中“我的动态面板”按钮,在Axure页面的右部“部件交互和注释”框选择“鼠标单击时”,如图:

 Axure入门与基础 动态面板浅析

    3.右击选择“新增用例”,或者双击,弹出下图所示窗体,在窗体中选择部件下的“显示/隐藏”,在右边栏“第四步:配置动作”勾选要显示的窗体,同时可以在右下角进行窗体的显示或隐藏等:

Axure入门与基础 动态面板浅析

    4.至此,按钮动作已设置完毕。

 

    发布

    一版原型图设计完成之后,无疑将其发布出来才会有更好的效果,Axure发布原型图很简单。

    选择菜单栏中的“发布”,我们可以对原型图预览先查看生成后的情况,确定好没问题后,就可以发布成网页版了。

Axure入门与基础 动态面板浅析

    看我们上面所设计的例子的成果图:

 

    1.点击按钮前:

    

    2.点击按钮后:

Axure入门与基础 动态面板浅析

    大功告成!一个简单的动态面板就设计成功了。

 

   本文由职坐标整理发布,更多相关内容,请关注职坐标常用软件Axure频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程