一对一免费咨询: 13913005726 025-66045668

  本文教大家如何利用Mockplus的面板组件,快速地做一个手风琴式的菜单,简单实用,学起来吧。

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

149870068483405105

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

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

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

149870069482024885

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

149870070376739742

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

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

149870071381069463

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

149870072293479631

  此时,我们需要在第一个面板上再添加一个交互,使第三个面板也向下位移同等数量的像素。方法同上。

149870073637446399

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

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

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

  面板1:

  链接到自己,调整大小。

  链接到面板2,位移。

  链接到面板3,位移。

  面板2:

  链接到自己,调整的大小。

  链接到面板3,位移。

  面板3:

  链接到自己,调整大小。

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

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

  文/庸 微信公众号:Mockplus

  

*请认真填写需求信息,我们会在24小时内与您取得联系。
致力于为客户创造更多价值
13913005726 025-66045668