01
写在前面
我们努力为我们的用户创造尽可能好的体验。但设计师往往忘记了Motion Design，而它可以成为实现这一目标的有力工具。让我们看看如何正确应用它。
无论你的数字产品的目的是什么。一个好的、令人愉快的用户体验是说服你的用户并使他们长期使用你的产品的关键。在用户界面设计中，有一个工具经常被不经意地使用，而且只用于装饰目的，那就是Animotion。许多人忽视了这样一个事实——即深思熟虑和正确使用的Motion Design可以大大改善产品的用户体验。
在这篇文章中，你将学会理解界面在引导用户达到目标方面的作用，以及Motion Design如何帮助你的用户更容易、更快达到这些目标。 通过实例，你将看到其他产品是如何利用这些优势的，以及在你的产品中使用Animotion时需要考虑的问题。
02
基本要素
好的用户体验的基本要素：了解你的用户的目标，并使其尽可能方便地实现这些目标。
用户总是通过操作界面来解决一项任务，从而达到他们的最终目标。在这个意义上，界面只是一种工具。就像一把螺丝刀，你用它把螺丝钉拧到墙上，这样你就可以在上面挂画了。
如果螺丝刀完全适合，就可以毫无问题地拧紧螺丝。你不需要考虑螺丝刀或螺丝，可以快速而轻松地完成任务，实现你的目标：挂画。
但是，如果螺丝刀不能正确地与螺丝配合，你的手就会不断地滑倒。你必须集中精力以某种方式握住螺丝刀，更小心翼翼地来转动螺丝。你失去了对实际任务的关注，因为你必须注意你拧螺丝的正确操作。最后，如果运气好的话，画可以挂在墙上，但花的时间比计划的要长得多，你的神经也受到了打击。最坏的情况是螺丝断了，你没有达到你的目标。在这两种情况下，有一件事是肯定的：你不会在短时间内重复这项任务。
这个比喻说明了用户与界面之间的关系，以及当界面不能适当地支持用户解决问题时，会多么令人沮丧。如果它能直观良好地工作，用户不需要考虑如何使用它，最好的情况是，用户甚至忘记了在他和手头的任务之间还有一个界面，这样的设计才是最有效的。
在你的日常生活中，你很可能在某个时候成为不良用户体验的受害者。 这篇文章将提醒你其中的一些痛苦时刻。
但这一切与Motion Design有什么关系呢？
03
Motion Design
这里有5项你可以用Motion Design解决的问题，让你的用户的生活更容易。
你现在知道用户的目标有多重要，以及界面在你的产品中扮演什么角色了。下面是一些现实世界的挑战，以及Animotion如何帮助你克服它们。
这5点基于Don Norman在他的 《日常事物的设计》 一书中的设计原则，Jacob Nielsen的 “ 用户界面设计的10个可用性启发法”，以及 “以用户为中心的设计 ”的创始人Lucy Lockwood和Larry Constantine的 “ 用户界面设计的原则”。
注意：尽管这里涵盖了最重要的例子，但它们肯定不是所有的。一个好的做法是，在某种情况下，总是质疑Animotion的最终目的，并评估它是否能以任何方式帮助用户实现他们的目标。
1. 提供导向
一个数字产品的开发最好是从粗略到详细完成这样的一个过程。我说“理想的”是因为在现实中，设计并不是一个线性的过程，而往往像Ryan Ford准确命名的奥德赛那样。然而，在理想的情况下，你首先要尝试对产品的所有领域有一个概念，对它们进行结构化设计，然后迭代出最终的界面。这个过程可以确保你对你的产品了如指掌，并能说出每个界面在整个层次结构中的确切位置。
相比之下，你的用户第一次看到界面，却不知道整个结构和背后的所有推理。实际上他们在一个新的环境中迷失了方向，需要学习。因此，用户界面必须是“ 可学习的”，并以一种直观的方式引导他们浏览产品，使他们能够迅速、独立地找到自己的方式。
除了作为基本导航服务的菜单或网站地图之外，Motion Design可以帮助显示各个界面之间的联系。例如，通过一个动画过渡，可以解释两个界面之间的联系。也可以通过这种方式来阐明各个部分的依赖关系和结构。
案例：细节设置的缩放过渡
显示细节设置的缩放过渡
Qixxit平台在考虑到所有可用的交通工具的情况下，确定最佳的旅行路线。在搜索连接时，界面反映了旅程的真实过程（基于自然映射的概念）。顶部是起点，底部是目的地，在中间的路径上是选择所需的交通工具。
为此，用户可以通过选择所需的交通工具来过滤他们想去的方式。
过滤器 是一个可选的功能，因此从属于实际的连接搜索。当点选过滤器功能时，界面会放大到过滤器的详细视图。这个过渡清楚地表明，你刚刚进入了一个更详细的搜索视图，在这里你可以为更高层次的连接搜索设置具体细节。此外，这个过渡让用户清楚地知道，一旦他们设置了自己的偏好，会发生什么——它们会放大到原来的视图。所以在这种情况下，Animotion对层次结构提供了一个无字的解释，并帮助用户在界面的不同状态下确定自己的方向。
2. 给予反馈并显示系统状态
在实践中，这是一个非常简单但有效的原则——我们在日常生活中无意识地体验到：每一个行动之后都会有一个反应。反应会改变你所操作的系统的状态。你反过来解释每个变化，并决定下一个行动可能是必要的，以接近你的目标（这个领域中一个基本的、被广泛讨论的概念是所谓的 评估海湾和执行海湾）。
例如，如果你按下鼠标的按钮，你会立即收到按钮移动的触觉反馈和你听到的“点击声”的声音反馈。这两个信号都证实了你真的按下了按钮。系统会对这个动作做出反应，例如，打开你所点击的程序。然而，如果系统没有立即做出反应，因为程序需要一些时间来加载，你可能会怀疑系统已经冻结。毫无疑问，你的鼠标或键盘没有工作，因为两者都给了你即时和清晰的反馈。但是，如果系统在你点击后直接向你显示反应，例如一个加载条，你就会知道发生了状态变化，你只需要等待一小段时间。
因此，尽可能即时的反馈对于让用户理解一个行动已经被识别和处理是至关重要的。( 如果你想了解更多关于反馈的重要性和系统状态的可见性，我推荐你阅读这篇文章）。
当涉及到鼠标和键盘等物理设备时，可能工作得很好，但在使用触摸屏时，可能会出现困难。对于触摸屏设备，没有触觉或声音的反馈，系统自己就会发生，它们必须被专门设计。在这一点上，Motion Design是确保用户得到他们需要的反馈的一个好方法。
案例：可触摸的标签
显示可触摸的标签
一个很好的例子，在许多产品中都可以找到类似的形式，那就是可以在点击时激活或停用的互动标签。这些标签也在maineaqila应用程序中使用，用户可以选择他们想在他们的资料中看到哪种内容，也有一些内容将永远显示在资料中，因此不能取消选择。
如果标签是可选择或不可选择的，它们在点击过程中会短暂变暗，以向用户表明该动作已被发现。随后，被选中的标签会改变其状态，并通过改变填充颜色以及图标来表明这一状态变化。
如果用户激活了一个不能取消选择的标签，系统立即用锁定图标表示，他们会看到一个让人联想到摇晃挂锁的动作。该界面显示用户的动作已被识别，但同时也提供了状态没有改变的反馈。
3. 指向正确的方向
在用户旅程的某些点上，可以预见用户接下来可能会想做什么。在Animotion的帮助下，界面可以在他们还没有考虑下一步的时候就为他们指明方向。
这个例子涉及到了预期设计的概念，这是用户体验中一个非常有趣和有争议的部分， 如果你有兴趣深入到这个领域，这里是一个很好的起点。
案例：商店里的购买过程
显示一个用动画引导用户的商店详情页
让我们再以app “mainaqila”为例，这次是商店，我们在某件衬衫的商品详情页上。用户的实际目标不是选择合适的衬衫尺寸，而是尽快购买合适尺寸的衬衫，这样他们就可以穿上它。
为了实现这个目标，系统首先需要一些信息，比如正确的衣服尺寸。因此，界面的设计是这样的：在交互之后，通过使用位置良好的Animotion，用户的眼睛会被立即引导到与完成购买有关的下一个地方。
一旦用户选择了所需的衣服尺寸，“添加到购物车”按钮就会从右边滑入界面，并在所选衣服尺寸旁边定位。这个动作将用户的视线引向这个下一个逻辑步骤：将商品加入购物车。如果用户按下这个按钮，产品就被象征性地包装成所选尺寸，然后被推入购物车。一方面，这种行为确认了产品被成功地放入购物车，同时也显示了要在哪里按才能完成购买过程。
4. 展示某些东西是如何工作的
就像上面所描述的第2点：给予反馈并显示系统状态，这一点起源于Don Norman的设计原则，并表明了用户界面中的Motion Design如何能够作为一个所谓的“信号器”。这意味着，每个元素都应该向用户发出信号，告诉他们应该如何操作它，以及用户在操作它时可能期待的功能。这就避免了不必要的尝试和错误，需要更少的思考，并使用户有更愉快的体验。
案例：带有自我解释“标志物”的锚点导航
显示自我解释的动画锚点导航
它们几乎和互联网一样古老，而且仍然存在。锚链接和它们在一个长网站的各部分之间的导航的用途，这一原则也被用于PropRate的“了解房地产”部分的文章详细页面。
在文章的上部，一个章节概览让用户对文章的内容有一个概览，并通过锚链接直接跳到感兴趣的章节。一旦用户进一步向下滚动到文章的开头，屏幕底部就会出现一个粘性导航条，这有助于在各个章节之间进行导航并跟踪阅读进度。
用户目前正在阅读的章节由相应圆圈的浅蓝色状态表示。如果用户从一个章节转到下一个章节，活跃的圆圈就会在快速转换中相应改变其状态。这种简单的状态变化表明，圆圈中的数字代表了文章的章节，并预示着点击其中一个圆圈就可能切换到相应的章节。
此外，当把鼠标悬停在一个圆圈上时，相应章节的标题就会在圆圈上方以工具提示的形式弹出。一方面，这个额外的提示向用户展示了相应章节的标题，而不需要记住它；另一方面，它作为一个额外的信号显示，这些圆圈可能是互动的。结合起来，底栏中符号的行为表明它们的功能，而不需要明确解释。 这些措施有助于解决人们在使用锚链接时可能遇到的问题，而不会提高其可用性。
5. 建立一种情感联系
尽管“不经意”和“装饰性”是我在本文开始时使用的词汇。 界面的美学可以对用户体验产生积极的影响，不应该被低估。
如果用户在使用产品时感到舒适，并产生了建立联系的情感，无论是通过有趣的、感人的，还是令人惊讶的时刻，再次使用该产品的可能性会大大增加。
这些时刻可以是非常微妙的细节，发生在整个产品中，也可以非常大胆地作为界面的主要组成部分发生，例如：讲述一个小故事，打破僵局，唤起人们的同情心。如果没有这样的时刻，你可能会有一个高效和易于使用的产品，但它很容易被认为是无聊和遥远的。这可能导致用户不再回来，即使你的产品做得很好，只是因为缺乏情感联系。
出于这个原因，艺术化的Motion Design不应该被低估，尤其是在正确的地方使用时。
案例：微互动
显示当从你的收藏夹列表中删除产品时的心碎
吸引人的Motion Design可以在很短的时间内讲述微小的故事。关注细节，是给用户带来惊喜的好方法。小动画创造一个小小的但令人惊讶的喜悦时刻，可能会引起人们的微笑。此外，这样的微妙之处显示了对细节的关注，这可以增加对你产品的感知质量。
案例：404错误页
显示一个说明性的404错误页面
不幸的是，在某些情况下，错误是不可避免的，所以重要的是以一种帮助你的用户迅速克服愤怒的方式来沟通它们。一个漂亮的动画插图是理想的选择，可以确保对错误的恼怒迅速消失。尽管有这个问题，用户还是留下了积极的感觉，而且有可能这种通常不好的经历被保留在积极的记忆中。
04
结论：少即是多
正如这些案例所显示的，数字产品中的Motion Design的成功取决于在正确的情况下找到正确的措施。此外，实施的质量也起着重要的作用。如果你做得过了头，或者使Motion Design看起来不专业，你可能会错过预期的好处。
然而，如果你确保Animotion不会占用用户的时间，不会分散他们的注意力，而且最重要的是提高用户体验，它们是优化你的产品的绝佳方式。
如果这篇文章激起了你对这个话题的兴趣，并且你想更深入地了解它，我推荐你阅读弗兰克·托马斯和奥利·约翰斯顿从 《生命的幻觉》 一书中提出的“ 运动设计的12项原则”。不是所有的都对UX/UI设计有用，但这些知识会帮助你找到正确的剂量。
如果你想为你的界面开发Animotion，我还建议你看一下Airbnb的Lottie以获得对技术方面的必要了解。Lottie Animotion已经成为数字产品开发中首选的Animotion制作方法。
ABOUT US
作者：Martin Maczurek，德国Cheil公司的用户体验负责人
译者：蒜蓉粉丝金针菇
为尊重版权和译者转载请联系我们