以下宣言代表了我对以下问题的回答：“作为UX或UI，设计师，我如何知道何时何地实施运动以支持可用性？”
在过去的五年中，我有幸通过我的UI动画工作室和教程在40多个国家/地区和数百个顶级品牌和设计咨询公司中指导和指导UX＆UI设计师。
在研究了用户界面中的运动超过15年之后，我得出的结论是，有12个特定的机会来支持使用运动的UX项目中的可用性。
我将这些机会称为“ UX在运动中的12条原则”，它们可以以多种创新方式协同叠加和组合。
我将宣言分为5部分：
- 解决UI动画的主题-这不是您的想法
- 实时与非实时交互
- 运动支持可用性的四种方式
- 原理，技术，特性和价值
- 移动用户体验的12条原则
作为快速插件，如果您有兴趣让我为您的团队主持一次运动和可用性研讨会，请单击此处获取更多信息：https : //uxinmotion.net/creating-usability-with-motion-workshop/
与UI动画无关
因为设计人员通常将用户界面中的运动主题理解为“ UI动画”（实际上不是），所以我觉得在进入12条原则之前，我需要创建一些上下文。
设计师通常将“ UI动画”视为使用户体验更愉悦的东西，但总体上并没有增加太多价值。因此，UI动画通常被视为UX的红发继子（对到处都是红发继子道歉）。如果有的话，通常会在最后一次口红通过时结束。
另外，可以理解的是，用户界面上下文中的运动属于迪士尼的12条动画原理的范畴，这在我的文章“ UI动画原理-迪士尼死了 ”中遭到了反对。
在我的宣言中，我将证明UI动画是针对“ 12 UX in Motion Principles”的，而建造是针对体系结构的。
我的意思是，虽然需要物理构建一个结构才能存在（需要构造），但是确定要构建什么的指导手却来自原则领域。
动画与工具有关。原则是指导工具使用的思想的实际应用，因此，原则为设计人员提供了高杠杆率的机会。
实际上，大多数设计人员将其视为“ UI动画”，是执行更高的设计方式：在实时和非实时事件中界面对象的时间行为。
实时与非实时交互
在此关头，区分“状态”和“行为”很重要。UX中某些事物的状态从根本上讲是静态的，例如设计组件。该法案在UX的东西基本上是短暂的，基于运动。的对象可以在状态的被掩蔽或它可以是在动作被掩蔽。如果是后者，我们知道涉及运动并且可以支持可用性。
另外，可以将交互的所有时间方面都视为实时或非实时发生。实时是指用户直接与用户界面中的对象进行交互。非实时表示对象行为是事后交互的：它在用户操作之后发生，并且是过渡的。
这是一个重要的区别。
实时交互也可以被认为是“直接操纵”，因为用户正在直接和立即与界面对象进行交互。用户使用界面时，界面的行为正在发生。
非实时交互仅在来自用户的输入之后发生，并且具有将用户短暂锁定在用户体验之外的作用，直到转换完成。
这些差异将使我们在继续探索运动中的UX的12项原理的过程中能够发挥作用。
Motion通过四种方式支持可用性
期望
期望分为两个方面-用户如何看待对象是什么以及其行为。换句话说，作为设计师，我们希望最大程度地减少用户期望与体验之间的差距。
连续性
连续性既代表用户流程，也代表用户体验的“一致性”。可以从“内部连续性”（场景内的连续性）和“内部连续性”（构成整个用户体验的一系列场景中的连续性）的角度来考虑连续性。
叙述
叙事是用户体验中事件的线性进展，导致时间/空间框架。可以认为这是一系列谨慎的时刻和事件，它们在整个用户体验中相互联系在一起。
关系
关系是指指导用户理解和决策的界面对象之间的空间，时间和层次表示。
原理，技术，特性和价值
泰勒·韦恩（Tyler Waye）写道：“原理……是产生各种技术的基本前提和功能规则。无论发生什么，这些要素都保持一致。” 需要重复的一点是，原则与设计无关。
从那里，我们可以想象一个层次结构，其中“原则”在顶部，“技术”在下面，“属性”在下面，“值”在底部。
可以将技术视为原理的各种和无限的执行和/或原理的组合。我认为技术类似于“风格”。
属性是特定的对象参数，这些参数会被动画化以创建该技术。这些包括（但不限于）位置，不透明度，比例，旋转，锚点，颜色，笔划宽度，形状等。
值是实际的数字属性值，它们会随时间变化以创建所谓的“动画”。
因此，要将飞机降落在此处（并向前跳一点），我们可以说，一个假设的UI动画参考正在使用“模糊原理”与“模糊原理”一起使用，该技术会影响值为25px和70％的模糊和不透明度属性分别。
现在我们有了一些可以使用的工具。更重要的是，这些语言工具与任何特定的原型工具无关。
移动用户体验的12条原则
缓和，偏移和延迟与定时有关。育儿与对象关系有关。转换，值更改，屏蔽，覆盖和克隆都与对象连续性有关。视差与时间层次有关。模糊度，维数和Dolly＆Zoom都与空间连续性有关。
原则1：轻松
当时间事件发生时，对象行为符合用户期望。
所有表现出时间行为（实时或非实时）的接口对象都非常容易。轻松创建并增强了用户体验的无缝性所固有的“自然主义”，并在对象按用户期望的方式运行时产生了连续感。顺便提一下，迪斯尼将其称为“ 慢进慢出”。
左侧的示例具有线性运动，看起来很糟糕。自上而下的第一个示例减轻了动作，看起来“不错”。以上所有三个示例均具有确切的帧数，并且发生的时间完全相同。唯一的区别是宽松。
作为关注可用性的设计师，除了美学之外，我们还需要要求自己严谨和打听，哪一个示例更能支持可用性？
我在这里介绍的情况是，一定程度的拟态性是放松所固有的。您可以想象一个“缓和梯度”，其中超出用户期望的行为会导致交互作用减少。在适当缓和动作的情况下，用户会感觉动作本身是无缝的并且在很大程度上是不可见的-这是一件好事，因为它不会分散注意力。线性运动明显可见，并且感觉不正常，未完成，震颤和分散注意力。
现在，我将在这里完全矛盾自己，并讨论右边的示例。议案不是无缝的。实际上，它具有“设计”的感觉。我们注意到物体是如何着陆的。感觉有所不同，但与线性运动示例相比，它仍然感觉“更正确”。
您可以采用宽松政策，但仍不支持（或更糟的是破坏）可用性吗？答案是肯定的，有几种方法。一种方法是计时。如果您的时间安排太慢（难以从Pasquele借用）或太快，则可能会超出预期并分散用户的注意力。同样，如果您的宽松政策与品牌或整体体验不一致，也会对期望和无缝性产生负面影响。
我想向您开放的是一个轻松的运动世界。作为设计师，您实际上可以在项目中创建和实现无限的“缓动”。所有这些宽松措施都会在用户中触发自己的期望响应。
总结：何时使用宽松政策？总是。
您可以在我的文章“ 易用性和线性运动的讽刺性 ”中了解更多有关我的宽松假设的信息。
原理2：偏移和延迟
引入新元素和场景时定义对象关系和层次结构。
“偏移与延迟”是受迪士尼动画原理影响的运动原理中仅有的两个UX中的第二个，本例中为“ 跟随并重叠动作”。
但是，重要的是要注意，实现虽然执行类似，但目的和结果却不同。迪斯尼的《原理》可产生“更具吸引力的动画”，而《 UI动画》的原理则可产生更多可用的体验。
该原理的用途是通过“告诉”用户有关界面中对象性质的信息，有意识地使用户成功。上面参考中的叙述是顶部的两个对象是结合在一起的，而底部的对象是分开的。也许顶部的两个对象可以是非交互的图像和文本，而底部的对象是按钮。
甚至在用户注册这些对象是什么之前，设计人员就已经通过运动告知她这些对象是“分离的”。这是非常强大的。
信用：InVision
在上面的示例中，浮动动作按钮（FAB）转换为包含三个按钮的标题导航元素。由于按钮在时间上彼此“偏移”，因此最终通过“分离”来支持可用性。换句话说，设计人员是在利用时间本身来说（甚至在用户注册对象之前）对象是分开的。这具有告诉用户完全独立于视觉设计的界面中对象性质的一部分的效果。
为了更好地向您展示这是如何工作的，我将向您展示一个打破“偏移与延迟原理”的示例。
图片来源：Jordi Verdu
在上面的示例中，静态视觉设计告诉我们在背景上方有图标。前提是图标都彼此分开并且做不同的事情。但是，议案与此矛盾。
临时地，图标被分组为行，并且表现得像单个对象。它们的标题同样被分组为行，并且表现得像单个对象。动作告诉用户的东西不是她的眼睛所看到的。在这种情况下，我们可以说界面中对象的时间行为不支持可用性。
原则3：养育子女
与多个对象进行交互时，创建空间和时间层次关系。
育儿是一项强大的原理，可“关联”用户界面中的对象。在上面的示例中，顶部或“子级”对象的“ scale”和“ position”属性作为底部或“父级”对象的“ position”属性的父级。
育儿是对象属性与其他对象属性的链接。这会以支持可用性的方式创建对象关系和层次结构。
育儿还可以使设计人员更好地协调用户界面中的时间事件，同时与用户交流对象关系的本质。
回想一下，对象的“属性”包括以下内容：“比例”，“不透明度”，“位置”，“旋转”，“形状”，“颜色”，“值”等。这些属性中的任何一个都可以链接到任何其他属性，以在用户体验中创造协同作用。
图片来源：Andrew J Lee，Frank Rapacciuolo
在此左上方的示例中，“面”元素的“ y轴”属性是圆形指示器父级的“子”至“ x轴”属性。当圆形指示器元素沿水平轴移动时，其“子级”元素沿水平和垂直方向移动（同时被遮罩，这是另一个原理）。
结果便形成了一个同时发生的层级时间叙事框架。值得注意的是，“面部”对象就像一系列“锁定”一样工作，因为在每个数字上，“面部”都是完全可见的，而不是部分可见的。用户可以无缝地体验到这一点，尽管我们可以断言在此示例中存在一个微妙的“可用性秘籍”。
育儿最能起到“实时”互动的作用。当用户直接操作界面对象时，设计人员通过运动与用户通信，即如何链接对象以及它们之间的关系。
育儿有3种形式：“直接育儿”（请参见上面的两个示例“延迟育儿”和“反向育儿”，请参见下文）。
延迟育儿（信用：AgenceMe）和逆向育儿（信用：AgenceMe）
原则4：转型
对象实用程序更改时，创建连续的叙述流状态。
关于UX在运动原理“转换”方面的文章已经很多。在某些方面，它是动画原理中最明显和最明显的。
转型是最明显的，主要是因为它脱颖而出。我们注意到，“提交”按钮将形状更改为径向进度条，最后再次将形状更改为确认复选标记。它引起了我们的注意，讲述了一个故事，并且完成了。
图片来源：Colin Garven
转换所做的是无缝地将用户转换为不同的UX状态或“是”（如这是一个按钮，这是一个放射状的进度条，这是一个复选标记），最终导致期望的结果。通过这些功能空间将用户吸引到了最终目的地。
转换的效果是将用户体验中的关键时刻从认知上“分块”为一系列无缝且连续的事件。这种无缝性可以提高用户的知名度，保留率和关注度。
原则5：价值变化
当价值主体发生变化时，创建动态且连续的叙事关系。
基于文本的界面对象（即数字和文本）可以更改其值。这是那些“难以捉摸的明显”概念之一。
文本和数字更改如此普遍，以至于它们绕过了我们，而我们却没有给他们带来区别和严谨性来评估它们在支持可用性方面的作用
那么，当值改变时，用户会遇到什么？在用户体验中，运动中的12个UX原理是支持可用性的机会。这里的三个机会是将用户与数据背后的现实，代理的概念以及价值本身的动态性质联系起来。
让我们看一下用户仪表板的示例。
当基于值的接口对象加载时没有“值更改”时，这传达给用户的是数字是静态对象。它们就像涂漆的标志，显示时速限制为55英里/小时。
数字和值表示现实中发生的事情。现实可能是时间，收入，游戏得分，业务指标，健身跟踪等。我们通过运动来区分的是“价值主体”是动态的，而这些价值反映的是该动态价值集中的某些东西。
这种关系不仅会被视觉上包含价值的静态对象所迷失，而且还会失去另一个更深层次的机会。
当我们采用基于运动的值形式的动态系统表示形式时，它会激活一种“神经反馈”。用户现在掌握了其数据的动态性质，可能会导致这些值发生变化，并有能力成为代理商。当这些值是静态的时，与这些值背后的现实的联系就更少了，并且用户失去了代理权。
图片来源：Barthelemy Chalvet，Gal Shir，未知
价值变更原则可以同时发生在实时和非实时事件中。在实时事件中，用户正在与对象进行交互以更改值。在非实时事件中，例如加载程序和转换，这些值在没有用户输入的情况下发生更改以反映动态叙述。
原则6：遮罩
当通过显示或隐藏对象或组的哪一部分确定实用程序时，在接口对象或对象组中创建连续性。
掩盖询问的行为可以认为是对象形状与其效用之间的关系。
因为设计人员熟悉静态设计上下文中的“遮罩”，所以我们有必要在运动原理“掩盖”中将UX区别于UX，因为它在时间上，作为一种行为而不是作为一种状态发生。
通过暂时使用显示或隐藏对象的区域，效用以连续和无缝的方式转换。这也具有保留叙述流的效果。
图片来源：Anish Chandran
在上面的示例中，页眉图像会更改边界形状和位置，但不会更改内容，并变为相册。这具有改变对象是什么的效果，同时将内容保留在蒙版中-这是一个相当巧妙的技巧。这是非实时发生的过渡，在用户执行操作后即被激活。
请记住，UI动画原理是暂时出现的，并通过连续性，叙述，关系和期望来支持可用性。在上面的参考中，对象本身保持不变，但也具有边界和位置，这两个因素决定了对象是什么。
原则7：叠加
当分层对象依赖于位置时，在视觉平地中创建叙事和对象空间关系。
叠加层通过允许用户利用平地排序属性来克服非空间层次结构的缺乏，从而支持可用性。
为了使飞机稍微降落，Overlay允许设计人员使用运动来传达与位置相关的对象，这些对象存在于非3D空间中其他对象的后面或前面。
图片来源：Bady，JaviPérez
在左侧的示例中，前景对象向右滑动以显示其他背景对象的位置。在右侧的示例中，整个场景向下滑动以显示其他内容和选项（同时使用“偏移与延迟原理”传达照片对象的个性）。
在一定程度上，作为设计师，“层”的概念是如此明显以至于不言而喻。我们使用层进行设计，并且层的概念已被深度内化。但是，我们必须小心区分“制作”与“使用”的过程。
作为不断从事“制作”过程的设计师，我们非常熟悉我们正在设计的对象的所有零件（包括隐藏的零件）。但是，作为用户，这些不可见的部分在定义和实践上都是视觉上和认知上都隐藏的。
叠加原理使设计人员可以交流“ z轴”定位的层之间的关系，并以此向用户推广空间定向。
原则8：克隆
当新对象开始和离开时，创建连续性，关系和叙述。
在当前场景中（以及从当前对象中）创建新对象时，以叙述方式说明其外观非常重要。在此宣言中，我强烈主张为对象的起源和离开创建叙事框架的重要性。简单的不透明褪色往往无法达到此效果。遮罩，克隆和维度是三种基于可用性的方法，可以产生强有力的叙述。
图片来源：JakubAntalík，JakubAntalík，未知
在以上三个示例中，在用户的注意力集中在那些英雄对象上的同时，它们是根据现有英雄对象创建的。这两种方法-引导注意力，然后引导眼睛创建一个克隆的新对象-具有传达清晰明确的事件链的强大效果：动作“ x”具有以下结果：创建新的子对象。
原则9：模糊
允许用户将自己定位为与不在主要视觉层次结构中的对象或场景建立关系。
与“蒙版运动原理”中的UX相似，“模糊化”既作为静态现象又作为暂时现象存在。
这可能会使没有时间思考经验的设计师（即瞬间之间的瞬间）感到困惑。设计人员通常按屏幕设计或按任务设计。认为遮蔽是被遮盖的行为，而不是被遮盖的状态。静态设计表示被遮盖的状态。时间的引入使我们发现了物体被遮挡的行为。
图片来源：Virgil Pana，苹果
从以上两个示例中，我们可以看到，看起来像透明对象或叠加层的遮挡也是涉及时间上多个属性的时间交互。
各种常见技术涉及模糊效果和整个对象透明度的课程。使用户知道她正在操作的其他非主要上下文，即在主要对象层次结构“后”存在另一个世界。
模糊处理使设计人员可以补偿用户体验中的单个统一视野或“客观视野”。
原则10：视差
用户滚动时，在视觉平地中创建空间层次结构。
作为运动原理中的UX，“视差”描述了以不同速率移动的不同接口对象。
使用视差，用户可以在保持设计完整性的同时专注于主要动作和内容。在视差事件期间，背景元素会在用户的感知和认知上“消失”。设计人员可以使用Parallax将即时内容与周围或支持性内容分开。
图片来源：Austin Neill和Michael Sevilla
这对用户的影响是在交互作用期间清楚地定义各种对象关系。前景对象或移动“快速”的对象在用户面前显示为“更近”。同样，背景物体或“速度较慢”的物体也被认为是“距离较远”。
设计人员可以使用时间本身来创建这些关系，以告诉用户界面中的哪些对象具有更高的优先级。因此，有必要将背景或非交互元素进一步“退回”。
用户不仅会感觉界面对象现在具有超出视觉设计中确定的层次结构的层次，而且现在还可以利用此层次结构使用户在有意识地意识到设计/之前掌握用户体验的本质。内容。
原则11：维度
当新对象开始和离开时提供空间叙事框架。
对用户体验至关重要的是连续性现象以及位置感。
维度提供了一种强大的方式来克服平地非逻辑的用户体验。
人类非常善于使用空间框架在现实世界和数字体验中导航。提供空间起点和起点参考有助于增强用户在UX中位置的思维模型。
此外，“量纲性原理”克服了视觉平地中的分层悖论，在视觉平地中，缺乏深度的对象存在于同一平面上，但出现在其他对象的“前面”或“后面”。
维度以三种方式呈现：折纸维度，浮动维度和对象维度。
可以将折纸的维数视为“折叠”或“铰接”的三维界面对象。
折纸维度的例子（来源：Eddie Lobanovskiy，Virgil Pana）
由于将多个对象组合为“折纸”结构，即使在隐藏的对象不可见的情况下，它们在空间上仍可以说是“存在”的。这有效地将用户体验呈现为连续的空间事件，用户可以在交互模型本身以及界面对象本身的时间行为中导航并创建操作上下文。
浮动维度为接口对象提供了空间的起源和偏离，使交互模型具有直观性和高度叙述性。
浮动维数示例（来源：Virgil Pana）
在上面的示例中，尺寸是通过使用3D“卡片”来实现的。这提供了支持视觉设计的强大叙事框架。通过“翻转”卡片来扩展叙事，以访问其他内容和交互性。维数可以是一种以使突变最小化的方式引入新元素的有力方法。
对象尺寸会导致尺寸对象具有真实的深度和形式。
对象维数示例（来源：Issara Willenskomer，Creativedash）
此处，多个2D层在3D空间中排列以形成真实尺寸的对象。它们的维度是在实时和非实时过渡时刻显示的。对象维数的效用是用户基于不可见的空间位置发展出对对象效用的敏锐感知。
原则12：Dolly＆Zoom
导航界面对象和空间时，保留连续性和空间叙事。
多莉（Dolly）和变焦（Zoom）是电影概念，指的是与相机有关的对象的运动，并且图像本身在帧中的大小从远摄到近摄平滑地变化（反之亦然）。
在某些情况下，无法判断对象是否正在缩放，它是否正在朝3D空间中的相机移动或相机是否朝着3D空间中的对象移动（请参阅以下参考资料）。下面的三个示例说明了可能的情况。
图层是在摇动，缩放还是在移动相机？
因此，将“移动”和“缩放”的实例视为单独但相似的实例是适当的，因为它们涉及连续的元素和风景变换，并且满足运动原理中用户体验的要求：它们通过运动支持可用性。
左边的两个图像是可笑的，而右边的图像正在缩放
多莉（Dolly）是一个电影术语，适用于朝向或远离对象的相机运动（它也适用于水平“跟踪”运动，但在可用性方面不太重要）。
信用：苹果
在UX中，在空间上，此运动可能表示观看者视角的更改，也可能是指在对象更改位置时保持静态的视角。多莉原理通过连续性和叙述性，接口对象和目标之间的无缝过渡来支持可用性。多莉还可以结合“尺寸原则”，从而获得更多的空间体验，更多的深度，并向用户传达当前视图“在前”或“在后”的其他区域或内容。
缩放是指透视图或对象都没有在空间上移动，而是对象本身在缩放（或我们对其的视图在缩小，从而导致图像放大）的事件。这向查看者传达了其他接口对象位于其他对象或场景“内部”的信息。
信用：苹果
这允许支持可用性的无缝转换（实时和非实时）。当创建空间思维模型时，Dolly＆Zoom Principle中的这种无缝性非常强大。
如果您做到了这一点，那么恭喜！那是宣言的野兽。我希望所有的gif都为您加载，并且不会杀死您的浏览器。我也非常希望您能为自己获得一些价值，并在互动项目中获得一些新工具和杠杆作用。
我鼓励您更多地了解如何开始使用运动作为支持可用性的设计工具。
最终插件—如果您有兴趣让我为您的团队主持动议和可用性研讨会，请单击此处获取更多信息：https : //uxinmotion.net/creating-usability-with-motion-workshop/
若有收获，就点个赞吧
0 人点赞
