界面設計參考:迪士尼動畫12原則與界面動效的關聯

3 評論 15765 瀏覽 90 收藏 10 分鐘

分享迪士尼動畫12原則的應用實例,希望能夠對大家的設計有點幫助。

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

1擠壓和拉伸

擠壓和拉伸是指物體的形變。例如拋出一個皮球,它在接觸地面時發生擠壓,在彈起時發生了拉伸。迪士尼動畫經常出現這一手法,如人物的落地/起跳,結合夸張的手法,更加有力生動。在人機界面中,界面上的內容或控件相對嚴謹和機械,生命力較弱,適當的擠壓和拉伸可增加趣味性和生動性。

2預備動作

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

3演出布局

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

4連貫動作法與關鍵動作法

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

5漸快與漸慢

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

6跟隨動作與重疊動作

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

7附屬動作

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

8弧形運動軌跡

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

9時間控制

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

10夸張

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

11純熟的手繪技巧

這點在動畫和人機界面中都是非?;A和重要的原則,良好的視覺表現是動畫和動效流暢精彩的重要鋪墊。

12吸引力

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

總結

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

參考文章

http://uxren.cn/?p=44270&sukey=3997c0719f1515200101776717e529e4e66259b0b1c6ea8cc2cf8077234077948f59

ba8c4b06119b32827f10965bbea9

https://isux.tencent.com/20122.html

http://www.jianshu.com/p/1858a8733ba3

 

作者:梁, 曉明

來源:攜程設計委員會

版權:人人都是產品經理遵循行業規范,任何轉載的稿件都會明確標注作者和來源,若標注有誤,請聯系主編QQ:419297645

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝分享

    來自北京 回復
  2. 厲害了 真是行家見行家

    回復
  3. 喜歡這樣的動效,然而我們技術哥哥卻做不到。

    來自廣東 回復