020-29815005
预约专线时间:09:00-23:59

网络UI界面的不可破坏规则有哪些

新闻来源:优漫教育 日期:2021-11-01
在用户界面中,转换是一种非常有效的沟通方式。这些功能可用于应用程序,帮助将大量的认知工作转移到视觉皮质:它们帮助在导航环境之间传递用户,解释屏幕上元素排列的变化,以及增强元素的层次。这就构成了动画化交互设计成功转化的基本要素,它有六个特征:
  一、优秀的UI动画很自然。

  使用师介面中的状态改变通常会包含缺省剪切,这会让人很难理解。大部分的东西在真实世界里都不会立即发生或师消失。如果一个事物有两个或更多的状态,状态间的变化会让用户更容易地了解到转换是动态的,而非即时的。来看一下以下例子。在列表中,用户选择一项来放大其详细视图。扩容期间,当小卡扩展成大卡后,小卡就会移向目的地。这个运动是由真实世界的力量所激发的。


  二、高效UI动画是分阶段进行的。

  分段动画转换可以引导用户注意,并且阐明状态的变化。这个功能直接关系到用户的关注和连续性。一个好的转换可以帮助用户在合适的时间把注意力引导到正确的位置,并根据目标强调合适的要素。下面的例子中,浮动操作按钮(FAB)被转换成一个包含三个按钮的标题导航元素。首先,用户不能真正地预见未来的交互,但是正确的动画转换可以让使用师在不感到内容突然变化的情况下领先。这一转换可以帮助引导用户进行下一步的交互。


UI设计培训班


  三、最佳UI动画是相关的。

  元素之间的关系应被转换解释。好的转换将新创建的表面与创建表面的元素或动作相关联。相关连接的逻辑有助于用户了解视图布局中刚刚发生的更改,以及触发这些更改的原因。以下您将看到两个层次转换的示例。对于第一个例子,新的图层似乎离触发它的触摸点很远,这会破坏它和输入法之间的关系。

  在苹果的操作系统上也可以看到另一个示例,即在最小化窗口时使用动画转换。动画片连接了第一和第二状态。


  四、热门UI动画很快。

  只要有一条动画片的原则,就是时间。在改变设计时,时间可能是考虑的首要因素之一。动画片必须快速精确,在使用师的开始动作和动画开始之间有几个时滞。另外,用户不需要等待动画完成。对于下面的例子,慢动作会导致不必要的延迟和延长持续时间。

  如果元素在不同的状态间移动,移动的速度应该足够快,不会造成任何的等待,但要足够慢才能理解这种转换。为有效表达用户界面元素间因果关系的动画,这种效果必须在初始用户动作的0.1秒之内开始,以保持直接操作的感觉。尝试使动画持续时间低于300毫秒,因为快速切换是在浪费用户的时间。与您的用户一起测试,看看容许情况如何。


  五、最好的用户界面动画清晰。

  在动画中重载用户界面或师创造过于复杂的交互,这是一个常见的错误。改变过多的用户界面会使用户感到迷惑,恢复起来需要时间。别忘了,屏幕上的每个动作都能吸引人的注意,过多的动画同时也会造成混乱。转换应该一次避免一个项目太多,因为当多个项目需要朝不同方向移动时,他们就会被搞乱。切记动画和转换,特别是少量的。只要把用户界面弄清楚,就可以把它删除掉,这几乎可以肯定是一个不错的主意。在面的形状和尺寸发生变化时,需要为下一视图保留一条清晰的路径。应让一个元素看到复杂的转换。这样可以帮助引导用户。


  六、转换与辅助功能。

  因为转换涉及到视觉传播,所以默认情况下,视觉障碍用户无法访问它们。你应当向此用户群提供替代内容。在网站上,动画最佳实践可以提供关于在辅助技术中提供替代内容的建议。


  结论

  设计转换时,只注意使用师的实际操作。不管您的应用程序或站点是有趣的,有趣的,还是严肃、直接、有意义的转换,都能帮助您提供一个清晰、迅速的融合体验。