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

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

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

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

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

要從哪里開始？

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

轉場過渡的設計模式

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

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

基于某個容器的轉場動效

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最佳實踐

1. 保持簡約

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

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

2.?選擇合適的時長和節奏

諸如導航切換的動效轉場，所持續的時長，應該優先考慮到它的功能性，要利落，但是也不能過快，太快會讓用戶感到迷惑?？梢愿鶕脩粼诮缑嫱Ａ舻臅r長，來估算動效應該持續的時長。根據以往導航過程中，用戶在導航頁面中所駐留的時長來進行判斷，300ms的動效時長，是一個值得參考和使用的時長。

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

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

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

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

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

作者：?Jonas Naimark

譯者：陳子木

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

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

題圖來自Unsplash，基于CC0協議