作者 / Shoko
编辑 / Pel
排版 / 小鱼
“ 或许今后会出现更多有趣的UI动效，它可以兼顾趣味性和交互性，给我们带来更多新奇的体验。”
上月， 苹果公司在新品发布会上公布了iPhone 14，新一代苹果手机提升了运算、摄影、通信等硬件性能，但对许多人来说，最大的惊喜莫过于其外观变化—— iPhone 14 Pro/Pro Max机型将用更小的灵动岛（摄像头开孔）取代 “刘海屏”（iPhone X开始沿用的屏幕顶部长条），不出意外的话，“灵动岛”将成为iPhone今后沿用数年的家族设计。
如“刘海屏”一样，灵动岛（Dynamic Island）在正式官宣后也很快获得了属于自己的外号“药丸屏”“感叹号屏”。虽然褒贬不一，但不管怎么说它确实如同一个 “ ! ”一般，在专业圈及大众心里炸开了一片涟漪。
灵动岛之所以如此备受关注，一方面也是因为 它不再仅仅是一个用来放置相机和传感器的储物空间，它摇身一变成了交互的主角。
长按灵动岛就可以开启/关闭扬声器和结束通话
显示地图导航情况
长按灵动岛就可以快进、暂停
灵动岛可以做的事情大致分为 “通知与提醒”“显示应用程序状态”“应用程序操作”三种。除此之外，iOS开发者 Christian Selig在其自身的App （Apollo）中设计了一款名为 「Dynamic Island Zoo」的插件，一个宛如拓麻歌子的小猫会在灵动岛上“生活”。
Dynamic Island Zoo
还有开发者将灵动岛作为障碍物，设计了一款名为 Hit The Island的打砖块游戏。虽然这些应用并没有什么实际功能，但如果说 屏幕显示区域内是一个虚拟世界，而摄像头等硬件是现实世界的话，灵动岛无疑打破了两个世界之间的隔阂。某种意义上倒是有种未来生活理念的雏形。
Hit The Island
另一方面，也有很多人认为灵动岛不过是用来弥补iPhone的硬件不足，又或者是安卓也存在类似的设计。
这篇文章中不会过多谈论硬件的问题，也不会下定论说苹果的设计有多完美。只是仅从设计上来说， 这未免不是UI设计师们在被动的条件下做出的带有一丝戏谑意味的尝试。
01
什么是UI动效
暂时撇开灵动岛的功能性，它在宣传片中最亮眼的无疑是其灵动的动画效果，接下来就让我们来了解一下UI和UI动效。
・UI（User Interface）
UI是“ 用户界面（User Interface）”的简称。“Interface”同样可以被译作“接口”，代表计算机和其外部设备之间的连接。因此 UI设计的本质是对用户和计算机之间的交互方式的优化。
人机交互的方式主要经历了以下三个阶段：
・命令行界面CLI（Command-line Interface）
命令行界面是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后予以执行。人们在使用过去的电脑时，就必须对着黑屏，一边输入指令一边操作系统，这需要相当高度的专门知识。
命令行界面
・图形用户界面GUI（Graphical User Interface）
原则：WYSIWYG（所见即所得，what you see is what you get）
图形用户界面，是指采用图形方式显示的计算机操作用户界面。与早期的命令行界面相比，它 降低了用户的操作负担。其次，图形界面对于新用户来说在视觉上更容易接受，学习成本大幅下降，也 让电脑的大众化得以实现。
图形用户界面
・自然用户界面NUI（Natural User Interface）
原则：WYDIWG（what you do is what you get）。
自然用户界面是指一类无形且直观的用户界面。“自然”一词是相对图形用户界面（GUI）而言的，GUI要求用户必须先学习软件开发者预先设置好的操作，而NUI只需要人们以 最自然的交流方式（如语言和文字）与机器互动。 我们如今所熟悉的触控屏幕就是一种自然用户界面。
人类从15万年前就开始使用手持工具，同时我们的手也进化出了更多能够支持精细动作的血管和神经。借用 詹姆斯·吉布森（James Jerome Gibson）有关生态心理学研究中的 “Affordance”这一概念，即 人类虽然会主观地去规划一个工具的使用方式，但工具本身其实也在向人类传递一种“如何被使用”的信息。书中提到一个例子是，当你看到一块路边的石头时，你不需要花时间去计算自己的身高，就可以本能地判断出你能否坐在上面。某种意义上，这块石头在此刻向你传递了一种“Affordance”：即它可以成为你的椅子。
直观功能（affordance），指物品在某个方面，能够让人明显知道该如何使用它的特性。人们得知如何使用物品有一部分来自认知心理学，另一部分来自物品的外形。
WWDC 2018 Designing Fluid Interface中也提到了相似的观点，简单来说，当人们觉得操作界面很流畅时他们会用各种形容词来形容这种感受（快fast、平滑smooth、流畅的fluid、自然的natural、神奇的magical）。而当他们觉得不流畅时，却很难用语言来描述，他们只会说“这感觉不对”。所以 只有当一个工具就仿佛是我们大脑的延伸时（An tool that feels like an extension of your mind），它才会显得很“流畅”。
WWDC:苹果全球开发者大会（Apple Worldwide Developers Conference）是苹果公司每年定期在美国加州举办的信息技术活动，该活动通常于加州圣何塞会议中心举行。
就如同石凳的例子一样，它不需要语言，就告诉了你它作为“椅子”的功能。通过对自然界诱导Affordance的反向利用 ，如果一个UI元素不需要语言 （教程）就能让你发现它的功能或使用方法，那它就是一个自然且优秀的设计。
而 真实世界中的所有行为都伴有动态，也就是说它不可能直接从状态A变为状态B，中间必然存在一个类似动画中间画（In-Between Animation）的过程。因此，近年来的UI设计不仅仅关注on与off两个状态的icon设计，更关注这两个状态之间的衔接，即——UI动效。
屏幕方向解锁动画：模拟了现实中开锁的旋转动作
・UI 动效(UI animation)
UI 动效 （UI animation）是一种向 UI 元素添加动态效果以增强产品交互性的形式。UX和UI 设计师通过动画（动态效果）在界面中引导用户，提醒用户状态的变化，指示元素之间的关系。
随着时间的推移，设计师们开始关注动画本身的功能性，将其从装饰物转变为可以增强用户体验的东西。 UI 动效发展的其中一个转折点是从线性运动转变为模拟真实世界（如速度、重力和重量）的运动。这种发展使我们拥有了如今生动有趣的 UI 动画。
如今最常见的 UI 动效类型往往分为以下四类：
微交互（Micro-interactions）、加载和进度条（Loading and progress）、导航（Navigation）、叙事和品牌（Storytelling and branding）
・微交互
微交互可能是最常见的 UI 动效类型，它通过可视化的动态效果来告知用户操作的成功与否。按下按钮、打开开关、“静音”状态图标——这些都是微动画的例子。
微交互
・加载和进度条
没有人喜欢等待的时间，尤其是在不清楚要等待多长时间的情况下。加载和进度条动画通过演示加载的过程或目前的进度，来帮助用户了解情况。
下载进度条
・导航
网站越复杂，导航设计就越为重要。PC端网页一般通过悬停动画、下拉菜单动画等来提示用户网站的架构。而手机网页或App则多数使用底部标签式导航栏及“汉堡包导航栏（hamburger menu）”。
汉堡包导航栏“≡”
・叙事和品牌
装饰性动画通常出现在欢迎界面上，它的形式相对较为自由，通过几秒钟的时间来加强品牌形象。
品牌动画
02
UI动效发展简史
・早期UI动效
・闪烁的光标 (1967）
闪烁的光标是 UI 动效的起源。最早出现于于命令行界面，一直沿用至今。
・Xerox Alto 施乐奥拓（1973）
由施乐生产、专供科研使用的Xerox Alto 是第一台支持图形用户界面的计算机，其中包括一个带有光标的可操作屏幕，为未来的UI动效奠定了基础。
・苹果公司Lisa（1980～）
1980 年代初期，GUI 上的第一个动效示例出现在苹果公司发布的 Lisa上。尽管这台电脑在 3 年内便停产，但它已然成为 UI 历史的里程碑。
Lisa 的动效主要是帮助用户浏览界面的微交互。
・单击文件、目录或应用程序时，光标会变成沙漏。
・提示现在所在的位置的滚动条动效。
・提示按钮可点击的悬停动效。
滚动条动效
光标变成沙漏
・Windows
另一方面，Windows 1 也具有像 Lisa 这样的微导航和微交互功能。Windows为 UI 动效演变带来最为显著进步的则是 Windows 3.1 的欢迎界面以及Windows XP的下载进度窗口。
Windows 3.1欢迎动画
Windows XP下载进度窗口(2001)
・近年iOS动效案例（2013～）
来到自然用户界面（NUI）的时代，iOS的几次重大变革一定程度上引领了UI动效风格的发展。下文，笔者就从近年iOS动效案例切入，谈谈NUI动效的几种效果——
・动效视觉中心
在iOS7中，苹果正式采用了被称为 集合视图转换（UI Collection View Transition Layout）的界面切换效果。此前的iOS系统都将屏幕中心或边缘作为视觉中心和动效基准点，而iOS7则将用户的操作点作为基准点。
最直观的例子，便是当我们从桌面打开应用&从应用退回桌面时，集合视图转换能使人明显感受到图标的“从哪来回哪去”。
iOS7的视觉中心为用户操作点
iOS7之前的视觉中心为屏幕中央
其意义在于进一步衔接用户操作与界面切换之间的过渡，引导用户在不同界面的切换过程中移动视觉 焦点。在过去的大多数界面切换动效中，用户不得不在每次界面切换完成后，再重新定位自己的视觉焦点。
・ 应用启动动效时长
iOS 7的应用启动动效设计中，动画时间比iOS 6多出了80%，且在速率曲线上也有较大的差异。下图中的X轴代表动效的时长，Y轴则代表了运动的速率。可以看出iOS 6的动效从开始至结束，其加速和减速都是较为平均的。而在iOS 7中，动效以更高的加速度开始，到达极速后以非常平缓的减速直至结束。
应用启动速率图
虽然iOS6和iOS7使用的都是缓入缓出（Ease-in-ease-out），但iOS6以同步的加速度进行缓入和缓出，而引入了扁平化设计的iOS 7则采用了“更快地缓入、更慢地缓出”。
WWDC 2018 Designing Fluid Interfaces中也有提到交互体验的本质是响应（Response），前期更快的加速度可以让用户感受到手机理解了自己的意图。而用户本身就需要一段缓冲时间来思考下一步的操作，因此将后期动画的速度减缓正好提供给用户重新定位、思考下一步操作的时间。
・空间一致性
现实生活中我们会感受到物体通常以相同的路径出现和消失。也就是说当我们看到一个物体被另一个遮蔽物遮挡后，我们不会认为该物体凭空消失了，而是会觉得它依然存在于遮蔽物后。如果该物体从另一地方突然出现，那就会有一种魔术感。
WWDC 2018 Designing Fluid Interfaces中也提到，当新页面是通过向左划动出现，那么当我们要返回上一页时就应该向右划动。手机的界面同时也是一个画框（遮蔽物），我们从哪里拿来的东西就该放到哪里去。因此只有和我们在物理世界的理解相匹配的UI设计才会让人感到流畅自然。
页面从哪里出现就将回到哪里
・ 动态运动
我们的思维和身体总是处于运动状态，所以只有当界面保持动态才能让它显得更加真实。现在在UI设计中使用的动画主要有两种形式：定时动画（Timed animations）和动态运动（Dynamic motion）。
有关前者，当用户轻触屏幕后，动画的控制权就将完全交给设计师。设计师将在规定的时间中设计动画内容，当动画完成后再将控制权再交还给用户。
定时动画
而如果要设计一个流畅的UI，则需要让用户从设计师手中拿走对动效的控制权，让动态行为（Dynamic Behaviors）和交互（Interaction）同步进行。在下一部分，让我们来看看UI设计师是如何从角色动画中吸取经验的。
动态运动
03
UI动画和角色动画的异同
1981 年，迪士尼动画师 Ollie Johnston和 Frank Tomas撰写了 《生命的幻象》 （The Illusion of Life: Disney Animation），其中概述了动画的 12 条核心原则。
虽说这些原则原本是用来说明卡通角色动画的，但其本质同样是将现实世界的运动规律进行归纳、简化抑或是夸张化，在这一点上来看与UI动画非常相似。实际上WWDC上提到的一些观点也与动画12原则有着极大的共通点。
・缓入缓出 Slow In and Slow Out
角色动画中，人物及大部分的其他物件在一段“静止-运动-静止”的过程中都需要时间去加速和减速，即所有的动作都是缓慢地开始-加速-缓慢地完成。当然这样的运动不包括自由落体等。
动画中的缓入缓出
另一方面，WWDC上首先提到了 无缝运动（seamless motion）的概念。无缝运动让人觉得运动仿佛是物体自身的延伸一般自然。
以汽车的运动为例，最前端的位置曲线是一条向斜上方延展的直线，这代表汽车正在匀速行驶。而当踩了刹车后，线条就开始光滑得弯曲。当汽车趋于停止时，线条变成一条几乎水平的线。整条位置曲线的变化都是光滑，这就是无缝运动。早期的iPhone便已经在滑动中引入了无缝运动。
现实中汽车的刹车过程
滑动中的无缝运动
・ 跟随动作与重叠动作 Follow Through and Overlapping Action
“跟随与重叠”指的是当主体停止运动时，其身上的一部分部件会继续运动。并且这些部件会超过主体停止的位置，在振动中不断减幅。这样的跟随与重叠给角色增加了真实感。
动画中的跟随与重叠
同样，UI动效设计中也存在有关弹性的概念。例如滑动到页面顶端或底端时，就会出现一种仿佛被弹簧拉回来一般的弹性运动。
带有弹性的页面
iOS设计师们认为，引入过多不必要的运动反而会给用户带来困扰。因此他们定义， 只有当交互手势本身带有动量时，才会设计一些弹性效果。
他们还对弹性运动做了简化，只保留两个参数：阻尼（Damping）和响应速度（Response）。阻尼为100%时就不会出现过冲（overshoot），这里的“过冲”与“跟随与重叠”含义相近。
音乐App便是一个很好的例子。打开App时使用的手势是轻触，这一手势不含有让元件移动的动量，因此不需要弹性。
轻触手势不带有弹性
而当离开App时需要一个轻扫的动作，他们在这里添加了80%的阻尼，增加了弹性和挤压。轻扫的手势本来就是一个带有方向性的移动，因此如果此时的动效不带有一定弹性的话反而会显得不自然。
轻扫手势带有弹性
弹性运动的另一个应用是在iphoneX引入的手电筒和照相机按钮。为了防止误触，打开这个开关需要用力地长按。而当你只是轻触时，按钮会弹跳一下来回应你：它感应到了你的操作，但是你的手势是错误的。
手势不正确时，会有一个弹跳动效
・ 挤压和拉伸 Squash and Stretch
“挤压和拉伸”是角色动画中非常重要的原则，这个原则的目的是赋予物体重量感和灵活感。这个原则可以运用于简单的物体，例如一个反弹的球，也可以运用于人脸的肌肉运动。
同样，UI动效中也会使用动态模糊（Motion Blur）和运动拉伸（Motion Stretch）的方式，在一段运动的中间帧加入更多信息。
在我们打开和关闭App时，除了界面的放大缩小，其实还存在一些额外的挤压拉伸要素。这些效果使整个动效看起来更流畅自然。
关闭App时的挤压
・ UI动画和角色动画的异同
除了上述三个较为重要的共同点之外，UI动效也存在“ 预备动作（Anticipation）”，主要体现在鼠标悬停时的动效变化上。一些简单的跳动动效也可以归为“ 次要动作（Secondary Action）”。
可以看出，角色动画和UI动画在设计时都会借鉴现实世界，设计师们将现实世界的运动规律进行归纳、简化，以追求逼真感。同时他们也会增加一些夸张而有趣的设计，以追求虚拟感。 不管是角色动画还是UI界面，人们总是会对亦真亦幻的世界感到兴奋。
当然，角色动画和UI动效在功能性上有着本质区别。角色动画正是前文所说的， 观众将所有对动画的控制权交给导演的动画类型。此时动画内部与观众处于两个维度，导演只需要考虑如何呈现动画内部即可。而 UI动效的本质是响应，只有当页面的大小、颜色、位置发生改变时，用户才知道自己的操作是有效的。而流畅的动效设计可以让这些改变看起来更自然。
灵动岛
某种意义上，游戏动效可能正好介于角色动画和UI动效之间。游戏中的人物比界面中的按钮要包含更多的个性，但被用户所控制这一点却是相同的。而文章开头所提到的“灵动岛”或许恰好拥有一些“游戏”感，它或许不一定那么实用，却十分有趣。随着硬件设备的提升，或许今后会出现更多有趣的UI动效，它可以兼顾趣味性和交互性，给我们带来更多新奇的体验。
参考资料
2. Jaye Hannah，UI Animation: A Complete Guide For Beginners
3. Editorial Aela，Animation in UI: How to Create Motion Design
— 点击图片阅读更多精彩内容 —
国际动画与数字艺术大会，投出你的论文
神仙日常《非人哉》背后的神仙团队
松本大洋漫画《竹光侍》重磅引进
