頁面動(dòng)效設(shè)計(jì)運(yùn)用迪士尼動(dòng)畫12原則

創(chuàng)新互聯(lián)為你提供，【設(shè)計(jì)資訊】頁面動(dòng)效設(shè)計(jì)運(yùn)用迪士尼動(dòng)畫12原則

分享迪士尼動(dòng)畫12原則的應(yīng)用實(shí)例，希望能夠?qū)Υ蠹业脑O(shè)計(jì)有點(diǎn)幫助。

迪士尼出品的 《瘋狂動(dòng)物城》可謂逗樂了全民，作為迪士尼動(dòng)畫的杰出代表，大人和孩子都愛看的緣由是什么?除了精彩的劇本，擬人和夸張的動(dòng)畫效果可謂是最具吸引力的地方。同樣作為體驗(yàn)良好的界面，流暢的動(dòng)效賦予了其生動(dòng)和活潑。動(dòng)畫和動(dòng)效的共通特征大概就是畫面“動(dòng)”的漂亮了。迪士尼動(dòng)畫成立于上世紀(jì)20-30年代，雖不足百年，但行成了一套動(dòng)畫創(chuàng)作的黃金原則。詳細(xì)分析下，這12原則與界面動(dòng)效設(shè)計(jì)的原則有很多相通的地方。

1.擠壓和拉伸

擠壓和拉伸是指物體的形變。例如拋出一個(gè)皮球，它在接觸地面時(shí)發(fā)生擠壓，在彈起時(shí)發(fā)生了拉伸。迪士尼動(dòng)畫經(jīng)常出現(xiàn)這一手法，如人物的落地/起跳，結(jié)合夸張的手法，更加有力生動(dòng)。在人機(jī)界面中，界面上的內(nèi)容或控件相對嚴(yán)謹(jǐn)和機(jī)械，生命力較弱，適當(dāng)?shù)臄D壓和拉伸可增加趣味性和生動(dòng)性。

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

迪士尼的動(dòng)作設(shè)計(jì)經(jīng)常出現(xiàn)反向動(dòng)作，用來加強(qiáng)正向動(dòng)作的張力，讓觀者對于角色的行動(dòng)有一定的預(yù)期性。如下圖，唐老鴨手臂反向的動(dòng)作，能夠讓人們快速反應(yīng)出來它要起跑。預(yù)期性是人機(jī)界面設(shè)計(jì)中的重要原則，符合用戶預(yù)期的頁面切換/控件操作/動(dòng)效過渡，會(huì)讓人感到自然和舒服。如下圖，滑塊在即將掉落的過程中出現(xiàn)了反彈，這個(gè)細(xì)節(jié)強(qiáng)調(diào)了滑塊的不穩(wěn)定性，符合人們對于物體滑落的認(rèn)知。

3.演出布局

動(dòng)畫中的演出是角色在每一個(gè)鏡頭的表演(表情/動(dòng)作刻畫)，布局是每一個(gè)鏡頭的內(nèi)容呈現(xiàn)。角色的走位需要仔細(xì)安排和設(shè)計(jì)，避免同一時(shí)間有過多瑣碎的動(dòng)作與變化，導(dǎo)致觀者抓不住重點(diǎn)。人機(jī)界面中的動(dòng)效同樣需要區(qū)分主次，把用戶的視覺焦點(diǎn)集中在當(dāng)下。material design 中的動(dòng)效切換，很多都提供了一個(gè)視覺焦點(diǎn)，用戶很容易找到界面需要關(guān)注的地方。

4.連貫動(dòng)作法與關(guān)鍵動(dòng)作法

動(dòng)畫是一系列連續(xù)圖像組成的動(dòng)態(tài)影像，例如常見的1s/24幀，指的是1s內(nèi)顯示24張連續(xù)的圖像。連貫動(dòng)作法是把每一幀都抓取出來，關(guān)鍵動(dòng)作法是選取一些關(guān)鍵幀，關(guān)鍵幀與關(guān)鍵幀之間通過補(bǔ)間幀來完成。如下圖“打太極拳”的動(dòng)作，上面的圖是把太極拳的每一個(gè)動(dòng)態(tài)抓取出來，下面的圖展現(xiàn)的是太極拳的關(guān)鍵動(dòng)作。人機(jī)界面中的動(dòng)效，常采用的是關(guān)鍵動(dòng)作法。

5.漸快與漸慢

物體的運(yùn)動(dòng)都有加速和減速的過程, 不會(huì)突然停止和瞬間加速,。動(dòng)畫中的運(yùn)動(dòng)遵循物理定律會(huì)更容易讓人們接受，人機(jī)界面中通過貝塞爾曲線可以實(shí)現(xiàn)復(fù)雜的運(yùn)動(dòng)效果。

6.跟隨動(dòng)作與重疊動(dòng)作

迪士尼對于運(yùn)動(dòng)物體的詮釋是物體的運(yùn)動(dòng)是一個(gè)部分接著一個(gè)部分的。如轉(zhuǎn)身的動(dòng)作，人的身體先完成，接著身上的衣服跟隨轉(zhuǎn)身，這里衣服的運(yùn)動(dòng)即為跟隨動(dòng)作。另外物體與物體的運(yùn)動(dòng)會(huì)有重疊的部分，如一輛車超過另外一輛車時(shí)，這個(gè)過程中他們的運(yùn)動(dòng)會(huì)有重疊。跟隨和重疊動(dòng)作可以造就視覺上的時(shí)間差，增加動(dòng)作的真實(shí)性和趣味性。

7.附屬動(dòng)作

動(dòng)畫中的附屬動(dòng)作，主要指的是依附在主要?jiǎng)幼髦碌募?xì)膩動(dòng)作，比如角色配件(胡須、衣角)的一些動(dòng)作。人機(jī)界面中在主要焦點(diǎn)出現(xiàn)的時(shí)候就可以執(zhí)行附屬動(dòng)作，比如更改列表順序時(shí)，在拖拽的主要?jiǎng)幼靼l(fā)生后，其它列表就可以進(jìn)行順移。

8.弧形運(yùn)動(dòng)軌跡

現(xiàn)實(shí)生活中，除了機(jī)械之外，大多數(shù)的運(yùn)動(dòng)軌跡都是弧形。動(dòng)畫中的運(yùn)動(dòng)更是如此。如人的行走動(dòng)作，身體各部位的運(yùn)動(dòng)軌跡呈弧線。在人機(jī)界面中，采用弧形的運(yùn)動(dòng)軌跡可以讓界面看起來更加生動(dòng)擬人，如MAC OS X中，最小化窗口使用了弧線，顯得活潑有力。

9.時(shí)間控制

時(shí)間是動(dòng)畫的重要元素，它的作用是控制角色動(dòng)作和運(yùn)動(dòng)的節(jié)奏與重量感。如圖中小老鼠起床-揉眼睛-哈欠-伸懶腰這一系列動(dòng)作，動(dòng)作之間的時(shí)間控制不同，給觀者的感受也是不同的。時(shí)間在人機(jī)界面動(dòng)效中發(fā)揮的是同樣的作用，如下圖中滑塊的翻轉(zhuǎn)效果因時(shí)間設(shè)置不同，節(jié)奏感呈現(xiàn)出不同。

10.夸張

夸張是動(dòng)畫非常重要的表演形式，可以巧妙詮釋角色和劇情，并帶動(dòng)觀者的情緒。在人機(jī)界面中，可以根據(jù)產(chǎn)品形式和用戶的心理情緒確定夸張的程度。

11.純熟的手繪技巧

這點(diǎn)在動(dòng)畫和人機(jī)界面中都是非常基礎(chǔ)和重要的原則，良好的視覺表現(xiàn)是動(dòng)畫和動(dòng)效流暢精彩的重要鋪墊。

12.吸引力

吸引力是畫面表現(xiàn)力的重要評估方式，動(dòng)畫吸引人的地方如充滿想象力的角色，充滿個(gè)性和細(xì)節(jié)的畫面等。同樣人機(jī)界面中的動(dòng)效，可以宣傳品牌，可以讓用戶感受到同理心，造就獨(dú)特的產(chǎn)品魅力。

總結(jié)

再次來看迪士尼動(dòng)畫12原則，通過上述分析，對它進(jìn)行歸類，原來動(dòng)畫是通過控制時(shí)間，運(yùn)用不同的表演方式，展現(xiàn)角色動(dòng)作和運(yùn)動(dòng)的一種藝術(shù)。那么對于人機(jī)界面，同樣可以從運(yùn)動(dòng)和動(dòng)作，時(shí)長，元素特性三個(gè)角度思考界面動(dòng)效的設(shè)計(jì)。

網(wǎng)站題目：頁面動(dòng)效設(shè)計(jì)運(yùn)用迪士尼動(dòng)畫12原則
路徑分享：http://www.muchs.cn/news16/160916.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、用戶體驗(yàn)、品牌網(wǎng)站制作、網(wǎng)站收錄、軟件開發(fā)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)