在Mockplus中,如何做鼠标悬停时菜单下拉的效果?

简介: 了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能。但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用Mockplus的状态交互功能,就能轻松实现。

了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能。但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用Mockplus的状态交互功能,就能轻松实现。

我们来看看详细步骤:

第一步:用矩形做一个菜单。

打开Mockplus,从界面左侧的组件库中拖出一个矩形,将其复制成多个。其中一个作为菜单的显示区域(图中蓝色矩形),另外几个拼接起来作为菜单的内容。

在右侧参数面板中,将第一个矩形设置为不可见。然后将另外几个矩形合并为组。


img_dcb54cf72fe79313f62e25b2ef483fa3.png

第二步:移动矩形

将蓝色矩形移动到不可见矩形的位置,并在右侧参数面板中将蓝色矩形下移一层,此时依然可以看到蓝色矩形,因为上层的形状是不可见的。


img_caabcf7ecf08d14f0c4191860cb52d7d.png

第三步:利用状态交互,实现鼠标悬停时菜单下拉的效果。

在界面右侧的参数面板上,将透明度设置为0,并点击“透明度”前的小闪电。选择“鼠标经过时”,透明度设置为100。


img_5d415c74b64071961b5791bd6c1cb10f.png

这样,一个简单的鼠标悬停下拉菜单就做好了。

点击界面上方的“预览”,即可查看效果:


img_83744bfdda095f017d3535c2aa104839.gif

这就是原型设计的奇妙之处:用有限的条件创造出无限的效果。正如弹钢琴,琴键有限,音乐却是无限的。对于一个优秀的设计者来说,原型工具本身具备的功能并不是最重要的。功能越多,操作难度就越大,也越不容易上手。Mockplus是简单易用的原型工具,让设计师在简单而不受限的平台进行设计。因此,无论你是设计新手,还是资深的设计师或产品经理,Mockplus都值得一试。

相关文章
|
4月前
|
开发框架 前端开发 搜索推荐
在WInform开发中实现工具栏/菜单的动态呈现
在WInform开发中实现工具栏/菜单的动态呈现
|
5月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
存储 前端开发 程序员
iOS开发:实现点击常用控件弹出地区选择框(万能方法)
在iOS开发中会遇到一些选择选项的需求,而且点击一个控件弹出一个选择框,选择之后展示到前端,然后再把选择的内容传给后台或者做本地存储。这个需求对于大多数开发者来说可以为小儿科,但是作为一个爱记录的程序猿来说相当可贵,所以还是那句话,只分享给有缘人,大牛可以飘过,不喜勿喷请走开。
440 0
iOS开发:实现点击常用控件弹出地区选择框(万能方法)
|
前端开发
前端工作总结104-控制弹出框不全屏
前端工作总结104-控制弹出框不全屏
74 0
Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动,自定义标题栏
最近也换了公司,也换了新的工作,工资也象征性的涨了一点点,但是最近心里还是慌慌,不知道为什么,没有那种踏实感,感觉自己随时可以被抛弃的感觉。感觉自己在荒废时间,也感觉自己在浪费生命。
302 0
Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动,自定义标题栏
|
Unix 区块链 Android开发
VC++工具栏图标合并工具推荐:Axialis IconWorkshop
VC++工具栏图标合并工具推荐:Axialis IconWorkshop
239 0
VC++工具栏图标合并工具推荐:Axialis IconWorkshop