5条网络UI界面不可破坏的规则

来源:设计前沿 作者:Nick Babich 时间:2017-07-26

转换是在用户界面中传达更改的强大方式。它们可以用于应用程序,以帮助将大量认知工作卸载到视觉皮层中:它们有助于在导航环境之间传输用户,解释屏幕上元素排列的变化以及加强元素层次结构。因此,它们是交互设计的基本要素。

成功的动画转型具有以下五个特点:

好的UI动画是自然的

用户界面中的状态变化通常涉及到默认的削减,这可能使其难以遵循。在现实世界中,大多数事情不会立即出现或消失。当某些东西有两个或多个状态时,状态之间的变化将更容易让用户了解转换是否被动画化而不是瞬时的。我们来看下面的例子,用户在列表中选择一个项目来放大其详细视图。在扩张期间,当小卡片扩展成较大的卡片时,小卡片将朝着目的地移动。这个运动灵感来自现实世界的力量。

7

有效的UI动画分阶段进行

一个分阶段的动画转换指导您的用户关注,并澄清状态的变化。这个特征与用户焦点和连续性直接相关。良好的过渡有助于在正确的时间将用户的焦点引导到正确的位置,它会根据目标来强调正确的元素。在下面的示例中,浮动动作按钮(FAB)转换成由三个按钮组成的标题导航元素。第一次用户无法真正预测即将发生的交互,但是正确的动画转换可以帮助用户保持领先,并且不觉得内容突然改变。此转换有助于指导用户进行交互的下一步。

2

最好的UI动画是关联的

过渡应该说明元素的联系。良好的转换将新创建的表面与创建它们的元素或操作相关联。关联连接的逻辑是帮助用户了解视图布局中刚刚发生的变化以及触发更改的内容。

下面你可以看到一个层次转换的两个例子。在第一个例子中,新层出现在远离触发它的触摸点,这破坏了它与输入法的关系。

3

在第二个例子中,新层出现在触摸点的正上方。因此将元素绑定到触摸点。

4

另一个例子可以在Mac OS中找到,在最小化窗口时使用动画转换。该动画将第一状态与第二状态相连接。

五

流行的UI动画是快速的

如果只有一个你关心的动画原理,一定是时机。设计转换时,时间可以说是最重要的考虑因素之一。动画应该是快速和准确的,在用户的启动动作和动画开始之间很少或没有滞后时间。此外,用户不必等待动画完成。在下面的例子中,慢动画会产生不必要的延迟并延长持续时间。

6 1

当元素在状态之间移动时,运动应该足够快,不会导致任何等待,但是足够慢,以至于可以理解转换。为了有效地传达UI元素之间的因果关系的动画,效果必须在初始用户操作的0.1秒内开始,以保​​持直接操纵的感觉。尝试将动画持续时间保持在300ms以下,因为快速切换浪费了用户的时间。测试它与您的用户看看什么是可以忍受的。

最佳UI动画是清晰的

通过动画重载UI或创建太复杂的交互是一个常见的错误。用户界面的变化太大可能会使用户失去方向,需要时间才能恢复。请记住,屏幕上的每一个动作都引起了人们的注意,所以动画太多同时会造成混乱。

过渡应该避免一次性太多,因为当多个物品需要在不同的方向移动时,它们会变得混乱。记住,在动画和转换方面,尤其是更少。任何如果被删除将会使一个更干净的UI几乎肯定是一个好主意。当表面改变形状和大小时,必须保持下一个视图的清晰路径。复杂的转换应保持单个元素可见。这有助于保持用户导向。

过渡和辅助功能

由于转换是关于视觉通信,默认情况下,视觉障碍的用户无法访问它们。您应该为这组用户提供备用内容。webacessibility.com的动画最佳做法提供了何时提供辅助技术的替代内容的建议。

结论

设计转换时,只关注用户所做的实际操作。无论您的应用程序或网站是有趣和俏皮还是认真直接,使用有意义的过渡可以帮助您提供清晰快捷的内聚体验。