起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識實戰案例：如何讓你的UI界面更加有趣而富有生命力
動效可以以更加廣泛、多樣的方式，打通產品，將產品的美學和功能統一到一個系統之下。
如果重新審視10年前的網頁和移動端應用的話，你會發現動效和動畫在這個時期簡直是犯規一般的存在：瀏覽器和硬件設備吃不消，它們根本無法成為設計最佳實踐。十年前你所能看到的動畫和動效，通常是使用Flash實現，或者短暫的存在于彈出框和閃爍的按鈕特效中。但是情況在最近的幾年出現了巨大的轉變，iOS和Android 設備的大規模普及，移動端芯片的性能提升，讓設計師在移動端APP上實現多樣的動畫和動效，成為了可能，而今天，動畫和動效已經成為了如今UI和UX設計當中，最重要的組成部分之一。時間這一維度的加入，令靜態的UI動態地呈現，設計師可以因此而可以創造出更加豐富多彩的世界。
現代的UI界面不再是一系列靜態的分屏。將時間的維度添加到UI界面中就產生了動效，它彌合了人類認知和軟件本身之間的溝壑，用戶更容易理解和使用軟件了。
那些最直觀、令人愉悅的動效設計常常將一些有趣的細節加入到其中，在之前的那篇《動效在UI設計中的三個關鍵用途》當中，已經詳細闡述了UI設計中動效的三個關鍵用途，這些用例大都是這樣做的。在今天的文章中，我將繼續通過實戰案例，為你闡釋如何讓你的UI界面更加有趣而富有生命力。
讓加載動效更具視覺愉悅感
當APP 的打開動效足夠有視覺愉悅感的時候，用戶每次打開的時候都會為之感到開心愉悅。但是，動效能做的并不止于此，下面的案例中，Uber的打開動效不僅讓用戶體會到愉悅感，而且它的展開式動效還很好地“控制”了用戶雙眼的視覺焦點。
用有吸引力的視覺設計引導新用戶
新用戶第一次打開你的APP的時候，通常需要經過新用戶引導流程，快速了解APP的功能和特色，而這也是用戶和你的APP的第一次交互。而APP給用戶的第一印象也非常重要，所以初次的引導體驗應該足夠好，平滑的過渡動效加持的引導流程，對于初次使用的用戶而言有著巨大的影響，同APP的用戶留存率有著直接的關聯。
下面的新用戶引導的動效就充滿了創意和個性，充滿驚喜的視覺設計和直觀簡練的文案都給用戶以良好的印象，非常值得學習。
交互式提醒
不同的APP在功能上有著許多差異，許多新的功能可能用戶之前從未接觸過，加入交互式的小貼士能夠幫助用戶更好的熟悉APP，而這種動態而智能的呈現方式，能讓APP顯得更加貼心而靈活。
提供方向上的視覺線索
當UI界面中狀態發生改變的時候，動效的重要作用就顯現出來了。狀態改變之后，新的界面出現，用戶需要知道新的界面和之前的界面之間的關系，而動效就是線索。
靜態的設計通常難以闡明狀態之間的相互關系。
對于建立內容之間的關系這件事而言，動效非常的實用，它可以作為不同UI狀態之間的連接點。
闡述元素之間的關系
精心設計的過渡動效能夠將用戶的視線引導到設計師希望用戶看到的位置，引導用戶去交互。動效在UI當中能夠有針對性地對一些元素進行強調，并且闡明不同元素之間的關系。
轉場動效連接了播放和暫停按鈕之間的兩個狀態，從而闡明了兩者之間的關系。
空間意識
意境地圖是人類對于空間和關系的理解的關鍵點，而動效能夠幫助用戶對界面的空間關系有更深的了解，明白界面元素從哪里來，到哪里去。
用戶借助動效明白他們所處的位置，找到他們想去的地方。
提供清晰的反饋
動效能夠強化用戶正在進行的交互的效果，幫助用戶了解操作的進行方向，產生的結果，確定操作成功與否，以及為何會如此。
揭示問題
當你需要設計界面中的錯誤狀態的時候，你需要讓用戶清晰的意識到系統正在報錯，而動效在此處作用也很重要。密碼輸入錯誤的時候，密碼輸入框抖動的特效，就是一個很好的實例。它模擬了人們搖頭抖動的效果，直觀而擬人化地給予用戶以報錯反饋。
多個元素層協同為用戶傳遞信息將會更加有效。
確認效果
動效能夠以更視覺化的方式呈現用戶操作之后的結果。展示結果，而不要去描述，通過反饋呈現交互所產生的結果。
在Stripe 這個APP實例中，當用戶點擊支付之后，按鈕呈現出短暫的加載過程之后，顯示支付成功。成功的對勾標識會讓用戶覺得支付很簡單，而短暫的加載則讓用戶感受到了這個過程，但是這又不會讓他們等待很久。
展現邏輯
邏輯是幾乎所有的動效都具備的一個特征。你需要讓你的動效符合整體的邏輯，尤其是在移動端的APP上。有限的空間和復雜的實際狀況是用戶絕大多數所面臨的狀況，你需要充分利用空間，打通環節，降低產品的復雜性，使用動效將界面和元素以富有邏輯的方式呈現出來，就很有必要了。
你需要讓你的動效充滿目的性，也富有邏輯，有太多的APP因為不可預測的交互和過于繁復花哨的動效而最終失敗。雖然有的動效做到很贊，在實現上也沒問題，但是它讓界面顯得混亂，這就成問題了。
現實中約定俗成的交互習慣和之前產品給用戶養成的習慣，使得手勢交互有了一套常規的法則。不一致的交互方式，會破壞用的使用習慣，毀掉整個用戶體驗。
結語
動效可以以更加廣泛、多樣的方式，打通產品，將產品的美學和功能統一到一個系統之下。所以，你需要有目標的設計動效，因為動效存在的首要目的并不是讓你的產品看起來酷，而是功能，是讓產品可用，具備好的體驗，然后才是其他。
原文作者：Nick Babich
原文地址：uxplanet
譯者：@陳子木
譯文地址：http://www.uisdc.com/motion-bring-apps-to-life
動效是需要專門動效開發人員做嗎?還是開發客戶端就能完成？
說的太好了！學到了！