如何使用Mockplus制作鼠标悬停下拉菜单?

2019.07.25 mf_web

148

那些使用Mockplus的人知道原型工具现在不支持鼠标悬停。但今天,我发现只要改变我的方法,用Mockplus实现鼠标悬停事件就不那么难了。例如,鼠标悬停下拉菜单,可以通过Mockplus的状态交互轻松完成。

(在上一篇文章中,我介绍了如何通过3个步骤快速创建Mockplus手风琴菜单。如果您对它感兴趣,请仔细阅读,我相信您会受益匪浅。)

现在让我们回到今天的主题,看看如何使用Mockplus轻松制作鼠标悬停下拉菜单:

第1步 - 使用矩形创建菜单。

推出Mockplus。将矩形组件拖到画布上并复制几次。将其中一个作为菜单的顶部,其他部分作为内容部分(参见下图)。

选择内容部分中的第一个矩形,然后取消选中右侧属性面板上的“visible”属性。然后,将五个矩形分组。

 制作一个带矩形的菜单

第2步 - 移动矩形

将蓝色矩形放在不可见的位置。在属性面板上,向后发送蓝色矩形。现在你仍然可以看到它,因为覆盖它的组件是不可见的(第1步)。

 移动矩形

第3步 - 实现具有状态交互的鼠标悬停下拉菜单。

选择组。将不透明度值设置为0,然后单击它附近的照明图标。选择“MouseHover”选项并将不透明度值设置为100。

国家互动

现在创建一个简单的鼠标悬停下拉菜单。单击界面顶部的“预览”按钮以查看效果。

这是原型制作的神奇力量:用有限元素实现无限效果。这就像弹钢琴一样。键是有限的,但音乐是无限的。对于那些优秀的设计师而言,原型工具最重要的功能并不多,因为工具具有的功能越多,操作就越复杂。

作为一款易于使用的原型设计工具,Mockplus使设计人员能够在简单但不受限制的平台上创建产品。因此,无论您是设计领域的新手,还是资深的设计师/ PM,Mockplus都值得一试。

Mockplus的简短介绍

Mockplus是一款基于桌面的工具,可轻松快速地对移动,Web和桌面应用进行原型设计。通过简单的拖放创建交互,通过协作功能,您的团队合作将节省时间。

最新案例

联系电话 400-6065-301

微信咨询 寒总监