订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 走进摹客 > 如何用Mockplus快速做一个手风琴菜单?

如何用Mockplus快速做一个手风琴菜单?

2017-06-28
132182

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

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

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


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

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

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


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

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

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

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


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

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

面板1:


链接到自己,调整大小。

链接到面板2,位移。

链接到面板3,位移。

面板2:


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

链接到面板3,位移。

面板3:


链接到自己,调整大小。

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

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

【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~

Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019

激活数量:限量150个。

有效期:2019年1月31日。

激活地址:https://www.mockplus.cn/user/upgrade?hmsr=Anne

上一篇
聊一聊登录页设计那些事儿

Grace   07/03

5分钟掌握8个常用交互组件,轻松进阶原型设计

Devin   06/28

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com