[经验] #原创#【详解】为什么苹果 iOS 是目前最流畅的手机系统?(上)

文章正文
发布时间:2020-06-08 11:29

说明:#原创#标签为IT之家在IT圈所设的投稿栏目,具体投稿规则点此查看。

— 写在前面 —

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

本帖并不想吹苹果 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.

— 上篇总结 —

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

文章评论