许多移动应用程序都使用了动画效果。设计良好的动画和动作可以提高可用性,并使与产品的交互更吸引人,更令人愉快。
在这篇文章中,我想分享一些UI设计师应该优化动画来提高用户体验的地方。
文末有福利哦~
导航
精心设计的动画效果使用户更容易与你的应用程序进行交互。
标签栏中的动画图标
标签栏中的动画图标有两个用途——它们传达当前位置,并通过提供可爱的视觉反馈来确认用户的选择。
汉堡菜单
动画汉堡图标增强了直接操作的感觉,并使用户更容易过渡到新状态(带有顶级导航选项的屏幕)。
状态转换
动画既可以用于小的UI元素,也可以用于大的UI元素。例如,可以使用微动画的元素,如切换和调用动作按钮。
但是动画也可以填补预览和内容块的详细状态之间的空白。在这种情况下,动画为中间的角色服务,使视觉过渡更加自然。
![](https://img.haomeiwen.com/i18778991/1edb1b12f6c7c584.gif)
数据输入
输入错误
弹跳动画通常用于通知用户他们的输入是不正确的。它在输入密码时特别有用。
设置密码
我们大多数人在为新服务设置密码时都会遇到麻烦。当密码强度规则没有内联验证时,用户必须点击Submit按钮,在许多情况下,会看到错误消息。动画可以帮助你克服这个问题。对用户输入的动态反馈可以让用户既知情又参与。
当前系统状态
让用户了解当前系统状态是至关重要的。当用户启动了一些操作而没有得到任何反馈时,他们很有可能会生气并关闭应用程序。动画让用户知道到底发生了什么。
对于快速操作(少于10秒),建议使用无限加载器:
对于较长的操作(10秒以上),建议使用动画进度条。
内容更新
下拉刷新动画
下拉刷新动画提供关于用户发起的内容更新操作的即时反馈。它还可以使用户的等待时间更愉快。
教育和指导
动画提示
人类的大脑天生就会运动。移动的物体吸引我们的注意力——我们的眼睛自然地跟踪移动的物体。我们可以在UI设计中适当地使用它——引导用户的注意力,并教用户如何使用系统:
给用户提示在UI中哪些操作是可能的。
突出基本特性和重要控件。
喜好
喜欢/不喜欢
为like按钮精心制作的动画效果鼓励分享、喜欢和评论内容。
情感体验
人类天生追求即时的满足。动画效果可以帮助设计师创造更人性化的体验。例如,用户在邮件应用程序的收件箱零状态中看到的动画效果使用户体验更加愉快。
如何制作好的动画
创造良好的动画,你需要把自己放在用户的位置,试着了解他们使用你应用时候的感受。低估用户使用你的应用程序要完成的任务,为什么他们想要这么做以及他们是如何感觉的,当他们与应用程序交互的时候,这些是创建好的用户体验的关键。
文末福利:后台回复“AE动效教程”获取UI交互动效基础课程+进阶视频课程。
(识别二维码 - 关注LDesign1 - 点击进入公众号 - 点击左下角输入文字“AE动效教程”发送,自动获取。)
网友评论