在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.

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

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

有时,由于c,静态视觉反馈被忽略hange失明。For example, people may not notice the shopping-cart–badge update after clicking the添加到购物车在下面的uininart示例中的按钮。动画增加了注意到反馈的可能性。(另一种替代方案是使静态反馈更加突出 - 例如,通过对话框或使用更大的徽章。两个解决方案可能比简单的动画更具侵入性。)

在向购物车添加物品时,功能产品页面没有动画反馈
cuyinart.com:用户单击后添加到购物车那the cart badge simply updates, with no animation. Because the badge is small and far away from the添加到购物车button (which is likely where the user is looking), it’s easy to miss this change. The result could be that the user adds the same product to the cart multiple times.

和动画也可以用作反馈的形式beforethe 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模式比立即交换一个图标更清晰。

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那andhas 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从屏幕的底部向用户展开顶部信号,可以通过拉下来关闭。来自屏幕右侧的新卡信号通过将其刷到右侧可以关闭它。

Apple Music for iPhone: the现在玩卡animates up into place in a manner that helps the user understand that this view can be dismissed by pulling down, rather than swiping left or right on the edge.

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.

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

黑暗模式: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