本文結合具體的案例解析，一個好的動效，在哪些方面氣到對可用性的支持。

在正文開始之前，先來聽一個小故事。

某天，老板對新來的T同學說：

“來，給這個產(chǎn)品做個動效吧，明天上線?！?/p>

T同學心想，大展身手的機會終于來了。在嘔心瀝血下載了10種不同的動效軟件，看了10086篇中英文教程后，終于做出了一款堪比PPT百葉窗效果加強酷炫版3.0的動效，信心滿滿地提交了。

你們猜結果怎么樣？

老板對其勤奮的精神大加嘉獎，但這個驚天地泣鬼神的神奇動效最終也是沒有上線。

“說好的乙方都喜歡五彩斑斕的動態(tài)黑呢！”借酒澆愁的T同學哭著對我說，童話里都是騙人的。

確實，但好的動效，不應當僅僅是外表光鮮的童話，合理地支持可用性，才是它的內(nèi)核。

擁有15年經(jīng)驗的動效體驗設計師Issara Willenskomer曾經(jīng)撰文：《動效創(chuàng)造可用性：動效中的用戶體驗宣言》，表達了他對一個合格動效的態(tài)度：即一個合格的動效動效應當在以下四個方面起到對可用性的支持，分別是：

接下來，就讓我們結合具體示例，看看它們是如何進行實際應用的。

一、符合預期

此處的期待我們可以理解為用戶的心理模型，即用戶對于產(chǎn)品表現(xiàn)的普遍認知。動效作為界面的重要元素，應當起到減少實際表現(xiàn)和用戶心理模型之間差距的作用，即通過符合“用戶對物理世界運動規(guī)律的普遍認知”，來增加產(chǎn)品的可用性。

可以感受一下，下圖的緩動動效明顯不符合我們?nèi)粘Ｊ熘淖匀贿\動規(guī)律，在沒有外力介入的情況下，組件突然加速，這樣不僅不能增加可用性，甚至會損害體驗，讓用戶疑惑、分心。

對比之下，天貓小黑盒的頁面動效就很好地配合了品牌本身“盒”的概念，在下拉、轉動的動作中都參照了盒子的運動樣式，符合用戶對其品牌的期待的同時，還可以加深品牌印象：

二、體驗連續(xù)

這里的連續(xù)性包含兩個方面的內(nèi)容：

• 一是使用流程的“連續(xù)性”；
• 二是將多個場景連接在一起，構成整個體驗場景的“一致性”。

使用流程的連續(xù)性，即用戶的體驗流程是完整的，不是被突然打斷的。一個常見的例子就是瀑布流，利用動效，可以讓用戶在等待加載的過程中依然處于“連續(xù)”的體驗感受中，而不是戛然而止，同時也可以幫助用戶產(chǎn)生心流體驗。

下圖Medium的文章瀑布流加載效果就很好地增強了這一點。在下拉的loading后，文章以漸現(xiàn)的效果出現(xiàn)，相比之下，知乎日報的效果就要生硬很多，每次加載都有一種生硬的截斷感。

體驗場景的一致性，則是指在整體的體驗流程中，保持整體邏輯和設計語言的一致。我們會遇到很多不同場景的切換，例如網(wǎng)購時從登錄賬號到搜索商品、瀏覽結果等等。這些細分場景本身應當擁有一致的設計語言，在使用動效連接場景的時候，也應當和前后設計語言保持一致。

如下圖，在名畫推薦軟件“Daily Art”中，滑動當日推薦畫作的卡片時，卡片會產(chǎn)生了形狀大小上的變化，隨即從圖片場景轉換到了文字場景；在從文字場景回歸到圖片場景時，依然延續(xù)了先前的變化邏輯，卡片從全屏幕縮小回原本的大?。?/p>

三、輔助敘事

用戶使用產(chǎn)品的過程，可以類比為與產(chǎn)品的設計對話的過程。在這個過程中，動效就像是設計語言中運用的修辭手法，將語言中的元素鏈接成一個更加完整的體驗故事，例如可以使用隱喻引導用戶進行操作。

京東“早點上新”頻道首頁中輪播的盤子，就隱喻了用戶可以對該部分進行滑動操作：

在敘事層面上，動效還可以幫助進行對界面元素性質的輔助闡述，例如下圖，進入京東App的“簽到”處時，我們可以看到京豆的數(shù)字變化上升的動態(tài)效果，體現(xiàn)了它的可增加性：

除了功能上的輔助敘事，動效還可以幫助傳遞產(chǎn)品的性格和情感，和用戶構建起更為緊密的聯(lián)系。例如時間管理軟件Forest，在進入圣誕月后便在頁面中加入了雪花飄落的效果，以烘托冬季的氣氛，也增加了用戶“種樹”的實感，十分符合其小而精致的文藝調性：

需要注意的是，就像日常對話中，我們使用修辭（例如類比）是為了讓他人更好地理解自己的意思，連篇累牘的華麗辭藻只會讓聽者一臉懵圈。動效設計也是如此，不要讓它的鋒芒蓋住了設計本身想傳達的內(nèi)容。

例如Issara在他的文章中所舉的例子：

這張圖中，icon和文字作為信息上的共同體，應當成組出現(xiàn)。圖中的效果將文字與icon各自拆分設計了獨立的動作，對其本身應當起到的敘事作用造成了干擾。

四、合理關聯(lián)

動效于界面設計而言，帶來的核心價值之一，就是拓展了屏幕展示空間的維度，設計師可以利用動效來進行更加豐富的層次設計。但需要注意的是，當界面包含的維度增加時，不同元素之間互相映射的關系也會變得更加復雜。

當我們設計動效時，每個運動的界面元素之間、多個界面元素構成的組件之間所涉及的空間、時間和層次變化都應當具有合理的關聯(lián)性，以此來清晰地告訴用戶“這是什么”、“它是怎么出現(xiàn)的”、“我可以利用它去到哪里”，從而使用產(chǎn)品達成決策。

在關聯(lián)性中，最為常見的動效之一即表現(xiàn)父子關系（Parenting）的動效：

下圖就是一個使用了父子關系的動效例子，在滑動按鈕的同時，氣泡處的表情也會隨之變化，從中我們既可以理解二者是從屬關系，一個元素會隨著另一個元素的變化而變化。

五、小結

通過以上的內(nèi)容，我們可以了解到一個好的動效是如何幫助產(chǎn)品提高可用性，優(yōu)化使用體驗的。在日常的設計中，我們也需要反復提醒自己，檢查自己設計的動效是否能在以上四個方面輔助提高產(chǎn)品的可用性，從而利用設計語言將產(chǎn)品內(nèi)容更加清晰地傳達給用戶。

參考閱讀：

《動效創(chuàng)造可用性：動效中的用戶體驗宣言》：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

注：本文涉及故事純屬虛構，如有雷同，那我們交個朋友吧。

作者：rt，公眾號：未知素設計

本文由 @rt 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議