打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

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


我们来看看详细步骤:


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


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


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



第二步:移动矩形


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



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


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



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


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



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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
AS入门教程第7课影片剪辑第8节-AS实现补间动画
<你那里下雪了吗?>教学片
《Axure原型设计基础》项目5 页面搭建及跳转
Axure教程
在illustrator中快速制作反光效果 | ps真功夫
Illustrator—Ai技术提升—— 3D效果网页按钮
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服