axure8.0快速入门新手教程:手风琴式伸缩面板

2017年4月18日 阅读:373

不知道大家对手风琴了解多少?我对乐器不是很熟悉,但是我对手风琴的印象挺深刻的,因为在我读幼儿园的时候,幼儿园的老师总是带着个手风琴给我们领唱,哈哈哈!!!手风琴有一个很大的特点,就是有一块被拉伸开来,其他地方就压缩进去。手风琴式伸缩面板就是利用了这个特点所设计出来的一种伸缩面板,这一章就教大家如何使用axure8.0制作手风琴式伸缩面板原型。

第一步:拖拉摆放好相关控件

一个516X322的动态面板,在state1面板状态中,整齐排列5个组合,分别命名为“古诗1”、“古诗2”、“古诗3”、“古诗4”和“古诗5”。

每一个组合中,都有一个58X322的黑框白底矩形和一个226X322的图片,都对应命名为“古诗题目X”和“古诗图片X”。

第二步:为“古诗题目1”添加鼠标移入时用例

当鼠标移入“古诗题目1”时:

1、“古诗2”组合绝对移动至“古诗图片1”的右边;

2、“古诗3”组合绝对移动至“古诗图片1”的右边+“古诗题目1”的宽度;

3、“古诗4”组合绝对移动至“古诗图片1”的右边+“古诗题目1”的宽度X2;

4、“古诗5”组合绝对移动至“古诗图片1”的右边+“古诗题目1”的宽度X3。

动画为线性,时间为500毫秒。

第三步:为“古诗题目2”、“古诗题目3”、“古诗题目4”和“古诗题目5”添加鼠标移入时用例

此步和第二步类似,此处就不多讲了,复制然后略作修改移动的位置即可。

点击预览,鼠标在伸缩面板上移动就可以看到手风琴式伸缩面板的效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之手风琴式伸缩面板
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/18/470/

1 评论

  • 晓艳 2017年6月12日在下午4:04

    感觉做了一道几何题。 哈哈