在UX中，如果与克制一起使用，Motion和Animation可能会有所帮助和交流。运动最常被适合作为一种形式微妙的feedbackformicrointeractions那rather than to induce delight or entertain users. In this article, we explore the purposes of useful, unobtrusive feedback animation. In a second (forthcoming) article, we will discuss the details in timing and movement to make these animations appear smooth and natural.
UI运动的大优势（以及缺点）是它attracts user attention。我们的外周视觉（具体地，通过人视网膜中的杆状光感受器）负责检测运动。进化地，我们可以检测到我们视野之外的运动的事实当然是一个优势：我们可以辨别危险并保护自己。但这意味着我们是敏感和容易的分心通过任何类型的运动（有意义的或没有）。这就是为什么在用户界面中的运动很容易变得烦人：很难停止参加它，如果与手头无关，它可以显着降低用户体验（作为遇到移动的任何网络用户广告can attest).
Although animationscan有用，可以建立用户期望s about the UI, they should be used with a light touch — primarily as a tool for providing users with easily noticeable, smooth feedback.
Purpose of UI Animations
当动画以微妙的方式使用时，它可以帮助用户构建关于系统如何运作的心理模型以及它们如何与之交互。当在过渡时刻时，动画对用户体验不太关键（实际上，这是这些停机时间，这些动画通常会使参与者挫败可用性测试）。而不是使用动画提供表面级快乐(that quickly sours), animations can be leveraged for usability: as clues about what is currently happening with the system, as signifiers for how UI elements will behave, and as easily understandable spatial metaphors for the user’s location in the information space.
动议反馈
Animations are often helpful as a form of noticeable feedback that an action has been recognized by the system. A ubiquitous example is the animation of a navigation menu sliding over the page when a汉堡包icon is tapped. Because our visual systems are so attuned to motion, a short animation can ensure that users see the feedback.
有时，由于c，静态视觉反馈被忽略hange失明。For example, people may not notice the shopping-cart–badge update after clicking the添加到购物车在下面的uininart示例中的按钮。动画增加了注意到反馈的可能性。（另一种替代方案是使静态反馈更加突出 - 例如，通过对话框或使用更大的徽章。两个解决方案可能比简单的动画更具侵入性。）
和动画也可以用作反馈的形式beforethe user commits to an action, such as previewing the new location of an item when using drag-and-drop to reorder a list.
Motion to Communicate State Change
Motion can be used to indicate that the interface switched to a different state — for example, because of a mode change.Modes通常是对用户沟通的难度概念，但动画可以通过两种方式提供帮助：（1）通过使模式变化显着;（2）通过提供模式转换的概念隐喻。例如，在单击后，将铅笔图标变为磁盘，从而发出转换编辑到Save模式比立即交换一个图标更清晰。
Material Design: A pencil icon that transforms into a + icon helps to communicate the difference between the编辑mode and theAdd newmode.
In addition to showing a transition between modes or views of data, animations are also helpful for communicating state changes that are not triggered by users’ actions. For example, loading indicators show that the system is not yet ready to accept input. One form of this is a “skeleton screen” (a placeholder UI that looks like a wireframe of the loading page, with no content) that is animated by a light glare moving across it.
Hipmunk：在加载飞行搜索结果时，HipMunk提供了几个动画线索。首先，有一个假装飞翔的动画花栗鼠。（虽然可爱，花栗鼠对反馈不是必不可少的，但有助于建立brand tone.) However, at the same time, other, more-communicative animations occur: the number of flight results climbs steadily from 0 to 754, indicating that the system is performing multiple federated searches concurrently. Also, a placeholder shows where content will appear as flight results load. Aprogress bar那along with two animated ellipses, indicates that results are still loading. Finally, as new results are loaded and the relevance order changes, a subtle animation shows new results appearing within the list and is meant to communicate that the order of the search results is changing dynamically. However, the number of simultaneous animations is overwhelming: the power of any of these animations to pull the user’s attention is diminished by competition from all the others.
Motion for Spatial Metaphors and Navigation
The structure of a complex information space is often challenging to communicate to users without taxing their cognitive resources or taking up too much screen space. Scanning through navigation menus, tree diagrams, or even面包屑到figure out where one is in the information hierarchy is a complex type of cognitive work. While animation alone is not a suitable substitute for visible navigation with clear, unbranded labels, it can signal to users the direction in which they are moving within a process or hierarchy; this补充c可以通过复杂的IA进行导航更直观和可理解的。
缩放动画可以帮助用户了解他们的旅程方向进入分层信息空间，而不看树图。缩小缩小显示更少的细节，但更多的对象，从而提示用户向层次进行行进，而缩放显示更多细节，但对象较少，从而创建更深入到层次结构的印象。
iOS Photos uses a zoom metaphor to show the user’s location in the information space (in this case, represented by my endless library of photos of my dog, Daphne). Going betweenYears, Months那and天has a subtle zoom-in or zoom-out animation that helps users understand whether they are going up or down in the hierarchy of photos. This approach helps keep the user’s attention on content (cute dog photos), and not on the navigation铬合金。
同样,略过动画有助于建立h that a user is moving forward or backward within a process such as checkout.
Amtrak显示一个微妙的幻灯片上的动画，以指示用户正在通过预订火车的过程前进。
Animations can also prevent disorientation and telling people if they are on the same page or have moved on — particularly on mobile, where context can be lost due to the small screen size.Accordions那锚点链接那and menu overlays can be disorienting or confusing if the change appears instantaneously; since a menu overlay fills the entire screen, the relationship between the overlay and the underlying page (e.g., “is this content a new page, or is it something else?”) is hard to understand without an animated cue. (Why does it matter if users know where they are? If they think they are on a new page, they are often tempted to use theBack按钮导航到上一个视图;不幸的是，在叠加或手风琴的情况下，该动作将把它们远离页面而不是简单地关闭元素。）
WebMD: When opening an accordion on the page, the associated content immediately shows up at the top of the screen (with no animation). The user may think that the new content is on a brand new page. A scrolling animation (showing how the page is moved so that the accordion is at the top of the screen), followed by a moving expansion could help the user to understand that this is not a completely new page, but an accordion within the page’s content.
MetMuseum:Anchor links通常对用户令人困惑或迷失方向，但在这种情况下，锚链接使用平滑的滚动动画来显示（1）内容全部包含在单个页面上，（2）在该页面上的内容。
Motion as a Signifier
Animations help users understand how to interact with UI elements. The direction (or other attributes) of the motion signifies the type of acceptable actions. For example, a卡从屏幕的底部向用户展开顶部信号，可以通过拉下来关闭。来自屏幕右侧的新卡信号通过将其刷到右侧可以关闭它。
Car2Go for iPhone：短的弹跳动画是一个有条件的动画swipingacross the list item reveals options.
Attention Grabbing and Attention Hijacking
Because the human visual system is very sensitive to motion (particularly, to motion that appears to have狂热), animation can be used to grab users’ attention, for better or worse. On the one hand, it can make a subtle signifier obvious, but on the other hand, gratuitous animations distract and annoy the user. Further, using animation to hijack the users’ attention or create afear of lossis adark pattern: an unethical application of user-experience principles and cognitive psychology to get users to do something they ordinarily wouldn’t.
Benign: Refinery29 embeds a poll in the middle of a story about social media’s mental health effects and shows a radiating halo on the slider’s knob to reinforce the signifier and catch the user’s attention. This limited use of animation is a relatively benign (though mostly unhelpful) way of catching the user’s attention. Were animations widespread throughout the site, this animation would be a distracting usability problem.
黑暗模式：Warmlydecor.com上的闪烁倒计时时钟表示销售即将结束（通过令人费解的巧合，在网站上的每一个产品的一个小时内，无论您访问的每一款产品都在为止）。该时钟激活了用户中强大的丢失 - 厌恶本能，闪烁（随着数字的微妙放大，因为它们闪存）非常难以避免参加。
总之，当UI动画是微妙的，不引人注目的和简短的时，他们可以改善用户体验，并且可以传达反馈和状态的变化，防止迷失化，加强意义者。但他们不应该过度使用，因为它们很容易成为压倒性和分散的注意力。
参考
Head, V. (2016)设计界面动画。Rosenfeld媒体。
Saffer，D。（2014）。Microinteractions。奥里利媒体。
普拉特，J.，Radulescu，P.，Guo，R.m.，＆Abrams，R.A。（2010）。它还活着！动画运动捕获视觉注意。Psychological Science那21, 1724–1730
Share this article: