本文結(jié)合具體的案例解析，一個(gè)好的動(dòng)效，在哪些方面氣到對(duì)可用性的支持。

在正文開始之前，先來(lái)聽一個(gè)小故事。

某天，老板對(duì)新來(lái)的T同學(xué)說：

“來(lái)，給這個(gè)產(chǎn)品做個(gè)動(dòng)效吧，明天上線?！?/p>

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

你們猜結(jié)果怎么樣？

老板對(duì)其勤奮的精神大加嘉獎(jiǎng)，但這個(gè)驚天地泣鬼神的神奇動(dòng)效最終也是沒有上線。

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

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

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

接下來(lái)，就讓我們結(jié)合具體示例，看看它們是如何進(jìn)行實(shí)際應(yīng)用的。

一、符合預(yù)期

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

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

對(duì)比之下，天貓小黑盒的頁(yè)面動(dòng)效就很好地配合了品牌本身“盒”的概念，在下拉、轉(zhuǎn)動(dòng)的動(dòng)作中都參照了盒子的運(yùn)動(dòng)樣式，符合用戶對(duì)其品牌的期待的同時(shí)，還可以加深品牌印象：

二、體驗(yàn)連續(xù)

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

• 一是使用流程的“連續(xù)性”；
• 二是將多個(gè)場(chǎng)景連接在一起，構(gòu)成整個(gè)體驗(yàn)場(chǎng)景的“一致性”。

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

下圖Medium的文章瀑布流加載效果就很好地增強(qiáng)了這一點(diǎn)。在下拉的loading后，文章以漸現(xiàn)的效果出現(xiàn)，相比之下，知乎日?qǐng)?bào)的效果就要生硬很多，每次加載都有一種生硬的截?cái)喔小?/p>

體驗(yàn)場(chǎng)景的一致性，則是指在整體的體驗(yàn)流程中，保持整體邏輯和設(shè)計(jì)語(yǔ)言的一致。我們會(huì)遇到很多不同場(chǎng)景的切換，例如網(wǎng)購(gòu)時(shí)從登錄賬號(hào)到搜索商品、瀏覽結(jié)果等等。這些細(xì)分場(chǎng)景本身應(yīng)當(dāng)擁有一致的設(shè)計(jì)語(yǔ)言，在使用動(dòng)效連接場(chǎng)景的時(shí)候，也應(yīng)當(dāng)和前后設(shè)計(jì)語(yǔ)言保持一致。

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

三、輔助敘事

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

京東“早點(diǎn)上新”頻道首頁(yè)中輪播的盤子，就隱喻了用戶可以對(duì)該部分進(jìn)行滑動(dòng)操作：

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

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

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

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

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

四、合理關(guān)聯(lián)

動(dòng)效于界面設(shè)計(jì)而言，帶來(lái)的核心價(jià)值之一，就是拓展了屏幕展示空間的維度，設(shè)計(jì)師可以利用動(dòng)效來(lái)進(jìn)行更加豐富的層次設(shè)計(jì)。但需要注意的是，當(dāng)界面包含的維度增加時(shí)，不同元素之間互相映射的關(guān)系也會(huì)變得更加復(fù)雜。

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

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

下圖就是一個(gè)使用了父子關(guān)系的動(dòng)效例子，在滑動(dòng)按鈕的同時(shí)，氣泡處的表情也會(huì)隨之變化，從中我們既可以理解二者是從屬關(guān)系，一個(gè)元素會(huì)隨著另一個(gè)元素的變化而變化。

五、小結(jié)

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

參考閱讀：

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

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

作者：rt，公眾號(hào)：未知素設(shè)計(jì)

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

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