博客> 如何用Mockplus快速做一个手风琴菜单?
如何用Mockplus快速做一个手风琴菜单?
2018-09-21 19:51 评论:0 阅读:510 jongde
交互设计 线框图 原型设计工具

手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure,想实现该效果也比较麻烦。但如果你对 Mockplus 有所了解,你一定知道,利用Mockplus的“面板”组件,可以快速地做一个手风琴式的菜单。

 Enter your image description here:

我们来看看具体的操作步骤:

第一步:选择“面板”组件,自定义菜单样式。

在左侧的交互分类中选择“面板”组件,此处为了节省时间我在“面板”中添加一个列表。然后将带列表的面板复制两次。并将第二,第三个面板的名称改为“面板2”和“面板3”

 Enter your image description here:

“面板”组件的特点:调整面板大小时,面板里的内容不会随着面板大小的变化而变化。

 Enter your image description here:

第二步:设置交互,使面板大小恢复的同时“面板2”向下位移。

将三个面板都缩小至只显示表头,选中第一个面板,在界面右侧交互设置区域,点击“+”,选择面板,选择“调整大小”,勾选“自动恢复”,在下方输入需要增加的像素,第一个交互就设置完成了。这个交互的目的是让用户在点击表头位置时,面板拉长到显示全部列表的位置。

 Enter your image description here:

同样地,选中第一个面板,在界面右侧交互设置区域,点击“+”,选择面板2,选择“移动”,勾选“自动恢复”,在下方输入需要移动的像素(即第一个面板拉长时增加的像素),第二个交互就设置完成了。这个交互的目的是让第一个面板在拉长时,第二个面板同时向下位移相同数量的像素。

 Enter your image description here:

等数量的像素。方法同上。

 Enter your image description here:

第三步:按照一,二步的方法,为面板2和面板3设置交互。

这样,一个简易的手风琴菜单就做好了。你还可以在菜单选项中添加图标等组件,将菜单设置成你想要的样子。

我们来看看每个面板上都有哪些交互:

面板1:

链接到自己,调整大小。 链接到面板2,位移。 链接到面板3,位移。

面板2:

链接到自己,调整的大小。 链接到面板3,位移。

面板3:

链接到自己,调整大小。

是不是很简单呢?一个面板组件,两个简易的交互,就能做出一个像样的手风琴菜单。

Mockplus虽然是一款操作简单的原型工具,但利用它你可以做出很多复杂的交互,实现不可思议的效果。当然了,无论任何工具,设计师都要先熟悉了它的操作方法和各个组件的用途,才能用它们做出优秀的作品。如果你想了解更多Mockplus组件的使用方法,可以直接到它的官方教程网站doc.mockplus.cn,那里既有文字教程,又有视频解说,会让你的学习过程充满乐趣。

收藏
0
sina weixin mail 回到顶部