動效設(shè)計在數(shù)字設(shè)計中的價值

在這篇文章中,我闡述了動效在數(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

每天更新,
全站高品質(zhì)素材免費下載!