動畫學術趴 - 這種動畫超不起眼，卻救了蘋果一年的熱度－鑽石舞台

Oct 18 Tue 2022 22:31
動畫學術趴 - 這種動畫超不起眼，卻救了蘋果一年的熱度

作者 /Shoko編輯 / Pel排版 / 小魚

「或許今後會出現更多有趣的UI動效，它可以兼顧趣味性和交互性，給我們帶來更多新奇的體驗。」

上月，蘋果公司在新品發布會上公布了iPhone 14，新一代蘋果手機提升了運算、攝影、通信等硬件性能，但對許多人來說，最大的驚喜莫過於其外觀變化——iPhone 14 Pro/Pro Max機型將用更小的靈動島（攝像頭開孔）取代「劉海屏」（iPhone X開始沿用的屏幕頂部長條），不出意外的話，「靈動島」將成為iPhone今後沿用數年的家族設計。

如「劉海屏」一樣，靈動島（Dynamic Island）在正式官宣後也很快獲得了屬於自己的外號「藥丸屏」「感嘆號屏」。雖然褒貶不一，但不管怎麼說它確實如同一個「 !」一般，在專業圈及大眾心裡炸開了一片漣漪。

靈動島之所以如此備受關注，一方面也是因為它不再僅僅是一個用來放置相機和傳感器的儲物空間，它搖身一變成了交互的主角。

長按靈動島就可以開啟/關閉揚聲器和結束通話

顯示地圖導航情況

長按靈動島就可以快進、暫停

靈動島可以做的事情大致分為「通知與提醒」「顯示應用程序狀態」「應用程序操作」三種。除此之外，iOS開發者Christian Selig在其自身的App（Apollo）中設計了一款名為「Dynamic Island Zoo」的插件，一個宛如拓麻歌子的小貓會在靈動島上「生活」。

‍Dynamic Island Zoo

‍還有開發者將靈動島作為障礙物，設計了一款名為Hit The Island的打磚塊遊戲。雖然這些應用並沒有什麼實際功能，但如果說屏幕顯示區域內是一個虛擬世界，而攝像頭等硬件是現實世界的話，靈動島無疑打破了兩個世界之間的隔閡。某種意義上倒是有種未來生活理念的雛形。

Hit The Island

另一方面，也有很多人認為靈動島不過是用來彌補iPhone的硬件不足，又或者是安卓也存在類似的設計。

這篇文章中不會過多談論硬件的問題，也不會下定論說蘋果的設計有多完美。只是僅從設計上來說，這未免不是UI設計師們在被動的條件下做出的帶有一絲戲謔意味的嘗試。

01什麼是UI動效暫時撇開靈動島的功能性，它在宣傳片中最亮眼的無疑是其靈動的動畫效果，接下來就讓我們來了解一下UI和UI動效。・UI（User Interface）UI是「用戶界面（User Interface）」的簡稱。「Interface」同樣可以被譯作「接口」，代表計算機和其外部設備之間的連接。因此UI設計的本質是對用戶和計算機之間的交互方式的優化。

人機交互的方式主要經歷了以下三個階段：

・命令行界面CLI（Command-line Interface）

命令行界面是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令後予以執行。人們在使用過去的電腦時，就必須對着黑屏，一邊輸入指令一邊操作系統，這需要相當高度的專門知識。

命令行界面

・圖形用戶界面GUI（Graphical User Interface）

原則：WYSIWYG（所見即所得，what you see is what you get）

圖形用戶界面，是指採用圖形方式顯示的計算機操作用戶界面。與早期的命令行界面相比，它降低了用戶的操作負擔。其次，圖形界面對於新用戶來說在視覺上更容易接受，學習成本大幅下降，也讓電腦的大眾化得以實現。

圖形用戶界面‍

・自然用戶界面NUI（Natural User Interface）

原則：WYDIWG（what you do is what you get）。

自然用戶界面是指一類無形且直觀的用戶界面。「自然」一詞是相對圖形用戶界面（GUI）而言的，GUI要求用戶必須先學習軟件開發者預先設置好的操作，而NUI只需要人們以最自然的交流方式（如語言和文字）與機器互動。我們如今所熟悉的觸控屏幕就是一種自然用戶界面。

人類從15萬年前就開始使用手持工具，同時我們的手也進化出了更多能夠支持精細動作的血管和神經。借用詹姆斯·吉布森（James Jerome Gibson）有關生態心理學研究中的「Affordance」這一概念，即人類雖然會主觀地去規劃一個工具的使用方式，但工具本身其實也在向人類傳遞一種「如何被使用」的信息。書中提到一個例子是，當你看到一塊路邊的石頭時，你不需要花時間去計算自己的身高，就可以本能地判斷出你能否坐在上面。某種意義上，這塊石頭在此刻向你傳遞了一種「Affordance」：即它可以成為你的椅子。

直觀功能（affordance），指物品在某個方面，能夠讓人明顯知道該如何使用它的特性。人們得知如何使用物品有一部分來自認知心理學，另一部分來自物品的外形。

WWDC 2018 Designing Fluid Interface中也提到了相似的觀點，簡單來說，當人們覺得操作界面很流暢時他們會用各種形容詞來形容這種感受（快fast、平滑smooth、流暢的fluid、自然的natural、神奇的magical）。而當他們覺得不流暢時，卻很難用語言來描述，他們只會說「這感覺不對」。所以只有當一個工具就仿佛是我們大腦的延伸時（An tool that feels like an extension of your mind），它才會顯得很「流暢」。

WWDC:蘋果全球開發者大會（Apple Worldwide Developers Conference）是蘋果公司每年定期在美國加州舉辦的信息技術活動，該活動通常於加州聖何塞會議中心舉行。

就如同石凳的例子一樣，它不需要語言，就告訴了你它作為「椅子」的功能。通過對自然界誘導Affordance的反向利用，如果一個UI元素不需要語言（教程）就能讓你發現它的功能或使用方法，那它就是一個自然且優秀的設計。

而真實世界中的所有行為都伴有動態，也就是說它不可能直接從狀態A變為狀態B，中間必然存在一個類似動畫中間畫（In-Between Animation）的過程。因此，近年來的UI設計不僅僅關注on與off兩個狀態的icon設計，更關注這兩個狀態之間的銜接，即——UI動效。

屏幕方向解鎖動畫：模擬了現實中開鎖的旋轉動作

・UI 動效(UI animation)UI 動效（UI animation）是一種向 UI 元素添加動態效果以增強產品交互性的形式。UX和UI 設計師通過動畫（動態效果）在界面中引導用戶，提醒用戶狀態的變化，指示元素之間的關係。

隨着時間的推移，設計師們開始關注動畫本身的功能性，將其從裝飾物轉變為可以增強用戶體驗的東西。UI 動效發展的其中一個轉折點是從線性運動轉變為模擬真實世界（如速度、重力和重量）的運動。這種發展使我們擁有了如今生動有趣的 UI 動畫。

如今最常見的 UI 動效類型往往分為以下四類：

微交互（Micro-interactions）、加載和進度條（Loading and progress）、導航（Navigation）、敘事和品牌（Storytelling and branding）

・微交互

微交互可能是最常見的 UI 動效類型，它通過可視化的動態效果來告知用戶操作的成功與否。按下按鈕、打開開關、「靜音」狀態圖標——這些都是微動畫的例子。

微交互

・加載和進度條

沒有人喜歡等待的時間，尤其是在不清楚要等待多長時間的情況下。加載和進度條動畫通過演示加載的過程或目前的進度，來幫助用戶了解情況。

下載進度條

・導航

網站越複雜，導航設計就越為重要。PC端網頁一般通過懸停動畫、下拉菜單動畫等來提示用戶網站的架構。而手機網頁或App則多數使用底部標籤式導航欄及「漢堡包導航欄（hamburger menu）」。

漢堡包導航欄「≡」

・敘事和品牌

裝飾性動畫通常出現在歡迎界面上，它的形式相對較為自由，通過幾秒鐘的時間來加強品牌形象。

品牌動畫

02UI動效發展簡史

・早期UI動效

・閃爍的光標 (1967）

閃爍的光標是 UI 動效的起源。最早出現于于命令行界面，一直沿用至今。

・Xerox Alto 施樂奧拓（1973）

由施樂生產、專供科研使用的Xerox Alto 是第一台支持圖形用戶界面的計算機，其中包括一個帶有光標的可操作屏幕，為未來的UI動效奠定了基礎。

・蘋果公司Lisa（1980～）

1980 年代初期，GUI 上的第一個動效示例出現在蘋果公司發布的 Lisa上。儘管這台電腦在 3 年內便停產，但它已然成為 UI 歷史的里程碑。

Lisa 的動效主要是幫助用戶瀏覽界面的微交互。

・單擊文件、目錄或應用程序時，光標會變成沙漏。・提示現在所在的位置的滾動條動效。・提示按鈕可點擊的懸停動效。

‍滾動條動效

光標變成沙漏

・Windows

另一方面，Windows 1 也具有像 Lisa 這樣的微導航和微交互功能。Windows為 UI ‍動效演變帶來最為顯著進步的則是 Windows 3.1 的歡迎界面以及Windows XP的下載進度窗口。

Windows 3.1歡迎動畫

Windows XP下載進度窗口(2001)

・近年iOS動效案例（2013～）

來到自然用戶界面（NUI）的時代，iOS的幾次重大變革一定程度上引領了UI動效風格的發展。下文，筆者就從近年iOS動效案例切入，談談NUI動效的幾種效果——

・動效視覺中心

在iOS7中，蘋果正式採用了被稱為集合視圖轉換（UI Collection View Transition Layout）的界面切換效果。此前的iOS系統都將屏幕中心或邊緣作為視覺中心和動效基準點，而iOS7則將用戶的操作點作為基準點。

最直觀的例子，便是當我們從桌面打開應用&從應用退回桌面時，集合視圖轉換能使人明顯感受到圖標的「從哪來回哪去」。

iOS7的視覺中心為用戶操作點

iOS7之前的視覺中心為屏幕中央

其意義在於進一步銜接用戶操作與界面切換之間的過渡，引導用戶在不同界面的切換過程中移動視覺焦點。在過去的大多數界面切換動效中，用戶不得不在每次界面切換完成後，再重新定位自己的視覺焦點。

・應用啟動動效時長

iOS 7的應用啟動動效設計中，動畫時間比iOS 6多出了80%，且在速率曲線上也有較大的差異。下圖中的X軸代表動效的時長，Y軸則代表了運動的速率。可以看出iOS 6的動效從開始至結束，其加速和減速都是較為平均的。而在iOS 7中，動效以更高的加速度開始，到達極速後以非常平緩的減速直至結束。

應用啟動速率圖

雖然iOS6和iOS7使用的都是緩入緩出（Ease-in-ease-out），但iOS6以同步的加速度進行緩入和緩出，而引入了扁平化設計的iOS 7則採用了「更快地緩入、更慢地緩出」。

WWDC 2018 Designing Fluid Interfaces中也有提到交互體驗的本質是響應（Response），前期更快的加速度可以讓用戶感受到手機理解了自己的意圖。而用戶本身就需要一段緩衝時間來思考下一步的操作，因此將後期動畫的速度減緩正好提供給用戶重新定位、思考下一步操作的時間。

・空間一致性

現實生活中我們會感受到物體通常以相同的路徑出現和消失。也就是說當我們看到一個物體被另一個遮蔽物遮擋後，我們不會認為該物體憑空消失了，而是會覺得它依然存在於遮蔽物後。如果該物體從另一地方突然出現，那就會有一種魔術感。

WWDC 2018 Designing Fluid Interfaces中也提到，當新頁面是通過向左划動出現，那麼當我們要返回上一頁時就應該向右划動。手機的界面同時也是一個畫框（遮蔽物），我們從哪裡拿來的東西就該放到哪裡去。因此只有和我們在物理世界的理解相匹配的UI設計才會讓人感到流暢自然。‍

頁面從哪裡出現就將回到哪裡

・動態運動

我們的思維和身體總是處於運動狀態，所以只有當界面保持動態才能讓它顯得更加真實。現在在UI設計中使用的動畫主要有兩種形式：定時動畫（Timed animations）和動態運動（Dynamic motion）。

有關前者，當用戶輕觸屏幕後，動畫的控制權就將完全交給設計師。設計師將在規定的時間中設計動畫內容，當動畫完成後再將控制權再交還給用戶。

定時動畫

而如果要設計一個流暢的UI，則需要讓用戶從設計師手中拿走對動效的控制權，讓動態行為（Dynamic Behaviors）和交互（Interaction）同步進行。在下一部分，讓我們來看看UI設計師是如何從角色動畫中吸取經驗的。

動態運動

03UI動畫和角色動畫的異同

1981 年，迪士尼動畫師Ollie Johnston 和 Frank Tomas撰寫了《生命的幻象》（The Illusion of Life: Disney Animation），其中概述了動畫的 12 條核心原則。

雖說這些原則原本是用來說明卡通角色動畫的，但其本質同樣是將現實世界的運動規律進行歸納、簡化抑或是誇張化，在這一點上來看與UI動畫非常相似。實際上WWDC上提到的一些觀點也與動畫12原則有着極大的共通點。

・緩入緩出Slow In and Slow Out

角色動畫中，人物及大部分的其他物件在一段「靜止-運動-靜止」的過程中都需要時間去加速和減速，即所有的動作都是緩慢地開始-加速-緩慢地完成。當然這樣的運動不包括自由落體等。

動畫中的緩入緩出

另一方面，WWDC上首先提到了無縫運動（seamless motion）的概念。無縫運動讓人覺得運動仿佛是物體自身的延伸一般自然。

以汽車的運動為例，最前端的位置曲線是一條向斜上方延展的直線，這代表汽車正在勻速行駛。而當踩了剎車後，線條就開始光滑得彎曲。當汽車趨於停止時，線條變成一條幾乎水平的線。整條位置曲線的變化都是光滑，這就是無縫運動。早期的iPhone便已經在滑動中引入了無縫運動。

現實中汽車的剎車過程

滑動中的無縫運動

・跟隨動作與重疊動作Follow Through and Overlapping Action

「跟隨與重疊」指的是當主體停止運動時，其身上的一部分部件會繼續運動。並且這些部件會超過主體停止的位置，在振動中不斷減幅。這樣的跟隨與重疊給角色增加了真實感。

動畫中的跟隨與重疊

同樣，UI動效設計中也存在有關彈性的概念。例如滑動到頁面頂端或底端時，就會出現一種仿佛被彈簧拉回來一般的彈性運動。

帶有彈性的頁面

iOS設計師們認為，引入過多不必要的運動反而會給用戶帶來困擾。因此他們定義，只有當交互手勢本身帶有動量時，才會設計一些彈性效果。

他們還對彈性運動做了簡化，只保留兩個參數：阻尼（Damping）和響應速度（Response）。阻尼為100%時就不會出現過沖（overshoot），這裡的「過沖」與「跟隨與重疊」含義相近。

音樂App便是一個很好的例子。打開App時使用的手勢是輕觸，這一手勢不含有讓元件移動的動量，因此不需要彈性。

輕觸手勢不帶有彈性

而當離開App時需要一個輕掃的動作，他們在這裡添加了80%的阻尼，增加了彈性和擠壓。輕掃的手勢本來就是一個帶有方向性的移動，因此如果此時的動效不帶有一定彈性的話反而會顯得不自然。

輕掃手勢帶有彈性

彈性運動的另一個應用是在iphoneX引入的手電筒和照相機按鈕。為了防止誤觸，打開這個開關需要用力地長按。而當你只是輕觸時，按鈕會彈跳一下來回應你：它感應到了你的操作，但是你的手勢是錯誤的。

手勢不正確時，會有一個彈跳動效

・擠壓和拉伸Squash and Stretch

「擠壓和拉伸」是角色動畫中非常重要的原則，這個原則的目的是賦予物體重量感和靈活感。這個原則可以運用於簡單的物體，例如一個反彈的球，也可以運用於人臉的肌肉運動。

同樣，UI動效中也會使用動態模糊（Motion Blur）和運動拉伸（Motion Stretch）的方式，在一段運動的中間幀加入更多信息。

在我們打開和關閉App時，除了界面的放大縮小，其實還存在一些額外的擠壓拉伸要素。這些效果使整個動效看起來更流暢自然。

關閉App時的擠壓

・UI動畫和角色動畫的異同

除了上述三個較為重要的共同點之外，UI動效也存在「預備動作（Anticipation）」，主要體現在鼠標懸停時的動效變化上。一些簡單的跳動動效也可以歸為「次要動作（Secondary Action）」。

可以看出，角色動畫和UI動畫在設計時都會借鑑現實世界，設計師們將現實世界的運動規律進行歸納、簡化，以追求逼真感。同時他們也會增加一些誇張而有趣的設計，以追求虛擬感。不管是角色動畫還是UI界面，人們總是會對亦真亦幻的世界感到興奮。

當然，角色動畫和UI動效在功能性上有着本質區別。角色動畫正是前文所說的，觀眾將所有對動畫的控制權交給導演的動畫類型。此時動畫內部與觀眾處於兩個維度，導演只需要考慮如何呈現動畫內部即可。而UI動效的本質是響應，只有當頁面的大小、顏色、位置發生改變時，用戶才知道自己的操作是有效的。而流暢的動效設計可以讓這些改變看起來更自然。

靈動島

某種意義上，遊戲動效可能正好介於角色動畫和UI動效之間。遊戲中的人物比界面中的按鈕要包含更多的個性，但被用戶所控制這一點卻是相同的。而文章開頭所提到的「靈動島」或許恰好擁有一些「遊戲」感，它或許不一定那麼實用，卻十分有趣。隨着硬件設備的提升，或許今後會出現更多有趣的UI動效，它可以兼顧趣味性和交互性，給我們帶來更多新奇的體驗。

參考資料1. 張卷益，iOS 7中的動態焦點設計思想2. Jaye Hannah，UI Animation: A Complete Guide For Beginners3. Editorial Aela，Animation in UI: How to Create Motion Design4. Botchi，UIの歴史と將來のUIの形についてまとめてみたよ。5. iPhone Mania，iPhoneOS / iOSの系譜〜iPhoneOSの誕生と最新のiOS146. まりーな／エンジニア，Appleのアニメーションはなぜ美しいか考える7. 袁驍，動效設計原理:從卡通動畫到UI動效8. 設計廠，迪士尼「動畫十二原則」，你真的搞懂了嗎？

— 點擊圖片閱讀更多精彩內容 —