很多人都說UI動(dòng)效很復(fù)雜，設(shè)計(jì)動(dòng)效過程中參數(shù)的選取非常模棱兩可。但其實(shí)，動(dòng)效設(shè)計(jì)并沒有那么難。

UI中動(dòng)效設(shè)計(jì)本沒有那么玄乎，作為 Google 旗下 Material Design 團(tuán)隊(duì)中動(dòng)效設(shè)計(jì)的負(fù)責(zé)人之一，Jonas Naimark 對(duì)于動(dòng)效本身有著更為透徹的認(rèn)知，這也促成了今天的這篇文章。動(dòng)效不難，想入門很簡單！

動(dòng)效讓UI更加富有表現(xiàn)力更加易用，這是不爭的事實(shí)。盡管動(dòng)效擁有巨大的潛力，但是，在很大程度上依然算是 UI 設(shè)計(jì)領(lǐng)域當(dāng)中的邊緣學(xué)科，難以否認(rèn)的是，它確實(shí)是整個(gè)設(shè)計(jì)家族中的新成員。視覺設(shè)計(jì)和交互設(shè)計(jì)可以追溯到早期的 GUI 設(shè)計(jì)，而如今的動(dòng)效的設(shè)計(jì)和實(shí)現(xiàn)很大程度上依賴現(xiàn)代硬件的強(qiáng)大渲染能力來達(dá)成。

UI動(dòng)效和傳統(tǒng)動(dòng)畫在「動(dòng)」這一事上的重疊，使得如今整個(gè)設(shè)計(jì)領(lǐng)域，在概念和邊界上都變的模糊不清。從傳統(tǒng)動(dòng)畫的角度上來說，你可能終其一生才能真正掌握迪士尼所提出的12個(gè)動(dòng)畫運(yùn)動(dòng)規(guī)則，但是這是否意味著UI中的動(dòng)畫同樣如此復(fù)雜、需要如此長周期的展示呢？

有很多人跟我說，UI動(dòng)效很復(fù)雜，設(shè)計(jì)動(dòng)效過程中參數(shù)的選取非常模棱兩可。在我看來，并非如此，動(dòng)效設(shè)計(jì)可以很簡單，并且應(yīng)該很簡單。

要從哪里開始？

動(dòng)效的主要功能是用來呈現(xiàn) UI 中不同元素之間的關(guān)系，來幫助用戶在界面和界面之間進(jìn)行導(dǎo)航。動(dòng)效還可以加持到圖標(biāo)、Logo、插畫等元素上，來賦予 UI 以個(gè)性，但是 UI 本身的可用性的優(yōu)先級(jí)是一定要高于視覺和動(dòng)效的表達(dá)。在展示探討借助動(dòng)效拓展個(gè)性和調(diào)性之前，我們應(yīng)該優(yōu)先關(guān)注如何借助動(dòng)效來優(yōu)化導(dǎo)航和過渡，構(gòu)建強(qiáng)大的動(dòng)效基礎(chǔ)。

轉(zhuǎn)場過渡的設(shè)計(jì)模式

在考慮設(shè)計(jì)導(dǎo)航的過渡效果的時(shí)候，簡單性和一致性是兩個(gè)關(guān)鍵屬性。為了做好這一點(diǎn)，我們通常會(huì)基于兩種情況來設(shè)計(jì)：

1. 基于某個(gè)容器的轉(zhuǎn)場動(dòng)效；
2. 不存在容器情況下的轉(zhuǎn)場動(dòng)效。

基于某個(gè)容器的轉(zhuǎn)場動(dòng)效

文本、圖標(biāo)、圖像等UI元素被置于一個(gè)容器內(nèi)

在 UI 界面當(dāng)中，如果一個(gè)轉(zhuǎn)場動(dòng)效牽涉到諸如按鈕、卡片或者列表，那么這種動(dòng)效通常都會(huì)基于這些容器來進(jìn)行設(shè)計(jì)。很多容器控件都有著清晰的邊緣，但是要記住，在動(dòng)效出現(xiàn)之前，邊緣可以是不可見的。就像沒有分隔符的列表一樣。通常，這種模式下的動(dòng)效會(huì)分為三個(gè)步驟：

注：為了方便你能看清，動(dòng)畫的展現(xiàn)速度被放慢了，實(shí)際情況下會(huì)快很多。

（1）容器本身的動(dòng)效使用 Material 中的標(biāo)準(zhǔn)緩動(dòng)（這種緩動(dòng)動(dòng)畫效果下，啟動(dòng)加速很快，然后速率逐漸緩和減慢）。在這個(gè)實(shí)例當(dāng)中，容器發(fā)生了尺寸和形狀上的變化，從一個(gè)圓形按鈕變化為一個(gè)充滿屏幕的矩形。

（2）UI元素在容器內(nèi)縮放，過程中基于寬度自適應(yīng)調(diào)整。容器內(nèi)的元素被固定在容器的頂部，會(huì)隨著頂部的延伸而自然延伸，并且所有元素都會(huì)被遮蓋在容器內(nèi)。這樣的設(shè)計(jì)，讓元素和容器之間的相互關(guān)系更加清晰。

（3）在動(dòng)畫變化的前一個(gè)階段，變化速度逐漸加快。在容器變化速率最快的時(shí)候，包含在容器內(nèi)的 UI 元素逐漸淡入顯示，并且變化速率開始減緩。當(dāng)整個(gè)動(dòng)效足夠快的時(shí)候，整個(gè)變化過程就會(huì)顯得無縫而自然了。

這種動(dòng)效設(shè)計(jì)規(guī)則非常清晰，如果將它應(yīng)用到整個(gè)界面的不同控件上，能夠建立出一致的動(dòng)效樣式。而且這樣的動(dòng)效在開始和結(jié)束過程中，有非常清晰的邏輯關(guān)系，整體的變化依靠容器鏈接，為了展示這種模式的靈活性，我們將它應(yīng)用到 5 種不同的控件上去：

這當(dāng)中的許多容器大都只使用了 Material Design 種的標(biāo)準(zhǔn)緩動(dòng)動(dòng)畫來呈現(xiàn)從屏幕外滑入的效果。它滑入的方向，取決于這一容器和相互關(guān)聯(lián)的組件之間的位置關(guān)系。例如：點(diǎn)擊左上角的導(dǎo)航菜單按鈕，那么菜單展開的滑動(dòng)動(dòng)效是從左側(cè)進(jìn)入屏幕的。

如果容器是從屏幕邊緣進(jìn)入，它會(huì)逐漸淡入并放大。但是，動(dòng)畫所呈現(xiàn)的元素大小并不是從0%開始的，而是從 95%開始的，這一點(diǎn)和macOS 種窗口最小化的神奇效果是截然不同的，這是為了避免用戶過度關(guān)注動(dòng)畫。

這個(gè)縮放動(dòng)畫使用了 Material Design 種的減速緩動(dòng)效果，這意味著動(dòng)效的速率一開始就處于峰值，然后速度逐漸減緩。在退出的時(shí)候，容器會(huì)在幾乎沒有縮放的情況下逐漸淡出。退出的動(dòng)畫效果會(huì)比進(jìn)入的更加微妙，這樣用戶會(huì)更加關(guān)注新的內(nèi)容，而不是即將消失的信息。

不存在容器情況下的轉(zhuǎn)場動(dòng)效

有很多動(dòng)畫效果也是在沒有容器的承載下，就開始構(gòu)建的，比如在APP的界面中點(diǎn)擊底部的導(dǎo)航按鈕，將用戶完全帶到一個(gè)全新的界面當(dāng)中。在諸多情況下，這種動(dòng)效會(huì)遵循下面的兩個(gè)步驟：

1. 前一個(gè)組件或者元素開始淡出消失，隨后新的組件或元素開始淡入。
2. 隨著前一個(gè)部分的消失，后一個(gè)組件會(huì)使用Material Design 中的減速緩動(dòng)動(dòng)效，巧妙地展開呈現(xiàn)出來。同樣的，明顯的縮放僅僅應(yīng)該應(yīng)用在新進(jìn)入的部分，而不是消失的組件。

注：為了方便你能看清，動(dòng)畫的展現(xiàn)速度被放慢了，實(shí)際情況下會(huì)快很多。

如果開始和結(jié)束有著清晰的空間關(guān)系和邏輯順序，那么可以使用相似的、共享的動(dòng)效來強(qiáng)化設(shè)計(jì)的一致性。比如：下面的兩個(gè)案例，左側(cè)在進(jìn)行導(dǎo)航操作的時(shí)候，所產(chǎn)生的動(dòng)效，在最后淡入的時(shí)候，都會(huì)帶有一個(gè)垂直方向上的微妙運(yùn)動(dòng)。

而右側(cè)的案例中，新用戶入門流程中，所有的操作切換都會(huì)帶有一個(gè)水平方向上的緩動(dòng)。所有的這些都只是使用了Material Design 中的標(biāo)準(zhǔn)緩動(dòng)，就足以創(chuàng)造出這樣的一致感。

最佳實(shí)踐

1. 保持簡約

鑒于動(dòng)效的使用頻率非常高，它和設(shè)計(jì)的可用性密切相關(guān)，導(dǎo)航過渡效果的功能性更加優(yōu)先，而不是風(fēng)格。當(dāng)然，這并不是說它不應(yīng)該風(fēng)格化，只是說在確保品牌整體風(fēng)格一致就可以了。引人矚目的動(dòng)效，通常更加適合和小圖標(biāo)、LOGO、加載器和空狀態(tài)等元素或者界面搭配。

下面的范例當(dāng)中，動(dòng)效設(shè)計(jì)的比較簡單，這樣的設(shè)計(jì)在 Dribbble 上可能不會(huì)得到很多贊，但是它們是更能適配各種應(yīng)用的動(dòng)效設(shè)計(jì)。

2. 選擇合適的時(shí)長和節(jié)奏

諸如導(dǎo)航切換的動(dòng)效轉(zhuǎn)場，所持續(xù)的時(shí)長，應(yīng)該優(yōu)先考慮到它的功能性，要利落，但是也不能過快，太快會(huì)讓用戶感到迷惑?？梢愿鶕?jù)用戶在界面停留的時(shí)長，來估算動(dòng)效應(yīng)該持續(xù)的時(shí)長。根據(jù)以往導(dǎo)航過程中，用戶在導(dǎo)航頁面中所駐留的時(shí)長來進(jìn)行判斷，300ms的動(dòng)效時(shí)長，是一個(gè)值得參考和使用的時(shí)長。

相比之下，更小的UI控件當(dāng)中，動(dòng)效的持續(xù)時(shí)長還要短，通常100ms 就足夠了。如果你覺得某個(gè)動(dòng)效設(shè)計(jì)得太快或者太慢，請(qǐng)以 25ms 為單位，進(jìn)行增速或者減速的調(diào)整，直到它達(dá)到你所預(yù)期的視覺和體驗(yàn)。

緩動(dòng)本身描述了動(dòng)效的加速和減速的速率特征，絕大多數(shù)的動(dòng)效可以直接采用Material Design 中的標(biāo)準(zhǔn)緩動(dòng)就行了，這是一種不對(duì)稱的緩動(dòng)類型，這種緩動(dòng)的特征是開始加速快，然后較為緩慢地減速，這樣會(huì)讓用戶更容易注意到整個(gè)變化的結(jié)果。

這種緩動(dòng)讓元素具備了一種更加自然的物理