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

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

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

1.擠壓和拉伸

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

2.預(yù)備動作

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

3.演出布局

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

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

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

5.漸快與漸慢

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

6.跟隨動作與重疊動作

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

7.附屬動作

動畫中的附屬動作，主要指的是依附在主要動作之下的細(xì)膩動作，比如角色配件(胡須、衣角)的一些動作。人機界面中在主要焦點出現(xiàn)的時候就可以執(zhí)行附屬動作，比如更改列表順序時，在拖拽的主要動作發(fā)生后，其它列表就可以進行順移。

8.弧形運動軌跡

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

9.時間控制

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

10.夸張

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

11.純熟的手繪技巧

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

12.吸引力

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

總結(jié)

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

文章題目：頁面動效設(shè)計運用迪士尼動畫12原則
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/news/160916.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、標(biāo)簽優(yōu)化、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)站排名

廣告

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