2019-5-30 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
動效有助于讓UI具有更好的表現力及更易于使用，盡管具有如此大的潛力，但可能由于它是UI設計家族中的新成員之一，所以它大概是所有設計學科中最不被大眾所了解的。視覺設計和交互設計可追溯到早期的GUI，但由于動畫必須由現代硬件來順暢的渲染，而且UI動效和傳統動畫之間的重疊區間也使得兩者之間的區分變得復雜。傳統動畫需要掌握迪斯尼的12個基本原則，那么這是否意味著UI動效也像傳統動畫一樣復雜？我經常能聽到人們說，動效設計很復雜，不知道如何選擇相對應的動畫模式，但是我認為至少在UI領域，動效設計是可以很簡單的。
從哪里開始
動效主要是通過UI元素之間關系過渡來幫助用戶瀏覽App。當然還可以通過使用圖標、勛章以及插畫動效來為App增色，但是建立產品可用性應該優先于增加動效表現力。在展示你的動效設計技巧之前，讓我們先從設計一個基本的動效開始，即產品導航之間的過渡。
過渡模式
在設計導航之間進行動效過渡時，簡單性和一致性是最關鍵的點。為了達到這個目的，我們將以下2種動畫模式中進行選擇：
1、基于容器的過渡。
2、沒有容器的過渡。
基于容器的過渡
文本、圖標和圖片等元素在容器內進行分組
如果動畫涉及像按鈕，卡片或列表這樣的內容，則使用基于容器的動畫設計，容器通常有很明顯的邊界，這種模式分為三個步驟：
1.使用Material的標準緩動為容器設置動畫（意味著它可以快速加速，然后逐漸的慢下來）。在下圖的示例中，容器的尺寸和圓角半徑從圓形按鈕動畫過渡到填充整個屏幕的矩形。
2.縮放容器中的元素進行寬度自適應，將元素固定在頂部但是仍然存在容器內，這樣在容器和內部元素之間創建了清晰的關系鏈。
*放慢動畫速度以說明元素在容器內如何縮放
3.隨著容器加速，在過渡期間逐漸淡出消失。當容器減速時輸入的元素逐漸淡入。當元素進行快速移動時，通過淡入淡出來實現元素的更替。
*放慢動畫速度以說明元素如何使用淡出淡出
將此模式應用于所有涉及容器過渡的動效，這樣會建立起來一致的動效規則。這樣還使得開始和結束之間的關系更加清晰，因為它們是由兩個動畫容器互相銜接的。為了展示這種模式的靈活性，這里將它分為五種不同使用場景：
*放慢動畫速度以說明容器如何連接開始和結束
有的容器只是使用Material的標準緩動從屏幕外滑入，它滑動的方向取決于與之關聯的組件位置。例如點擊左上角的抽屜導航，圖標將從左側滑動容器。
如果容器從屏幕邊界進入，則它會淡入并放大。它并不是從0％的比例制作動畫，而是從95％開始，以避免元素之間的過渡幅度太大。縮放動畫使用Material的減速緩動，這意味著它以峰值速度開始并逐漸減速停止。在元素退出時，容器會在沒有縮放動畫的情況下淡出。為什么退出動畫會有這樣微妙的設計呢，這樣做是便于將注意力集中在新內容上。
*放慢動畫速度以說明容器如何通過淡入淡出進行縮放動畫
沒有容器的過渡
有些作品將使用沒有容器的過渡來構建動效設計，例如點擊底部導航中的圖標，將用戶帶到新的頁面，在這些情況下，將使用以下兩個步驟：
1、起始元素通過淡出消失，然后最終元素通過淡入進入。
2、隨著最終元素逐漸出現，使用Material的減速運動來巧妙的展現。但同時縮放僅適用于新舊內容的替換。
*放慢動畫速度以說明沒有容器的過渡如何使用淡入淡出和縮放
如果開始和結束的組合元素具有清晰的空間或順序關系，則可以使用共享動畫來強化它。例如當下圖觸發導航組件時，開始和結束的動畫都在垂直維度進行滑動，這加強了他們的垂直布局。當點擊下右圖入門流程中的下一個按鈕時，從左向右水平動畫強化了序列進行的的概念。共享動畫使用Material的標準緩動。
*減慢動畫以說明垂直和水平共享動畫
最佳方案
把事情變的更簡單一些
鑒于其動畫頻率高低與產品可用性密切相關，導航過渡通常應該優先于功能展示。引人注目的動畫通常最適用于小圖標，勛章，加載或空狀態等元素。下面這個簡單的案例可能不會得到Dribbble的那么多關注，但是它更像一個真實的產品。
*放慢動畫速度以顯示不同的動畫風格
選擇合適的時間及緩動類型
導航過渡應該使用合適的時間，快速過渡優先考慮功能，但是速度也不要太快，防止動畫路徑迷失。根據動畫占用的屏幕比例來選擇動畫持續時間。由于導航過渡通常占據屏幕的大部分，因此300ms是一個比較有經驗的動畫時長。相比之下，像開關按鈕這種小組件動畫持續時間很短，大概在100ms左右。如果過渡感覺太快或太慢，請以25ms的增量調整其持續時間，直到它達到合適的動畫節奏。
Easing描述了動畫加速和減速。大多數導航過渡使用Material的標準緩動，這是一種不對稱的緩動類型。這意味著元素會快速加速運動，然后緩慢減速以將注意力集中在動畫結束時。這種類型的緩動為動畫提供了自然的感覺，因為現實世界中的物體不會立即開始或停止移動。如果動畫看起來很僵硬或死板，那么可能是由于你選錯了緩動類型。
*放慢動畫速度以說明不同的緩動類型
本文所說的動效模式在建立一種實用而又微妙的動畫風格。這適用于大多數產品，但某些品牌可能需要更激進的動效表達。要了解更多有關動效的內容，請閱讀Material motion指南。
一旦處理好了導航之間的過渡動畫，在你的產品中添加角色動畫的挑戰就開始了。這意味著簡單動畫模式是不夠的，這時候動傳統的動畫工藝會真正閃耀起來。
角色動畫可以增加趣味性
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
