揭秘動(dòng)效設(shè)計(jì)的魔力:打造引人入勝的交互體驗(yàn),讓你的設(shè)計(jì)不再止步于最后一公里

2024-6-26    資深UI設(shè)計(jì)者

動(dòng)效設(shè)計(jì)在交互稿的邏輯展示及提高可讀性方面是很有必要的,其不限于交互稿的展示,還富有創(chuàng)意的設(shè)計(jì)點(diǎn)也可以用動(dòng)效來進(jìn)行表現(xiàn)。

對(duì)于交互設(shè)計(jì)師而言,主要的交付成果物是交互原型,相對(duì)于視覺稿來說,其在視覺效果、認(rèn)識(shí)層面、感知層面要遠(yuǎn)遜于視覺稿。以至于在有些產(chǎn)品團(tuán)隊(duì)中,交互設(shè)計(jì)師與視覺設(shè)計(jì)師合二為一,在確定需求后,直接進(jìn)行制作高保真的視覺稿。

隨著設(shè)計(jì)工具逐漸遷移到sketch上,其最基本的頁面點(diǎn)擊跳轉(zhuǎn)卻不能實(shí)現(xiàn),只能進(jìn)行靜態(tài)頁面展示,若設(shè)計(jì)師工作時(shí)間充足一些,或許會(huì)進(jìn)行頁面之間的流轉(zhuǎn)箭頭指示。對(duì)于那些對(duì)產(chǎn)品以及業(yè)務(wù)不是很了解的團(tuán)隊(duì)成員來說,其一直會(huì)處于懵懂狀態(tài),甚至?xí)诒姸嗟撵o態(tài)頁面中迷失,大大降低了交互稿的可讀性。

加載動(dòng)效

 

因此,動(dòng)效設(shè)計(jì)在交互稿的邏輯展示及提高可讀性方面是很有必要的,當(dāng)然其作用也不限于交互稿的展示,還有很多富有創(chuàng)意的設(shè)計(jì)點(diǎn)都可以用動(dòng)效設(shè)計(jì)來進(jìn)行表現(xiàn)。接下來,我們就深入的探討一下交互設(shè)計(jì)的最后一公里——動(dòng)效設(shè)計(jì)。

 

定義


動(dòng)效設(shè)計(jì)(Motion design)是通過動(dòng)態(tài)效果,滿足用戶當(dāng)前心理需求,提升用戶體驗(yàn)的設(shè)計(jì)過程。從定義來看,滿足用戶心理需求與提升產(chǎn)品的用戶體驗(yàn),是動(dòng)效設(shè)計(jì)的兩大目標(biāo)。滿足用戶心理需求是對(duì)交互設(shè)計(jì)的完善與補(bǔ)充,包括引導(dǎo)用戶操作、對(duì)用戶的操作進(jìn)行反饋等;提升產(chǎn)品的用戶體驗(yàn)是交互設(shè)計(jì)的升華,包括減少用戶在使用過程中的不適感,增強(qiáng)產(chǎn)品的操作流暢度,提升產(chǎn)品的氣質(zhì)。

現(xiàn)實(shí)中,很多人對(duì)動(dòng)效設(shè)計(jì)的了解不夠深入,往往以偏概全,甚至有人覺得動(dòng)效就是所謂的Loading,在這種情況下,對(duì)動(dòng)效設(shè)計(jì)的作用理解就更加不準(zhǔn)確了。

 

作用


從動(dòng)效設(shè)計(jì)的定義延伸來講,動(dòng)效設(shè)計(jì)的作用主要體現(xiàn)在兩個(gè)方面,一方面是操作功能,包括幫助引導(dǎo)、展示層級(jí)、高效反饋;另一方面是情感功能,增強(qiáng)用戶體驗(yàn),包括流暢過度、增強(qiáng)操作、升華體驗(yàn)。

動(dòng)效設(shè)計(jì)的操作功能是對(duì)用戶需求的滿足以及操作的反饋,讓用戶操作流程成為一個(gè)銜接緊密流暢的閉環(huán)。幫助引導(dǎo)與展示層級(jí)都有利于用戶易懂、易操作,幫助用戶快速理解頁面主次關(guān)系以及操作方式等;高效反饋是對(duì)用戶操作完成后的相應(yīng)反饋,無論操作的成功與失敗,都應(yīng)該給與用戶明確的結(jié)果并引導(dǎo)用戶接下來的操作。

動(dòng)效設(shè)計(jì)的情感功能是動(dòng)效設(shè)計(jì)所體現(xiàn)出來的產(chǎn)品氣質(zhì),無論流暢過渡,還是增強(qiáng)操作、升華體驗(yàn)都是在為產(chǎn)品氣質(zhì)的塑造而添磚加瓦。

但是,現(xiàn)實(shí)中很多設(shè)計(jì)師將動(dòng)效設(shè)計(jì)作為交互設(shè)計(jì)的附屬工作,很少投入精力去關(guān)注產(chǎn)品動(dòng)效,導(dǎo)致項(xiàng)目開發(fā)人員采用產(chǎn)品系統(tǒng)的底層控件來完成產(chǎn)品的轉(zhuǎn)場(chǎng)、加載動(dòng)效等。這樣的動(dòng)效效果會(huì)與設(shè)計(jì)風(fēng)格、產(chǎn)品氣質(zhì)有所偏差,顯得較為突兀、另類;這樣的動(dòng)效設(shè)計(jì)無勝于有,只會(huì)為產(chǎn)品減分。

要想做好產(chǎn)品體驗(yàn),動(dòng)效設(shè)計(jì)需要引起交互設(shè)計(jì)師足夠的重視,那么什么樣的動(dòng)效設(shè)計(jì)才是一個(gè)合格動(dòng)效設(shè)計(jì)呢?

 

要求


作為交互設(shè)計(jì)的最后一個(gè)環(huán)節(jié),合格的動(dòng)效作品要滿足一定的要求,這里作者給出了五大要求。

其中前三點(diǎn)是基本要求,是完成一個(gè)動(dòng)效的必要條件。

 

1、流暢

流暢是是一個(gè)合格動(dòng)效的基本要求。結(jié)合動(dòng)效的過渡流暢的作用,有一些設(shè)計(jì)師總結(jié)了三個(gè)維度——不卡、不閃、不跳,這“三不”要求是實(shí)現(xiàn)過渡流暢的重要方面,無論是緩入緩出還是加載動(dòng)畫,流暢都是動(dòng)效的最基本的要求。

 

2、充分考慮開發(fā)成本

在公司中做的任何項(xiàng)目都是基于時(shí)間、人力資源等多方面的條件下來開展的,因此,任何一個(gè)動(dòng)效設(shè)計(jì)的開發(fā)都要考慮項(xiàng)目的投入與產(chǎn)出比。設(shè)計(jì)師應(yīng)該站在項(xiàng)目團(tuán)隊(duì)的角度來審視交互動(dòng)效,只有與項(xiàng)目成員達(dá)成一致,才能保證動(dòng)效實(shí)現(xiàn)的效果。否則,你的動(dòng)效設(shè)計(jì)只會(huì)停留在設(shè)計(jì)階段,不能落實(shí)到項(xiàng)目中。

 

3、性能與響應(yīng)度

不管如何強(qiáng)調(diào)動(dòng)效設(shè)計(jì)的重要性,但是交互設(shè)計(jì)的重點(diǎn)永遠(yuǎn)是交互稿,這一點(diǎn)是不會(huì)變的。因此,動(dòng)效設(shè)計(jì)的要充分考慮到設(shè)備的性能與限制,只有在保證功能完善與健全的前提下來進(jìn)行動(dòng)效設(shè)計(jì),同時(shí)要做到動(dòng)效文件越小越好。

在滿足動(dòng)效的基本要求后,你的動(dòng)效作品才有可能落實(shí)到產(chǎn)品中,那么接下來我們來討論一下動(dòng)效設(shè)計(jì)的高階要求。

 

4、克制

具有克制屬性不一定是好的動(dòng)效設(shè)計(jì),然而好的動(dòng)效設(shè)計(jì)一定具有克制屬性。動(dòng)效設(shè)計(jì)不是設(shè)計(jì)炫技的舞臺(tái),帶著腳鐐跳舞仍然適用。

克制是對(duì)動(dòng)效效果的限制包括簡(jiǎn)潔適度、不增加用戶操作、不阻礙用戶、不超過時(shí)限(操作動(dòng)效最優(yōu)區(qū)間0.5s-1s)。

產(chǎn)品的動(dòng)效與用戶的操作相互交替出現(xiàn),動(dòng)效出現(xiàn)在用戶界面上的頻率會(huì)大大增加。對(duì)用戶來說,最好的動(dòng)效是讓用戶感受不到動(dòng)效的存在,過度設(shè)計(jì)有可能會(huì)將用戶的注意力吸引到動(dòng)效上,而忽略頁面要表達(dá)的內(nèi)容與功能,造成操作流程上的割裂。因此,對(duì)動(dòng)效的功能屬性的準(zhǔn)確表達(dá)要大于或遠(yuǎn)大于其美觀效果的表現(xiàn)。

 

5、自然

自然是高階要求中最難把握的一點(diǎn)。參照現(xiàn)實(shí)環(huán)境的物體物理運(yùn)動(dòng)特點(diǎn),用戶會(huì)將現(xiàn)實(shí)生活中的運(yùn)動(dòng)感受帶入到具體的動(dòng)效過程,若動(dòng)效不符合用戶運(yùn)動(dòng)感受的動(dòng)效,會(huì)給人怪異的情感。因此,不同的動(dòng)效節(jié)奏和形式,會(huì)給用戶帶來不同的體驗(yàn)。例如,在加載過程中的加速運(yùn)動(dòng)要比勻速運(yùn)動(dòng)與減速運(yùn)動(dòng)的的體驗(yàn)好。

除了運(yùn)動(dòng)事件的速度形式,運(yùn)動(dòng)的節(jié)奏與方式也是影響動(dòng)效設(shè)計(jì)自然屬性的關(guān)鍵因素。例如在小人的行走過程中,左臂與右腿是同時(shí)向前的,如果不一致,就會(huì)給用戶不自然、不真實(shí)的感覺。

動(dòng)效的上述五點(diǎn)要求是貫穿動(dòng)效設(shè)計(jì)的整個(gè)過程,同時(shí)也是檢驗(yàn)動(dòng)效優(yōu)劣的重要維度。

類型


從不同的維度進(jìn)行分析,動(dòng)效設(shè)計(jì)類型有不同的分類結(jié)果。有的設(shè)計(jì)師根據(jù)產(chǎn)品業(yè)務(wù)進(jìn)行分類:動(dòng)效設(shè)計(jì)可分為轉(zhuǎn)場(chǎng)動(dòng)效、操作引導(dǎo)與反饋類、內(nèi)容呈現(xiàn)類以及情感體驗(yàn)類四類。

根據(jù)動(dòng)效出現(xiàn)的時(shí)機(jī)與作用,本人將動(dòng)效大致分為四類,分別是品牌類動(dòng)效、引導(dǎo)類動(dòng)效、轉(zhuǎn)場(chǎng)類動(dòng)效、反饋類動(dòng)效。

通常,品牌類動(dòng)效出現(xiàn)在開機(jī)頁面。從狹義上來說,品牌類動(dòng)效指的是產(chǎn)品的logo動(dòng)畫,將產(chǎn)品或公司的品牌形象特色進(jìn)行準(zhǔn)確傳達(dá),如谷歌logo動(dòng)畫;從廣義上來說,品牌類動(dòng)效是產(chǎn)品中統(tǒng)一、獨(dú)特能夠與其他產(chǎn)品產(chǎn)生差異化的動(dòng)效設(shè)計(jì),甚至能夠上升至產(chǎn)品的“隱形logo”的地位,如蘋果的解鎖動(dòng)效、MD中的FAT按鈕動(dòng)效等。

Google動(dòng)效(來源Dribbble)

有些產(chǎn)品的品牌類動(dòng)效的風(fēng)格會(huì)遺傳給產(chǎn)品的其他動(dòng)效設(shè)計(jì),使產(chǎn)品的設(shè)計(jì)風(fēng)格與動(dòng)效特點(diǎn)上保持一致。

引導(dǎo)類動(dòng)效一般出現(xiàn)在引導(dǎo)頁面或入場(chǎng)動(dòng)效之后,引起用戶注意或引導(dǎo)用戶進(jìn)行操作,從而減少用戶困惑,如APP的引導(dǎo)頁等。引導(dǎo)類動(dòng)效還包括頁面元素動(dòng)畫、圖標(biāo)動(dòng)效,已引起用戶的注意,進(jìn)行操作。

 

菜單動(dòng)效

 

轉(zhuǎn)場(chǎng)類動(dòng)效又可細(xì)分為離場(chǎng)類動(dòng)效與入場(chǎng)類動(dòng)效,二者是相向而生,主要功能是頁面層級(jí)展示以及流暢過渡。離場(chǎng)動(dòng)效是頁面中元素的離開,入場(chǎng)動(dòng)效是頁面元素的進(jìn)入,二者占據(jù)著動(dòng)效設(shè)計(jì)的絕大部分,對(duì)整個(gè)產(chǎn)品形象的塑造起著重要作用,同時(shí)在效果上要更加注意克制的設(shè)計(jì)要求。

不同復(fù)雜度的動(dòng)效用戶驚喜度與使用時(shí)長(zhǎng)的關(guān)系

 

復(fù)雜度高的動(dòng)效會(huì)急劇拉升用戶的驚喜度,但是,隨著時(shí)間的推移,驚喜度會(huì)逐步降低,在用戶使用的中后期,復(fù)雜的動(dòng)效往往會(huì)引起用戶的反感,影響用戶操作。復(fù)雜度低的動(dòng)效設(shè)計(jì)在用戶驚喜度方面是潛移默化的影響,當(dāng)用戶逐漸熟悉與適應(yīng)產(chǎn)品的動(dòng)效節(jié)奏,其驚喜度會(huì)逐漸上升,最終保持在較高的水平。

反饋類動(dòng)效是指用戶在操作后頁面給出的操作反饋提示動(dòng)效,是銜接用戶操作與頁面跳轉(zhuǎn)的過渡效果。反饋動(dòng)效可細(xì)分為實(shí)時(shí)反饋動(dòng)效與整體反饋動(dòng)效。在反饋類動(dòng)效中,設(shè)計(jì)師最熟悉的動(dòng)效是加載動(dòng)效,其是對(duì)用戶點(diǎn)擊一下載的反饋,同時(shí)銜接了離場(chǎng)動(dòng)效與入場(chǎng)動(dòng)效,使用戶的才做反饋更加順暢,避免中間出現(xiàn)斷層。

 

原則


根據(jù)牛頓的三大運(yùn)動(dòng)定律,我們可以得出以下結(jié)論:1、現(xiàn)實(shí)環(huán)境下,物體總是做加速和減速運(yùn)動(dòng);2、運(yùn)動(dòng)物體在停止時(shí),總會(huì)在停止點(diǎn)兩側(cè)做搖擺運(yùn)動(dòng),最終因摩擦力而停止。在使用產(chǎn)品的過程中,用戶會(huì)不自主的將在現(xiàn)實(shí)中對(duì)物體運(yùn)動(dòng)的感知經(jīng)驗(yàn),映射到相應(yīng)的動(dòng)效設(shè)計(jì),以檢測(cè)動(dòng)效的合理性。因此,在動(dòng)效設(shè)計(jì)中,運(yùn)動(dòng)的物體也要符合現(xiàn)實(shí)環(huán)境的運(yùn)動(dòng)規(guī)律,才能與用戶的感知相匹配。

在動(dòng)效設(shè)計(jì)中,設(shè)計(jì)師要遵循牛頓力學(xué)三定律,考慮到重力、摩擦力、慣性等因素,并將這些因素體現(xiàn)在動(dòng)效的表現(xiàn)上。相較于不符合現(xiàn)實(shí)環(huán)境的運(yùn)動(dòng)物體,遵循現(xiàn)實(shí)環(huán)境的動(dòng)效會(huì)更有感染力,能夠提升用戶體驗(yàn)。

動(dòng)效設(shè)計(jì)脫胎于動(dòng)畫,根據(jù)動(dòng)畫的設(shè)計(jì)原則,并結(jié)合動(dòng)效的具體場(chǎng)景,在進(jìn)行動(dòng)效設(shè)計(jì)時(shí),除了要遵循前文的物理原則,還要遵循一定的表現(xiàn)原則。

根據(jù)自身經(jīng)驗(yàn),以及網(wǎng)上對(duì)動(dòng)效設(shè)計(jì)原則的探討,筆者將動(dòng)效設(shè)計(jì)的原則歸納如下:

 

1、預(yù)備動(dòng)作

預(yù)備動(dòng)作是動(dòng)效開始時(shí)都有一個(gè)反向的蓄勢(shì)動(dòng)作,例如我們起跳時(shí)都會(huì)先下蹲,然后才會(huì)起跳。預(yù)備動(dòng)作是為了獲得更大的起始速度,預(yù)備動(dòng)作的時(shí)長(zhǎng)與幅度決定了起始速度以及相應(yīng)的運(yùn)動(dòng)距離。因此,預(yù)備動(dòng)作的幅度要與最終的動(dòng)效形成相應(yīng)的映射,使其前后匹配,才會(huì)給出符合用戶心理預(yù)期的動(dòng)效結(jié)果。

 

 

預(yù)備動(dòng)作

2、緩動(dòng)(緩入緩出)

緩動(dòng)是用來模擬現(xiàn)實(shí)、傳遞情感的,包括緩入、緩出兩個(gè)方面,是元素在運(yùn)動(dòng)過程中的速度關(guān)系,也是元素運(yùn)動(dòng)的基本狀態(tài)。緩入是加速過程,緩出是減速過程,在整個(gè)過程中,元素的運(yùn)動(dòng)節(jié)奏與位置可以預(yù)期,用戶可以提前對(duì)運(yùn)動(dòng)結(jié)束后的運(yùn)動(dòng)做好心理準(zhǔn)備。元素運(yùn)動(dòng)的速度變化對(duì)用戶情緒有一定的影響,例如,對(duì)于加載過程,進(jìn)度條的加速加載肯定比勻速加載和減速加載的體驗(yàn)要好。

 

緩動(dòng)

3、動(dòng)作跟隨

跟隨動(dòng)作也是模擬現(xiàn)實(shí)的一種表現(xiàn)手法,體現(xiàn)了運(yùn)動(dòng)的不完全一致性。同時(shí),動(dòng)作跟隨也能體現(xiàn)頁面元素的層級(jí)與分組關(guān)系。高優(yōu)先級(jí)的的內(nèi)容,作為頁面的主要元素首先移動(dòng),次要元素與模塊,依次跟隨進(jìn)行移動(dòng)。動(dòng)作跟隨一方面體現(xiàn)了頁面元素的歸屬,另一方面讓運(yùn)動(dòng)的節(jié)奏更加舒展且有層次,不至于出現(xiàn)同時(shí)移動(dòng),分不清先后主次的情況。

 

動(dòng)作跟隨

4、形變

形變也是模擬現(xiàn)實(shí)的一種表現(xiàn)方式,對(duì)運(yùn)動(dòng)元素的屬性進(jìn)行烘托與體現(xiàn),包括材質(zhì)、速度等。形變?cè)娇鋸垼襟w現(xiàn)材質(zhì)的彈性或運(yùn)動(dòng)的快速;形變?cè)叫?,越體現(xiàn)材質(zhì)的堅(jiān)硬或速度緩慢。另外,預(yù)備動(dòng)作中的幅度也包含形變屬性。形變中要遵循一個(gè)原則,就是元素的體積要保持一致或大體一致,不能有較大的偏差,否則動(dòng)效的銜接上會(huì)有跳動(dòng)。

 

形變

5、慣性起止

慣性起止則完全是牛頓力學(xué)定律中的慣性定律的體現(xiàn),任何物體運(yùn)動(dòng)方式改變時(shí),物體都有保持現(xiàn)有運(yùn)動(dòng)方式的慣性。在運(yùn)動(dòng)的開始與結(jié)束時(shí),慣性也是要表現(xiàn)的狀態(tài)。慣性的表達(dá)可以通過位置、形變等來體現(xiàn)速度變化的劇烈程度。

 

慣性起止

 

6、有始有終

有始有終是動(dòng)效設(shè)計(jì)過程中的銜接原則,體現(xiàn)在元素的入場(chǎng)與離場(chǎng)。有始有終的表現(xiàn)方式有生長(zhǎng)、逆生長(zhǎng)、透明度變化、位移等多種。在入場(chǎng)與轉(zhuǎn)場(chǎng)動(dòng)效中,透明度變化與位移等的變化方式較為常見,加載動(dòng)效或頁面內(nèi)的入場(chǎng)動(dòng)效則以生長(zhǎng)與逆生長(zhǎng)的方式為主。

如下案例中,元素的進(jìn)場(chǎng)是左側(cè)滑入,同時(shí)伴隨透明度的變化,這樣的入場(chǎng)動(dòng)效才符合用戶認(rèn)知,不會(huì)突然出現(xiàn)與消失,只是元素在畫面內(nèi)外的移動(dòng)與變化。同時(shí),也呼應(yīng)了流暢要求。

 

有始有終

7、運(yùn)動(dòng)節(jié)奏

可以說,運(yùn)動(dòng)節(jié)奏是一種用戶的直觀感受,而且是動(dòng)效設(shè)計(jì)的靈魂。差的運(yùn)動(dòng)節(jié)奏提升到好的動(dòng)效節(jié)奏是很容易的,只要滿足動(dòng)效的原則與要求,就可以實(shí)現(xiàn)好的動(dòng)效設(shè)計(jì)。但是,舒服的動(dòng)效設(shè)計(jì)就沒有那么容易了,需要設(shè)計(jì)師對(duì)現(xiàn)實(shí)事物進(jìn)行細(xì)心的觀察,進(jìn)而對(duì)其概括與提煉,并進(jìn)行合理的藝術(shù)表現(xiàn)(例如夸張)。最終,使其符合用戶心底認(rèn)知且契合用戶在當(dāng)下場(chǎng)景的心理訴求。

Principl中的時(shí)間與運(yùn)動(dòng)關(guān)系控制器

 

運(yùn)動(dòng)節(jié)奏不僅僅是運(yùn)動(dòng)的快與慢,還包括運(yùn)動(dòng)的形式、物體的形變,以及所體現(xiàn)出來的受力等等,是這些物理屬性合理交替的的表現(xiàn)形式。合理的運(yùn)動(dòng)節(jié)奏對(duì)動(dòng)效的表現(xiàn)具有十分重要的意義,能夠增強(qiáng)動(dòng)效的美感與韻律。運(yùn)動(dòng)節(jié)奏的控制體現(xiàn)在時(shí)間與距離兩個(gè)維度,所有的運(yùn)動(dòng)元素都要在這兩個(gè)維度上相互協(xié)調(diào)與匹配。

在動(dòng)效設(shè)計(jì)中,動(dòng)效的設(shè)計(jì)原則并不是單一出現(xiàn)的,而是相互結(jié)合,達(dá)到符合現(xiàn)實(shí)情況,滿足用戶心理預(yù)期。同時(shí),這些原則也不是一層不變的,在某些設(shè)計(jì)中會(huì)在形式上進(jìn)行夸張或特意打破既有的預(yù)定,給用戶意外與驚喜。

 

表達(dá)方式


動(dòng)效的核心是幀動(dòng)畫,就是一幀幀的動(dòng)畫串聯(lián)起來形成的動(dòng)畫效果。幀動(dòng)畫的關(guān)鍵就是K幀,K幀包括順序K幀與節(jié)點(diǎn)K幀兩種。順序K幀是指根據(jù)動(dòng)效的運(yùn)動(dòng)順序,對(duì)每一個(gè)細(xì)節(jié)上的變化進(jìn)行K幀,然后,工具軟件會(huì)將關(guān)鍵幀之間的頁面變化形成補(bǔ)間動(dòng)畫,進(jìn)而完成動(dòng)效的制作。

節(jié)點(diǎn)K幀是將動(dòng)效變化中的每一個(gè)關(guān)鍵節(jié)點(diǎn)進(jìn)行打幀,然后關(guān)鍵幀之間完成細(xì)節(jié)變化的進(jìn)行K幀,最終也是通過補(bǔ)間動(dòng)畫完成動(dòng)效設(shè)計(jì)。實(shí)際上順序K幀也是節(jié)點(diǎn)K幀的一種,都是對(duì)動(dòng)效的變化進(jìn)行K幀,不同之處在與,順序K幀的密度要遠(yuǎn)大于節(jié)點(diǎn)K幀,有點(diǎn)類似繪畫中的起稿與細(xì)節(jié)刻畫。

對(duì)于不同屬性的設(shè)計(jì)工具,其采用的表達(dá)方式也不一樣;對(duì)于不同的設(shè)計(jì)師,在同一種工具上的表達(dá)方式一不盡相同。對(duì)于工具的使用,本人較為熟悉的是AE與Principle,這兩款動(dòng)效軟件的特長(zhǎng),幾乎可以涵蓋當(dāng)前所有的動(dòng)效設(shè)計(jì)。

對(duì)于AE,可以采用順序K幀,也可以采用節(jié)點(diǎn)K幀與順序K幀相結(jié)合的方式,來實(shí)現(xiàn)動(dòng)效設(shè)計(jì)。這得益于AE強(qiáng)大的時(shí)間軸功能。對(duì)于Principle而言,更多的是采用節(jié)點(diǎn)K幀,因?yàn)閜rinciple的關(guān)鍵幀功能較弱,同時(shí)表達(dá)的動(dòng)效細(xì)節(jié)不如AE細(xì)膩,因此只能做進(jìn)行節(jié)點(diǎn)K幀。另外在Principle中插入關(guān)鍵幀較為復(fù)雜,對(duì)后續(xù)的關(guān)鍵幀有很大的影響,因此,principle只適合節(jié)點(diǎn)K幀。

此處,將不再對(duì)設(shè)計(jì)工具進(jìn)行展開闡述,接下來兩篇文章,將分別探討兩款設(shè)計(jì)工具在不同的動(dòng)效設(shè)計(jì)上的優(yōu)劣勢(shì)、注意事項(xiàng)以及技巧,同時(shí)進(jìn)行一些實(shí)踐操作,并將工程文件分享給大家。

 

后記


在高速發(fā)展二十年后的今天,互聯(lián)網(wǎng)產(chǎn)品早已擺脫以往簡(jiǎn)單粗暴的功能堆疊的設(shè)計(jì)方式,進(jìn)入到體驗(yàn)為王的時(shí)代。在當(dāng)前AI大行其道,VR、AR層出不窮的時(shí)代,作為產(chǎn)品情感的重要表達(dá)方式,動(dòng)效設(shè)計(jì)是每個(gè)設(shè)計(jì)師應(yīng)該掌握的設(shè)計(jì)技能。


在數(shù)字化產(chǎn)品的世界里,每一個(gè)細(xì)微的交互動(dòng)作都承載著設(shè)計(jì)師的匠心獨(dú)運(yùn)。然而,當(dāng)我們?cè)谡務(wù)摻换ピO(shè)計(jì)時(shí),往往只關(guān)注于界面的布局、信息的層級(jí),卻忽略了一個(gè)至關(guān)重要的元素——動(dòng)效設(shè)計(jì)。今天,就讓我們一起探討動(dòng)效設(shè)計(jì)在交互稿中的重要作用,以及它如何提升設(shè)計(jì)的可讀性和吸引力。

首先,動(dòng)效設(shè)計(jì)在交互稿的邏輯展示中發(fā)揮著至關(guān)重要的作用。它不僅僅是一種裝飾,更是連接各個(gè)頁面、元素之間的橋梁。通過精心設(shè)計(jì)的動(dòng)效,我們可以清晰地展示用戶操作的流程、頁面的跳轉(zhuǎn)關(guān)系以及元素的變化狀態(tài),幫助團(tuán)隊(duì)成員更好地理解產(chǎn)品的功能和操作流程。這種直觀的展示方式,使得交互稿不再是一個(gè)靜態(tài)的展示品,而是一個(gè)可以“活”起來的產(chǎn)品原型。

其次,動(dòng)效設(shè)計(jì)在提高交互稿的可讀性方面也具有顯著的優(yōu)勢(shì)。對(duì)于那些對(duì)產(chǎn)品以及業(yè)務(wù)不是很了解的團(tuán)隊(duì)成員來說,靜態(tài)的交互稿往往難以讓他們快速理解產(chǎn)品的功能和操作流程。而通過動(dòng)效設(shè)計(jì),我們可以將復(fù)雜的操作流程簡(jiǎn)化為一系列流暢、自然的動(dòng)作,讓用戶在操作中自然而然地理解產(chǎn)品的功能和特點(diǎn)。同時(shí),動(dòng)效設(shè)計(jì)還可以突出顯示重要的信息和元素,引導(dǎo)用戶的注意力,提高交互稿的易讀性和易用性。

除此之外,動(dòng)效設(shè)計(jì)還具有無限的創(chuàng)意空間。它不僅可以用于展示交互稿的邏輯關(guān)系和操作流程,還可以用于表達(dá)設(shè)計(jì)師的創(chuàng)意和想法。通過精心設(shè)計(jì)的動(dòng)效,我們可以將產(chǎn)品的特點(diǎn)和優(yōu)勢(shì)以更加生動(dòng)、有趣的方式呈現(xiàn)給用戶,增強(qiáng)用戶的參與感和體驗(yàn)感。這種創(chuàng)意性的表達(dá)方式,不僅可以讓交互稿更加生動(dòng)有趣,還可以提升產(chǎn)品的品牌形象和競(jìng)爭(zhēng)力。

然而,在實(shí)際工作中,我們發(fā)現(xiàn)很多交互設(shè)計(jì)師在交付成果物時(shí),往往只提供了靜態(tài)的交互原型,而忽略了動(dòng)效設(shè)計(jì)的重要性。這主要是因?yàn)殡S著設(shè)計(jì)工具逐漸遷移到Sketch等軟件上,最基本的頁面點(diǎn)擊跳轉(zhuǎn)等動(dòng)效難以實(shí)現(xiàn),導(dǎo)致設(shè)計(jì)師在制作交互原型時(shí)只能選擇靜態(tài)展示。但是,這并不意味著我們應(yīng)該放棄動(dòng)效設(shè)計(jì)。相反,我們應(yīng)該積極探索新的設(shè)計(jì)工具和技術(shù)手段,將動(dòng)效設(shè)計(jì)融入到交互原型中,讓設(shè)計(jì)更加生動(dòng)、有趣。

注:下面的鏈接是文中所涉及的動(dòng)效案例的工程文件,有需要的朋友可以自行下載!

鏈接: https://pan.baidu.com/s/19y3Lp189jBoAbMtG9yLBwQ 密碼: x5qr

作者:體驗(yàn)設(shè)計(jì)思
鏈接:https://www.zcool.com.cn/article/ZNzI2NjU2.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

 

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔