专栏首页无原型不设计如何用Mockplus快速做一个手风琴菜单?

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

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

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

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

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

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

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

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

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

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

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

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

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

面板1:

链接到自己,调整大小。

链接到面板2,位移。

链接到面板3,位移。

面板2:

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

链接到面板3,位移。

面板3:

链接到自己,调整大小。

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mockplus原型交互跟我做之6 - 快速给弹出面板命名

    到这里,我们插入一个有用小技巧的介绍。 在交互设计中,我们经常需要给弹出面板起一个名字,便于查看。 一般的方式,是在属性面板中,通过“名称”来修改。 但...

    奔跑的小鹿
  • 【Mockplus教程】如何批量修改组件属性

    选择多个组件,在属性面板上面会显示这些组件的共同属性,而属性值为其中一个组件的属性值, 改变属性面板上面的属性后将应用到所有组件上。 以改变文字大小和颜色...

    奔跑的小鹿
  • [桌面版] 在 Mockplus 2.1 (预览版)中使用切换面板

    1、添加切换面板 2、双击编辑切换面板当前页。 3、退出当前页编辑,点击组件上工具条上的加号,增加一个内容页并编辑内容 4、添加响应用户事件的组件。...

    奔跑的小鹿
  • Linode 新面板简单体验-创建管理主机

    魏艾斯博客www.vpsss.net
  • AMH 面板和宝塔 linux 面板哪个好

    魏艾斯博客www.vpsss.net
  • Chrome 87 新特性解读,多年来 Chrome 性能最大提升!

    今天 Chrome 更新了 87 最新版,这是今年最后一次 Chrome 更新了,这个版本是多年来 Chrome 性能获得最大提升的一次,开发者工具也进行了大幅...

    山月
  • 腾讯云服务器搭建网站

    对于服务器来说稳定、极速就选择 2核 4G内存配置的云服务器比较稳妥。这个配置跑网站是比较轻松无压力的。配上 avada主题,可以做出的很大气、高大上的企业网站...

    用户5921096
  • 宝塔 Linux 面板 RPM 极速安装体验过程

    魏艾斯博客www.vpsss.net
  • 宝塔面板升级没有成功怎么办

      今天ytkah的客户说他的宝塔面板进不去,也无法重启是啥情况。用命令重启提示没有那个文件或目录,但实际上是有的,如下图2所示,修改了那两个文件的权限也无法进...

    ytkah
  • VR开发--搭建UI框架(1)

    一般来说:我们做精美的界面,肯定是按部就班的拖UI控件,不停的引用来调用制作。但是随着我们掌握的熟练度,会发现一些类似的界面完全可以封装起来,而且通过进一步优化...

    雷潮

扫码关注云+社区

领取腾讯云代金券