iPhone的動效中藏著什麼秘密？為什麼iPhone讓你更加流暢更加舒服

但凡我們聊起

iPhone

或者說

iOS

的系統

，

很多人的第一印象就是手機流暢不卡

。

如果從效能角度講

，

iPhone

有一顆傲視群雄的

A

系

處理器

。

但從

OS

動效角度講

，

有人說

iPhone

的

60

赫茲要比其他品牌的

60

赫茲更加流暢

。

甚至有人說堪比

90

赫茲

，

但如果你要讓這些人具體說一下原因似乎大家又說不出來怎麼個流暢法

。

今天

就帶大家單純的來

看看

蘋果動效中那些細節

。

為什麼

iPhone

就是讓你感覺它更加流暢更加舒服

。

iPhone

的動效中藏著什麼秘密

？

早在

2018

年的

WWDC

上蘋果專門舉行了

iPhone

X

上設計人機互動介面的會議

，

首先第一點就講到人的大腦思想是自然延伸的

，

手機是我們的工具

。

如果在現實世界使用一個工具

，

例如錘子

、

剪刀

，

有不自然或者延遲的現象會讓人非常難受

，

APP

的響應和動效也應當符合自然常理

。

從初代

iPhone

開始

，

就一直把介面響應放在第一位

。

當你點選一個程式

，

先不管他有沒有載入

，

系統會先用動畫讓

APP

給你個反應

，

就是不管怎麼樣你點我就動

。

iOS

程式設計中通常會使用一個比較取巧的方法

，

你可能會經常見到

APP

內包含了一張首頁截圖

，

例如微信的地球頁面啟動的時候就會先在前臺展示一張截圖

。

配合過度動畫

，

這段時間後臺再處理載入程式

，

在多工介面也是一樣的原理

。

系統自帶的應用甚至直接使用應用內介面的截圖來做啟動頁

。

例如撥號程式這就給使用者一種不管你什麼時候開啟這個程式都好快的感覺

，

其實你看到的只是一張圖片

。

並且

iOS

動畫都是可重新定向

，

記住這個重新定向

，

例如我們開啟某個程式的過程中

，

期間發現點錯了

，

不需要等動畫完全開啟才能退出

，

但

它可以隨時打斷

。

國內廠商近幾年也逐漸加入了這類的可重新定向的動畫效果

。

這也是你感覺一些國產

OS

越來越流暢自然的原因

。

就比如

ColorOS13

在這種細節動畫上都有不足

，

重新定向可以最大程度上讓使用者感知到反應快很及時

，

在

I

OS

表面

化以來

，

蘋果也在不斷最佳化各種動效的強度

、

速度

。

當然不喜歡這類動校的人會覺得這

iOS

感覺很拖踏

，

這動畫有些人會覺得

柔柔

的

，

不夠那麼幹脆利落

。

自然動畫效果

，

可能也是一個你不太注意到的地方

，

但它確實是一個對系統累積好感印象的地方

。

舉個例子

，

我們點選

APP

放大到全屏

，

程式與螢幕邊框的圓角到介面的過渡都是相匹配的

，

這就是符合自然直覺的地方

。

比如在最新的

14 Pro

系列的靈動島上

，

你當程式往靈動島丟進去的時候

。

他會有根據手指方向的動態模糊和彈動的特效就和現實世界的果凍

、

橡皮筋一樣

，

給你帶來相應的真實感

。

再比如一個很典型的地方你在鎖屏介面向左一滑

，

你可以直接進入相機介面

。

有時

你手指在向左滑動的過程中

，

這個相機介面就已經啟動預覽了

。

從後向前推進

，

這樣就顯得很有層級感

。

APP

資源庫都有類似的效果

，

自然連續

、

有層級是很提升體驗的地方

。

安卓這邊有的系統

，

就比如

MIUI

和藍場在這類設計上這相機通常會閃一下或者憑空出現

，

它會造成視覺上的頻閃

，

就給人一種不那麼連貫的感覺

。

不過目前蘋果的動畫也有不符合自然的地方

，

就比如你快速關閉某個應用

，

再快速啟動它

，

這個程式就會有類似頻閃的現象

。

再比如很多人吐槽的沒有左滑返回

。

不光在介面動橋設計上

，

目前

IO

S

其實有很多不合理的地方

，

你要拉出來吐槽一時半會也說不完

。

從

app

的設計介面開始蘋果就在開發者介面提供了許多模板素材

，

XCOD

中也集合了許多系統動效

，

通常你看到很自然的這些動效一行程式碼就可以實現

。

這樣開發者可以更加專注於開發自己想實現的功能

，

蘋果這樣做也可以更好的讓第三方

APP

和原聲

APP

有動效的統一性

。

舉個例子

iOS

的某寶

，

你在點選詳情頁面的產品圖片的時候

，

無論這個圖片在螢幕的什麼位置

，

他都會從你手指點選的位置

，

向正前方有一個逐步放大的動效

。

你從偏上點偏下點都行啊這就延續了整個系統給你很高的跟手性的這個感覺

。

當安卓端的某寶

，

無論這個圖片在哪

，

你怎麼點選這個圖片都是從正中間直接放大

。

這樣做其實也沒啥問題

，

但是相對於

iPhone

的那種跟手性

，

那是不是就沒有了

。

這就是一些蘋果使用者在切換到安卓時

，

你總感覺哪好像不對但是又說不上來的那種感覺的來源

。

iOS

就是在這種你平時幾乎感受不到的小細節

、

小地方不知不覺的累積這個系統跟守性

。

那為什麼會形成這種差異性呢

？

那

就是因為安卓底層基本不會提供這類動效的程式碼素材給到開發者

，

想要類似蘋果的動畫風格你就得需要自己設計

，

比如小到按鍵的圓角弧度

、

視窗的排布與切換的效果

。

為了在安卓實現一個類似

iOS

上的動效

，

可能要多寫很多程式碼

。

所以多數

APP

為了節省開發時間

，

也為了給使用者更快的載入感覺

，

通常會簡單粗暴的使用最原始的過渡動畫

。

iOS

動效看著確實很舒服

。

但為了照顧雙平臺的體驗統一性

，

那就要以安卓為主了

。

這也是目前很多第三方的

APP

不會快速跟進

iOS

這些做的比較好的動效的原因

。

因為涉及平臺統一性時

，

你就只能照顧短板了

。

在

APP

設計時

，

最常見也是最有感知度的一點就是橡皮條效應

，

也叫橡皮筋特效

。

比如說在網印或者說

APP

滑動到頂部或者說底部的時候

，

使用一個彈跳的動效來告訴你已經到邊界了

。

還拿剛才的某寶舉例

，

你看完了圖片就一直往下滑一直滑到相關推薦到底

，

iPhone

這時候會有一個回彈的效果

。

一點不復雜

，

就是告訴你到底了

。

但不知道你注意到了嗎

？

這個到底的動效

，

在

iOS

底層它是統一的

。

不管你是第三方的

APP

還是系統的

APP

，

或者什麼介面下

，

只要可以滑動到底都是這個統一的回彈效果

。

提示連

iPad

端也全部都是統一的

。

但是安卓就不一樣了

，

系統端有的到底介面是類似於

iOS

的這種回彈

，

有的又是介面拉伸

，

你到第三方的

APP

就更難統一了

。

這就是系統體驗的統一性

。

對於第三方

APP

來說

，

其實也不怪他

，

因為安卓平臺底層沒有專門整合這種動效

，

或者是底層提供的動效非常簡陋造成的沒法統一

。

開發者就算想設計一個好的

，

你架不住有些系統自己他都沒有統一

。

這樣的地方多了無形中就會形成系統隔裂感

，

統一性還有個很重要的點它是非線性的

，

iOS

裡面有大量非線性動畫

，

它與線性動畫有什麼區別呢

？

那例如你在畫面上有兩個小球來回移動

，

一個是勻速的來回移動並且沒有彈簧效果你就感覺這很電子化

，

而另外一個小球有慢速與快速的過渡

，

就算是

30

幀的低幀率也可以新增動態模糊看起來不那麼卡頓

。

分線性的運動和模擬的視覺停留就和現實世界中我們看到的所有運動是一樣的更符合自然現象

。

對於這一點

，

目前安卓這邊大家做的也都不錯了

。

從前面這幾個想要延遲自然動效設計一致性

、

非

線性

動畫

、

底層設計層面我們聊過之後

在使用者使用一個系統時

，

主動和暗示操作也是讓人無形中會覺得這個系統好用不好用

、

好不好上手的一個重要原因

。

從初代

iPhone

開始或者說從觸控式螢幕手機開始

，

操作手機的方式無非就是點

、

按

、

滑這三種

，

iOS

上很多操作和空間都是圍繞這三種方式延伸展開的

。

例如鎖屏的手電筒按鈕

，

輕點一下它會有一個彈起回落的動畫

，

暗示了它可以長按或者重按

，

控制中心的一些按鈕也會有類似的效果

，

底部的導航條在輕點的時候也會有一個上跳的浮動

。

暗示你可以向上滑動

，

鎖屏介面導航條也會有一個上下浮動

，

暗示你可以上滑解鎖

，

在上滑過程中又有震動暗示你可以停留一會

，

進入多工介面可能會有失策但也降低了使用者的學習成本

。

也是從出道

iPhone

開始

，

相同的多點操作方式在不同

APP

環境下

，

也會有不同的效果

，

例如你在相簿左右滑動照片

，

只需要很輕度的滑動

，

因為這是一個輕量級的操作

，

如果你在底部導航條左右滑動切換程式就需要稍微用一點力量

。

這就是相對重量級的操作還比如你在桌面上翻頁

，

劃一次只會翻一頁

，

但是在瀏覽器裡邊輕劃一下

，

就可以輕鬆的翻動整個頁面

。

同樣的觸控互動在不同的環境下賦予了不同的質量

，

加上我們前面提到的延遲自然動效

、

飛線性動畫這一整套集合設計才會給使用者一種很流暢的體驗

。

最後一個就是

iPhone

老生常談的全自研優勢了

，

所有的軟體硬體全部統一規劃

、

統一排程

。

相比來說其他平臺的產品就太龐雜了

，

從底層開始甚至會多出很多開發步驟

。

比如說在安卓端

，

單一

APP

索取許可權的問題就需要你花不少精力去解決

，

就更不要說展示流暢滿真的動畫了

。

好在安卓廠商近些年也都注意到這些問題

，

並且付出了很多努力

。

在做好互動的前提下也在補足各種動銷細節

，

最後手下蘋果對於老裝置的系統支援是最長久堅挺

，

這應該沒人反對

。

咱們回到最開始的問題

，

為什麼就覺得

iPhone

要更加流暢一些呢

？

其實從底層開始蘋果就好像一個格局已經規劃的很好的一個簡裝房

，

大白牆上下水都給你搞好了

，

這個時候裝修隊設計師也就是開發者們

，

他就可以快速實現工程效果

。

而且可以保證各個房間的施工品質的統一性

。

而你也就是住戶就可以快速舒服的拎包入住了

，

但終究它是一個規劃好的房子

。

這缺點就是沒有什麼自由性可言了

，

可供你發揮的地方也不多了

。

相比之下安卓

，

就是給了你一個毛坯房

，

這裝修隊設計師操作起來就比較辛苦了

，

最終工程效果上也比較容易出現你不滿意的地方

。

但是反過來講

，

毛坯嘛你的自由度就要高很多

。