這是一篇轉(zhuǎn)載的文章渊季，因為現(xiàn)在在專注產(chǎn)品設(shè)計和管理方面朋蔫，感覺很不錯就轉(zhuǎn)載了下。

作者：梁梭域，曉明

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

1483105880625972.png

1) 擠壓和拉伸

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

1483105924424627.jpg

1483105894855609.gif

2)預(yù)備動作

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

1483105949321444.jpg

1483105957537394.gif

3)演出布局

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

1483106195931218.gif

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)鍵動作法漂彤。

1483106222540243.jpg

1483106229611035.jpg

5）漸快與漸慢

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

1483106258218429.png

6）跟隨動作與重疊動作

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

1483106275673185.gif

7）附屬動作

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

8）弧形運動軌跡

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

1483106297373764.png

1483106302101448.gif

9）時間控制

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

1483106346796292.jpg

1483106334402082.gif

10）夸張

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

1483106371409453.jpg

1483106377705387.gif

11）純熟的手繪技巧

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

12）吸引力

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

1483106488696461.gif

總結(jié)

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

1483106523721977.png

參考文章

譯文-我從Disney動畫設(shè)計學(xué)到的5個用戶體驗設(shè)計原則
迪斯尼的動畫十二原則（追加2條）
動效設(shè)計原理:從卡通動畫到UI動效
[譯文]網(wǎng)頁動畫的十二原則

原文鏈接