和记官方网,和记网上娱乐,和记国际网上娱乐欢迎您!
全国服务热线:158-6646-1895

Axure交互原型设计:动态面板之tab页面切换

 

  动态面板的功能很强大,了解了动态面板的原理,便可以运用自如。在目前的工作中,我把经常使用动态面板制作的交互总结了一下,希望与大家讨论并分享。

  我的理解是:点击不同的标题或者标签,内容显示区显示不同的结果。通常标题或者标签是并列排放的。如携程网首页下面的部分。

  单击不同的tab页面切换显示不同的tab内容页,且选中页签的标题变红色。

  为了好理解,做一个简单的5月份汽车销量排行,分别按照轿车,SUV,MPV排行显示。

  单击上图中1处可以修出弧度,2处修改矩形为这种样式,得到以下的图,作为TAB标签的雏形。

  复制2个进行排列,且分别写上标签名称。为3个矩形标签分别命名(”jiaoche”,”SUV”,”MPV”)。

  为动态面板命名:xiaoliangpaihang,制作3个状态:轿车,SUV,MPV。(不会做的可以参考:Axure原型设计:动态面板之轮播图显示(附带源文件))

  静态页面做完成之后,便可以做交互了。点击矩形“轿车”,进入动态面板的轿车页面;

  2)矩形“jiaoche”为选中状态,其余2个tab页签为“未选中”状态。

  重复上面的步骤制作点击“SUV”和“MPV”的交互。这样就完成了动态面板的TAB页签的切换了。

  在例子,动态面板的每个状态的页面为一张图片。我们也可以换成其他的控件,例如下拉列表框,单选框,输入框,按钮等,根据需要采用不同的控件,当然也可以在动态面板中继续添加动态面板来达到效果(动态面板使用熟练后可以练习使用)。

  在例子中,页签选中为填充背景色,还可以有多种选中后的表现形式,例如字体变粗等,可以按照需要设置不同的交互。

  与其这么麻烦去给每一个tab都设定一个所有其它tab为未选定状态的用例,还不如直接复制全部tab进每个动态面板,只需要在每个动态面板设定相应的选中状态的tab就好了,你觉得呢

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。