大家好,我是Clippp,今天分享文章是「动效」设计。动效在品设计扮演着要色,它好坏与否接影响了用户使用体验。
效对产的可性体验有多维的影响。在界面中效仅仅是一种视觉,它够升产的参与并扩展交流的范围。
本文追根溯源,先从动效的起源讲起,一步步推进产品、体验之间的关系,最后通过案例析动效计的理和应用。一起来吧~
动效用户体验的结相对较新,其根源是迪士尼动画计的十二个条基本理。迪士尼动画理是为了讲故事而提炼出的基本的物理运动规律。这些理能让绘制的卡通角色移动和表演,但不能充足现代UI界面的交互需求。
了弥合这差距,动效专家Canedo Estrada改编的《动效设的10条原理》合应用到数字产品设中。
终极指南!超全面的UI动效基本规则总结
画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为效而显得更连贯,交互的上逻辑因为效的持而更清晰。
阅读章 >>
围绕界面元素建立用户体验时,重新动效原理的关键于:
- 将动效计UI动画开;
- 阐明动效如何帮可用性;
- 开核心动效的内部工机。
在讨论动效计的理之前,重要的是要调动效不仅仅是装饰,而是一种用来帮助用户体验的行为。动效计涉及种基本的交互类型:实和非实。
1. 实
当用户在屏幕上点击UI素,实交互提供即反馈,会对用户的操作做出即响应。
2. 非实时
非实时交互发生在户操作后,这意味着户需要经过短暂的转场才看到结果,然后再继续。
另外效设计通过种同的方式来升产的可性:
- 期望:用户与界交互时,他们期望看到哪些为?动效是否符合预期或引起混乱?
- 连续性:交互在整个体验中是否发生一致的行为?
- 叙述:触发的动作是否足用户图的事件的逻辑进程相关?
- 关系:UI界面的空间、学层级结构如何相互关联并影响用户的决策?动效如何影响各种元素的关系?
这里供12种效设计原的解析,每一种对应同的案例,从更直观的角来解读抽象的原。
1. 缓(Easing)
缓效果模拟了现实世界中对象随时间速或减速的方式。它适于有的UI元素。图中的卡片和对应的椅子移速很快,但由于缓效果它们可平稳地受到控制。
2. 偏移和延迟(Offset & Delay)
多个UI元素时快速移动时,用户倾于将它们组合在起,而忽略了个元素自身功能性。
偏移和延迟会在移的UI元素之间创建层级结构,并传达它们相但又同的消息。元素的时间、速和间距是全同步的,而是交错列从而产生一种微妙的“一个接一个”的效果。
当用户在屏幕之间穿梭,偏移和延迟表存在多个交互选项。
3. 父子系(Parenting)
父子系将一个元素的属性链接到他元素中。当父元素中的属性更改时,子元素的链接属性会更改,同时有元素的属性都可相互链接。
在下图中,将父素(蓝色滑块)的位置素(灯泡发光效果&光照度)相关。当父素左右移动,素的发光效果的范围和光照度的数值会发生变化。
父关系在素间创建关系并建立层结构,允许多个素同用户交互。因此这种效果非常适用于实交互中。
4. 转换(Transformation)
当一种UI素变成另一种形式就会发生转换。例如,转换展示了下载的开始、中间和完成状——下载按钮转换为进度条,进度条转换为完成图标。
从UX角度,转换效果告知用户素的状发生了变化并将息传递给用户,提高了用户的认知度。
5. 数值变化(Value Change)
数值的变化(数字、文本或图形)在数字界面中非常丰,从银行APP日历商网站的各种产品中都会出现。
在某种程度上,数据的动表达和交流可能会对数据的价值产生响。例如下图中的数值被动引入,向用户显示有能力响数据,提升了参活动的愿。
6. 遮罩(Masking)
遮罩是对界面上的部内容进行战略性的显示和隐藏。通过改变素的形状和比例,在改变素效果的同允许素本身保持可识别性。因此,照片和插图等视觉形式是理想的选择。
从可用性的角度看,设师可以通过遮罩向用户展示产品行一系列的交互。
7. 覆盖(Overlay)
二维空间中没有深度,素只能沿X或Y轴移动,叠加在界面中创造出前景/背景相的位置关系。通过模拟深度,覆盖可以根据用户的需要隐藏和显示素。
使用覆盖时,信息层级结构重的考虑因素。例如,用户笔记应用中首先应该看到的笔记列表,然后使用覆盖显示每笔记的辅选项,如删除或归档。
8. 克(Cloning)
克是将现有的对象拆成新对象,这是一种突出显示重要息或交互选项的方法。通过克将素界面相链,如果素只是突然出现或消失没有关性,那用户将缺乏心去交互。
9. 模糊(Obscuration)
想象一扇磨砂玻璃门,虽然看清门后的东西但是我们察觉到门后事物的存在。
模糊的工作理是一的。它为用户提供提示,让用户识正在操作的界面之后还有其的层结构。导航菜、密码屏幕和文件窗是常见的示例。
10. 视差(Parallax)
当两个(或更多)元素同时同的速移时会构成视差效果。视差的要目的是划分层级结构:
- 可交互元素移动速度更快,出现在前景;
- 非交互式元素移速较慢,退到背景中。
视差引导用户点击互的元素,同时允许非互的元素留在屏幕上并持设计的统一。
11. 度(Dimensionality)
度使界面元素具备具个方向的互,种行为是使元素看来是折叠、翻转、浮动的或具有深度。
为一种叙述工具,度意味着元素的不同面是相互联系的,并且以现无缝的屏幕渡。
12. 平移与缩放(Dolly & Zoom)
平移与缩放通视角的变化能产生更空间上的验,逐级递进显示更高级别的细节。
平移:击元素后发生距离远近平移,用户视会越来越接近图像。(个拿着照相走到朵花前近距离摄)
缩放:用户视与图像距离保持不变,图像在屏幕比例会增加。(这个站在原地不动,利用相变焦功能使花显更大)
互动验要求动效具备敏捷和微妙的形式。
坚持动效设计原理,即使最基本界元素也能成为交流复杂媒介。动效设计与品用户体验关系正在迅速成熟,而动效跨越了维屏幕上元素抽象运动和3D世界运动感知鸿沟~
章很长,感谢看到最后~希望章够你有收获!
欢迎关注作者公众号:「Clip计夹」