TB前卫网

TB前卫网店铺大全为您精选最好的精品店铺导航,欢迎您。收藏本站

Axure交互原型设计:动态面板之弹出对话框

栏目:科技数码   发布时间:2017/07/18   来源:91产品   编辑:chanpin91

原型










  • 每一周91公然课,91风暴,全员介入,实际案例实际分析
  • 问题答疑,你发问题我解答
  • 行业专场,互联网金融,电商,新媒体运营等专场
  • 各地分站交换
  • 资源及人脉同享
  • 其他的。。。。

欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了!







导读:动态面板的功能很强大,知道了动态面板的原理,即可以应用自若。在目前的工作中,我把时常使用动态面板制作的交互总结了一下,但愿与大家讨论并分享。


正文

动态面板在交互中往往用在:
  • 使用动态面板制作轮播图。
  • 使用动态面板制作tab页面切换。
  • 使用动态面板制作弹出对话框。
  • 使用动态面板……
为了好理解,我使用员工信息保护时禁用某员工作为例子。该例子中还触及到全局变量的使用。
指望效果:
  • 单击禁历时候,弹出禁用缘故选择的对话框。
  • 选择缘故提交后,弹框消失。
  • 列表中的状况变从“在职”变成“禁用”,操作中的按钮“禁用”变成按钮“撤消禁用”。(全局变量的使用)
制作步骤制作一个列表,可用矩形来做。
在列表下方制作添加一个动态面板
在列表下方制作添加一个动态面板,大小为但愿显示的弹框的大小。
为该动态面板添加名称
为该动态面板添加名称:jinyong。
的页面内容
添加状况State1的页面内容。
将动态面板初始设为隐藏
将动态面板初始设为暗藏。
按钮的时候弹出
添加交互。
1)单击“禁用”按钮的时候弹出jinyong的动态面板。
单击对话框中的
2)单击对话框中的“提交”,暗藏jinyong的动态面板。
单击对话框中的
3)单击对话框中的“取缔”,暗藏jinyong的动态面板。(同2)“提交”的交互)
4)下列为使用变量的步骤。
添加一个全局变量A(下列为添加变量,应用变量的步骤)
个矩形命名

5)为下列2个矩形命名。


加载页面时


7)加载页面时,设置前提:变量A=1,则列表中的状况变从“在职”变成“禁用”,操作中的按钮“禁用”变成按钮“撤消禁用”,具体的交互以下图设置。
运行该文件
运行该文件,可看到实现效果。
具体可查看源文件:https://pan.baidu.com/s/1hs3P048
延伸:
制作弹出框,使用的是动态面板的暗藏显示功能,相似于制作弹出框,还可以制作
  • 弹出日期的选择。
  • 制作下拉菜单。
  • 制作开展收起。
  • 制作规则说明页面。
大家可以试试。
作者:小羊驼,产品经理一枚,10年+产品经验。


致力于为产品新人


致力于为产品新人、产品经理等泛博产品喜爱者打造一个全方位的学习交换平台,分享产品设计、交互设计、产品运营干货。

专注于互联网产品运营干货,聚焦互联网产品策动,电子商务,网络营销,移动互联网,融资创业等领域经验分享。




【公众号】:91产品
【微信号】:chanpin91
【微宣言】:91产品致力为产品新人、产品经理等广大产品爱好者打造一个全方位的学习交流平台,分享产品设计、交互设计、产品运营干货。

下一篇:聚焦苹果手机20万余条信息被泄露!更可怕的是.....
*版权声明及防欺诈提醒