如何用Mockplus快速做一个手风琴菜单?
2017-06-29 11:33
429 查看
手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure,想实现该效果也比较麻烦。但如果你对Mockplus有所了解,你一定知道,利用Mockplus的“面板”组件,可以快速地做一个手风琴式的菜单。
![](https://file.mockplus.cn/image/2017/06/49fa48a0-b84f-431c-aa35-c3e06125d90e.gif)
我们来看看具体的操作步骤:
第一步:选择“面板”组件,自定义菜单样式。
在左侧的交互分类中选择“面板”组件,此处为了节省时间我在“面板”中添加一个列表。然后将带列表的面板复制两次。并将第二,第三个面板的名称改为“面板2”和“面板3”
![](https://file.mockplus.cn/image/2017/06/8d75a56c-5729-4ea4-9e9c-4c789e81f191.jpg)
“面板”组件的特点:调整面板大小时,面板里的内容不会随着面板大小的变化而变化。
![](https://file.mockplus.cn/image/2017/06/30d7de7b-5d91-4586-b370-236149982f3e.jpg)
第二步:设置交互,使面板大小恢复的同时“[b]面板2”向下位移。[/b]
将三个面板都缩小至只显示表头,选中第一个面板,在界面右侧交互设置区域,点击“+”,选择面板,选择“调整大小”,勾选“自动恢复”,在下方输入需要增加的像素,第一个交互就设置完成了。这个交互的目的是让用户在点击表头位置时,面板拉长到显示全部列表的位置。
![](https://file.mockplus.cn/image/2017/06/9ae9f319-03dd-4c01-bc26-d4c4122decf0.jpg)
同样地,选中第一个面板,在界面右侧交互设置区域,点击“+”,选择面板2,选择“移动”,勾选“自动恢复”,在下方输入需要移动的像素(即第一个面板拉长时增加的像素),第二个交互就设置完成了。这个交互的目的是让第一个面板在拉长时,第二个面板同时向下位移相同数量的像素。
![](https://file.mockplus.cn/image/2017/06/3f95731b-d3c4-48a0-8f1b-1eb13c9c84d4.jpg)
此时,我们需要在第一个面板上再添加一个交互,使第三个面板也向下位移同等数量的像素。方法同上。
![](https://file.mockplus.cn/image/2017/06/0fb9454c-d58f-4823-9506-8639d21aa45e.jpg)
第三步:按照一,二步的方法,为面板2和面板3设置交互。
这样,一个简易的手风琴菜单就做好了。你还可以在菜单选项中添加图标等组件,将菜单设置成你想要的样子。
我们来看看每个面板上都有哪些交互:
面板1:
链接到自己,调整大小。
链接到面板2,位移。
链接到面板3,位移。
面板2:
链接到自己,调整的大小。
链接到面板3,位移。
面板3:
链接到自己,调整大小。
是不是很简单呢?一个面板组件,两个简易的交互,就能做出一个像样的手风琴菜单。
Mockplus虽然是一款操作简单的原型工具,但利用它你可以做出很多复杂的交互,实现不可思议的效果。当然了,无论任何工具,设计师都要先熟悉了它的操作方法和各个组件的用途,才能用它们做出优秀的作品。如果你想了解更多Mockplus组件的使用方法,可以直接到它的官方教程网站doc.mockplus.cn,那里既有文字教程,又有视频解说,会让你的学习过程充满乐趣。
![](https://file.mockplus.cn/image/2017/06/49fa48a0-b84f-431c-aa35-c3e06125d90e.gif)
我们来看看具体的操作步骤:
第一步:选择“面板”组件,自定义菜单样式。
在左侧的交互分类中选择“面板”组件,此处为了节省时间我在“面板”中添加一个列表。然后将带列表的面板复制两次。并将第二,第三个面板的名称改为“面板2”和“面板3”
![](https://file.mockplus.cn/image/2017/06/8d75a56c-5729-4ea4-9e9c-4c789e81f191.jpg)
“面板”组件的特点:调整面板大小时,面板里的内容不会随着面板大小的变化而变化。
![](https://file.mockplus.cn/image/2017/06/30d7de7b-5d91-4586-b370-236149982f3e.jpg)
第二步:设置交互,使面板大小恢复的同时“[b]面板2”向下位移。[/b]
将三个面板都缩小至只显示表头,选中第一个面板,在界面右侧交互设置区域,点击“+”,选择面板,选择“调整大小”,勾选“自动恢复”,在下方输入需要增加的像素,第一个交互就设置完成了。这个交互的目的是让用户在点击表头位置时,面板拉长到显示全部列表的位置。
![](https://file.mockplus.cn/image/2017/06/9ae9f319-03dd-4c01-bc26-d4c4122decf0.jpg)
同样地,选中第一个面板,在界面右侧交互设置区域,点击“+”,选择面板2,选择“移动”,勾选“自动恢复”,在下方输入需要移动的像素(即第一个面板拉长时增加的像素),第二个交互就设置完成了。这个交互的目的是让第一个面板在拉长时,第二个面板同时向下位移相同数量的像素。
![](https://file.mockplus.cn/image/2017/06/3f95731b-d3c4-48a0-8f1b-1eb13c9c84d4.jpg)
此时,我们需要在第一个面板上再添加一个交互,使第三个面板也向下位移同等数量的像素。方法同上。
![](https://file.mockplus.cn/image/2017/06/0fb9454c-d58f-4823-9506-8639d21aa45e.jpg)
第三步:按照一,二步的方法,为面板2和面板3设置交互。
这样,一个简易的手风琴菜单就做好了。你还可以在菜单选项中添加图标等组件,将菜单设置成你想要的样子。
我们来看看每个面板上都有哪些交互:
面板1:
链接到自己,调整大小。
链接到面板2,位移。
链接到面板3,位移。
面板2:
链接到自己,调整的大小。
链接到面板3,位移。
面板3:
链接到自己,调整大小。
是不是很简单呢?一个面板组件,两个简易的交互,就能做出一个像样的手风琴菜单。
Mockplus虽然是一款操作简单的原型工具,但利用它你可以做出很多复杂的交互,实现不可思议的效果。当然了,无论任何工具,设计师都要先熟悉了它的操作方法和各个组件的用途,才能用它们做出优秀的作品。如果你想了解更多Mockplus组件的使用方法,可以直接到它的官方教程网站doc.mockplus.cn,那里既有文字教程,又有视频解说,会让你的学习过程充满乐趣。
相关文章推荐
- 原名是:如何快速成为JAVA高手。照做了不一定能成为高手但我觉得是一个很不错的JAVA学习流程
- 教你如何用TreeView树形菜单创建像CSDN左边那样的导航之二:如何建立一个静态的TreeView
- 如何快速的成为一个合格的Oracle DBA?
- [转]如何快速定位一个函数的返回点 - 调试技巧
- 如何快速上手一个手机平台
- 如何快速的在SharePoint里构建一个Blog站点
- 如何快速掌握一个新的手机开发平台
- 如何快速的成为一个合格的Oracle DBA?
- 如何给系统菜单添加一个菜单项
- 如何快速定位一个函数的返回点
- 如何在java swing/awt中单击右键弹出一个菜单
- 如何实现一个快速开发框架之crud
- 如何快速判定一个数是否2的幂数
- 如何快速的成为一个合格的Oracle DBA?
- 如何快速给现有表添加一个自增字段
- 如何快速算出一个日期是星期几
- 如何快速产生一个1-n的无重复随机数序列
- 如何快速判断一个整数是否可以整除另一个整数的理论分析
- 如何快速的成为一个合格的Oracle DBA?
- 如何快速熟悉一个开源软件+Java doc使用