作者 / Shoko

編輯 / Pel

排版 / 小魚

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

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

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

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

長按靈動島就可以開啟/關(guān)閉揚(yáng)聲器和結(jié)束通話

顯示地圖導(dǎo)航情況

長按靈動島就可以快進(jìn)、暫停

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

‍Dynamic Island Zoo

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

Hit The Island

另一方面，也有很多人認(rèn)為靈動島不過是用來彌補(bǔ)iPhone的硬件不足，又或者是安卓也存在類似的設(shè)計(jì)。

這篇文章中不會過多談?wù)撚布膯栴}，也不會下定論說蘋果的設(shè)計(jì)有多完美。只是僅從設(shè)計(jì)上來說，這未免不是UI設(shè)計(jì)師們在被動的條件下做出的帶有一絲戲謔意味的嘗試。

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

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

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

命令行界面

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

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

圖形用戶界面，是指采用圖形方式顯示的計(jì)算機(jī)操作用戶界面。與早期的命令行界面相比，它降低了用戶的操作負(fù)擔(dān)。其次，圖形界面對于新用戶來說在視覺上更容易接受，學(xué)習(xí)成本大幅下降，也讓電腦的大眾化得以實(shí)現(xiàn)。

圖形用戶界面‍

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

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

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

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

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

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

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

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

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

屏幕方向解鎖動畫：模擬了現(xiàn)實(shí)中開鎖的旋轉(zhuǎn)動作

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

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

微交互（Micro-interactions）、加載和進(jìn)度條（Loading and progress）、導(dǎo)航（Navigation）、敘事和品牌（Storytelling and branding）

微交互

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

微交互

加載和進(jìn)度條

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

下載進(jìn)度條

導(dǎo)航

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

漢堡包導(dǎo)航欄"≡"

敘事和品牌

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

品牌動畫

早期UI動效

閃爍的光標(biāo) (1967）

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

Xerox Alto 施樂奧拓（1973）

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

蘋果公司Lisa（1980～）

1980 年代初期，GUI 上的第一個(gè)動效示例出現(xiàn)在蘋果公司發(fā)布的 Lisa上。盡管這臺電腦在 3 年內(nèi)便停產(chǎn)，但它已然成為 UI 歷史的里程碑。

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

單擊文件、目錄或應(yīng)用程序時(shí)，光標(biāo)會變成沙漏。

提示現(xiàn)在所在的位置的滾動條動效。

提示按鈕可點(diǎn)擊的懸停動效。

‍滾動條動效

光標(biāo)變成沙漏

Windows

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

Windows 3.1歡迎動畫

Windows XP下載進(jìn)度窗口(2001)

近年iOS動效案例（2013～）

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

動效視覺中心

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

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

iOS7的視覺中心為用戶操作點(diǎn)

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

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

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

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

應(yīng)用啟動速率圖

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

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

空間一致性

現(xiàn)實(shí)生活中我們會感受到物體通常以相同的路徑出現(xiàn)和消失。也就是說當(dāng)我們看到一個(gè)物體被另一個(gè)遮蔽物遮擋后，我們不會認(rèn)為該物體憑空消失了，而是會覺得它依然存在于遮蔽物后。如果該物體從另一地方突然出現(xiàn)，那就會有一種魔術(shù)感。

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

頁面從哪里出現(xiàn)就將回到哪里

動態(tài)運(yùn)動

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

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

定時(shí)動畫

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

動態(tài)運(yùn)動

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

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

緩入緩出 Slow In and Slow Out

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

動畫中的緩入緩出

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

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

現(xiàn)實(shí)中汽車的剎車過程

滑動中的無縫運(yùn)動

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

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

動畫中的跟隨與重疊

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

帶有彈性的頁面

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

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

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

輕觸手勢不帶有彈性

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

輕掃手勢帶有彈性

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

手勢不正確時(shí)，會有一個(gè)彈跳動效

擠壓和拉伸 Squash and Stretch

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

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

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

關(guān)閉App時(shí)的擠壓

UI動畫和角色動畫的異同

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

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

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

靈動島

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