it-swarm.cn

您应如何以及何时在应用程序中使用动画?

有时,应用程序可以从UI中的动画中受益。

  • 您有什么技巧来决定何时应使用动画?
  • 如何最大程度地发挥动画的作用并避免滥用?
12
Dair

考虑因果关系。如果我将鼠标悬停在按钮上,则需要某种反馈。如果我可以拖动某些东西,请以某种方式指出。如果有警报或通知,请引起我的注意。除此之外,除非您有非常特定的动画原因,否则请不要使用。尝试避免一切如果持续下去会令人讨厌的事情。如果动画并不重要,并且分散了页面的主要用途,请消除它。

6
Virtuosi Media

一些适合使用动画的位置:

  • 将面板最小化到特定位置-动画有助于教会用户最小化面板的位置以及如何还原它。
  • 自动隐藏内容,例如导航栏-动画引起用户注意某些内容刚刚消失以及可以从何处检索到。
  • 更新一个不紧邻导致更改发生的区域的区域。例如,在列表/网格中编辑数据会更改该数据在另一个面板中的视觉表示。

动画(更改/动作)比大多数其他事物更引人注目,因此,当您想引起对可能会引起用户注意的动作的注意时,这非常好。

但是,即使是上面的项目,也可能只需要头几次就可以进行一次操作-由于眼睛会自动被吸引,这会分散注意力,因此应在完成初始“指导”后避免使用。

6
Dan Barak

您应该始终具有某种忙碌/正常工作的动画,以防止您的用户认为该应用程序已停止工作(对于ajax应用程序尤其重要)。

如果简单快速过渡可以增加整体用户体验,则可以,但不要投入太多。

您是否曾经使用过一个应用程序,您认为“我希望开发人员像他计划出色的UI效果那样花大量的时间来计划实际功能”?添加动画时请记住这一点。

4
Sruly

问题。像往常一样,它取决于应用程序(例如,游戏可能比生产力应用程序使用更多的UI动画),但是有一些通用原则。

早在iThings流行时,就必须对所有内容进行动画处理,但是有趣的是查看VS2010和Office 2010并看到动画了not。特别是在Office 2010中,淡入式悬停/按钮过渡(而Office 2007则是)。海事组织,感觉更积极。菜单仍会淡入/淡出(尽管值得注意的是,淡入淡出out的时间大约是淡入淡出in的两倍,这可能会增加感知的响应度)。

通常,在UI组件四处移动而用户无需显式拖动/滚动它们时,应使用动画。如果用户将图标拖到适当位置,则“踩踏”其他图标会传达用户操作的效果(尽管有时插入点行就足够了)。 IE/Firefox上的“信息栏”将其他内容向下推,以减少跳动并吸引用户的注意。由于用户可以看到其他元素的位置,因此手风琴和树菜单在动画方面的测试效果更好。

我曾经看过一项研究,该研究表明,所有级别的用户都不太愿意与正在制作动画的UI元素进行交互(如果找到链接,我将对此进行更新)。因此,如果当用户将鼠标悬停在按钮上超过2秒时将其点亮,即使在动画过程中按钮会work,用户也会下意识地等待动画完成。要对此有所了解,请查看 WPF主题 示例。有些主题的悬停动画比其他主题更长,您可以立即确定哪些主题呆滞。缓慢的淡入淡出效果也可能促使用户说Vista感觉很慢-在Win7上,所有相同的动画都存在(因此在处理器/图形卡上也一样慢),但是很多则更短。

OTOH,新的google.com具有逐渐消失的功能,而Google图像搜索现在具有灯箱。因此趋势是双向的。

3
Robert Fraser

总而言之,动画对大脑有两个强大的影响,您可以使用:

  • 减轻认知负担:它们使用户可以看到两种状态之间发生的事情,因此大脑不必“填补空白”。这使用户感到一切都更加清晰和易于使用->大量使用动画进行过渡(cf Apple软件)

  • 引起用户注意:人类真的很容易发现他们不直接看的地方的运动。这要归功于 我们的杆状细胞 ,它们用于检测运动,这些细胞在视网膜的外边缘非常密集(必须与在恶劣环境中的生存有关)->如果很重要的事情发生在遥远的地方,请使用动画。

这种效果非常强,因为它们直接与我们的爬行动物大脑相连。强大而危险的同时。

3
user396

在为Web /本地应用制作动画时,我总是采用github方法,即在内容加载时几乎“分散用户注意力”半秒钟。找到应用程序中最慢的部分(特别是按下按钮的部分,持续半秒钟,似乎什么都没发生,然后找到某种方式制作动画,这是为了最大程度地减少用户的沮丧感(“我按下了按钮,但什么也没发生”),请注意,我并不是说旋转的加载轮或某种加载动画,而是像滑动动画之类的东西,以产生光滑的错觉,快速的用户界面,(请参阅: https://github.com/github/linguist 每当您单击某些内容时,都会有此幻灯片动画使github显得超级快速和流畅),请注意不要过度使用这个(在应用程序中耗时超过500毫秒的部分上使用这种技术),我感觉像是500毫秒,这是神奇的数字,但是请尝试并找到适合自己的数字。

2
David

您必须问:这个动画是否可以帮助用户弄清楚正在发生什么?我立即关闭了OS X的精灵效果,但是我欣赏简单的最小化/还原动画,因为它速度很快,并且为刚刚发生的事情提供了额外的线索。同样适用于Spaces /Exposé。又或者,这是一个短暂,简单,柔和的淡入淡出过渡,使某些事物看起来不那么突兀,更加人性化。

再说一次,有点天赋可以成为您的商标,例如《星球大战》中的“卢卡斯抹布”。

2
John Ferguson

动画具有目的,而目的是可视化状态变化。

当您考虑使用声明性动画(例如webkit提出的现代CSS中的那种动画)时,更容易感到困惑。在这种情况下,您可以指定元素在特定状态下的外观,然后告诉CSS在不同状态下的外观。您如何指定状态?使用CSS规则,例如类名和ID。例如(请原谅我在这里使用代码!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

我们在这里描述的是一个打开的框,我们告诉代码如何在两个CSS规则之间进行动画处理。这使它们处于状态,当您意识到这一点时,将动画应用于应用程序突然变得更加合乎逻辑。而不是考虑动画将在何处发生,您将动画视为状态变化的副产品。发生了某种事情的指示器,或者向用户反馈了正在进行的更改。

当我学会区分纯粹的“动画”(从编程的角度)和“状态改变”(从声明的角度)时,它使我的所有UI设计都更加坚实和逻辑。

1
Rahul