— 写在前面 —
首先说声抱歉，我不应该在标题里使用"最"字。
[color=transparent]本帖并不想吹苹果 iOS 相比安卓有多好，而是使用 iOS 为例子，谈一谈对于手机系统而言，何谓流畅。[color=transparent]为了直观的展示 iOS 的动画效果，本帖使用了不少动图，加载需要时间，[color=transparent]我在这儿提前感谢各位读者的耐心等待🙏。
近几年来，随着国内手机品牌如华为、小米日渐成熟，开发者们设计系统不再一味追求功能强大，而开始在审美、交互以及过渡动画上下功夫。得"益"于厂商们大力度地营销，就算是不太关心数码的吃瓜网友，对"非线性动画" "高刷新率"等名词也有所耳闻；但也正因为营销，没有深入了解过手机系统的用户，甚至一些数码博主，开始把"非线性动画"和"流畅"划等号，引发无数"骂战"。


何谓流畅？这个概念就和"全面屏"一样，我们可以感性地将"全面屏"定义为"好像手里握着一块玻璃"，但很难给予一个量化的描述。我说苹果 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.

本来想在一个帖子里把 "动画设计" "交互方式" 和 "符合直觉" 三个方面都讲完，但没想到一个部分就能讲出这么多内容。如果各位对这个主题有兴趣的话，我将继续写好剩下两个部分。再强调下，本帖只是以 iOS 为例，探讨手机系统的流畅性可以如何衡量，不针对特定品牌也没有任何贬低的意思。希望普通用户和开发者都能从本帖中得到启发！

看看了解一下，谢谢总版分享！

这到底想搞哪样？

谢谢分享。了解一下。

这个可以看看，了解一下。

感谢楼主分享