7个UI动效案例-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

7个UI动效案例

0.0°

2019-10-31 自译外文 经验/观点 原作者： Pablo Stanley 举报 1450 12 15 0

像素有毒关注

当UI动效被使用正确时，可以为品牌带来更好的体验，并影响用户的行为，加深用户对产品的喜爱。

如果你喜欢或不喜欢一个产品的某一方面，你通常就会对这个产品产生积极或消极的倾向。通过适当细化UI动效的细节，可以让用户对你的产品产生积极的倾向。

UI动效在设计上原则上我们可以遵循迪士尼动画的12条原则，里面的一些理论知识可以帮助我们提升整体的体验。

迪士尼动画的12条原则是经典的指导性原则，是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点，这些原则最初是用来为动画片这种传统的形式设计的，但里面的内容同样适用于UI动效。

让我们一起来看一下案例吧。

切换

左侧动效为淡入淡出，看起来有些生硬。右侧动效为连续性的过渡。

好的切换，两个内容之间应当是具有过渡性、连续性、延迟性的。

缩放

左侧动效为弹出一个新的内容页面，左侧动效为主图展开并填充屏幕

好的缩放应该是两者内容之间建立一个联系。

在不同状态之间设置动画时，如果两者之间存在联系，那么我们就应该考虑两个内容之间的联系，而不要孤立他们，生硬的从一个页面切换到另一个页面。

列表展开

左侧动效为淡入淡出的出现方式，右侧动效和左边相同，但是在左边的基础上加了一个延迟的效果使其更加接近真实物理。

好的的列表展开应该是具有延迟性的。

Google建议每个元素的开头间隔不要超过20ms。查看Material Motion中的编排原理我们可以看到更多的案例展示。

内容展开

左侧动效为弹出一个弹窗，右侧动效为内容卡片在同一个空间变大，并将其他内容推出。

好的的内容展开应该是自然而有联系的，当它改变时因为整个画面是一个整体，所以应该是会影响其周围环境的元素。

弹窗

左侧动效为直接飞出,右侧动效为缓出的效果

好的弹窗动效应该是符合运动规律。

按钮状态

左侧动效为按钮显示指示状态的文本，右侧动效按钮在左侧的基础上，增加了进度状态的显示。

我们可以考虑在按钮的状态切换中，加入进度的显示，但这要根据具体的情况而定，比如上传文件、下载文件、提交审核等情景。

提醒

左侧的示例使用颜色和位置使元素脱颖而出，右侧的在左侧的基础上，增加了一个微妙的动画来引起用户的注意。

的设计我们可以使用颜色、大小和位置来引起用户的注意。好的动效可以使好的设计更出彩。

据说点赞的今年都暴富了

更新：2019-10-31

12人已收藏

像素有毒

9

作品
169

粉丝
0

关注

猜你喜欢

2019-10-31 自译外文 经验/观点 原作者： Pablo Stanley 举报 1450 12 15 0

7个UI动效案例

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2019年10月31日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得