最美UI

移动UI设计中动画的主要用途

随着技术的快速发展,动画不再是视觉奢侈品,更多的是用户期望的功能需求。 动画解决了界面中的许多功能问题,使界面感觉到真实,并且真正响应用户。

今天我们就来聊聊如何提高移动界面动画的功能和情感力量。

1. 系统状态

在你的应用程序中总是会有许多进程发生在后台,例如从服务器下载数据,计算正在进行中。 这样的过程总是需要一些时间。 您应该让用户知道应用程序未被冻结,并指示正在处理的状态。 好的视觉元素会使用户对应用程序有控制感。

装载指标

大多数数字产品加载时间是不可避免的。 虽然动画不能解决问题,但肯定会减少枯燥的等待问题。

“当我们不能缩短生产线时,我们当然可以让等待更加愉快。”

创意视觉元素可以减少用户对时间的看法。 好的动画会影响用户对您的产品的看法,使其看起来比实际更好。

下拉

该组中一个著名的动画就是“下拉刷新”,它向用户展示了移动设备上的内容更新过程。

 

提示:拉动刷新动画应与应用程序的设计大纲相匹配 - 如果应用程序最小,动画应该也是如此。

通知

因为运动自然地引起了人们的注意,动画通知是一种愉快的方式来通知用户一些事情,而且不会给用户造成太大的干扰。

2. 导航和转换

动画最基本的使用是转换。 这种类型的动画背后的逻辑是帮助用户了解页面布局刚刚发生的变化,触发更改的内容以及稍后再次启动更改。 一个典型的例子是切换隐藏内容的汉堡包按钮

虽然汉堡包动画可能是这里最值得期待的选择,但还有很多其他方式可以补充导航。

导航环境之间的运输

设计人员使用动画来平滑地在导航条件下传输用户,并解释屏幕上元素排列的变化。

元素之间的视觉层次和连接

动画非常适合描述界面的对象,并说明它们之间的相互作用。

功能变化

在某些情况下,设计师被迫设计一个在某些条件下其功能发生变化的动作按钮。 我们经常在整体空间有限的移动设计中看到这一点。

这种类型的动画显示用户与用户交互时元素如何更改。 在下面的例子中,当用户按浮动动作按钮时,加号转换成铅笔。 这表明铅笔是主要的创作方法。 这么小的细节意味着不得不猜测接下来会发生什么,并知道这两个状态中的图标是什么意思。

 

3. 视觉反馈

视觉反馈对于任何用户界面至关重要。 它使用户感觉到控制,对于用户来说,控制意味着在任何给定的时间在系统中了解和理解他们当前的上下文。

承认

按钮和控件这样的用户界面元素应该是有形的,即使它们位于一层玻璃后面。

“在物理世界中,按钮、控件和其他对象响应我们与它们的交互。人们期望用户界面控件具有类似的响应能力。”

为了弥补这一差距,视觉和运动提示立即承认输入和动画的方式,看起来像感觉直接操纵。

可视化动作的结果

动画可以增强每个交互点,并加强用户正在执行的动作。

在下面的条形图示例中,当用户单击“支付”时,在应用程序显示成功状态之前,会出现一个微调器。复选标记动画让用户觉得他们容易并支付,用户欣赏这样的重要细节。

4. 结论

动画是强大的。 它增加了任何设计的生命力,使用户参与到最常规的工作中,当然可以使您从人群中脱颖而出。 精心设计的动画使用户能感受到精良制作。

文章来源: 大著子

原文链接: 微信公众号

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
设计赋能——阿里十年老司机的经验分享
下一篇
Android O 自适应图标的设计