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

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

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

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

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

要從哪里開始？

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

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

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

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

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

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

在 UI 界面當(dāng)中，如果一個(gè)轉(zhuǎn)場(chǎng)動(dòng)效牽涉到諸如按鈕、卡片或者列表，那么這種動(dòng)效通常都會(huì)基于這些容器來(lái)進(jìn)行設(shè)計(jì)。很多容器控件都有著清晰的邊緣，但是要記住，在動(dòng)效出現(xiàn)之前，邊緣可以是不可見(jiàn)的。就像沒(méi)有分隔符的列表一樣。通常，這種模式下的動(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)縮放，過(guò)程中基于寬度自適應(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è)變化過(guò)程就會(huì)顯得無(wú)縫而自然了。

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

這當(dāng)中的許多容器大都只使用了 Material Design 種的標(biāo)準(zhǔn)緩動(dòng)動(dòng)畫來(lái)呈現(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ò)度關(guān)注動(dòng)畫。

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

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

有很多動(dòng)畫效果也是在沒(méi)有容器的承載下，就開始構(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)出來(lái)。同樣的，明顯的縮放僅僅應(yīng)該應(yīng)用在新進(jìn)入的部分，而不是消失的組件。

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

如果開始和結(jié)束有著清晰的空間關(guān)系和邏輯順序，那么可以使用相似的、共享的動(dòng)效來(lái)強(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. 保持簡(jiǎn)約

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

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

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

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

相比之下，更小的UI控件當(dāng)中，動(dòng)效的持續(xù)時(shí)長(zhǎng)還要短，通常100ms 就足夠了。如果你覺(jué)得某個(gè)動(dòng)效設(shè)計(jì)得太快或者太慢，請(qǐng)以 25ms 為單位，進(jìn)行增速或者減速的調(diào)整，直到它達(dá)到你所預(yù)期的視覺(jué)和體驗(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)讓元素具備了一種更加自然的物理質(zhì)感。因?yàn)楝F(xiàn)實(shí)世界中的物體通常不會(huì)勻速運(yùn)動(dòng)，它也不會(huì)立刻開始和結(jié)束，而緩動(dòng)則不會(huì)讓過(guò)渡和運(yùn)動(dòng)顯得僵硬機(jī)械。

本文中所描述的設(shè)計(jì)模式和最佳實(shí)踐，旨在建立真正實(shí)用的、微妙的動(dòng)效，它們適用于絕大多數(shù)的APP和網(wǎng)頁(yè)，當(dāng)然，也有一些品牌可能會(huì)需要更加強(qiáng)烈的表現(xiàn)形式。

一旦完成了基本的轉(zhuǎn)場(chǎng)動(dòng)效的設(shè)計(jì)，你就可以開始考慮更加細(xì)化和個(gè)性化的設(shè)計(jì)和挑戰(zhàn)了。而這個(gè)時(shí)候，才是這些簡(jiǎn)單的動(dòng)效不能滿足的地方，更加有趣、多變的動(dòng)效，在此時(shí)才應(yīng)該發(fā)光發(fā)熱。

作者：?Jonas Naimark

譯者：陳子木

來(lái)源：https://www.uisdc.com/motion-design-doesnt-hard

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議