用户体验的12个原则(上)

用户体验的12个原则(上)_第1张图片

用户动态创建可用性:动态用户体验宣言

下面的宣言代表了我对这个问题的回答——“作为用户体验或用户界面,设计师,我怎么知道什么时候,在哪里来实现支持可用性?

在过去的5年里,我有幸在40多个国家指导和指导UX & UI设计师,通过我的研讨会和UI动画教程,在数百个顶级品牌和设计咨询公司。在对用户界面中的动态特性进行了15年的研究之后,我得出了这样的结论:在您的UX项目中,有12个特定的因素来支持使用动态特性的可用性。我把这些机会称为“动态用户体验的12个准则”,它们可以以无数种创新的方式堆叠和合并。

我把它分为五个部分:

解决UI动画的主题——不是你想的那样。

实时和非实时交互

运动支持可用性的四种方式

法则、技巧、特性和准则

动态用户体验的12个准则

作为一个快速的插件,如果您有兴趣让我为您的团队领导一个活动和可用性研讨会,请点击这里了解更多信息:https://uxinmotion.net/creatingusabilitywith-workshop/。

这不是UI动画

因为在用户界面中运动的主题通常被设计师理解为“UI动画”——这不是——我觉得在我们进入12条准则之前,我需要创建一些背景。

“UI动画”通常被设计师认为是一种让用户体验更加愉悦的东西,但总体来说并没有增加多少价值。因此,UI动画经常被调侃为用户体验的红头发继子(向所有的红头发继子道歉)。如果有的话,它通常在结尾,作为最后一道口关口。

此外,在用户界面环境下的动作被认为是迪士尼动画的12个准则的范畴,我在我的文章《UI动画原则——迪士尼死了》中对此表示反对。

在我的宣言中,我将说明UI动画对于“12种用户体验动态法则”就像构建对于体系结构一样。我的意思是,当一个结构需要在物理上建造以存在(需要建造)时,决定构建什么的引导者来自准则领域。动画是关于工具的。准则是使用实际应用的人的本身的思想,因此,准则为设计师提供了很大的优势。

大多数设计师认为“UI动画”实际上是一种更高的设计形态:实时事件和非实时事件在界面上的运转状态。

实时vs非实时交互

在这个节骨眼上,区分“状态”和“行为”是很重要的。UX中的某些状态基本上是静态的,就像一个设计组合。UX中某物的行为基本上是暂时的,并且是基于动作的。”对象可以处于遮蔽状态,也可以处于被遮蔽的状态。如果是后者,我们知道动作是有密切联系的,并且是一种支持可用性的方式。

此外,交互的所有时间方面都可以被认为是实时的或非实时事件期间的时间行为。实时意味着用户直接与用户界面中的对象交互。非实时性意味着对象行为是后交互的:它发生在用户行为之后,是过渡的。


用户体验的12个原则(上)_第2张图片
用户体验的12个原则(上)_第3张图片

这是一个重要的区别。

实时交互也可以被认为是“直接操作”,因为用户直接和直接与接口对象交互。当用户使用时,界面的行为就会发生。

非实时交互只有在用户输入之后才会发生,并且会短暂地将用户锁在用户体验之外,直到转换完成。

这些区别将会给我们带来杠杆作用,因为我们将继续我们的旅程,进入12个UX准则的世界

动作以四种方式支持可用性

这四个支柱代表了用户体验的时间行为支持可用性的四种方式。

期望

预期分为两个方面——用户如何理解对象是什么,以及它的行为方式。换句话说,作为设计师,我们希望最小化用户期望和体验之间的差距。

连续性

连续性既体现了用户流,也体现了用户体验的“一致性”。连续性可以被认为是“内部连续性”——场景中的连续性,以及“内部连续性”——一系列场景中的连续性构成了整个用户体验。

叙述

叙事是用户体验中事件的线性发展,导致时间/空间框架。这可以看作是在整个用户体验中连接在一起的一系列谨慎的时刻和事件。

关系

关系是指指导用户理解和决策的接口对象之间的空间、时间和层次的表示。

原则、技术、属性和值

Tyler Waye说得很好,当他写道,“原则……是基础的前提和功能的规则,可以产生任何数量的技术。无论发生什么,这些元素都保持一致。值得重申的是,原则是设计的不可知论者。

从那里,我们可以想象一个层次结构,上面有原则,下面有技术,下面有属性,下面有值。

技术可以被看作是对原则和/或原则的组合的各种和无限的执行。我认为技术类似于“风格”。

属性是用于创建技术的特定对象参数。这些包括(且不限于)位置、不透明度、比例、旋转、锚点、颜色、笔划宽度、形状等。

是实际的数值属性值,它们随着时间的变化而变化,以创建我们所说的“动画”。因此,要在这里着陆(并向前跳跃一点),我们可以说,一个假设的UI动画引用使用的是“模糊玻璃”技术,模糊和不透明属性的影响分别为25px和70%。

现在我们有一些工具可以使用。更重要的是,这些语言工具与任何特定的原型工具无关。

用户体验的12个原则。

放松和偏移和延迟与时间有关。养育与客体关系有关。转换、值更改、屏蔽、覆盖和克隆都与对象的连续性有关。视差与时间层次结构有关。模糊、维度和Dolly & Zoom都与空间连续性有关。


用户体验的12个原则(上)_第4张图片

原则1:宽松

当时间事件发生时,对象行为与用户期望保持一致。

用户体验的12个原则(上)_第5张图片

所有界面对象都表现出时间行为(无论是实时的还是非实时的),容易。放松创造并强化了“自然主义”固有的用户体验的无缝性,并创造了一种连续性的感觉,当对象表现为用户期望他们的行为。顺便说一句,迪士尼把这称为“慢进慢出”。


用户体验的12个原则(上)_第6张图片
用户体验的12个原则(上)_第7张图片

左边的例子是线性运动,看起来很糟糕。上面的第一个例子使动作变得更轻松,看起来“不错”。上面的三个例子都有确切的帧数,而且发生的时间也完全相同。唯一的区别是他们的放松。

作为关注可用性的设计师,除了美学之外,我们还需要我们自己的严谨和探究,哪个例子更支持可用性?

我在这里提出的情况是,某种程度的偏态是放松所固有的。你可以想象一个“放松梯度”,其中的行为落在用户期望之外,导致交互的可用性降低。在适当放松运动的情况下,用户会觉得运动本身是无缝的,而且基本上是不可见的——这是一件好事,因为它不会让人分心。线性运动是显而易见的,感觉莫名其妙地偏离,未完成,不和谐,分散注意力。

现在我要完全反驳我自己,谈谈右边的例子。运动并不是无缝的。事实上,它有一种“设计”的感觉。我们注意到物体是如何着陆的。它感觉不同,但仍然比线性运动的例子感觉更“正确”。

您是否可以使用宽松,并且仍然不支持(或更糟的情况)可用性?答案是肯定的,有几种方法。一种方法是时机。如果你的时间太过缓慢(从Pasquele借调),或者太快,你可以打破预期,分散用户的注意力。同样,如果你的宽松政策与品牌或整体体验不一致,这也会对预期和无缝性产生负面影响。

我想向你们开放的是一个充满机遇的世界,当它涉及到放松行动。作为一个设计师,你可以在你的项目中创建和实现无数的“地役权”。所有这些特性在用户中都有自己的预期响应。

总结:何时使用宽松?总是这样。

你可以在我的文章“可用性和线性运动的讽刺”中了解更多关于我的宽松假设。

原理二:偏移与延迟

在引入新元素和场景时定义对象关系和层次结构。


用户体验的12个原则(上)_第8张图片

在动画中,只有两个UX原则受到迪士尼动画原则的影响,其中第二个原则是“跟进和重叠动作”。

但是,重要的是要注意,实现虽然在执行上类似,但在目的和结果上是不同的。虽然迪士尼的原则导致了“更吸引人的动画”,但UI动画原则则带来了更有用的体验。

这一原则的效用在于,它通过“告诉”用户界面中对象的性质,预先为用户设置成功的设置。以上引用的叙述是前两个对象是统一的,下一个对象是分开的。也许前两个对象可以是非交互的图像和文本,而下一个对象是按钮。

甚至在用户注册这些对象之前,设计人员已经通过动作向她传达了这些对象在某种程度上是“独立的”。这是非常强大的。

在上面的示例中,浮动操作按钮(FAB)转换为由三个按钮组成的标题导航元素。因为这些按钮是临时的“偏移”,它们最终通过“分离”来支持可用性。换句话说,设计师利用时间本身来说明——甚至在用户注册对象之前——对象是分开的。它的作用是告诉用户,完全独立于视觉设计,是界面中对象的一部分。为了更好地向您展示这是如何工作的,我将向您展示一个打破偏移与延迟原则的示例。在上面的示例中,静态视觉设计告诉我们背景上有图标。假设这些图标都是相互独立的,做着不同的事情。然而,这一动议与此相矛盾。暂时地,图标被分组成行并表现为单个对象。它们的标题同样被分组成行,并且表现得像一个单一的对象。这个动作告诉用户她眼睛看到的东西。在这种情况下,我们可以说接口中对象的时间行为不支持可用性。原则3:在与多个对象交互时,亲子创造空间和时间层次关系。育儿是用户界面中“关联”对象的一个强大原则。在上面的示例中,顶部或' child '对象的' scale '和' position '属性被解析为底部或' parent '对象的' position '属性。养育是对象属性与其他对象属性的链接。这将以支持可用性的方式创建对象关系和层次结构。育儿还允许设计师更好地协调用户界面中的时间事件,同时向用户传达对象关系的本质。

在动画中,只有两个UX原则受到迪士尼动画原则的影响,其中第二个原则是“跟进和重叠动作”。

但是,重要的是要注意,实现虽然在执行上类似,但在目的和结果上是不同的。虽然迪士尼的原则导致了“更吸引人的动画”,但UI动画原则则带来了更有用的体验。

这一原则的效用在于,它通过“告诉”用户界面中对象的性质,预先为用户设置成功的设置。以上引用的叙述是前两个对象是统一的,下一个对象是分开的。也许前两个对象可以是非交互的图像和文本,而下一个对象是按钮。

甚至在用户注册这些对象之前,设计人员已经通过动作向她传达了这些对象在某种程度上是“独立的”。这是非常强大的。

用户体验的12个原则(上)_第9张图片

在上面的示例中,浮动操作按钮(FAB)转换为由三个按钮组成的标题导航元素。因为这些按钮之间是暂时的“偏移”,它们最终通过“分离”来支持可用性。换句话说,设计师利用时间本身来说明——甚至在用户注册对象之前——对象是分开的。这就产生了告诉用户,完全独立于视觉设计的效果,这是界面中对象的本质的一部分。

为了更好地向您展示这是如何工作的,我将向您展示一个打破偏移与延迟原则的示例。

在上面的示例中,静态视觉设计告诉我们背景上有图标。假设这些图标都是相互独立的,做着不同的事情。然而,这一动议与此相矛盾。

暂时地,图标被分组成行并表现为单个对象。它们的标题同样被分组成行,并且表现得像一个单一的对象。这个动作告诉使用者一些东西,而不是她的眼睛看到的。在这种情况下,我们可以说接口中对象的时间行为不支持可用性。

原则3:层次

在与多个对象交互时创建空间和时间层次关系。

用户体验的12个原则(上)_第10张图片

层次是一种强大的原则,它可以在用户界面中“关联”对象。在上面的例子中,顶部或“子”对象的“刻度”和“位置”属性被应用到底部或“父”对象的“位置”属性中。

层次是对象属性与其他对象属性的链接。这就创建了对象关系和层次结构,以支持可用性。

层次还可以让设计师更好地协调用户界面中的时间事件,同时向用户传达对象关系的本质。

回想一下,对象属性包括以下——缩放、不透明度、位置、旋转、形状、颜色、值等等。这些属性中的任何一个都可以链接到任何其他属性,以在用户体验中创建协同的时刻。

是一种强大的原则,它可以在用户界面中“关联”对象。在上面的例子中,顶部或“子”对象的“刻度”和“位置”属性被应用到底部或“父”对象的“位置”属性中。


用户体验的12个原则(上)_第11张图片

在上面的左边的例子中,“外观”元素的y轴属性是“子”的“x轴”属性,它是圆形指示器父的“x轴”属性。当圆形指示器元素沿着水平轴移动时,它的“子”元素会随着水平和垂直方向移动(在被屏蔽时——另一个原则)。

其结果是一个层次的时间叙事框架同时发生。值得注意的是,“外观”对象的工作原理是一系列的“定位”,在每个数字中,“外观”是完全不可见的。用户可以无缝地体验到这一点,尽管我们可以在这个例子中提出一个微妙的“可用性欺骗”。

层次的功能最好是“实时”互动。当用户直接操纵界面对象时,设计师通过动作与用户通信——对象是如何链接的,以及它们之间的关系。

层次方式有三种形式:“直接层次”(见上面两个例子,“延迟层次”和“逆向层次”,见下文)。




三米工作室“大吉大利”小组的每周优质设计文章汉化计划07篇

原文链接:https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

作者:陈雪

你可能感兴趣的:(用户体验的12个原则(上))