用动作创造可用性

初发布于 04 Sep 2017 | in Other

主要讲动作在 UI 交互中的应用。

原文CREATING USABILITY WITH MOTION

实时 vs. 非实时交互

在 UX 中的 state，即状态，是静止的。行为 act 是临时的，基于动作 motion 的。

“实时”意味着用户是直接与用户界面中的对象进行互动，被认为是“直接操作”；“非实时”则意味着对象的表现发生在用户的动作之后，是过渡性的，其影响是“锁定”了用户直到过渡结束。

动作支持可用性

分四方面：

  1. Expectation：减小用户期待的（用户观察到的事物的样子）和他们所体验到的（事物是如何表现的）差距
  2. Continuity：保持用户体验的“一致性”——一系列的场景组成了完整的用户体验
  3. Narrative：叙述性的，在用户体验中一系列不引人注意的时间、事件联系在一起
  4. Relationship：借助事物之间空间的、临时性的和层级关系的表现，引导用户理解和做出决定

12个 UX 动作概念

Timing Object Relationship Object Continuity Temporal Hierarchy Spatial Continuity
Easing（当临时事件发生时，事物表现与用户期待一致）在合适的放松的动作中，用户体验到的动作本身是“持续的”、“不可见的”（即 non-distracting） Parenting（当与多个事物交互时，创建空间的、临时性的层级关系，把一个事物的属性与另一个事物的属性连接） Transformation（当对象的用途改变时，创造一系列不间断的变化，让用户经过不同的UX状态。变形是最可辨识的） Parallax（视差，当用户滚动页面时，在视觉平面内创建空间层次结构。表现为界面上不同object以不同速率移动。在发生视差事件期间，背景元素的可感知性减弱，用户的注意力被集中到主要操作和内容上） Obscuration（字面意思为障碍、混浊。与Masking相似，Obscuration既是静态又是临时的现象。当一个object出现在视野中，其下面的东西被蒙上透明遮罩变得模糊不清）
Offset & Delay（当引进新元素和场景时，定义事物的关系和层级。通常用来表现一些事物是separate） Value Change（当数字、文本的值改变时，营造一种动态、连续、叙述性的关系。数字和值代表了在现实中发生的事情，可以是时间、收入、游戏得分、健康曲线等。当用户意识到数据动态性的本质，结果是不仅注意到了数值，还激发了主动性） Dimensionality（维度，提供了一种有效的方法来克服视觉平面的层次悖论：同一平面上的objects缺乏深度，而object出现在其他objects的前面或后面）
Masking（蒙版，当功能由object的一部分的显示或隐藏来决定时，在对象的内部创造连续性。可以认为是object的形状和它的用途之间的关系。看起来改变了object，实际上其内容没有改变） Dolly & Zoom（Dolly是一个电影术语，指的是镜头向物体拉近，近景拍摄，或物体远离镜头移动，长镜头拍摄；Zoom指的是物体本身缩放，代替视角、物体的空间移动，实现相同效果）
Overlay（覆盖，当分层的对象位置相关时，利用平面排序属性在非3D空间里，描述一个object是在其他对象的前面还是后面）
Cloning（当新的object从当前场景的hero对象中被创建时，叙事性地阐述它的出现。由于此时用户的注意力被集中在这些hero object上，可以传递出清晰明确的事件关系链：动作X产生的结果是Y（创建新的子对象））

反例

  1. Linear motion 在视觉上很明显，感觉上“没有完成”，“震惊的”和“干扰的”
  2. timing 函数太慢或太快
  3. easing 函数与品牌和整体体验不一致
  4. 一组本来功能各不相同的 icons 以相同的速度和角度进入视图，结果就是它们看起来像 a single object

建议

  1. when to use easing? Always.
  2. Parenting 功能最好是“实时”的交互。通常是用户直接操作界面上的事物，通过动作告诉用户事物是怎样联系的，它们之间的关系是怎样的
  3. 比如一个submit按钮，从矩形变成一个圆环型的进度条，最后又变成一个明显的确认标记的按钮。它吸引了我们的注意力，tells a story 然后结束
  4. 数值改变可以是实时的（用户和对象交互时改变），也可以是非实时的（比如loader和过渡，不需要用户输入）
  5. 应用视差时，前景对象移动速率“较快”，看起来离用户更近，背景对象移动速率“稍慢”，看上去离用户更远。把背景和非互动的元素推到“更后面”

  6. 维度表现为三类：

    • 折纸维度（Origami Dimensionality）——界面上的object在三个方向上“折叠”。多个对象组合成“折纸”的结构，被隐藏的元素在空间上仍然“存在”，即使不可见
    • 浮动维度（Floating Dimensionality）——给出界面中对象的空间起点和出发点。比如一堆卡片错落地堆叠在一起，通过滑动卡片移走上面一张，来读取下面一张
    • 物体维度（Object Dimensionality）——多个2D层被放置在3D空间中以形成真实的三维物体