起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識好的動效如何讓你的設計事半功倍？
本文結合具體的案例解析，一個好的動效，在哪些方面氣到對可用性的支持。
在正文開始之前，先來聽一個小故事。
某天，老板對新來的T同學說：
“來，給這個產品做個動效吧，明天上線?！?/p>
T同學心想，大展身手的機會終于來了。在嘔心瀝血下載了10種不同的動效軟件，看了10086篇中英文教程后，終于做出了一款堪比PPT百葉窗效果加強酷炫版3.0的動效，信心滿滿地提交了。
你們猜結果怎么樣？
老板對其勤奮的精神大加嘉獎，但這個驚天地泣鬼神的神奇動效最終也是沒有上線。
“說好的乙方都喜歡五彩斑斕的動態黑呢！”借酒澆愁的T同學哭著對我說，童話里都是騙人的。
確實，但好的動效，不應當僅僅是外表光鮮的童話，合理地支持可用性，才是它的內核。
擁有15年經驗的動效體驗設計師Issara Willenskomer曾經撰文：《動效創造可用性：動效中的用戶體驗宣言》，表達了他對一個合格動效的態度：即一個合格的動效動效應當在以下四個方面起到對可用性的支持，分別是：
接下來，就讓我們結合具體示例，看看它們是如何進行實際應用的。
一、符合預期
此處的期待我們可以理解為用戶的心理模型，即用戶對于產品表現的普遍認知。動效作為界面的重要元素，應當起到減少實際表現和用戶心理模型之間差距的作用，即通過符合“用戶對物理世界運動規律的普遍認知”，來增加產品的可用性。
可以感受一下，下圖的緩動動效明顯不符合我們日常熟知的自然運動規律，在沒有外力介入的情況下，組件突然加速，這樣不僅不能增加可用性，甚至會損害體驗，讓用戶疑惑、分心。
對比之下，天貓小黑盒的頁面動效就很好地配合了品牌本身“盒”的概念，在下拉、轉動的動作中都參照了盒子的運動樣式，符合用戶對其品牌的期待的同時，還可以加深品牌印象：
二、體驗連續
這里的連續性包含兩個方面的內容：
- 一是使用流程的“連續性”；
- 二是將多個場景連接在一起，構成整個體驗場景的“一致性”。
使用流程的連續性，即用戶的體驗流程是完整的，不是被突然打斷的。一個常見的例子就是瀑布流，利用動效，可以讓用戶在等待加載的過程中依然處于“連續”的體驗感受中，而不是戛然而止，同時也可以幫助用戶產生心流體驗。
下圖Medium的文章瀑布流加載效果就很好地增強了這一點。在下拉的loading后，文章以漸現的效果出現，相比之下，知乎日報的效果就要生硬很多，每次加載都有一種生硬的截斷感。
體驗場景的一致性，則是指在整體的體驗流程中，保持整體邏輯和設計語言的一致。我們會遇到很多不同場景的切換，例如網購時從登錄賬號到搜索商品、瀏覽結果等等。這些細分場景本身應當擁有一致的設計語言，在使用動效連接場景的時候，也應當和前后設計語言保持一致。
如下圖，在名畫推薦軟件“Daily Art”中，滑動當日推薦畫作的卡片時，卡片會產生了形狀大小上的變化，隨即從圖片場景轉換到了文字場景；在從文字場景回歸到圖片場景時，依然延續了先前的變化邏輯，卡片從全屏幕縮小回原本的大?。?/p>
三、輔助敘事
用戶使用產品的過程，可以類比為與產品的設計對話的過程。在這個過程中，動效就像是設計語言中運用的修辭手法，將語言中的元素鏈接成一個更加完整的體驗故事，例如可以使用隱喻引導用戶進行操作。
京東“早點上新”頻道首頁中輪播的盤子，就隱喻了用戶可以對該部分進行滑動操作：
在敘事層面上，動效還可以幫助進行對界面元素性質的輔助闡述，例如下圖，進入京東App的“簽到”處時，我們可以看到京豆的數字變化上升的動態效果，體現了它的可增加性：
除了功能上的輔助敘事，動效還可以幫助傳遞產品的性格和情感，和用戶構建起更為緊密的聯系。例如時間管理軟件Forest，在進入圣誕月后便在頁面中加入了雪花飄落的效果，以烘托冬季的氣氛，也增加了用戶“種樹”的實感，十分符合其小而精致的文藝調性：
需要注意的是，就像日常對話中，我們使用修辭（例如類比）是為了讓他人更好地理解自己的意思，連篇累牘的華麗辭藻只會讓聽者一臉懵圈。動效設計也是如此，不要讓它的鋒芒蓋住了設計本身想傳達的內容。
例如Issara在他的文章中所舉的例子：
這張圖中，icon和文字作為信息上的共同體，應當成組出現。圖中的效果將文字與icon各自拆分設計了獨立的動作，對其本身應當起到的敘事作用造成了干擾。
四、合理關聯
動效于界面設計而言，帶來的核心價值之一，就是拓展了屏幕展示空間的維度，設計師可以利用動效來進行更加豐富的層次設計。但需要注意的是，當界面包含的維度增加時，不同元素之間互相映射的關系也會變得更加復雜。
當我們設計動效時，每個運動的界面元素之間、多個界面元素構成的組件之間所涉及的空間、時間和層次變化都應當具有合理的關聯性，以此來清晰地告訴用戶“這是什么”、“它是怎么出現的”、“我可以利用它去到哪里”，從而使用產品達成決策。
在關聯性中，最為常見的動效之一即表現父子關系（Parenting）的動效：
下圖就是一個使用了父子關系的動效例子，在滑動按鈕的同時，氣泡處的表情也會隨之變化，從中我們既可以理解二者是從屬關系，一個元素會隨著另一個元素的變化而變化。
五、小結
通過以上的內容，我們可以了解到一個好的動效是如何幫助產品提高可用性，優化使用體驗的。在日常的設計中，我們也需要反復提醒自己，檢查自己設計的動效是否能在以上四個方面輔助提高產品的可用性，從而利用設計語言將產品內容更加清晰地傳達給用戶。
參考閱讀：
《動效創造可用性：動效中的用戶體驗宣言》：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
注：本文涉及故事純屬虛構，如有雷同，那我們交個朋友吧。
作者：rt，公眾號：未知素設計
本文由 @rt 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
東拼西湊的文章