SiS001! Board - [第一会所关闭注册]

标题: [资讯] 【详解】为什么苹果 iOS 是目前最流畅的手机系统？（上） [打印本页]

作者: asd7624 时间: 2020-6-6 16:04 标题: 【详解】为什么苹果 iOS 是目前最流畅的手机系统？（上）

— 写在前面 —

首先说声抱歉，我不应该在标题里使用"最"字。

本帖并不想吹苹果 iOS 相比安卓有多好，而是使用 iOS 为例子，谈一谈对于手机系统而言，何谓流畅。为了直观的展示 iOS 的动画效果，本帖使用了不少动图，加载需要时间，我在这儿提前感谢各位读者的耐心等待🙏。

近几年来，随着国内手机品牌如华为、小米日渐成熟，开发者们设计系统不再一味追求功能强大，而开始在审美、交互以及过渡动画上下功夫。得"益"于厂商们大力度地营销，就算是不太关心数码的吃瓜网友，对"非线性动画" "高刷新率"等名词也有所耳闻；但也正因为营销，没有深入了解过手机系统的用户，甚至一些数码博主，开始把"非线性动画"和"流畅"划等号，引发无数"骂战"。

何谓流畅？这个概念就和"全面屏"一样，我们可以感性地将"全面屏"定义为"好像手里握着一块玻璃"，但很难给予一个量化的描述。我说苹果 iOS 比华为 EMUI 流畅，如果单单是"凭感觉"，那评论区免不了用户们各执一词的互喷，而厂商也无法从批评中学到任何东西。

本帖参考了WWDC2018 的相关演讲，试图从三个维度衡量手机系统的流畅度：

1. 动画设计：同为非线性，同为 60 帧，为什么动画的观感有差异？

2. 交互方式：全面屏时代，手势操作和 Home 键 / 三大金刚键有何区别？

3. 符合直觉：过分华丽的动画使人眼花，如何兼顾观感和用户体验？

Part One.⎡动画设计：拟物，可不止图标⎦

我们知道，在手机屏幕里飞来飞去的 App，并不是真的在手机里运动，而是手机系统在短时间内展示多张不同的图像，让观者产生"它在运动"的错觉。连续播放的静止画面肉眼的视觉残像，"动画"就产生了。

▼ 动图，翻书动画

在固定时间内，一段动画展示的静止画面越多，它造成的肉眼错觉就越强，对观者而言就越流畅。我们把 1 秒内播放的画面数量称为"帧率"，主流显示器的 60 帧，即指"1 秒内展示 60 个画面"来构成动画效果。那么两段帧率相同的动画，它们带给观者的流畅感是相同的吗？请看下面的例子。

▼ 动图，两个以不同速度运动的小球

尽管两个小球的帧率相同，速度较慢的小球，其轨迹与动效都十分细腻；而速度较快的小球，则在运动时产生了割裂感，好像是一顿一顿地前进。这是为什么？当我们记录下小球经过的各个位置，背后的原因就显现了。

速度快的小球，两帧之间的变化太大，球的残像甚至不重叠，对眼睛而言就像跳跃一样；而速度慢的小球，两帧之间的变化较小，对眼睛而言更加舒适。

手机动画自然没有小球来回运动这么简单，但想让动画流畅，原理是不变的：帧与帧之间的变化不能太大，否则同样的帧率，你的动画就会变卡。以主屏幕打开 App 的缩放动画为例，各位觉得哪个更流畅？

▼ 动图，两种 IT 之家的打开动画

• 第一种动画将 App 窗口变形成桌面图标的大小，然后展开成完整的 App 窗口；

• 第二种动画维持 App 窗口的原始比例，逐渐从小窗变成大窗。

动画一虽华丽但卡顿，动画二虽普通但流畅，理由同上：直接从图标大小展开成完整窗口，每帧之间的变化太大，有割裂感。从系统设计的角度出发，显然动画一是符合需求的（许多安卓 OS 用的就是它），毕竟 App 图标是正方形且面积小，手机屏幕是长方形且面积大，画面变形、大小剧变似乎是不可避免的问题。我们看看苹果 iOS 是如何处理该动画的：

第一步，App 的图标会变形成与 iPhone 屏幕长宽比相近的长方形。

值得注意的是，图标的变形并不是简单的拉伸，而是给原图标添加"下巴"以调整长宽比。若是直接把图标拉成长方形，则会变得很丑。

▼ 某 UI 简单粗暴地图标拉伸

▼ 苹果 iOS 会给非纯色的图标加入匹配的"下巴"

第二步，因为 App 图标已经变形，App 界面能以原始长宽比逐渐显示在图标之上。

▼ 当 App 窗口完全显示时，其面积已经充斥 1/4 屏幕了，因此之后的缩放不会因为变化率太大而产生割裂感。为了让 App 窗口尽量大些，苹果还用一个遮罩隐藏了部分内容，使得窗口实际大小比看到的还大。

第三步，App 窗口完全填充手机屏幕。除了 App 内容在慢慢放大外，遮挡窗口的遮罩也在不断拉长，逐渐显示出完整的 App。一切，都是为了让帧与帧间的变化不至于太大，最后造就细腻的动画。

仅是如此，iOS 的动画只能算"精致"，还算不上"流畅"。我们来回顾下"非线性动画"的概念。这里使用高中物理课常用的"位置 — 时间"图象，即 x-t 图，来直观展示线性的"线"究竟指什么：

• 1 号是一条逐渐趋于水平的曲线，代表物体做减速运动，到达终点时速度刚好为零；

• 2 号是一条折线，代表物体先做匀速直线运动，到达终点时速度突然归零。

我们称第 1 种运动是"非线性"的，因为它在"位置 — 时间"图中并非直线，而是连续变化的曲线。祸害无数学子的数学家莱布尼茨说过（虽然是错误的🙅‍♂️）：

大自然没有跳跃。
Nature Does Not Make Jumps.
显然，线性运动在现实情况下不可能实现，折线的弯折处实际上还是曲线，因为速度减到 0，无论如何是一个渐变的过程。但在代码构成的电子设备中，线性运动是可以实现的，而且在安卓 OS 的动画中广泛存在。打开一个 App，图标以匀速直线运动放大，然后运动突然停止，十分生硬。

问题是，只要是曲线，我们都称为"非线性"运动，但曲线的类型是无穷无尽的，合适的曲线造就完美的动画，怪异的曲线还不如直线。

苹果是如何设计非线性动画的曲线的？iOS 从拟物发迹，之后经历了扁平化的洗礼，似乎与拟物渐行渐远。但是，iOS 的动画却从未离开过现实中的物体，所有动画曲线都使用了"弹簧"这一物理模型作为参照，通过"弹力"让手机系统变得流畅。

• 弹簧的运动端是将要运动的物体；

• 弹簧的固定端是物体运动的终点；

• 整个弹簧系统处在水平面上；

通过调节弹簧的松紧程度、物体的质量以及系统中的阻力，我们能得到无数种运动曲线，但每一种都不违和：因为它们都遵守着同一条物理法则（胡克定律），且完全符合人类在现实生活中培养起来的物理直觉。

▼ 设置阻力为极大，物体运动到终点即停止，不会来回弹；

▼ 设置阻力为极小，物体到达终点后会过冲，并处在震荡之中；

这些个"弹簧"具体对应了苹果 iOS 的哪些动画呢？（大量动图预警⚠️）

首先是主屏幕与系统：

▼ 轻轻返回主屏幕

▼ 用力返回主屏幕

▼ 系统中几乎所有可交互的元素都有弹性

得益于苹果严苛而统一的设计语言，"弹簧"动画也充斥着第三方 App。所有 iOS 的列表都自带弹力，很直观的反映了"列表已到头"的讯息：

用心的开发者也会调用 iOS 的动画 API，打磨 App 的细节：

▼ 轻轻下拉菜单

▼ 用力下拉菜单

讲到这儿，我相信各位对"流畅"有了更深的理解。帧率越高，系统就越流畅？并不，这要看你在每一帧画面中填充了什么内容；动画越花，系统就越流畅？并不，这取决于你的运动轨迹是如何设计的。苹果 iOS 的动画看似复杂，其实仅仅遵循着现实生活中最简单的原理：弹性。通过胡克定律，iOS 将各种动效整合在一起，既融入了系统，也融入了第三方 App 开发的准则中，使用户体验连贯一致。这正应了苹果首席设计师乔纳森的那句话：

真正的简约绝不是删繁就简，而是在纷繁中建立秩序。
True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.

作者: 2507592426 时间: 2020-6-7 15:23

感觉ios流畅，除了系统本身，就是其过渡动画做的真的很好，很讨好眼睛，安卓目前的主流旗舰机型都很流畅，但是过渡动画没有ios那么顺眼，用户会觉得比较突兀。

欢迎光临 SiS001! Board - [第一会所关闭注册] (https://cn.1huisuo.com/luntan/)