[閒聊] 詳解為什麼iOS是最順暢的系統

[nk950357 (nk950357)]

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://www.ptt.cc/bbs/MobileComm/M.1591769661.A.CFF.html
推 k321045     : 想當初，windows phone也很流暢
推 suichui     : iOS+120HZ應該會更順
推 k321045     : @suichui  真的很流暢
推 chenming867 : iOS有+120了阿可以去體驗看看iPad Pro
推 zitoneverwin: 幫補充一個用語沒改到 圖標>圖示 這個很多人已經被
→ zitoneverwin: 潛移默化到忘了臺灣原本怎麼用
感謝提醒 已更改
→ chenming867 : 本來想買Pro但是隔壁板有人說連Android熱點容易爆
→ chenming867 : 炸就打消念頭了QQ
→ chenming867 : #1UtVcIjy (iOS)
推 x3028671    : ios真的有用心做動畫xd
推 Sinreigensou: 蘋果動畫真的做得很好 安卓就是切換太快
→ Sinreigensou: 就算現在安卓也導入手勢蘋果的切換動畫依然學不來
MIUI 12已經將大部分優良的體驗一起傳承過去了
是可以期待的系統
推 PopeVic     : 推這一篇，我想這就是大多數人會說ios比較順卻又說
→ PopeVic     : 不出來哪裡順的點
推 kof2200     : iOS和Android兩者本身就不同架構。
推 d1902237    : 這篇竟然沒人戰 平常這時候兩邊應該打得火熱才對了
→ d1902237    : 啊
推 SaberMyWifi : 這些就是細節的部分  魔鬼本來就都藏在細節裡
噓 jinshun     : 又臭又長的動畫繼續吹  結果90Hz還是屌打60
代表你就是個不會看內文只會來戰的人啊==?
推 jason5678tw : ipad連手機熱點沒問題啊
→ Kismeter    : 真不知道用intel基頻算不算
本篇只探討UI對UX的影響 硬體出一堆問題我不否認XD XR收訊真的差
→ jason5678tw : 我寧願看動畫也不要噁心的撕裂卡頓感
推 bighead50405: 先推
→ jinshun     : 沒用的動畫畫了幾百年 卻修不好熱點 無法統一返回功
→ jinshun     : 能 呵
推 dragon16    : 交互這個詞總覺得怪怪的，互動比較符合台灣用法吧
已更改
推 mengmengcats: Android10＋90Hz路過，根本感受不到撕裂感，關於這
→ mengmengcats: 點Android也在版本10做出了更新
更新率越高本來就會稍微好點
就向內文說到的 兩幀之間變化越小 越能感受到流暢以及越少撕裂感
90Hz相比60Hz 1.5x的幀數 比較起來當然會更好
→ nk950357    : 我等等一併改 我發第二篇文才想到 交互應該用互動
→ nk950357    : 才對XD電腦沒電了
→ s0022       : 120hz屌打
→ dragon16    : 雖然我是安卓愛好者，但的確在使用介面的動畫呈現
→ dragon16    : 上，IOS看起來較舒服
噓 yuchiehchan : 安卓管你什麼動畫，進App就是要越快越好，撕裂感用
→ yuchiehchan : 戶又不在乎
→ Xperia      : 原生安卓根本沒撕裂卡頓感，三星倒是有點明顯
→ Xperia      : 再說蘋果也不是完全沒有撕裂卡頓感，偶爾開信箱開
→ Xperia      : pdf也是會頓啊
當然我們是以最好的情況下探討 而且本文是以兩者之間的差異探討
一個大量用非線性動畫 一個大量用線性動畫 這是不爭的事實
我也不否認iOS有時候也會卡頓
推 s0022       : 蘋果在動畫下了不少功夫 或者說回饋感比較符合人類
→ s0022       : 習慣
推 ZnOnZ       : 沒用的動畫XD
噓 pttsma      : 早期不就是ios解析度低，安卓拼命追求高解析延遲
推 Bob9154     : Android近期開始在意這塊了 9和10進步明顯
→ Bob9154     : 但差距依然可見
→ Bob9154     : 120Hz帶來的流暢主要是在滑動 跟蘋果的不一樣
噓 tony20529   : 造神文
你有看過我的文的話就知道我根本不是一個造神的人好嗎XD
→ pttsma      : 當ios還在DVD畫質時，android已在FullHD.
推 d1902237    : 現在才開始戰 也太晚了吧
→ Bob9154     : iPad雖然說120Hz 但那螢幕的嚴重的拖影拉低了感受
這應該算到硬體去了 的確也是影響使用者體驗的一大問題
但這OS不能解決阿XD
→ pttsma      : Retina 更是笑話，說是人類的極限，後面沒多久又出
→ pttsma      : 了Super retina, 人類超越極限了嗎？
→ r51303      : 罵戰也不是台灣用語啊...台灣會叫做爭論或論戰吧
→ r51303      : 另外吹這個字也不是台灣用語 捧是比較常用在吹這字
→ r51303      : 表面上吹捧吹捧好像是同義字 但兩岸用法不同
感謝提醒 已更改
推 Bob9154     : Retina只是不能看着螢幕數像素吧
→ Bob9154     : 不能數格子 但再上去還是能看出來
→ Xperia      : 過多彈性的缺點是第一次點擊誤操作成滑動後，要等
→ Xperia      : 動畫彈完才能繼續點擊。有時候精神不佳，很難這麼
→ Xperia      : 精確的點擊觸控，ios又一堆滑動的手勢，此時就顯得
→ Xperia      : 累贅而不清爽。
iOS的動畫還沒結束之前其實就可以坐下件事情
不過這篇沒提到 要去下篇看
推 horb        : 有嗎。不覺得ios比較順。
→ horb        : 不要又拿安卓低階去比iphone了
推 Lumia625    : intel基頻跟熱點算是細節嗎
一個算硬體 一個算軟體細節吧
不過都不是UI能解決的事情 XD
推 ohmylove347 : 推分析，同意iOS的流暢真的是接近完美的動畫，但90h
→ ohmylove347 : z,120hz比就是了，不過也希望Google能好好整頓安卓
→ ohmylove347 : ，感覺小米已經開了第一槍了
Google很喜歡整合各家android的優點 好希望可以把這個整合進去XD
推 jimei2      : 撕裂感 60Hz滑動 對比90跟120Hz也是有明顯撕裂感阿
這個有時候的確要比較才能體驗出來XD
推 kkcity59    : 可是我根本不想看動畫只想快點切換App啊.....
→ kkcity59    : 之所以保留安卓0.5x轉換是為了知道雙開App的來源
→ kkcity59    : 不然有時候會搞錯這是哪個帳號的Line/FB/IG...oxoox
→ kkcity59    : 不過這問題反正這在ios上不存在因為她都沒這功能嘛
→ kkcity59    : 我只覺得我用安卓手機的效率真的比用iPhone高很多啦
→ kkcity59    : 開遊戲掛機開FB/Line回訊息再開遠端cam監控再連ptt
→ kkcity59    : 這時候iPhone背景的東西早就東退西退不知道跑哪裡去
→ kkcity59    : 尤其現在iPhone開相機真的重Load背景程式非常頻繁
→ kkcity59    : 還是這些麻煩的問題跟動畫好順暢一比都不是問題嗎？
推 marquelin   : 剛剛才注意到音樂用力下拉專輯縮圖也會有彈跳效果
推 Sconepuff   : iOS動畫細節真的猛 Android就算120Hz也是沒得比
推 jinshun     : 每次放下90Hz 拿起iX滑幾秒 撕裂感有夠強烈
→ Xperia      : 下一篇說可以做下件事情主要是在進出app時，我主要
→ Xperia      : 不滿的是捲動倒底回彈的那一下，還要等它回彈完才
→ Xperia      : 能按，安卓就不會有那下回彈
項是哪種APP啊?
我剛剛測試一下
有些APP拉下去回彈時可以操作 像是Google drive跟Youtube
簡訊的話 確實還沒回彈完點下去不能直接進去
推 e04bank     : 這裡需要更多這類優文
※ 編輯: nk950357 (140.125.221.79 臺灣), 06/10/2020 15:51:39
推 Xperia      : 好像是喔，我測yt也是可以的，設定就不太行
→ sky683      : 哇 這種小細節能算一種專利嗎？
推 moptt9316   : 細膩是細膩，但動畫真的太慢
→ nk950357    : 嚴格來說蘋果可以黨專利蟑螂註冊 畢竟列表回彈他都
→ nk950357    : 註冊了 還有什麼不能XD
噓 lalalalaluk : 我不信
推 loking      : 早期是這樣，現在順暢程度差不多了
推 Sinreigensou: 不過因為早期這樣造成蘋果比安卓順的刻板印象回不
→ Sinreigensou: 去，希望安卓後面能越來越好
→ gdtg10900   : 扶不起的手遊幾張都一樣
推 TZephyr     : 這篇分析地好仔細
推 wewe44556   : 推啦
推 ts00758579  : 不想看動畫的話選什麼
推 tailau0     : 為了0點幾秒動畫的差異損失熱點、訊號強度、和價格
→ tailau0     : ，這沒有蘋果價值忍不住啊！
→ garyroc     : 我是覺得對岸用語改一半還不如不要改XD
推 waroz       : 熱點是真的爛，但訊號跟價格還好吧 用料比較實在的
→ waroz       : 幾家旗艦哪個不用兩三萬
推 berserkman  : 這裏需要多一點這樣的優文
推 klayjohnson : 價格現在不能嘴了，安卓都漲成什麼樣了
→ deduces     : 中國用"通過"   台灣用"透過"
推 abadjoke    : 從設計的角度來分析我覺得很合理啊
噓 OxFFFF      : 其實我覺得是標題下的爛，動畫好跟系統順兩件事
→ moptt9316   : 上面說回彈不能操作也有碰過，等彈回來那下超煩
→ jialin6666  : BSD,Linux kernel 不同。
推 mrnegativetw: 推一個蘋果動畫 +8用心
→ EQUP        : 深有同感 這些小細節會不知不覺讓使用者離不開ios
推 i94eric     : 推
推 AHsuanHsuan : 果黑表示
推 tn0128      : 好文推 期待下集
推 suifong     : 不是一堆人還嫌安卓動畫慢，改0.5，事實是大眾根本
→ suifong     : 不愛。
推 tiger0922   : 胡克可以改虎克嗎
噓 kouta       : 對這裡某些人來說軟體不值錢啦 這沒用啦
噓 isawaghost  : 動畫順暢度和使用順暢度根本天差地別
噓 isawaghost  : 遊戲特別明顯
推 hangtenboy  : 推
推 Sinreigensou: 看完還有人以為是單純動畫快慢問題，根本白讀
推 dannyshan   : 說穿了就是資源的問題吧 全世界最大的公司 一年只出
→ dannyshan   : 一隻手機 這樣系統還做不好可以自殺了
推 cities516   : 推 雖然推文蠻不意外的
→ waroz       : 細節不夠到位而已，安卓我相信絕對可以做到
→ tigerclamp  : 安卓就寧願把資源出一堆機海或電子____啥的
推 a062693069  : 這就是設計的重要性了
噓 hangtenboy  : 但是還是要噓iOS那個破爛熱點
→ s9845111    : ios跟android我都減少動態效果
→ s9845111    : 應該說連電腦windows我也關效果，反應快多了
→ s9845111    : 還以為順暢度是要討論編寫系統的程式語言之類的…
推 tonyian     : 感覺只是先射箭（蘋果好）再畫靶（找理由）而已，
→ tonyian     : 你這些東西使用者真的能大眾盲測過關才是真的如你
→ tonyian     : 所說
→ Oisiossos   : 用原生APP也會BUG 這也要怪使用者嗎？
推 Raptors1    : 不愧是服務業龍頭
推 joverKJ     : iPhone 動畫真的很舒服
→ joverKJ     : s10+也是輸
推 chow940171x : 回彈進不去是內建程式才會吧
推 judasprist  : 完全不覺得這有什麼
→ matyih      : 沒感覺 被強迫用公司發的mac後更覺得把蘋果當高級品
→ matyih      : 的可笑
推 kkboy       : 是沒錯啦，但進遊戲後就是另一回事了
→ waroz       : 人家沒強迫你不能離職，自己選的就不要說別人強迫
推 leegogo     : 還好 one ui 也不錯了 重點是安卓現在介面比較直覺
→ leegogo     : 通知列拉下來什麼都有
→ alastorlion : 個人偏好是 material design > fluent design > App
→ alastorlion : le