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

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

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

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

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

要從哪里開始？

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

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

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

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

基于某個容器的轉(zhuǎn)場動效

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最佳實踐

1. 保持簡約

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

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

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

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

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

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

這種緩動讓元素具備了一種更加自然的物理