UI运动的大优势(以及缺点)是它吸引用户注意力。Our peripheral vision (specifically, through the rod-shaped photoreceptors in the human retina) is responsible for detecting motion. Evolutionarily, the fact that we can detect a movement outside the center of our field of vision is, of course, an advantage: we can discern danger and protect ourselves. But that means that we are sensitive and prone to bedistractedby any type of motion (meaningful or not). That’s why motion in user interfaces can easily become annoying: it’s hard to stop attending to it, and, if irrelevant to the task at hand, it can substantially degrade the user experience (as any web user who has encountered a moving广告can attest).

虽然动画can有用,可以建立用户期望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


Motion for Feedback

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.

American Museum of Natural History: When clicking theExhibitions菜单图标在页面中间,菜单面板在页面顶部的左侧幻灯片幻灯片,而不是突然出现新页面。


Sometimes, static visual feedback is ignored due to change失明。例如,在点击后,人们可能不会注意到购物车徽章更新添加到购物车button in the Cuisinart example below. An animation increases the chance of noticing that feedback. (Another alternative would be to make the static feedback more prominent — e.g., through a dialog box or using a bigger badge. Both solutions would likely be more intrusive than a simple animation.)

cuyinart.com:用户单击后添加到购物车,the cart badge simply updates, with no animation. Because the badge is small and far away from the添加到购物车按钮(可能是用户正在寻找的位置),很容易错过这种更改。结果可以是用户多次向购物车添加相同的产品。

And animations can also be used as a form of feedbackbeforethe 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模式比立即交换一个图标更清晰。


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: While loading flight-search results, Hipmunk offers several animated cues. First, there is an animated chipmunk pretending to fly. (While cute, the chipmunk is not essential for feedback, but is helpful to establish the品牌语气。) 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. A进度条那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



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有一个微妙的放大或以长镜头动画吗lps 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



动画还可以防止迷失方向和告诉人们,如果它们在同一页面上或已移动 - 特别是在移动设备上,由于小屏幕尺寸,上下文可能会丢失。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 the背部按钮导航到上一个视图;不幸的是,在叠加或手风琴的情况下,该动作将把它们远离页面而不是简单地关闭元素。)

WebMD:当打开页面上的手风琴,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:锚点链接are often confusing or disorienting for users, but in this case, the anchor links use a smooth scrolling animation to show (1) that the content is all contained on a single page and (2) where it is on that page.

Motion as a Signifier

动画帮助用户了解如何与UI元素进行交互。运动的方向(或其他属性)表示可接受动作的类型。例如,一个cardthat expands from the bottom of the screen towards the top signals to the user that it can be closed by pulling down. A new card that comes from the right of the screen signals that it can be closed by swiping it to the right.

适用于iPhone的Apple音乐:Now Playing卡以帮助用户理解此视图可以通过拉下来忽略此视图的方式进行动画,而不是在边缘上旋转或右边。

Car2Go for iPhone:短的弹跳动画是一个有条件的动画across the list item reveals options.

Attention Grabbing and Attention Hijacking

因为人类视觉系统对运动非常敏感(特别是似乎具有的运动狂热),动画可以用来抓住用户的注意力,无论好坏。一方面,它可以制作一个微妙的发电机,但另一方面,无偿动画分散注意力并惹恼用户。此外,使用动画来劫持用户的注意或创建一个fear of loss是A.黑暗的模式: an unethical application of user-experience principles and cognitive psychology to get users to do something they ordinarily wouldn’t.



黑暗模式:Warmlydecor.com上的闪烁倒计时时钟表示销售即将结束(通过令人费解的巧合,在网站上的每一个产品的一个小时内,无论您访问的每一款产品都在为止)。该时钟激活了用户中强大的丢失 - 厌恶本能,闪烁(随着数字的微妙放大,因为它们闪存)非常难以避免参加。



v.(2016)Designing Interface Animation。Rosenfeld Media.

Saffer,D。(2014)。MicrointeractionsO’Reilly Media.

普拉特,J.,Radulescu,P.,Guo,R.m.,&Abrams,R.A。(2010)。它还活着!动画运动捕获视觉注意Psychological Science,21,1724-1730