12 條動(dòng)效設(shè)計(jì)的原理

3 評(píng)論 19635 瀏覽 176 收藏 20 分鐘

這是關(guān)于動(dòng)效設(shè)計(jì)的12條原理,一起來看看吧~

首先看下面表格:

  1. 緩動(dòng)(Easing)、偏移和延遲(Offset & Delay)與時(shí)間相關(guān)。
  2. ?父子關(guān)系(Parenting)用于闡述元素之間的關(guān)系。
  3. 變形(Transformation)、數(shù)值變化(Value Change)、遮罩(Masking)、覆蓋(Overlay)、生成(Cloning)可以加強(qiáng)元素自身的延續(xù)性。
  4. 視差(Parallax)多用于表明元素的層級(jí)關(guān)系。
  5. 蒙層(Obscuration)、多維度(Dimensionality)、鏡頭平移與縮放(Dolly & Zoom)用于表明元素與空間的關(guān)系。

原理1:緩動(dòng)(Easing)

當(dāng)運(yùn)動(dòng)時(shí),自然界中很少存在讓人舒適的勻速運(yùn)動(dòng),并且元素運(yùn)動(dòng)速率的變化應(yīng)該符合用戶的預(yù)期。貼近自然,符合用戶認(rèn)知,緩入緩出。

示例一

示例二

示例一有直線運(yùn)動(dòng),看起來并不好。以上所有三個(gè)例子都有相同幀數(shù),并在相同的時(shí)間內(nèi)完成。唯一的區(qū)別在于他們的緩動(dòng)不同。

若行為超出用戶期望的行為會(huì)導(dǎo)致可用性較差的交互。在適當(dāng)緩動(dòng)的情況下,用戶可以體驗(yàn)到自然的動(dòng)效 ,它不會(huì)分散注意力。而直線運(yùn)動(dòng)會(huì)使用戶感覺刻意的、難以理解、未完成,并且分散注意力。

而右邊的例子,它具有“設(shè)計(jì)”的感覺,我們注意到物體是如何到達(dá)的,比直線運(yùn)動(dòng)的例子更加“正確”。

總結(jié):何時(shí)使用緩動(dòng)?任何時(shí)候都要使用緩動(dòng)。

原理2:偏移和延遲(Offset & Delay)

利用偏移和延遲錯(cuò)開元素的運(yùn)動(dòng)時(shí)間,表明元素之間的層級(jí)與關(guān)系。

  1. 讓信息或界面元素按照秩序進(jìn)退場(chǎng);
  2. 暗示用戶信息與界面元素之間或許存在某些區(qū)別;
  3. 吸引用戶的注意力。

示例

在上面的例子中,浮動(dòng)動(dòng)作按鈕(FAB)轉(zhuǎn)換成由三個(gè)按鈕組成的標(biāo)題導(dǎo)航元素。因?yàn)檫@些按鈕在時(shí)間上相互“抵消”,所以他們最終通過“分離”來支持可用性,這告訴用戶完全獨(dú)立于視覺設(shè)計(jì)的界面中元素的本質(zhì)。

為了更好地向您展示這是如何工作的,我將向您展示一個(gè)打破偏移和延遲原理的示例。

在上面的例子中,靜態(tài)視覺設(shè)計(jì)告訴我們背景上有圖標(biāo),推測(cè)是這些圖標(biāo)都是相互分離的,并且做了不同的事情。但是,這個(gè)動(dòng)效打破了之前的理論。

在時(shí)間上,圖標(biāo)被分組成行并且表現(xiàn)得像一個(gè)單獨(dú)的對(duì)象,它們的標(biāo)題同樣分組成行,并且也表現(xiàn)得像一個(gè)單一的對(duì)象,該動(dòng)議告訴用戶除眼睛看到的東西外。在這種情況下,我們可以說時(shí)間元素行為不支持可用性。

原理3:父子關(guān)系(Parenting)

父子關(guān)系是一種強(qiáng)大的原則。可以在用戶界面中“關(guān)聯(lián)”對(duì)象。

  1. 幫助用戶更好地理解它們之間的層級(jí)關(guān)系;
  2. 有依據(jù)的操作反饋。

父子關(guān)系是對(duì)象屬性與其他對(duì)象屬性的鏈接,這以支持可用性的方式創(chuàng)建對(duì)象關(guān)系和層次結(jié)構(gòu)。親子關(guān)系還允許設(shè)計(jì)師在用戶界面中更好地協(xié)調(diào)時(shí)間,同時(shí)向用戶傳達(dá)對(duì)象關(guān)系的性質(zhì)。

回想一下,對(duì)象屬性包括以下內(nèi)容:比例、不透明度、位置、旋轉(zhuǎn)、形狀、顏色、數(shù)值等。這些屬性中的任何一個(gè)都可以鏈接到任何其他屬性,以在用戶體驗(yàn)中創(chuàng)建協(xié)同。

示例2

在上面這個(gè)示例中,父子關(guān)系就是子元素的某個(gè)屬性的值,隨父元素的某個(gè)屬性參數(shù)的值按照一定的比例進(jìn)行變化。父子關(guān)系最適合作為“實(shí)時(shí)”互動(dòng),當(dāng)用戶直接操作界面對(duì)象時(shí),設(shè)計(jì)者通過運(yùn)動(dòng)向用戶傳達(dá)對(duì)象如何鏈接以及它們之間的關(guān)系。

示例4

原理4:變形(Transformation)

在運(yùn)動(dòng)原理“變形”中已經(jīng)寫了很多有關(guān)UX的文章。在某些方面,它是動(dòng)畫原理中最明顯和最引人注意的。變形是最明顯的,主要是因?yàn)樗摲f而出?!疤峤弧卑粹o將形狀變?yōu)閺较蜻M(jìn)度條,并最終改變形狀以成為標(biāo)記,吸引了我們的注意力。

  1. 告知用戶元素的狀態(tài)或作用發(fā)生了改變;
  2. 高效地將信息傳遞給用戶。

示例1

變形所做的是通過不同實(shí)物變形(在這是一個(gè)按鈕,這是一個(gè)徑向進(jìn)度條)無縫地轉(zhuǎn)換用戶,最終產(chǎn)生期望的結(jié)果,用戶已經(jīng)通過這些功能到達(dá)最終目的地。轉(zhuǎn)換將用戶體驗(yàn)中的關(guān)鍵時(shí)刻認(rèn)知分離成無縫連續(xù)的一系列事件,這種無縫結(jié)果可提高用戶的認(rèn)知度,保證時(shí)間和連貫性。

原理5:數(shù)值變化(Value Change)

基于文本的界面對(duì)象(即數(shù)字和文本)可以連續(xù)更改它們的值,清晰看到數(shù)值的增多或減少。

我們來看一下用戶儀表板的例子:

示例1

示例2

數(shù)字和價(jià)值觀是現(xiàn)實(shí)中發(fā)生的事物的表征。這種可能是時(shí)間、收入、游戲成績(jī)、商業(yè)指標(biāo)、健身追蹤等。我們通過動(dòng)作區(qū)分的是“價(jià)值主體”是動(dòng)態(tài)的,價(jià)值觀反映了動(dòng)態(tài)價(jià)值集合中的某些東西。

當(dāng)我們使用基于運(yùn)動(dòng)的價(jià)值形式來表示動(dòng)態(tài)系統(tǒng)時(shí),它激活了一種“神經(jīng)反饋”,掌握數(shù)據(jù)動(dòng)態(tài)特性的用戶現(xiàn)在可以改變這些價(jià)值觀。當(dāng)這些值是靜態(tài)的時(shí)候,與這些值背后的現(xiàn)實(shí)的聯(lián)系就會(huì)減少。比如:支付寶中的余額,余額的增多或減少。

示例4

示例5

數(shù)值變化既可以發(fā)生在實(shí)時(shí)活動(dòng)中,也可以發(fā)生在非實(shí)時(shí)活動(dòng)中。在實(shí)時(shí)事件中,用戶正在與對(duì)象交互以更改值。在非實(shí)時(shí)事件中,例如:加載器和轉(zhuǎn)換,這些值在沒有用戶輸入的情況下發(fā)生變化以反映動(dòng)態(tài)敘述。

原理6:遮罩(Masking)

在上面的例子中,標(biāo)題圖像改變了邊界的形狀和位置,但不改變內(nèi)容,并成為一個(gè)專輯。這具有改變對(duì)象的效果,同時(shí)保留遮罩內(nèi)的內(nèi)容 – 這是一個(gè)相當(dāng)巧妙的技巧。這發(fā)生在非實(shí)時(shí),作為轉(zhuǎn)換,在用戶采取行動(dòng)后激活。

請(qǐng)記住,UI動(dòng)畫原則暫時(shí)出現(xiàn)并通過連續(xù)性、敘述、關(guān)系和期望來支持可用性。在上面的參考文獻(xiàn)中,雖然物體本身保持不變,但它也有邊界和位置,而這兩個(gè)因素決定了物體是什么。

原理7:覆蓋(Overlay)

覆蓋通過允許用戶能讓本來有限的空間被更好的利用起來,利用扁平化設(shè)計(jì)來闡述兩個(gè)相互獨(dú)立的元素的位置關(guān)系。

示例中:前景物體向右滑動(dòng)以顯示其他背景物體的位置。我們用圖層進(jìn)行設(shè)計(jì),圖層的概念深入內(nèi)部。作為設(shè)計(jì)師,我們需要非常熟悉我們正在設(shè)計(jì)的所有對(duì)象(包括隱藏片段)。然而,作為用戶,這些不可見的部分是定義和實(shí)踐,隱藏在視覺和認(rèn)知上。

原理8:生成(Cloning)

當(dāng)元素被生成時(shí),表達(dá)元素與元素之間的連續(xù)性。這種動(dòng)畫能夠非常清晰地表達(dá)因某個(gè)操作而產(chǎn)生的一個(gè)或數(shù)個(gè)事件發(fā)生,以及它們之間的關(guān)系。

在以上三個(gè)示例中,在用戶注意力集中在這些對(duì)象的時(shí)間內(nèi),從現(xiàn)有元素對(duì)象創(chuàng)建新對(duì)象,引導(dǎo)注意力,然后通過創(chuàng)建一個(gè)克隆的新對(duì)象來引導(dǎo)。具有傳達(dá)清晰明確的事件:該行為“x”具有“y”的結(jié)果創(chuàng)建新的子對(duì)象。

原理9:蒙層(Obscuration)

與覆蓋原理中的用戶體驗(yàn)類似,蒙層既是靜態(tài)現(xiàn)象,也是時(shí)間現(xiàn)象。不完全蓋住,簡(jiǎn)單的不透明度漸變往往不會(huì)達(dá)到這個(gè)結(jié)果,通常利用模糊或者變暗保留可視性。

上面示例中,模糊看起來像透明對(duì)象或疊加層,也是一種涉及多個(gè)屬性的時(shí)間交互,各種常見的技術(shù)涉及模糊效果和整體對(duì)象透明度的減少。用戶意識(shí)到她正在操作的另一個(gè)非主要上下文,還有另一個(gè)世界,就像它在主要對(duì)象層次結(jié)構(gòu)“后面”一樣,遮擋使設(shè)計(jì)師能夠補(bǔ)償用戶體驗(yàn)中的單一統(tǒng)一視野或“客觀視圖”。

原理10:視差(Parallax)

作為運(yùn)動(dòng)原理中的UX的“視差”描述了以不同速率運(yùn)動(dòng),構(gòu)成不同的視差效果。視差允許用戶專注于主要操作和內(nèi)容,同時(shí)保持設(shè)計(jì)完整性,在視差效果表現(xiàn)空間中個(gè)元素的位置及層級(jí)關(guān)系,引導(dǎo)用戶去關(guān)注應(yīng)該應(yīng)該關(guān)注的地方。

這對(duì)用戶的影響是為了明確界定交互的持續(xù)時(shí)間,對(duì)象關(guān)系,前景對(duì)象或“更快”移動(dòng)的對(duì)象對(duì)用戶來說顯得“更接近”。同樣,移動(dòng)“較慢”的背景對(duì)象或?qū)ο蟊灰暈椤案h(yuǎn)”。設(shè)計(jì)人員可以使用時(shí)間本身來創(chuàng)建這些關(guān)系,告訴用戶界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。因此,將背景或非互動(dòng)元素進(jìn)一步推回是有道理的。

不僅用戶感知的界面超出一個(gè)層次,其在視覺設(shè)計(jì)決定的,但現(xiàn)在這個(gè)層次可以利用用是自覺意識(shí)到在設(shè)計(jì)之前的用戶體驗(yàn)內(nèi)容。

原理11:多維化(Dimensionality)

用戶體驗(yàn)的關(guān)鍵是連續(xù)性和位置,將界扁平化的界面元素多維化,表達(dá)空間中個(gè)元素的位置及層級(jí)關(guān)系。維度提供了一種強(qiáng)大的方法來克服用戶體驗(yàn)的平坦性和非邏輯性,人類非常擅長(zhǎng)利用空間框架在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)中進(jìn)行導(dǎo)航。維度以三種方式呈現(xiàn):折紙維度、浮動(dòng)維度和對(duì)象維度。

浮動(dòng)維度為界面對(duì)象提供了空間起源和離開,使得交互模型更加直觀和高度敘述;對(duì)象維度導(dǎo)致具有真實(shí)深度和形式的維度對(duì)象。

這里,多個(gè)2D層被安排在3D空間中以形成真實(shí)的三維物體。它們的維度在實(shí)時(shí)和非實(shí)時(shí)過渡顯示,對(duì)象維度的用途是,用戶基于不可見的空間位置開發(fā)對(duì)象實(shí)用程序的敏銳意識(shí)。

原理12:鏡頭平移與縮放(Dolly & Zoom)

  • 鏡頭平移:被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止,而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)。
  • 鏡頭縮放:鏡頭與被攝物體在位置上保持靜止,而被攝物自身進(jìn)行縮放。

在某些情況下,無法判斷對(duì)象是否正在縮放,是否在3D空間中朝向相機(jī)移動(dòng),或者如果相機(jī)正朝3D空間中的對(duì)象移動(dòng)(請(qǐng)參見下面的參考資料)。

以下三個(gè)例子說明了可能的情況:

前兩張圖像是放大的,而最后的圖像是放大的。

在UX中,空間運(yùn)動(dòng)可以引用觀看者視角的變化,或者當(dāng)對(duì)象改變位置時(shí)視角保持靜止。還可以結(jié)合維度原則,從而產(chǎn)生更多空間體驗(yàn),更深入,并向用戶傳達(dá)當(dāng)前視圖“前”或“后”的其他區(qū)域或內(nèi)容。并且滿足運(yùn)動(dòng)原則中用戶體驗(yàn)的要求:它們通過運(yùn)動(dòng)支持可用性。

 

原文作者:Issara Willenskomer

原文鏈接:https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

譯文作者:VisualCC

譯文鏈接:https://www.jianshu.com/p/0efbd3db9f4b

本文由 @VisualCC 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 受教了

    回復(fù)
  2. ??,確實(shí)都是一些很不錯(cuò)的交互設(shè)計(jì),很有啟發(fā)

    來自廣東 回復(fù)