在這篇文章中，我闡述了動效在數(shù)字產(chǎn)品中的價值；解釋并且反駁設(shè)計師、工程師以及利益相關(guān)者的四個陳舊觀念；研究了動效面臨的六大挑戰(zhàn)；列出動效可支持的三種用戶心理模型，最后列出了值得研究的16個指標。

四大陳舊觀念

在數(shù)字產(chǎn)品的創(chuàng)新動效方面，設(shè)計師，利益相關(guān)者和工程師擁有四種陳舊觀念， 這些觀念使動效創(chuàng)新成為設(shè)計師和動效倡導(dǎo)者，在包括用戶體驗和產(chǎn)品指標兩方面尋找機會和平衡點的一場艱苦戰(zhàn)斗。

陳舊信念1:“動效不是用戶體驗的核心方面”

根據(jù)這一信念，數(shù)字產(chǎn)品的核心是研究、用戶體驗和程序，這些工作用于執(zhí)行用戶體驗設(shè)計和屏幕之上。由此得出的結(jié)論是，動效是獨立的，它在可用性中并不起主要作用。這個觀點忽略了像Pinterest這樣的例子，在Pinterest中，用戶可以簡單有效地從列表視圖轉(zhuǎn)換到細節(jié)視圖，使得主要的上下文切換過程中對用戶影響最小。

陳舊信念2：“動效只是附加物”

第二個信念是，動效可以在“結(jié)尾處”加上。 意思是，一旦靜態(tài)UI完成并通過代碼使它們互動，團隊就可以開始考慮為用戶體驗“增添樂趣”的方法。 這種信念忽略了沒有運動就不存在的交互的例子。

例如，iOS任務(wù)后臺是完全依賴于運動的交互。

陳舊信念3：“動態(tài)是動畫”

在這個觀點中，“動畫”包含了一切移動的東西，并且是從“很明顯不是用戶體驗的領(lǐng)域中提取出來的概念”。在這種觀念下，運動被視為賦予產(chǎn)品“個性”，或者品牌要素。盡管這個術(shù)語目前很難定義，而當它被定義時，通常都是包含在一些邊緣案例中。這種觀念忽略了動畫原理和用戶界面無關(guān)的事實。動畫原則是為了解決一個問題——在物理空間中表現(xiàn)一個有機體的特征、魅力，它與動效解決的問題截然不同。

陳舊觀念4：“動效只能應(yīng)用在特定情景下”

特定類型的動效在特定情境下使用最好。這種觀念甚至認為動效在用戶體驗中扮演著某種角色，就像在UI設(shè)計中，某種特定的藍色通過了嚴格的測試驗證后，可以作為按鈕的最佳配色。這種信念忽略了動效的復(fù)雜和多樣，也不認為動效是用戶體驗的基本屬性。這種觀點認為，動效類似于UX設(shè)計師的調(diào)試工具。它在特定用例下是獨立使用的，而不是UX的強大合作伙伴。

動效面臨的六大挑戰(zhàn)

語言：本主題的主要挑戰(zhàn)來自語言學(xué)的：我們的詞匯中缺乏一個描述“動態(tài)互動”或者“與數(shù)字產(chǎn)品交互過程中發(fā)生了動作”這樣一個詞或者概念；并且排除大家看到這個詞會聯(lián)想到動畫。目前我們必須表達這兩個概念的詞是動效和動畫。

現(xiàn)狀：另一個挑戰(zhàn)來自于設(shè)計師習(xí)慣在靜止屏幕中設(shè)計，而動效則挑戰(zhàn)設(shè)計師在某個時間區(qū)間內(nèi)的用戶行為、心理模型，以及用戶體驗之間的協(xié)調(diào)和合作。

復(fù)雜：第三個挑戰(zhàn)來自動效固有的復(fù)雜性。由于動效本質(zhì)是變化的，動效設(shè)計中的小變化會對用戶產(chǎn)生很大的影響。這使得設(shè)計具有挑戰(zhàn)性，我們很難驗證哪個設(shè)計是好的，例如，僅僅改變速度曲線就可以完全改變用戶感知交互的方式。

數(shù)據(jù)：第四個挑戰(zhàn)來自缺乏支持動效價值的硬數(shù)據(jù)。缺乏可信的數(shù)據(jù)是反對動效的有力理由：如果我們不能預(yù)先確定一個積極的ROI（投資回報率），為什么要投資昂貴的項目？

工具：第五個挑戰(zhàn)來自于依賴原型工具作為一種學(xué)習(xí)和構(gòu)思的方式。設(shè)計師們的共同想法是選擇一個原型工具，觀看教程，學(xué)習(xí)如何“做動效”。由于內(nèi)容創(chuàng)建和關(guān)鍵字搜索的本質(zhì)，這些教程很少能讓設(shè)計師真正發(fā)揮想象力，而是專注于解決小的情境化問題。

資源：第六項挑戰(zhàn)來自缺乏明確而簡明地說明動效價值的學(xué)習(xí)資源。大多數(shù)關(guān)于數(shù)字產(chǎn)品中動效的書籍和文章都傾向于關(guān)注趨勢，而不是為設(shè)計師提供一個堅實的基于心智模型的理論基礎(chǔ)，或者為設(shè)計師在與利益相關(guān)者的對話中提供基于度量的語言。

動效可支持的三種用戶心理模型

我們已經(jīng)涵蓋了陳舊觀念和動效面臨的挑戰(zhàn)，下面想談?wù)勎已壑袆有閿?shù)字產(chǎn)品帶來的核心價值。

首先，簡單地說，動效向用戶解釋如何在界面的不同位置來回移動。這種解釋可以從一致性的角度來考慮：解釋用戶體驗、內(nèi)容和心智模型之間一致性的程度。

在iOS多任務(wù)后臺中，該動效告訴用戶以下情況:

“親愛的用戶，從前你快樂地生活在APP的世界里?，F(xiàn)在你‘縮小了’，進入了一個由其他世界組成的新世界，每個世界都是另一個APP?！?

沒有動作，這種敘述是不可能的。為了想象沒有運動的效果，用簡單的切換來交互，交互的開始和結(jié)束狀態(tài)在概念上是遙遠的。動效將這兩個概念上遙遠的概念連接起來，并提供了連貫的解釋。

在這個觀點中，無論是從設(shè)計方法還是從用戶體驗來看，動效都是用戶體驗的基本部分，是設(shè)計任何兩個屏幕時都需要考慮的東西。

這樣做的效果是將動效從動畫類別中剝離，并將其視為獨立的東西。最后，因為它是基礎(chǔ)的，所以它不只是在某些場景中使用，而是在整個設(shè)計過程中使用。

設(shè)計啟發(fā)

兩個狀態(tài)之間的概念距離越遠，動效的影響就越大。例如，從概念上講，簡單的開關(guān)有兩種狀態(tài)：開和關(guān)。這些狀態(tài)在概念上彼此接近，這就是為什么不需要動效使得交互有效。

心理模型存在于用戶的頭腦中，在各種用戶體驗設(shè)計文獻和唐諾曼的“日常用品設(shè)計”中也提到了這些?；仡櫼幌逻@個想法，工作環(huán)境最好用設(shè)計師的心智模型，系統(tǒng)本身的設(shè)計和用戶的心理模型三變量來表示。

在我的工作坊中，我認為我們稱之為“動效”的東西在心理模型中起著重要作用，特別是用戶如何看待界面中的對象以及它們的作用。 動效通過與現(xiàn)有心智模型合作，或者通過使用以下3種方法組合創(chuàng)建新的心智模型來實現(xiàn)此目的。

1、擬態(tài)行為（Skeuomorphic behavior）

用戶已有導(dǎo)航和與物理環(huán)境交互的心智模型。通過識別和利用這些心理模型，設(shè)計師可以直接與用戶的感知和推理進行交互。在IGTV的這個例子中，用戶通過類似于旋轉(zhuǎn)立方體的空間直覺手勢來導(dǎo)航提要?！吧弦粋€”和“下一個”利用了用戶天生的感知和推理能力，讓他的腦海呈現(xiàn)出一個空間。

2、規(guī)則

人類天生就會學(xué)習(xí)規(guī)則。雖然已經(jīng)寫了很多關(guān)于避免讓用戶學(xué)習(xí)新系統(tǒng)和規(guī)則的內(nèi)容，但它仍然是一個機會。最好的證明就是我們在過去的用戶體驗中發(fā)現(xiàn)的“永久的變化狀態(tài)”，我們可以推測，在未來很長一段時間內(nèi)都是如此。換句話說，下一件事和現(xiàn)在這件事之間總會有一個邊緣或缺口。這種差距要求用戶學(xué)習(xí)，正如我們已經(jīng)看到的，用戶已經(jīng)證明自己有能力學(xué)習(xí)新的交互范例和隱喻。運動在定義和加強新規(guī)則方面發(fā)揮著重要作用。

3、功能可見性和符號

屏幕靜態(tài)設(shè)計中的視覺符號隱含著界面中的因果行為(即運動)。這些符號代表了運動所能提供的東西。隨后的動作要么與這些符號對齊，要么與之沖突，從而為設(shè)計師提供了一個強大的機會，使其正確。

影響和指標

動效的16種可能指標包括但不限于以下。在您的項目中，我建議在提交資源之前，確定衡量的標準并預(yù)演開發(fā)和假設(shè)來進行策略性工作。分別為：

1.易用性

2.任務(wù)的成功率

3.保持面向用戶的界面切換

4.幫助用戶專注于任務(wù)域而不是界面域

5.流動狀態(tài)

6.信任評級

7.盡量減少困惑和沮喪

8.使用的速度

9.如何結(jié)合互動和感知

10.混亂的時刻

11.形式完成

12.列表到詳細轉(zhuǎn)換

13.反饋

14.期望

15.關(guān)鍵接口元素的回憶

16.任務(wù)優(yōu)先級。

總之，數(shù)字產(chǎn)品中的動效是強大的工具，對于希望與用戶建立聯(lián)系的設(shè)計師和尋求度量驅(qū)動方法來解決問題的產(chǎn)品經(jīng)理來說都是如此。由于動效的復(fù)雜性，可能是具有挑戰(zhàn)性的交付，但如果做得好，它有潛力連接到用戶的心理模型，并推動產(chǎn)品的結(jié)果。

封面圖片來源：Anton Tkachev（dribbble）

作者：Issara Willenskomer?

原文鏈接： https://medium.com/ux-in-motion/motion-design-in-digital-products-a-white-paper-48da834261dd