当动作创造情感

原作者：Nick Babich, UX Planet 主编 (https://uxplanet.org). http://babich.biz 

翻译：cc  审校：胡子

一般设计师们认为动效可以改善用户体验，但是总的来说不能增加多少价值。

所以经常到了设计过程的结尾才会加上动效，作为点睛之笔。

但是如果我们重新思考动画的实现方式，并将其作为我们设计的基础呢？在这篇文章里，我将讨论何时以及如何使用动效来创造情感。

旁注：为了本文的主旨，我将避免使用“delight”这个词来描述动画。之所以“deligt”一词在情感背景下并不不正确，是因为相同的动效可以取悦一组用户群，同时却惹恼另一组用户。

01 用动效讲故事

每个体验都是一个故事。无论你在做哪种应用或网站，总有一些特殊的信息是你想传达给你的用户或观众的。设计师的目标就是用最高效、最有效的方式传播故事。

    “ 每个设计师都是一个说故事的人”

你可以遵循很多不同的方法来描述你的故事，但是其中一些方法比其他的更有效。

“一图画胜过千言万语”，我们都熟悉这句老话。通过在画面中引入动画来强化效果是可行的。

动作除了能帮助设计师更有效地传递信息，它更使得整个故事更引人入胜。当设计师在设计中运用这一法则，他们能创造出让人真正难忘的体验。

01－1  用动画描述复杂的概念

当设计师需要传递一个十分复杂的信息给他们的用户或者观众时，使用动画将非常将。使用动画的想法非常简单：

    “展示，而非叙述”（原文“Show, don’t tell”）

 

让我们在一个特殊案例中看看“展示，而非叙述”这一概念是怎样发挥作用的——一个强调回利用收重要性的网站。设计师使用动画来展示人们究竟应该怎样去做，而不是仅仅告诉来访者正确处理垃圾的重要性。

图片来源：Leo Natsume

01-2动态叙述

叙述是贯穿用户体验的相关事件的线性过程。设计师可用来创造一个数字化叙事最简单的方法之一，就是使用视差效果。UI设计中的视差效果，会在用户向下滚动页面或者跨页面滚动时创造出3D的滚动效果。

视差效果有一个明显的功能性目的：它支撑视觉的连续性——在体验中帮助用户了解他们当前所在的位置。

利用视差效果创造视觉连续性。

图片来源: Zak Steele-Eklund

02 重新思考基本的移动交互

采用基本的日常交互并使它们变的新奇且出乎预料是有可能的。

动效对于移动app特别有用——它们使用户忘记他们仅仅是在一片玻璃上敲击，并且转而让用户感觉他们是在与屏幕上的真实元素互动。

02-1 难忘的首次登陆体验

动画能帮助用户看到他们操作的效果。当用户首次体验并逐渐熟悉应用程序时，这个属性特别好。制造良好的第一印象尤为重要。

看下面的例子。你会看到动效如何引导用户进入下一场景——页面转化到沟通层级。

图片来源：Jakub Antalik

Readme .io app 是关于动画如何使首次登录受益的另一个很好的例子。App在登陆过程中使用了猫头鹰吉祥物。当用户在密码栏输入时，猫头鹰会掩住自己的眼睛。当你第一次看到它时，这个动画非常有趣。

当你输入密码时，猫头鹰会遮住她的眼睛

02-2 平滑的导航过渡

动画能用来引导用户到他们关心的事情上。下例中的动效帮助人们在界面中定位自己，并在不同对象间建立视觉关系。

动画过渡的力量

图片来源: Eddie Lobanvskiy

02-3 有趣的滚动效果

动画可以考虑对象的物理属性。下面案例中的滑动效果通过考虑液体的行为方式来强化了物理感受。

图片来源: Sergey Valiukh

02-4 用数据增强交互

当设计师使用交互动效时，甚至连常规概念如数据可视化也会变得新奇且出乎意料。

图片来源：Ramotion

02-5 留下反馈更为自然

动画能很好地提供反馈——让用户知道正在发生什么或者发生了什么。通过在设计中插入微妙的动态效果，你可以让用户觉得他们在跟有个性的东西进行交互。

图片来源: Daryi Ginn

总结

当人们与电子产品交互时，相对于纯粹的理性产品，他们更欣赏人性化产品的价值。设计师要对静态用户界面说再见，并且创造更加生动的界面。

原文标题：When Motion Creates Emotion

原文链接：https://uxplanet.org/when-motion-creates-emotion-ad29befeb1b3

原文引自：https://uxplanet.org/

原作者：  Nick Babich（https://uxplanet.org/@101）

翻译：cc 

审校：胡子

转载说明：

 转载本译文，需在文章标题下保留：

 (1) UXTalk译制，原作者及原作所属平台信息，译者及审校人信息

 (2) 转载文章底部必须保留本译文原链接，原文（即英文版本）链接，

 (3) 转载文章底部必须贴上UXTalk公众号二维码。

如未遵照上述规则转载，视为侵权，译者保留随时追责的权利。

更多类似文章，请关注公众号，交互设计漫谈,微信号： gh_b17b58b25119