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

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

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

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

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

要從哪里開始？

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

轉場過渡的設計模式

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

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

基于某個容器的轉場動效

文本、圖標、圖像等UI元素被置于一個容器內

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

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

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

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

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

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

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

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

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

不存在容器情況下的轉場動效

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

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

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

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

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

最佳實踐

1. 保持簡約

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

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

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

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

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

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

這種緩動讓元素具備了一種更加自然的物理質感。因為現(xiàn)實世界中的物體通常不會勻速運動，它也不會立刻開始和結束，而緩動則不會讓過渡和運動顯得僵硬機械。

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

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

作者： Jonas Naimark

譯者：陳子木

來源：
https://www.uisdc.com/motion-design-doesnt-hard

本文由 @陳子木 授權發(fā)布于人人都是產品經理，未經作者許可，禁止轉載

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