ps.本文转录自it之家的it圈子 非新闻 转录者注:时常看到手机板有各种吵为甚麽iOS比较顺的问题，却没有人能提出证据性的解 释，希望透过这篇文章能让大家来了解这两大作业系统中，iOS的优势在哪里，并让大家更 能体会使用者体验的重要性。 另外，因为内容繁多，会跟原作者一样分为上下篇发文。 https://quan.ithome.com/0/655/094.htm https://quan.ithome.com/0/655/841.htm 部分词语修改为台湾用语 -- 本文章并不是吹苹果iOS相比Android有多好，而是使用iOS为例子，谈一谈对於手机系统而 言何谓顺畅。为了直观的展示iOS的动画效果，本文章使用了不少GIF，载入需要时间，我 (原作者)在这儿提前感谢各位读者的耐心等待。 近几年来，随着中国手机品牌如华为、小米日渐成熟，开发者们设计系统不再一味追求功 能强大，而开始在审美、互动以及过渡动画上下功夫。得"益"於厂商们大力度地营销，就 算是不太关心数码的吃瓜网友，对"非线性动画" "高刷新率"等名词也有所耳闻；但也正 因为营销，没有深入了解过手机系统的使用者，甚至一些数码博主，开始把"非线性动画" 和"顺畅"划等号，引发无数"争论"。 https://qimg.ithome.com/image/2020/06/06/6372704726598614748857353.png 何谓顺畅？这个概念就和"全萤幕"一样，我们可以感性地将"全萤幕"定义为"好像手里握 着一块玻璃"，但很难给予一个量化的描述。我说苹果iOS比华为EMUI顺畅，如果单单是" 凭感觉"，那免不了使用者们各执一词的互喷，而厂商也无法从批评中学到任何东西。 本文参考了WWDC2018 的相关演讲，试图从三个维度衡量手机系统的顺畅度： 1.动画设计：同为非线性，同为60帧，为什麽动画的观感有差异？ 2.互动方式：全面屏时代，手势操作和Home键/三大金刚键有何区别？ 3.符合直觉：过分华丽的动画使人眼花，如何兼顾观感和使用者体验？ -- Part One: 动画设计-拟物，可不止图示 我们知道，在手机萤幕里飞来飞去的App，并不是真的在手机里运动，而是手机系统在短 时间内显示多张不同的图片，让观者产生"它在运动"的错觉。连续播放的静止画面+肉眼 的视觉残留， "动画"就产生了。 ▼ 动图，翻书动画 https://9.blog.xuite.net/9/7/c/e/17497449/blog_814112/txt/24143468/0.gif (转录者注:原图的动画连结失联了，因此以其他GIF取代) 在固定时间内，一段动画展示的静止画面越多，它造成的肉眼错觉就越强，对观者而言就 越顺畅。我们把1秒内播放的画面数量称为"帧率"，主流显示器的60帧，即指"1秒内展示 60个画面"来构成动画效果。那麽两段帧率相同的动画，它们带给观者的流畅感是相同的 吗？请看下面的例子。 ▼ 动图，两个以不同速度运动的小球 https://i.imgur.com/8vSNuve.gif 尽管两个小球的帧率相同，速度较慢的小球，其轨迹与动效都十分细腻；而速度较快的小 球，则在运动时产生了撕裂感，好像是一顿一顿地前进。这是为什麽？当我们记录下小球 经过的各个位置，背後的原因就显现了。 https://i.imgur.com/yKtA5WE.png 速度快的小球，两帧之间的变化太大，球的残影甚至不重叠，对眼睛而言就像跳跃一样； 而速度慢的小球，两帧之间的变化较小，对眼睛而言更加舒适。 手机动画自然没有小球来回运动这麽简单，但想让动画顺畅，原理是不变的：帧与帧之间 的变化不能太大，否则同样的帧率，你的动画就会变卡。以主画面打开App的缩放动画为 例，各位觉得哪个更顺流畅？ ▼ 动图，两种IT 之家的打开动画 (转录者注:该动画连结已失效) ‧第一种动画将App视窗变形成桌面图示的大小，然後展开成完整的App视窗； ‧第二种动画维持App视窗的原始比例，逐渐从小窗变成大窗。 动画一虽华丽但卡顿，动画二虽普通但流畅，理由同上：直接从图示大小展开成完整视窗 ，每帧之间的变化太大，有撕裂感。从系统设计的角度出发，显然动画一是符合需求的（ 许多安卓OS用的就是它），毕竟App图示是正方形且面积小，手机萤幕是长方形且面积大 ，画面变形、大小剧变似乎是不可避免的问题。我们看看苹果iOS是如何处理该动画的： https://i.loli.net/2020/06/06/gZXbaC8neTY2Qd5.gif 第一步， App的图示会变形成与iPhone萤幕长宽比相近的长方形。 https://i.imgur.com/2ZKG2IX.jpg 值得注意的是，图示的变形并不是简单的拉伸，而是给原图示加入"下巴"以调整长宽比。 若是直接把图示拉成长方形，则会变得很丑。 ▼ 某UI 简单粗暴地图示拉伸 https://i.imgur.com/ZWst9Rf.jpg ▼ 苹果iOS 会给非纯色的图示加入匹配的"下巴" https://i.imgur.com/WiHQoX0.jpg (转录者注:苹果这真的猛....) 第二步，因为App图示已经变形，App介面能以原始长宽比逐渐显示在图示之上。 https://i.imgur.com/Nnuc3jY.png ▼当App视窗完全显示时，其面积已经充斥1/4萤幕了，因此之後的缩放不会因为变化率太 大而产生撕裂感。为了让App视窗尽量大些，苹果还用一个遮罩隐藏了部分内容，使得视 窗实际大小比看到的还大。 https://i.imgur.com/o0RvFJ0.png 第三步， App视窗完全充满手机萤幕。除了App内容在慢慢放大外，遮挡窗口的遮罩也在 不断拉长，逐渐显示出完整的App。一切，都是为了让帧与帧间的变化不至於太大，最後 造就细腻的动画。 https://i.imgur.com/o0RvFJ0.png 虽然如此，iOS的动画只能算"精致"，还算不上"顺畅"。我们来回顾下"非线性动画"的概 念。这里使用高中物理课常用的"位置—时间"图片，即xt图，来直观展示线性的"线"究竟 指什麽： https://i.imgur.com/xCDQ6sv.png ‧ 1号是一条逐渐趋於水平的曲线，代表物体做减速运动，到达终点时速度刚好为零； ‧ 2号是一条折线，代表物体先做匀速直线运动，到达终点时速度突然归零。 我们称第1种运动是"非线性"的，因为它在"位置—时间"图中并非直线，而是连续变化的 曲线。祸害无数学子的数学家莱布尼茨说过（虽然是错误的）： "大自然没有跳跃。 Nature Does Not Make Jumps." 显然，线性运动在真实情况下不可能实现，折线的弯折处实际上还是曲线，因为速度减到 0，无论如何是一个渐变的过程。但在程式码组成的3C产品中，线性运动是可以实现的， 而且在Android OS的动画中广泛出现。打开一个App，图示以匀速直线运动放大，然後运动 突然停止，十分生硬。 问题是，只要是曲线，我们都称为"非线性"运动，但曲线的类型是无穷无尽的，合理的曲 线造就完美的动画，怪异的曲线还不如直线。 https://i.imgur.com/x0klHxw.png 苹果是如何设计非线性动画的曲线的？iOS从拟物发迹，之後经历了扁平化的洗礼，似乎 与拟物渐行渐远。但是，iOS的动画却从未离开过现实中的物体，所有动画曲线都使用了" 弹簧"这一物理模型作为参照，通过"弹力"让手机系统变得流畅。 https://i.imgur.com/ZLvlU4l.png ‧弹簧的运动端是将要运动的物体； ‧弹簧的固定端是物体运动的终点； ‧整个弹簧系统处在水平面上； 通过调节弹簧的松紧程度、物体的质量以及系统中的阻力，我们能得到无数种运动曲线， 但每一种都不违和：因为它们都遵循着同一条物理法则（胡克定律），且完全符合人类在 现实生活中培养起来的物理直觉。 ▼设置阻力为极大，物体运动到终点即停止，不会来回弹； https://i.imgur.com/IXULcJc.png ▼设置阻力为极小，物体到达终点後会过冲，并处在震荡之中； https://i.imgur.com/lOMDX63.png 这些个"弹簧"具体对应了苹果iOS 的哪些动画呢？（大量动图预警） 首先是主画面与系统： ▼ 轻轻地返回主画面 https://i.imgur.com/6W566ir.gif ▼ 用力返回主画面 https://i.imgur.com/QlW57sE.gif ▼ 系统中几乎所有可互动的元素都有弹性 https://i.imgur.com/3zy8iqj.gif 得益於苹果严苛而统一的设计语言，"弹簧"动画也充斥着第三方App。所有iOS 的列表都 自带弹力，很直观的反映了"列表已到头"的讯息： https://i.imgur.com/OBeAIau.gif 用心的开发者也会调用iOS 的动画API，打磨App 的细节： ▼ 轻轻下拉选单 https://i.imgur.com/lobVFb9.gif ▼ 用力下拉选单 https://i.imgur.com/yfGgqix.gif 讲到这儿，我相信各位对"顺畅"有了更深的理解。帧率越高，系统就越顺畅？并不，这要 看你在每一帧画面中填入了什麽内容；动画越花，系统就越顺畅？并不，这取决於你的运 动轨迹是如何设计的。苹果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为例，探讨手机系统的顺畅性可以如何衡量，不针对特 定品牌也没有任何贬低的意思。希望普通使用者和开发者都能从本文中得到启发！ -- 转录者心得: 其实在120Hz手机萤幕出现後，我自己也有去体验过。虽然看起来更顺了，但比起手中的 iOS手机来说总是感觉少了甚麽。看完本文就解惑了，因为iOS的动画是以弹簧这个基础来 设计，且原作者提到的一点就是:每帧画面中的内容变化，造就动画是否顺畅。 这点其实我很有感触，以前我还在用ZenFone 3的时候，拿朋友的iPhone 5s来比较，还是 会有5s比较顺畅的感觉。我以前拿的Android手机，我都会把动画改成1.5x，当时是因为 看起来比较顺畅，但我想原理应该跟这篇一样:因为每帧差距较小，所以看起来才会比较顺。 其实非线性动画不难发觉，Windows中也有用到: https://i.imgur.com/In3JDOP.gif 仔细看这个视窗，是一个ease out的动画 好了 我的笔电快没电了 等等有电继续发 -- 一天老婆跟我说她无聊，想让我带她找点刺激的事做做。我说，要不我们去吃霸王餐怎麽 样？老婆开心的说好啊好啊。於是点完菜，我们找了一个靠门的位置坐下，趁她去洗手间 的时候，我偷偷把帐结了。她回来後开始吃饭，吃得差不多了，我悄声问她，准备好没有 。老婆激动的点点头，然後我就拉着她跑了出来，一路上，老婆笑得好开心。 其实老婆也付了一遍。老板想：每天都能碰到这样浪漫的人就好了。 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 42.76.39.179 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/MobileComm/M.1591769661.A.CFF.html 感谢提醒 已更改 MIUI 12已经将大部分优良的体验一起传承过去了 是可以期待的系统 代表你就是个不会看内文只会来战的人啊==? 本篇只探讨UI对UX的影响 硬体出一堆问题我不否认XD XR收讯真的差 已更改 更新率越高本来就会稍微好点 就向内文说到的 两帧之间变化越小 越能感受到流畅以及越少撕裂感 90Hz相比60Hz 1.5x的帧数 比较起来当然会更好 当然我们是以最好的情况下探讨 而且本文是以两者之间的差异探讨 一个大量用非线性动画 一个大量用线性动画 这是不争的事实 我也不否认iOS有时候也会卡顿 你有看过我的文的话就知道我根本不是一个造神的人好吗XD 这应该算到硬体去了 的确也是影响使用者体验的一大问题 但这OS不能解决阿XD 感谢提醒 已更改 iOS的动画还没结束之前其实就可以坐下件事情 不过这篇没提到 要去下篇看 一个算硬体 一个算软体细节吧 不过都不是UI能解决的事情 XD Google很喜欢整合各家android的优点 好希望可以把这个整合进去XD 这个有时候的确要比较才能体验出来XD 项是哪种APP啊? 我刚刚测试一下 有些APP拉下去回弹时可以操作 像是Google drive跟Youtube 简讯的话 确实还没回弹完点下去不能直接进去 ※ 编辑: nk950357 (140.125.221.79 台湾), 06/10/2020 15:51:39