如何用动画来提高 UX

SolomonXie 发布于2019-08-30 13:22 / 1072人阅读

摘要：利用反馈来突显出了错动画可以加强行动用户预例如，表单条目可以大大提高一些动画。当用户注意到这样的动画他们便会立即了解动作。

动画不是娱乐用户的目标，而是帮助用户了解什么以及如何最有效地使用你的应用程序。我们不再只是设计静态屏幕。我们是从这些用户如何获取屏幕看内容而设计。
动画可以应用在各种各样的尺度和情境中，以统一美观和功能：它可以影响行为，沟通状态，引导用户的注意力，并帮助用户看到他们的行动的结果。这里只举几个例子来说明你可以在你的UI中添加一些动画来改善体验的地方。

1.加载(loading)可以让用户不那么无聊

如果你不能缩短线和动画来来取代恼人的纺纱加载指标（基本上只是提醒用户，他们正在等待），你应该总是试图让等待更愉快。几乎任何网站或应用程序可以利用一个骨架屏幕与微妙的动画加载内容时，以保持用户从事。

Skeleton screens complete the UI incrementally before the content is fully loaded（骨架屏幕在内容完全加载之前逐步完成UI。）

2.设计状态变化不难削减

动画可以用来使转换更加明显，因为可以明了的知道用户开始和结束之间发生了什么。一个精心设计的过渡使用户能够清楚地了解他们的注意力集中的地方。

没有什么比突然的变化更不自然的了，用户也无法理解。
正如你所看到的，动画转换帮助用户理解接口的速度和流程。它也有助于引导用户到下一步的互动。

3、可以解释元素之间的关系

动画可以增强直接操控感。例如，菜单图标可以顺利过渡到一个播放控制，然后再回来。这种效果既通知用户按钮的功能，同时添加一个元素的奇妙的互动。将游戏图标转换为暂停也意味着这两个动作是连接的，而另一个则不能使用。

另一个例子 - 当按下动作键，加号变成一支铅笔。这表明铅笔是主要的创作方法。这样一个小细节意味着必须猜测下一步会发生什么，知道图标在两种状态中意味着什么.

。

4、利用反馈来突显出了错（动画可以加强行动用户预）

例如，表单条目可以大大提高一些动画。如果输入正确的数据，一个简单的“点头”动画可以在完成后被引入。而横向震动可以使用时，拒绝输入。当用户注意到这样的动画他们便会立即了解动作。

5、使用反馈来显示已经完成的（动画可以用来帮助人们可视化的操作结果和行动）

在条纹的下面的例子，当用户点击“支付”，微调简要地出现在应用程序的成功显示状态。复选标记动画让用户觉得他们容易并支付用户欣赏这样的重要细节。

6、总结

动画是强大的使用时，在一个复杂的方式。当动画不恰当时，花时间考虑动画是非常重要的。我们需要从一开始就接受这个运动，并认为它是我们设计的自然组成部分，因为设计不仅仅是视觉表现。正如史蒂夫·乔布斯所说的设计：
“这不仅仅是它的样子和感觉。Design is how it works。”
参考英文文档

云服务器 GPU云服务器如何用云计算如何用css html如何用如何用html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115507.html

您的【用户体验优化方案】到了，请签收~

摘要：暴露年龄了广告词饭后嚼两粒大概，故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。书里破茧成蝶说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。 showImg(https://segmentfault.com...

cheng10 2019-08-29 16:37 评论0 收藏0
您的【用户体验优化方案】到了，请签收~

摘要：暴露年龄了广告词饭后嚼两粒大概，故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。书里破茧成蝶说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。 showImg(https://segmentfault.com...

eternalshallow 2019-08-23 11:45 评论0 收藏0
程序员练级攻略（2018）：前端 UI/UX设计

摘要：前端还有一个很重要的事就是设计。，中文版译名为认知与设计理解设计准则。实验室是布拉德弗罗斯特依照这个设计系统所建立的一套工具，可以前往的来试试。中文翻译为流畅设计体系，是微软于年开发的设计语言。微软于年月日的开发者大会上公开了该设计体系。 showImg(https://segmentfault.com/img/bVbkgFI?w=1142&h=640); 想阅读更多优质文章请猛戳Gi...

dongfangyiyu 2019-08-02 12:09 评论0 收藏0
前端每日实战 2018 年 9 月份项目汇总（共 26 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书过往项目 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（共 29 个项目） 2018 年 6 月份项目汇总（...

lavnFan 2019-08-29 16:54 评论0 收藏0