動(dòng)效的可用性:交互動(dòng)效基本原理
編輯導(dǎo)語(yǔ):在用戶界面設(shè)計(jì)中,動(dòng)效的作用可是無(wú)比強(qiáng)大的。本篇文章中,作者分析了交互動(dòng)效的基本原理,舉例了各種動(dòng)態(tài)效果,運(yùn)用例子講解這些效果的作用,推薦想要學(xué)習(xí)如何設(shè)計(jì)動(dòng)態(tài)效果的群體閱讀。
在筆者剛學(xué)習(xí)動(dòng)效那會(huì)兒,因?yàn)閳?zhí)著于鉆研軟件技法,而忽略了動(dòng)效的基本原理,導(dǎo)致作出了很多生硬的動(dòng)效設(shè)計(jì)。和很多事情一樣,動(dòng)效設(shè)計(jì)如果違背了自然規(guī)律,必定會(huì)損害產(chǎn)品的可用性。
在用戶界面中,動(dòng)效不僅僅是一種視覺裝飾,而是一種強(qiáng)大的力量,它可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。
本文給大家介紹了十二項(xiàng)最基本的動(dòng)效設(shè)計(jì)原理,這些都適合用于UX/UI設(shè)計(jì)項(xiàng)目中,是非常有用的運(yùn)動(dòng)原理,建議收藏反復(fù)食用。
一、緩動(dòng) Easing
緩動(dòng)效果模擬了現(xiàn)實(shí)世界中對(duì)象隨時(shí)間加速或減速的方式,它適用于所有運(yùn)動(dòng)的元素。自然界中沒有東西是從一點(diǎn)呈線性地移動(dòng)到另一點(diǎn)?,F(xiàn)實(shí)中,物體在移動(dòng)時(shí)往往會(huì)加速或減速。我們的大腦習(xí)慣于期待這種運(yùn)動(dòng),因此在做動(dòng)畫時(shí),應(yīng)利用此規(guī)律。自然的運(yùn)動(dòng)會(huì)讓用戶對(duì)你的應(yīng)用感覺更舒適,從而產(chǎn)生更好的總體體驗(yàn)。
1. 線性動(dòng)畫
沒有任何速度上的變化的的動(dòng)畫稱為線性動(dòng)畫,如坐標(biāo)圖所示,運(yùn)動(dòng)的曲線成直線狀態(tài)。這種動(dòng)畫效果往往顯得很僵硬,不自然,讓用戶覺得不協(xié)調(diào)。一般來(lái)說(shuō),應(yīng)避免線性運(yùn)動(dòng)。
2. 緩出動(dòng)畫
運(yùn)動(dòng)的開頭速度很快,結(jié)尾處逐漸減速的動(dòng)畫稱為緩出動(dòng)畫。運(yùn)動(dòng)曲線呈拋物線狀態(tài),緩出動(dòng)畫最適合界面里面的動(dòng)效,快速的入場(chǎng)給人反應(yīng)很快的感覺。
3. 緩入動(dòng)畫
和緩出相反,緩入動(dòng)畫是開頭慢結(jié)尾快,這就像自然落下的球體一樣,速度越來(lái)越快。但是,從交互的角度來(lái)看,緩入可能讓人感覺有點(diǎn)不自然,因?yàn)榻Y(jié)尾很突然;在現(xiàn)實(shí)中移動(dòng)的物體往往是減速,而不是突然停止。緩入還有讓人感覺行動(dòng)遲緩的不利效果,這會(huì)對(duì)網(wǎng)站或應(yīng)用的響應(yīng)速度給人的感覺產(chǎn)生負(fù)面影響。
4. 緩入緩出動(dòng)畫
把緩入和緩出曲線連接在一起,就是完整的緩入緩出動(dòng)畫,它的運(yùn)動(dòng)過程可以想象一輛汽車從起步到停車的動(dòng)作,可以實(shí)現(xiàn)比單純緩出更生動(dòng)的效果。由于開頭慢、中間快和結(jié)尾慢,動(dòng)畫將有更強(qiáng)的對(duì)比,會(huì)讓用戶感到愉悅。
綜上,緩動(dòng)原理實(shí)際上是使動(dòng)畫不再那么尖銳或生硬的過程。
二、變形 Transformation
變形是由一個(gè)形態(tài)變成另一個(gè)形態(tài),這種形變是動(dòng)畫里最引人注目的。通過元素形態(tài)的轉(zhuǎn)變,告知用戶元素的狀態(tài)或作用發(fā)生了改變。
例如這個(gè)下載動(dòng)畫,下載完成后變形為按鈕,其實(shí)是符合用戶預(yù)期的。這種無(wú)縫轉(zhuǎn)換,可以提高用戶的認(rèn)知度,提升了動(dòng)畫的連貫性。
在動(dòng)效中,利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的,通過物體運(yùn)動(dòng)的變形狀態(tài)就能很好的體現(xiàn)出來(lái)。
三、克隆 Cloning
當(dāng)元素被克隆時(shí),可表達(dá)出元素與元素之間的某種連續(xù)性。在此原理中,如何讓物體的出現(xiàn)和離開具有連續(xù)性、關(guān)系和過渡,是信息準(zhǔn)確傳遞的關(guān)鍵。
例如這個(gè)發(fā)布按鈕,點(diǎn)擊它會(huì)創(chuàng)建多個(gè)新對(duì)象,引導(dǎo)注意力,非常清晰的表達(dá)了他們之間的關(guān)系。
還有這個(gè)運(yùn)動(dòng)健康頁(yè)面,在添加練習(xí)項(xiàng)目時(shí),從主按鈕克隆生成一系列練習(xí)項(xiàng)目,選擇完成后原路返回。
四、覆蓋 Overlay
利用覆蓋原理能讓原本有限的空間得以延伸,用以顯示額外的可見元素,補(bǔ)償了用戶體驗(yàn)中的單一統(tǒng)一視野或“客觀視圖”。
覆蓋原理在UI設(shè)計(jì)中常用于列表橫滑,通過覆蓋,隱藏相關(guān)操作,以減少視覺上的干擾。
在某種程度上,作為設(shè)計(jì)師,“層”的概念是顯而易見的,不言而喻。我們用層來(lái)設(shè)計(jì),層的概念被深深地內(nèi)化了。但是,我們必須小心區(qū)分“制作”和“使用”的過程。
作為不斷參與“制作”過程的設(shè)計(jì)師,我們要非常熟悉我們正在設(shè)計(jì)的物體的所有部分(包括隱藏部分)。然而,作為用戶,那些不可見的部分是根據(jù)定義和實(shí)踐,在視覺和認(rèn)知上隱藏的。
五、偏移和延遲 Offset & Delay
偏移和延遲原理是表明元素之間的層級(jí)與關(guān)系,在新元素入場(chǎng)時(shí)利用偏移和延遲讓信息或界面元素按照秩序進(jìn)退場(chǎng),定義對(duì)象關(guān)系和層次結(jié)構(gòu)。
在上面的示例中,浮動(dòng)操作按鈕 (FAB) 轉(zhuǎn)換為頭部背景。數(shù)據(jù)圖表在時(shí)間的延遲下依次出現(xiàn),暗示用戶這里的信息與其他元素之間的區(qū)別,吸引用戶注意力。
六、遮罩 Masking
遮罩是決定元素變化的結(jié)果是什么,通過暫時(shí)使對(duì)象顯示和隱藏,以連續(xù)無(wú)縫的方式轉(zhuǎn)換,保持了敘事流程的效果。雖然對(duì)象本身保持不變,但因?yàn)樗辛诉吔绾臀恢?,這兩個(gè)因素決定了對(duì)象是什么。
例如這個(gè)轉(zhuǎn)動(dòng)的咖啡杯,借助遮罩,通過改變logo的位置和吸管的朝向,造成杯子在自轉(zhuǎn)的假象。
在上面的例子中,音樂封面改變了邊界形狀和位置,但沒有改變內(nèi)容。轉(zhuǎn)換發(fā)生在用戶執(zhí)行操作后激活,是相當(dāng)巧妙的技巧。
七、父子關(guān)系 Parenting
父子關(guān)系是將界面元素關(guān)聯(lián)起來(lái)的重要原則,創(chuàng)建出空間和時(shí)間層次關(guān)系。它最適合作為“實(shí)時(shí)”互動(dòng),例如拖動(dòng)列表順序時(shí),其他信息會(huì)同步跟上。
回想一下,很多元素屬性都可以創(chuàng)造這種聯(lián)動(dòng)的繼承關(guān)系,例如不透明度、位置、旋轉(zhuǎn)、縮放、形狀、顏色等。
八、數(shù)值變化 Value Change
文本和數(shù)字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒有給它們帶來(lái)區(qū)別和嚴(yán)謹(jǐn)來(lái)評(píng)估它們?cè)谥С挚捎眯苑矫娴淖饔谩?/p>
數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情,既可以發(fā)生在實(shí)時(shí)活動(dòng)中,也可以發(fā)生在非實(shí)時(shí)活動(dòng)中。它可能是時(shí)間、收入、速度、游戲得分等。當(dāng)我們使用動(dòng)態(tài)的數(shù)值變化時(shí),它激活了一種“神經(jīng)反饋”,用戶會(huì)覺得自己與這些數(shù)值有關(guān)聯(lián)的。如果這些值是靜態(tài)的,就感覺與現(xiàn)實(shí)的聯(lián)系會(huì)減少。
數(shù)值的變化在各類金融理財(cái)和日歷APP中經(jīng)常出現(xiàn),數(shù)據(jù)的動(dòng)態(tài)表達(dá)和交流可能會(huì)對(duì)數(shù)據(jù)的價(jià)值產(chǎn)生影響;如上圖中的數(shù)值的動(dòng)態(tài)變化,讓用戶感知到自己可能有能力影響到數(shù)據(jù),提升了參與活動(dòng)的意愿。
九、蒙層 Obscuration
蒙層與原理四的覆蓋類似,只不過蒙層帶有透明屬性,它擋住了后面的信息,但又沒有全擋住。iOS中常見的毛玻璃效果就是如此,它讓用戶意識(shí)到正在操作的對(duì)象,還有另一個(gè)世界。拓展了Z軸的層次結(jié)構(gòu),補(bǔ)償用戶體驗(yàn)中的單一視野。
十、視差 Parallax
當(dāng)用戶滾動(dòng)時(shí),在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。其目的是為了建立各元素的層級(jí)關(guān)系,移動(dòng)速度更快的交互式元。對(duì)用戶來(lái)說(shuō)顯得更接近,較慢的非交互式元素,會(huì)退回到背景顯得更遠(yuǎn),從而更好把內(nèi)容和環(huán)境區(qū)分開來(lái) 。
設(shè)計(jì)師可以利用時(shí)間本身來(lái)創(chuàng)建這些關(guān)系,告訴用戶界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。用戶不僅認(rèn)為界面對(duì)象現(xiàn)在具有超出視覺設(shè)計(jì)中確定的層次結(jié)構(gòu),而且現(xiàn)在可以利用這種層次結(jié)構(gòu),讓用戶意識(shí)到設(shè)計(jì)之前掌握用戶體驗(yàn)內(nèi)容。
十一、多維 Dimensionality
維度是將界面的元素多維化,使元素看起來(lái)像可翻轉(zhuǎn)的,可折疊的,浮動(dòng)的??梢允共煌腢I元素實(shí)現(xiàn)無(wú)縫的過渡銜接,它通常以折紙維度、浮動(dòng)維度和對(duì)象維度這三種方式來(lái)呈現(xiàn)。
此外,維度原理克服了視覺平面中的分層悖論,其中缺乏深度的物體存在于同一平面上,但出現(xiàn)在其他物體的“前面”或“后面”。
折紙維度可以被認(rèn)為是“折疊”或“鉸鏈”的三維界面對(duì)象,它由多個(gè)元素組合成“折紙”結(jié)構(gòu),隱藏的物體在空間上仍然可以說(shuō)是“存在”的,即使它們不可見。
浮動(dòng)維度為界面對(duì)象提供了空間起源和離開,使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來(lái)實(shí)現(xiàn)的。
對(duì)象維度會(huì)產(chǎn)生具有真實(shí)深度和形式的維度對(duì)象,可以看到,雖然在2D層,元素卻可以3D視角呈現(xiàn)真實(shí)的維度。
十二、平移與縮放 Dolly & Zoom
平移與縮放是電影概念,指的是與相機(jī)有關(guān)的對(duì)象的運(yùn)動(dòng),以及畫面中圖像本身的大小從遠(yuǎn)景平滑變化到特寫鏡頭(反之亦然)。
在某些情況下,無(wú)法判斷對(duì)象是否正在縮放。可能是在在 3D 空間中向著相機(jī)移動(dòng),也許是相機(jī)在向?qū)ο笠苿?dòng),又或者是對(duì)象自身在放大縮小。以下三個(gè)示例說(shuō)明了可能的情況:
(1)鏡頭平移
被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止,而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)。
(2)鏡頭縮放
鏡頭與被攝物體在位置上保持靜止,而被攝物自身進(jìn)行縮放。
(3)縮放
是指視角和對(duì)象都沒有在空間上移動(dòng),而是物體本身在縮放(或者我們的視野正在縮小,從而導(dǎo)致圖像放大),這向觀看者傳達(dá)了附加界面對(duì)象在其他對(duì)象或場(chǎng)景“內(nèi)部”的信息。
移動(dòng)還可以結(jié)合維度原則,從而產(chǎn)生更多空間和深度體驗(yàn),并向用戶傳達(dá)當(dāng)前視圖“前面”或“后面”的其他區(qū)域或內(nèi)容。縮放允許無(wú)縫轉(zhuǎn)換 – 實(shí)時(shí)和非實(shí)時(shí) – 支持可用性。在創(chuàng)建空間心智模型時(shí),Dolly & Zoom Principle 中采用的這種無(wú)縫性非常強(qiáng)大。
以上,便是有關(guān)動(dòng)效設(shè)計(jì)的十二條基本原理,希望能給你帶來(lái)一些啟發(fā)。
參考資料:
- https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn
- https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
#專欄作家#
印跡;公眾號(hào):印跡拾光,人人都是產(chǎn)品經(jīng)理專欄作家。專注于互聯(lián)網(wǎng)產(chǎn)品的分析與思考,擅長(zhǎng)ToC產(chǎn)品的體驗(yàn)設(shè)計(jì)。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議
哇偶!這些動(dòng)圖好清晰好簡(jiǎn)潔明了哈哈哈,愛了愛了
666