火星网校
场景与体验 | 为啥那些交互动画如此“丝滑”
发布时间：2024-03-13 11:06:27 浏览量：166次
01
写在前面
我们的世界是一个运动的世界。即使在静止的时候，树叶也会颤抖，肺部也会扩张。在数字产品设计领域，运动似乎是第二天性，是日常生活的延伸，而数字产品动画设计离不开日常生活的灵感。
交互动画对数字产品的用户体验有着深刻的影响，在用户界面体验中，动作不仅仅是一个视觉装饰；它更能够促进用户对产品的参与，扩大设计交流的范围。
从理论上讲，移动UI元素很容易，只需要利用软件定义路径的起始点，但只是单纯的这样设置，你会发现，效果很“死板”，僵硬。在现实中，情况并非如此。工具和技术是必不可少的，但它们的动作需要一些日常生活的参考，如果移动是为了提高数字产品的可用性，它必须建立在适用于各种各样的使用案例的不变的行为规则的基础上。
02
写关于运动设计的起源
动画设计和用户体验的结合相对较新，其根源是迪士尼。弗兰克·托马斯(Frank Thomas)和奥利·约翰斯顿(Ollie Johnston)是华特迪士尼最受重视的动画师，也是《匹诺曹》(Pinnochio)、《小鹿斑比》(Bambi)和《幻想曲》(Fantasia)等经典作品的重要贡献者。他们的12个动画基本原则对电影、电视和数字内容的动态图形产生深刻影响。
迪士尼原理是为了讲故事而提炼出物理运动的基本法则。使绘制的角色通过移动表达情感，使故事生动活泼，但不能充分满足现代数字产品对交互动画的需求。
动画专家Jorge R. Canedo Estrada根据迪士尼动画原理改编了《动作设计的10个原则》。然而，如果要将这些经验全面应用于数字产品设计，还是需要进行深入研究。
（动作设计的10个原则，来源：Jorge R. Canedo Estrada）
·首先要明白
运动设计不仅仅是装饰，而是行为，行为只能帮助或阻碍用户体验。与UI动效不同的是，UI动效装饰性更强一些。
下面我将用一些案例，去深入理解分析交互动画的原理及原则
03
写交互动画设计分为两种基本交互：实时与非实时
·实时交互
实时交互：运动行为会立即响应用户输入
当用户在屏幕上操纵UI元素时，实时交互可提供即时反馈。换句话说，动作行为会立即响应用户操作。
（图片来源于：Stan Yakusevich）
·非实时交互
在用户操作之后发生非实时交互，用户操作后，暂停操作并观察所产生的动作行为，确认后才能继续。
（图片来源于 Vitaly Rubtsov）
一、缓和
缓和模仿现实对象随时间加速和减速的方式。它适用于所有显示运动的UI元素。
卡片和相应的椅子迅速移动，但由于放松，它们变得平稳和可控制的停止。
（图片来源于：Saptarshi Prakash）
二、偏移和延迟
这个加密货币界面一次引入了多个UI元素。它们的到来有点交错，以通知用户元素是相关的，但又是不同的，当多个UI元素同时并快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素可能具有其自身功能的可能性。
偏移和延迟会在同时移动的UI元素之间创建层次结构，并传达它们相关但又不同的信息。元素的时序，速度和间距不是完全同步，而是交错排列，从而产生微妙的“一个接一个”的效果。
当用户在屏幕之间漫游时，偏移和延迟表明存在多个交互选项。
（图片来源于：Gapsy Studio）
三、链接
在此，蓝色滑块的位置控制背景遮罩的不透明度，灯泡周围的发光效果的散布以及光强标度的数值，将一个UI元素的属性链接到其他UI元素的属性。当父元素中的属性更改时，子元素的链接属性也会更改。所有元素属性可以相互链接。
例如，父元素的位置可以绑定到子元素的比例。当父元素移动时，子元素的大小会增加或减小。
UI元素之间创建关系，建立层次结构，并允许多个元素立即与用户通信。因此，链接在实时交互中使用时影响最大。
（图片来源于：Ayoub Kada）
四、转换
转换表示下载的开始，中间和完成，当一个UI元素变成另一个UI元素时，将发生转换。例如，下载按钮转换为进度条，转换为完成图标。
从UX的角度来看，转换是一种向用户显示其相对于目标的状态的有效方法。非常适用于当UI元素之间的进度链接到带有开始和结束的过程（例如，下载文件）时。
（图片来源于：Aaron Iker）
五、数值变化
在数字界面中，值表示（数字，基于文本或图形的表示），经常出现在从银行应用程序、个人日历、电子商务站点的产品中。这些数值表示与实际存在的数据集相关，因此它们会时常发生变化。
值的变化传达了数据表示的动态性质，并告知用户数据是交互式的，并且可能会受到一定程度的影响。当没有变动的引入值时，用户参与数据的意愿会大大降低。
（图片来源于：Taras Migulko）
六、遮罩
遮罩是UI元素各部分的战略性揭示和隐藏。通过更改元素外围的形状和比例，遮罩发出信号，指示发生变化，同时允许元素本身保持可识别性。因此，理想的选择是像照片和插图这样的详细视觉效果。
从可用性的角度来看，设计人员可以实施屏蔽以向用户显示他们正在通过一系列交互进行中。
（图片来源于：SELECTO）
七.克隆
克隆是一种运动行为，其中一个UI元素拆分为其他元素。这是突出显示重要信息或交互选项的明智方法。
当UI元素在界面中实现时，它们需要一个清晰的起点来链接到屏幕上已经存在的元素。如果元素只是无处不在而突然爆发或消失，用户会缺乏自信进行交互。
（图片来源于：Ariuka）
八、隐晦
想象磨砂玻璃门。它需要交互才能打开，但是可以隐约看到门里面的动静，同样的，在数字界面中可以在某种程度上，辨别另一面正在等待什么。
(图片来源于Kyle Abarquez)
九、视差
当两个（或多个）UI元素同时移动但速度不同时，将显示视差。目的是建立层次结构。
交互式元素移动速度更快，并显示在前景中；
非交互式元素移动速度变慢并退回到背景。
视差引导用户使用交互式UI元素，同时允许非交互式元素保留在屏幕上并保持设计统一性。
(图片来源于：Tubik)
十、维度
维度使UI元素似乎具有多个交互层面，就像物理世界中的对象一样。通过使元素看起来像是可折叠的，可翻转的，浮动的或具有逼真的深度属性而实现的。
维度意味着UI元素的不同层面被链接在一起，并实现了无缝的屏幕过渡。
（图片来源于：Sang Nguyen）
十一、推拉和缩放
“推拉”和“缩放”允许用户在空间上“旅行”UI元素或增加其比例以显示更多的细节。
推拉
推拉：当用户的视角靠近（或远离）UI元素时，会发生推拉。想象一下，一个人拿着相机走向一朵花，想近距离拍摄。
（图片来源于：Yanosh）
缩放
用户的视角无法靠近图像，而是增加了图像的比例。通过缩放，用户的视角和UI元素保持不变，但是元素在用户屏幕中的大小增加（或缩小）。现在想象一下，这个人呆在原地，用相机的变焦功能使画面显得更大。
(图片来源于：Victor Aldabalde)
04
交互动画就是交流
互动体验的需求在于轻快和微妙的形式，当动画遵循日常生活规律时，即使是最基本的UI元素也会成为人机交互的重要媒介，那当这些原则被忽视时，无法体现出自然界的特征，也就没有任何美感
最后的唠叨
交互动画设计与数字产品用户体验的关系正在迅速成熟。有原则的交互动画方法可以防止对趋势、工具和技术的短暂效用的过度依赖。更好的是，它跨越了2D屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。
作者:郭然然
来源:微信公众号:58UXD
出处
:https://mp.weixin.qq.com/s/do477HdcqT4IqUcqAS9KaQ
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
大家今天走运了,我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。想做一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的...
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
最新文章
