订阅摹客文章

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

文章分类
Mockplus是什么?

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

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

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

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

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

分享到微信朋友圈:

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

博客 > 走进摹客 > 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?

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

Doris
2017-06-20
101416

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

我们来看看详细步骤:

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

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

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

第二步:移动矩形

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

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

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

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

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

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

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

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

专属激活码:Mockplus2019

激活数量:限量150个。

有效期:2019年1月31日。

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

上一篇
10条必知的网页导航菜单设计原则

summer   06/22

如何让你的搜索框设计“一鸣惊人”

summer   06/20

下一篇
需要帮助?

摹客产品顾问为你服务

帮助群:651432826

服务邮箱:service@jongde.com