设计思考：功能性动画如何提升用户体验？.docVIP

设计思考：功能性动画如何提升用户体验？ 　　功能性动画的每一帧都有其目的，注意每一个细节，让动画成为操作过程中一部分。数码产品的用户体验会因为功能性动画的使用而得到提升。 　　 　　人类是视觉动物，我们天生就会注意到移动的物体。在app和网页中，小动画对我们来说像是眼睛的甜点一样，我们不自觉的就会被它们吸引。近来，越来越多的设计师将动画作为一种功能性的元素来提升产品的用户体验。动画不仅仅是装饰性花瓶的存在了，它成为了提升用户体验的一项重要工具。 　　然而，动画只有在被合理的使用情况下才可以真正有效的提升用户体验。现如今好的UI动画都有具备功能性。在这篇文章中，我们将探讨如何将功能性动画（functional animation）完美的融合到交互设计中。 　　什么是功能性动画 　　功能性动画是一种嵌入UI设计中微妙的动画，有着明确、合理的目标。 　　它能减少认知负荷。 　　防止页面转换视盲。 　　在空间上营造更好的印象。 　　我们都秉持着“以人为本”的设计理念。用户的焦点在哪里，哪里就应该直观，反应灵敏和人性化。功能性动画能帮助我们实现这一点。 　　功能性动画在UI设计中所扮演的角色 　　1.为用户操作提供视觉反馈 　　良好的交互设计应该给用户的每一个操作都提供反馈，无论成功与否。反馈会使用户觉得自己与屏幕上的元素进行真实互动。功能性动画可以直观的演示出这种互动。即便隔着屏幕，也能让用户看起来是在直接操作。 　　 　　而作为系统，当你需要向用户通知操作的结果时，功能性动画也是一个很不错的选择。当操作没有成功的时候，功能性动画可以给用户一个快速而有简洁的一个反馈。例如，当我们输入密码错误的时候，我们采用来回晃动的效果。这个效果会让我们联想到日常生活中的摆手和摇头，而这些都代表着“no”。这些小细节的使用，是打造良好用户体验的关键。 　　 　　目的： 　　确认系统接收到用户的操作； 　　确认（或拒绝）用户的行为。 　　2.当前状态的指示器 　　给系统当前所处状态提供一个视觉指引是交互设计中最重要的一点。我们应该让用户随时随地知道系统当前所处的状态，而不是让用户去猜。 　　数据的上传与下载就是一个很好的例子。例如，加载动画会告诉用户系统正在下载数据，而且还显示了下载进程与速度，用户也对完成时间有了一个大致的期望。 　　 　　当系统状态发生重要的变化时，功能性动画也可以用来提醒用户。例如，来电提示。 　　 　　或者，新短信提示。 　　 　　目的：提供实时通知系统状态，并让用户了解正在发生什么。 　　3.提示 　　当用户第一次使用你的app的时候，如果没有帮助的话，他们可能会不知道如何操作。 　　我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。功能性的动画可以提示用户去注意那些可以完成的操作。视觉提示可以给用户告知即将发生的事情。例如，iOS7中相机的这个拍摄动画。 　　 　　当一些操作用户不是很容易发现时，功能性动画可以演示出操作步骤。 　　 　　目的： 　　通过给用户一些线索来创造期望； 　　帮助用户更好的关注界面； 　　告诉用户如何能够和应该与界面上的元素进行交互。 　　4.导航栏的过渡 　　导航栏的的转换是指app中导航菜单状态的变换。有不同级菜单之间和同级菜单之间的转换。我们要尽可能的减少那些令人意想不到的过渡效果。功能性动画可以解释菜单之间的层级关系，用户明白菜单转换的过程中到底发生了什么。 　　同级转换发生在同一层级间元素的转换。 　　 　　功能性动画可以聚焦用户的视觉焦点于转换的元素上，用户了解整个转换过程中新的元素来自那里，旧的元素在哪里隐藏。它提供了视觉线索，增加了交互的可用性。 　　目的： 　　阐明界面和元素之间的空间关系； 　　通过帮助用户理解页面中发生的变化，避免了令人意想不到的过渡。 　　5.营造品牌效应 　　市场上有很多同类型的app，他们有着相同的功能，可能都有着不错的用户体验。但是那些脱颖而出的app肯定在用户体验上走得更远—建立与用户之间的感情联系。 　　功能性动画可以成为一个产品的营销工具，用来表现一家公司的品牌价值或者突出产品的优势。同时给用户一种愉快又难忘的用户体验。比如Lo-Flo Records网站中，这个动画会鼓励用户进行操作，每一帧都精美的图案会让他们期待接下来会看到什么。 　　 　　用户比我们预想中更能注意到页面中的细节，动画作为一种交互元素可以向用户传递一种情感。一个风格活泼可爱的下拉加载动画可以给用户带来一个愉快的用户体验。 　　 　　目的： 　　娱乐用户，在用户之间产生情感共鸣； 　　创建产品特征；增加品牌意识。 　　如何达到平衡 　　页面中每一个动画都应该具有相应的功能，作为一个”花瓶”用来充当美化页面的动画不仅无法提升用户体验，而且动画会降低页面的加载速度。比如下方的