UI是什麼？
首先軟件設計可分為兩個部分：編碼設計與UI設計。而UI即User Interface（用戶界面）的簡稱。UI設計則是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現軟件的定位和特點。
UI是基於靜態頁面來設計的，頁面之間通過跳轉切換。但是在設計過程中，設計師很重視單頁的視覺效果，卻經常忽略了對界面跳轉的處理，即動效。
我們可以確定動效的三個重要特性（側重類型）：
功能性（Functional），物理性（Material），趣味性（Delightful）。
動效有多重要？
動效可以幫我們提升UX（用戶體驗），使UI界面顯得更加一致和真實，並給整個產品帶來創新的感覺。
1
功能性
- 優化用戶對界面的感知，使其感到更輕快更全面。
- 引起用戶的注意。
- 提供（用戶操作後的）視覺（功能）反饋，併為下一步的跳轉做準備。
2
物理性
- 在一致的動畫原則和物理的（符合物理定律的）UI模型基礎上構建動畫。
- 定義屏幕和UI元件之間的空間相對關係，他們的相對高度，權重以及速度。
3
趣味性
- 在上面兩個部分都滿足的情況下，加入一些有趣的動畫。
- 使它感覺獨特，能在諸多動畫中能讓人眼前一亮。
- 娛樂用戶，並讓他們一想到動畫就能想到該產品或者反之。
下面我們來詳述這三種類型：
功能性動畫
Functional animation
我見過的第一個動畫就是MS-DOS命令提示符中不斷閃爍的光標。這個動畫很友好並溫馨——像是在說：“來吧，寫點東西。” 同時它還是功能性的——如果停止閃爍，那這就意味死機並“可能起火”。我花了很久才知道這小動畫的意思——動效對交互引導和了解系統狀態都很重要。
UI界面的切換（特別是網頁）通常都是直接硬切，使用戶很難進行跟進。在認知科學的領域裡這種情況叫做變化盲視——視覺刺激的突兀變化會阻止用戶注意到新的信息。
功能動效能夠補充理解能力的差距。
功能性動效可以讓用戶跟著你的應用程序的流程走的同時不會落後（即從哪來到哪去）。幫助人們在界面中定位並建立視覺關係。我們的大腦和眼睛會快速注意到移動的目標——這是一個反射。動效可以幫助眼睛注意到新的目標出現或者一個目標的隱藏。
一個好的動畫比任何文字和插畫都能快速表達一段故事。動畫是語言，是世界通用。你沒必要把動畫翻譯成英語或日語。正確的界面轉換動效可以讓你用戶快速養成使用習慣。設計師要經常思考真正的用戶體驗，而不是抽象的“點擊次數”或“左滑右滑”。
▲
例如，輸錯密碼後搖動的動畫貌似比立即顯示一個錯誤徽章要更長的時間。但是在現實中，用戶可能需要進一步的確認錯誤徽章信息，而不是看到動畫瞬間就明白是什麼意思。
總結：功能性——確定你的動效能夠解決用戶需求
物理動效
Material Animatio
物理動效Material Animation物理動畫其實被很多人誤解了。它其實不是google的東西，GOOGLE只是起了一個MD這個名字來表達他得統一設計規範而已。物理動畫的真正意思是，讓你UI符合空間邏輯並根據物理定律做動畫。當你的動效考慮到像重力和慣性，速度和剛性，它就顯得很真實，用戶會覺得更加自然，當然就有助於快速形成使用習慣，因為這些動效都是熟悉並可預知的。但是，如果動效看起來不真實，會顯得你的網站和APP都顯得很俗氣，並導致用戶完全不信任你的內容。
物理動效能使UI轉場更加可預測並使瀏覽有了連續性。
作為一個設計師。你有無數種辦法在應用程序或者網站裡建立一個虛擬的世界。每個UI“世界”擁有自己獨特的地圖。你的菜單可能隱藏在浮動的按鈕裡或者在畫板下面，你也可以放在抽屜菜單裡或做成輪盤。但是無論選擇哪種方式，你的動效一定要有邏輯性和真實性。
用戶第一次到我們所創造的UI虛構世界裡面——需要開拓並從頭開始學習。他們需要了解界面從哪到哪，這樣他們再次找到就很容易，但這個轉場不適合硬切換，因為真實世界中是不存在硬切換的。
UI動畫的另一個問題就是壞品味。品味是主觀的，但總體說來它和美學相關。而人類的美學是基於我們周圍的世界。如果你以力學，動力學和光學原理為基本線，那麼創建有品位的動畫就是一件很簡單的事情。
趣味動效Delightful animation當然，動效最重要的還是上面兩種。但是人類不僅有理性，還有感性。我們喜歡好玩的東西。我們希望網站和應用程序能夠和用戶建立聯繫，而趣味動效可以讓用戶體驗變得真正愉快和難忘。
讓動畫成為你的品牌的一部分。
動效細節原則總結今年早些時候迪斯尼動畫師Glen Keane和R/GA的設計師Rebecca Ussai在Medium上發了一篇文章UX Choreography，首次嘗試通過12個原則和5個規律來總結UI動效的一些要求。他們總結的很好，不過只是主要涵蓋了功能性動效，沒有去真正考慮“物理性”和“趣味性”。從我的觀點上來看，12個原則可以完全應用於UI動效。我重新整理了這些規則歸類進了上面的三種動效中。
下面讓我們看看這些原則是如何單獨應用到UI動效的，並分析他們的相互關係。
▲
實體繪圖Solid drawing基本的物理設計原則。主要是遵循三維空間的規則，通過給對象賦予重量和容積來得到適當維數。實體繪圖需要動畫師熟悉基本的三維形狀知識——結構，重量，平衡，光和陰影。迪斯尼動畫師希望動畫片看起來真實，希望觀眾能夠和動畫角色關聯起來。他們以前叫Solid drawing。今天在動效設計領域稱之為 Material Design。
▲
有兩種辦法畫出動態效果：逐幀畫 / 直接畫每個不同狀態。動畫師根據複雜程度和轉場的狀態使用不同的技術手段。而動效跟我們用戶的聯繫決定於我們要用Xcode還是css還是用其他編程語言來實現。
如果動效很簡單，你只需變化一個單一的參數，比如說對象的位置或者縮放，可以創建兩個關鍵幀來直接實現相對線性的過渡。
而如果你的動畫是獨特複雜的，有很多變量，那麼你應該製作逐幀動畫或者使用AE等軟件製作出來。
▲
擠壓和拉伸Squash and stretch用來描述目標對象的剛性和質量，定義對象的物理屬性。作為設計師你應該定義UI的屬性：固定架構，剛性表面，以及快速準確地動作；還是更有機，具有柔軟可彎曲的表面以及流體動作。這是你的動效品牌感：你的動畫風格和給人的感受。
同樣，弧線（曲線）也有助於定義動畫的本質。像汽車自行車火車等機械產品傾向於沿著直線軌跡運動，而有機體，如植物，動物，和，嗯……我們，往往沿著弧形軌跡移動。所以問問你自己，你的UI是機器人還是人性化的？這一原則，以及擠壓和拉伸和直線等結合就能創建更真實的，有機的，令人難忘的動效。
分級強調主要強調動效的中心思想（分清主次），能使用戶見到動效就一目瞭然。一個分級較好地過渡動效可以把用戶的注意力吸引到正確地位置---到重要的建議內容或交互重點上。大多數用戶界面缺乏強有力的關注點，結果新用戶瀏覽各種界面時通常一頭霧水。即使你的UI沒有重要關注點，你可以給動效進行分級，讓用戶真正注意到重要的部分。
時間可能是最重要的原則之一。無論你在用什麼做動畫，你的時間序列定義了用戶對動效的感知和理解程度，包括製作主要和次要動畫以及緩入緩出等效果。
動畫合成需要技巧和練習。時間的控制主要是速度曲線。AfterEffects 的一些腳本或者自帶的關鍵幀輔助功能都提供一些基本曲線（EASE IN / EASE OUT）。
標準緩動曲線查詢網址：
如果你剛開始接觸緩動曲線，那麼應該多去鍛鍊，找到動畫感覺，達到能夠快速分辨出動畫的緩動方式的水平就可以了。
▲
跟隨和重疊原理是和同時發生多個動畫有關的。好多東西都不是一致性的運動，有些動畫比其他動畫更加引人注意。
跟隨原理的意思是 要讓屬於大的對象的部分跟隨其“父級” 有機和真實的運動。而 重疊可以確保這一切同時發生。跟隨原理 可以提現UI構件之間的層級關係，並給動畫設置優先級，同時重疊原理 可以使動畫保持一致並在可控範圍內協調運動。
▲
輔助動畫原則和上面的原理很像。它可以幫助你確定哪些需要放在用戶眼前，哪些需要隱藏。選擇對用戶理解最重要的動畫為優先的，並用輔助動畫進行潤色。
▲
緩入/ 緩出是引起用戶注意的基礎效果，同時能讓動畫感覺順暢和真實。這個原則，和時間+跟隨重疊原理結合，可以製作很自然且有層次感的動畫。
從物理性角度講，緩動動畫遵循的是 慣性定律——物體運動不會突然停止和瞬間加速（都有加速和減速過程）。動畫遵循物理定律可以讓用戶更加舒服。從功能性角度，不斷減速的物體會吸引人們的注意力，不斷加快速速度的對象會失去注意力。比如說 進來的動畫要先快後慢，出去的物體要先慢後快。
▲
預判是可以在動畫的開始或結束階段都可用的原則。首先，它對預備一些要動的對象以及編排場景的部件，流露一些動畫的“線索”。預判效果的最簡單的實現辦法就是緩入。第二個預判方法就是在動畫轉場後提供手勢輔助，比如說出現“右滑菜單進行選擇”等提示語。
總結：物理性——設計高度統一的，能夠製作有空間意義轉場的用戶界面
趣味性
Delightful
▲
誇張可以讓動畫變現得活潑有趣。不誇張的動畫有時會顯得精確，不過在有些場景中會很無趣，機械和僵硬。可以根據你對用戶體驗的感覺和要求程度確定該不該做誇張地動畫以及誇張地程度。動效的目標是讓你的按鈕/面板/菜單/內容和用戶交互後的效果顯得更加生動。
▲
感染力是最為神秘的原則之一。我們每天都接觸N個APP和網站，他們解決著各種人的各種需求。而真正留住用戶，增加用戶粘性的卻沒幾個。真正能夠留住用戶的不僅有好的用戶體驗，還能使用戶對產品產生感情。
把動效做的統一又有感染力，需要在設計動畫時不僅讓用戶感覺真實，還要有自己的獨特風格。
總結：趣味性——給你的動畫一些關愛（趣味），讓用戶愛上你的產品。
閱讀更多 UI妹兒 的文章
