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

“或許今后會出現(xiàn)更多有趣的UI動效，它可以兼顧趣味性和交互性，給我們帶來更多新奇的體驗。”

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

如“劉海屏”一樣，靈動島（Dynamic Island）在正式官宣后也很快獲得了屬于自己的外號“藥丸屏”“感嘆號屏”。雖然褒貶不一，但不管怎么說它確實如同一個“ !?”一般，在專業(yè)圈及大眾心里炸開了一片漣漪。

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

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

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

另一方面，也有很多人認為靈動島不過是用來彌補iPhone的硬件不足，又或者是安卓也存在類似的設(shè)計。這篇文章中不會過多談?wù)撚布膯栴}，也不會下定論說蘋果的設(shè)計有多完美。只是僅從設(shè)計上來說，這未免不是UI設(shè)計師們在被動的條件下做出的帶有一絲戲謔意味的嘗試。

01
什么是UI動效

暫時撇開靈動島的功能性，它在宣傳片中最亮眼的無疑是其靈動的動畫效果，接下來就讓我們了解一下UI和UI動效。

· UI（User Interface）

UI是“用戶界面（User Interface）”的簡稱?！癐nterface”同樣可以被譯為“接口”，代表計算機和其外部設(shè)備之間的連接。因此UI設(shè)計的本質(zhì)是對用戶和計算機之間的交互方式的優(yōu)化。

人機交互的方式主要經(jīng)歷了以下三個階段：

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

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

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

原則：WYSIWYG（所見即所得，what you see is what you get）圖形用戶界面，是指采用圖形方式顯示的計算機操作用戶界面。與早期的命令行界面相比，它降低了用戶的操作負擔(dān)。其次，圖形界面對于新用戶來說在視覺上更容易接受，學(xué)習(xí)成本大幅下降，也讓電腦的大眾化得以實現(xiàn)。

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

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

自然用戶界面是指一類無形且直觀的用戶界面。“自然”一詞是相對圖形用戶界面（GUI）而言的，GUI要求用戶必須先學(xué)習(xí)軟件開發(fā)者預(yù)先設(shè)置好的操作，而NUI只需要人們以最自然的交流方式（如語言和文字）與機器互動。我們?nèi)缃袼煜さ挠|控屏幕就是一種自然用戶界面。

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

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

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

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

就如同石凳的例子一樣，它不需要語言，就告訴了你它作為“椅子”的功能。通過對自然界誘導(dǎo)Affordance的反向利用，如果一個UI元素不需要語言（教程）就能讓你發(fā)現(xiàn)它的功能或使用方法，那它就是一個自然且優(yōu)秀的設(shè)計。

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

?UI 動效(UI animation)

UI 動效（UI animation）是一種向 UI 元素添加動態(tài)效果以增強產(chǎn)品交互性的形式。UX和UI 設(shè)計師通過動畫（動態(tài)效果）在界面中引導(dǎo)用戶，提醒用戶狀態(tài)的變化，指示元素之間的關(guān)系。

隨著時間的推移，設(shè)計師們開始關(guān)注動畫本身的功能性，將其從裝飾物轉(zhuǎn)變?yōu)榭梢栽鰪娪脩趔w驗的東西。UI 動效發(fā)展的其中一個轉(zhuǎn)折點是從線性運動轉(zhuǎn)變?yōu)槟M真實世界（如速度、重力和重量）的運動。這種發(fā)展使我們擁有了如今生動有趣的 UI 動畫。

如今最常見的 UI 動效類型往往分為以下四類：微交互（Micro-interactions）、加載和進度條（Loading and progress）、導(dǎo)航（Navigation）、敘事和品牌（Storytelling and branding）

?微交互

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

?加載和進度條

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

?導(dǎo)航

網(wǎng)站越復(fù)雜，導(dǎo)航設(shè)計就越為重要。PC端網(wǎng)頁一般通過懸停動畫、下拉菜單動畫等來提示用戶網(wǎng)站的架構(gòu)。而手機網(wǎng)頁或App則多數(shù)使用底部標簽式導(dǎo)航欄及“漢堡包導(dǎo)航欄（hamburger menu）”。

?敘事和品牌

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

02
UI動效發(fā)展簡史

?早期UI動效

?閃爍的光標 (1967）

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

?Xerox Alto 施樂奧拓（1973）

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

?蘋果公司Lisa（1980～）

1980 年代初期，GUI 上的第一個動效示例出現(xiàn)在蘋果公司發(fā)布的 Lisa上。盡管這臺電腦在 3 年內(nèi)便停產(chǎn)，但它已然成為 UI 歷史的里程碑。Lisa 的動效主要是幫助用戶瀏覽界面的微交互。?單擊文件、目錄或應(yīng)用程序時，光標會變成沙漏。

?提示現(xiàn)在所在的位置的滾動條動效。
?提示按鈕可點擊的懸停動效。

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

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

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

?動效視覺中心

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

最直觀的例子，便是當我們從桌面打開應(yīng)用&從應(yīng)用退回桌面時，集合視圖轉(zhuǎn)換能使人明顯感受到圖標的“從哪來回哪去”。

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

?應(yīng)用啟動動效時長

iOS 7的應(yīng)用啟動動效設(shè)計中，動畫時間比iOS 6多出了80%，且在速率曲線上也有較大的差異。下圖中的X軸代表動效的時長，Y軸則代表了運動的速率?？梢钥闯鰅OS 6的動效從開始至結(jié)束，其加速和減速都是較為平均的。而在iOS 7中，動效以更高的加速度開始，到達極速后以非常平緩的減速直至結(jié)束。

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

WWDC 2018 Designing Fluid Interfaces中也有提到交互體驗的本質(zhì)是響應(yīng)（Response），前期更快的加速度可以讓用戶感受到手機理解了自己的意圖。而用戶本身就需要一段緩沖時間來思考下一步的操作，因此將后期動畫的速度減緩正好提供給用戶重新定位、思考下一步操作的時間。?空間一致性現(xiàn)實生活中我們會感受到物體通常以相同的路徑出現(xiàn)和消失。也就是說當我們看到一個物體被另一個遮蔽物遮擋后，我們不會認為該物體憑空消失了，而是會覺得它依然存在于遮蔽物后。如果該物體從另一地方突然出現(xiàn)，那就會有一種魔術(shù)感。

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

?

?動態(tài)運動

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

有關(guān)前者，當用戶輕觸屏幕后，動畫的控制權(quán)就將完全交給設(shè)計師。設(shè)計師將在規(guī)定的時間中設(shè)計動畫內(nèi)容，當動畫完成后再將控制權(quán)再交還給用戶。

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

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

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

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

?緩入緩出

?Slow In and Slow Out

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

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

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

?跟隨動作與重疊動作

Follow Through and Overlapping Action

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

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

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

他們還對彈性運動做了簡化，只保留兩個參數(shù)：阻尼（Damping）和響應(yīng)速度（Response）。阻尼為100%時就不會出現(xiàn)過沖（overshoot），這里的“過沖”與“跟隨與重疊”含義相近。

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

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

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

?擠壓和拉伸

Squash and Stretch

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

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

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

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

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

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

當然，角色動畫和UI動效在功能性上有著本質(zhì)區(qū)別。角色動畫正是前文所說的，觀眾將所有對動畫的控制權(quán)交給導(dǎo)演的動畫類型。此時動畫內(nèi)部與觀眾處于兩個維度，導(dǎo)演只需要考慮如何呈現(xiàn)動畫內(nèi)部即可。而UI動效的本質(zhì)是響應(yīng)，只有當頁面的大小、顏色、位置發(fā)生改變時，用戶才知道自己的操作是有效的。而流暢的動效設(shè)計可以讓這些改變看起來更自然。

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

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

*本文來自「動畫學(xué)術(shù)趴」，未經(jīng)授權(quán)請勿轉(zhuǎn)載。