在UX中,如果与克制一起使用,Motion和Animation可能会有所帮助和交流。运动最常被适合作为一种形式微妙反馈对于microinteractions,而不是诱导愉悦或娱乐用户。在本文中,我们探讨了有用,不显眼的反馈动画的目的。在一秒钟(即将到来)的文章中,我们将讨论时间和运动中的细节,使这些动画表现出平滑和自然。

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

当动画以微妙的方式使用时,它可以帮助用户构建关于系统如何运作的心理模型以及它们如何与之交互。当在过渡时刻时,动画对用户体验不太关键(实际上,这是这些停机时间,这些动画通常会使参与者挫败可用性测试)。而不是使用动画提供表面级快乐(很快酸涩),动画可以利用可用性:作为关于系统正在发生的内容的线索,作为UI元素如何表现的意义者,以及用户在信息空间中的位置容易理解的空间隐喻。

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菜单图标在页面中间,菜单面板在页面顶部的左侧幻灯片幻灯片,而不是突然出现新页面。

适用于iPhone的渗透:购物列表功能在用户将新项目添加到列表时显示一个微妙的动画反馈:击中Done键盘上的按钮,刚刚键入的单词(咖啡,在这种情况下)瞬间变灰色,然后快速变为黑色,以表明它已被接受。同时,输入字段均在下面逐渐消失并滑下,发出信号,即它正在等待新输入。

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.

airtable:当拖放用于重新排序表中的列时,在用户允许到操作之前,微妙的动画在新订单之前预览新订单。

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

复杂信息空间的结构往往挑战,而不征收他们的认知资源或占用太多屏幕空间。扫描导航菜单,树图或甚至面包屑要弄清楚在信息层次结构中,层次结构是一种复杂类型的认知工作。虽然单独动画不是合适的替代可见导航的替代,但它可以向用户发出信号,他们在过程或层次结构内移动的方向;这个补充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有一个微妙的放大或以长镜头动画吗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

同样地,幻灯片上的动画有助于建立用户在诸如结账之类的过程中向前或向后移动。

Amtrak显示一个微妙的幻灯片上的动画,以指示用户正在通过预订火车的过程前进。

动画还可以防止迷失方向和告诉人们,如果它们在同一页面上或已移动 - 特别是在移动设备上,由于小屏幕尺寸,上下文可能会丢失。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.

良性:炼油厂29在一个关于社交媒体的心理健康效果的故事中嵌入了一个民意调查,并在滑块的旋钮上显示了一个散热的光环,以加强指导者并捕捉用户的注意力。这种有限的动画使用是一种相对良性的(虽然主要是无益的)捕捉用户注意的方式。在整个网站上广泛的动画,这个动画将是一个分散注意力的可用性问题。

分散注意力:Outline的内容页面上的移动Squiggle不会增加任何好处,但不必要地引起用户远离内容的注意。

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

总之,当UI动画是微妙的,不引人注目的和简短的时,他们可以改善用户体验,并且可以传达反馈和状态的变化,防止迷失化,加强意义者。但他们不应该过度使用,因为它们很容易成为压倒性和分散的注意力。

References

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