作为一名UX设计师，在分析UI动效的可用性时，你可能有三个需要修炼的地方。
- 静态
你已经训练了你的大脑多年来将设计视为不动的东西。在这篇文章中，我将帮助你训练你的大脑，看看设计是否及时发生。
- 时间
真正好的基于动作的交互很快发生。它们的设计完美无缝。很难发现动效原理中五个同时起作用的UX在半秒内发挥作用。
- 理论
你缺乏基本的理论，让你去理解你所看到的动效。你可以克服第一和第二个问题，但除非你积累到足够的理论知识，否则你会做的很困难。
让我们分析一下这个案例！
在本文中我将通过在动效原理中使用以下用户体验来提醒您注意通过运动创建可用性的五种方式：视差，遮蔽，偏移和延迟，叠加和缓动。可以说有更多的原则在起作用，但就目前而言，我们将专注于这五个原则。
修炼之一（静态）
在某些方面，分析动效的可用性涉及很多假象而不是我们所看到的。原因是人眼完全被各种各样的东西劫持了。颜色，面孔，形状，对比度，裸露的皮肤，是的为了“正确地阅读动效”，你需要开始训练你的眼睛而不是分散你的大脑（我的意思是 - 你的眼睛只是一个传感器官，它没有做任何'思考'）。通过循环动画通常需要大约10个周期，但最终你可以掌握它。
01培养“设计盲目性”
我认为这个过程是培养“设计盲目性”。这有点像' 鼻子失明 ' 在这种情况下，“设计失明”是一件好事，因为它可以让你看到除设计之外的所有东西，让动作保持不变。由于“设计失明”，因为你正在为你的眼睛和大脑提供同样的环境刺激，最终你的大脑会变得安静，你将不再被你不想关注的东西劫持，就像视觉设计本身一样。
02基于动效的用户体验，将动作循环
现在你可以开始对这个动效敏感。忘记所有元素，颜色，字体，面孔，形状等。只允许你的思想受到动作本身的刺激。现在，您可以开始感受到动效对您的影响。这可能需要一些时间在脑海中练习想象基于动效的用户体验，将动作循环数百次。亲爱的读者，凭借我坚定而温柔的手，你应该能够比我更快地选择它。
我倾向于认为动效产生的可用性就好像它是音乐一样。这意味着与任何音乐一样，您可以沉浸在声音的整个景观中，或者您可以退后一步，聆听各种乐器，旋律和节奏的共同作用。这可以是那样的。
修炼之二（时间）
第二个点（时间）相当容易克服。因为运动发生在一秒钟之内，我发现它有时（虽然不总是）减慢速度。我只需将gif保存到桌面，将其加载到After Effects或Quicktime之类的内容中，然后逐帧完成。这可以产生双重效果，即看到正在发生的事情，并重新获得一些理智。
修炼之三（理论）
现在我会让它变得更加容易。我们将移动用户体验的12条原则中分离出动效原理中的五个动效原则，因此您可以将它们视为动效场景中的独立的个体。
视差
我注意到通过运动创建可用性的第一种方法之一是卡内部的视差。视差原则具有认知地“推回”所选元素的效果，同时认知地“拉动”其他所选元素。在这个例子中，使用Parallax非常有效地定义时间层次。
image
02遮蔽
动效产生可用性的第二种方式是通过遮蔽原理。遮蔽创建对象连续性意味着对象的效用不断地从一个状态流向另一个状态，从而创建一个简单，干净的叙述。在此示例中，卡背景无缝转换为标题图像。
image
03偏移&延迟和叠加
我注意到动效创建可用性的第三种方式是通过UX in Motion原理的Offset＆Delay和Overlay。正如我之前提到的，支持可用性的机会通常可以重叠并同时和协同使用。就是这种情况。Offset＆Delay的用途是及时定义对象关系。“建立在”方法告诉我们，新对象是分开的，增强了视觉效果。Overlay的使用为用户提供了场景中的空间关系感，以及视觉平地悖论中的“排序”。
04缓动
第四个（或者它是第五个？）方式我注意到运动创造可用性是通过实现期望。使用缓动，对象以或多或少的无缝方式转换。请注意“缓和”以及它如何具有“减缓”交互的微妙效果。人们必须始终小心使用缓入。宽松应始终保持干净，清爽和活泼。一个好的经验法则是“快但不太快”。如果在观看了一千次的互动之后，它开始感觉头发很慢，我会减掉额外的时间。
感谢观看，希望您在阅读中能有所收获！
关注peopeo，获取更多设计知识。
网友评论