Adobe XD的鼠标悬停功能使用教程

鼠标悬停是 Adobe XD v24.0 版本新增的功能,可实现鼠标经过切换状态比如下拉菜单,需要配合“组件状态”使用,“组件状态”和“悬停”的出现使 Adobe XD 拥有无限可能。本文以一个简单的鼠标经过案例介绍“鼠标悬停”的使用方法。

640.gif

首先如图所示,我给一个包含文章图片、标题、时间的组件添加了两个状态,一个是默认状态,一个是鼠标悬停(鼠标经过)的状态。不知道组件状态如何添加的可以参考:https://xd.94xy.com/zuixindongtai/395.html

image.png

接下来我们添加交互,切换到原型模型,选中组件之后,可以选择状态,选择状态如“默认状态”后单击“交互”设置项右侧的“+”号按钮可以添加交互。

image.png

添加1个交互之后,“触发”选择“悬停”,“操作”可以选择“自动制作动画”、“目标”选择1个状态我这里是“鼠标经过”,“缓动”选择“无”动画更加平滑,“持续时间”这里设置“0.3秒”。

image.png

点击 XD 右上角的桌面预览按钮,鼠标经过组件即可看到效果。

下面是 Twitter 上一些大神的鼠标悬停案例:

QQ20191108-120105-HD.gif

作者:punit chawla

QQ20191108-120001-HD.gif

作者:BSATTAS

QQ20191108-120632-HD.gif

作者:Howard Pinsky

1.本站所有素材均可免费下载
2.本站所有素材仅限个人学习研究使用,请勿商业使用
3.本站所有素材版权均归上传者所有,如需商业使用请先与版权所有人联系
4.如果你觉得本站不错记得收藏及分享
UI图设计网 » Adobe XD的鼠标悬停功能使用教程

发表评论

提供最优质的素材集合

立即查看 了解详情