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

image.png

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

在过去的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中某物的行为基本上是暂时的,并且是基于动作的。”对象可以处于遮蔽状态,也可以处于被遮蔽的状态。如果是后者,我们知道动作是有密切联系的,并且是一种支持可用性的方式。

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


image.png

image.png

这是一个重要的区别。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

image.png

原则1:宽松

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


image.png

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

image.png

image.png

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

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

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

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

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

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

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

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

原理二:偏移与延迟

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

image.png

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

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

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

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

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

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

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

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

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

image.png

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

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

image.png

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

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

原则3:层次

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

image.png

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

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

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

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

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

image.png

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

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

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

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


image.png

image.png

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,076评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,658评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,732评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,493评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,591评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,598评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,601评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,348评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,797评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,114评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,278评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,953评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,585评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,202评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,180评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,139评论 2 352

推荐阅读更多精彩内容