界面設(shè)計(jì)參考：迪士尼動(dòng)畫12原則與界面動(dòng)效的關(guān)聯(lián).doc

《界面設(shè)計(jì)參考：迪士尼動(dòng)畫12原則與界面動(dòng)效的關(guān)聯(lián).doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、界面設(shè)計(jì)參考：迪士尼動(dòng)畫12原則與界面動(dòng)效的關(guān)聯(lián)　　分享迪士尼動(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ì)的原則有很多相通的地方

2、。　　　　1擠壓和拉伸　　擠壓和拉伸是指物體的形變。例如拋出一個(gè)皮球，它在接觸地面時(shí)發(fā)生擠壓，在彈起時(shí)發(fā)生了拉伸。迪士尼動(dòng)畫經(jīng)常出現(xiàn)這一手法，如人物的落地/起跳，結(jié)合夸張的手法，更加有力生動(dòng)。在人機(jī)界面中，界面上的內(nèi)容或控件相對(duì)嚴(yán)謹(jǐn)和機(jī)械，生命力較弱，適當(dāng)?shù)臄D壓和拉伸可增加趣味性和生動(dòng)性?！　　　　　?預(yù)備動(dòng)作　　迪士尼的動(dòng)作設(shè)計(jì)經(jīng)常出現(xiàn)反向動(dòng)作，用來加強(qiáng)正向動(dòng)作的張力，讓觀者對(duì)于角色的行動(dòng)有一定的預(yù)期性。如下圖，唐老鴨手臂反向的動(dòng)作，能夠讓人們快速反應(yīng)出來它要起跑。預(yù)期性是人機(jī)界面設(shè)計(jì)中的重要原則，符合用戶預(yù)期的頁面

3、切換/控件操作/動(dòng)效過渡，會(huì)讓人感到自然和舒服。如下圖，滑塊在即將掉落的過程中出現(xiàn)了反彈，這個(gè)細(xì)節(jié)強(qiáng)調(diào)了滑塊的不穩(wěn)定性，符合人們對(duì)于物體滑落的認(rèn)知?！　　　　　?演出布局　　動(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)下。materialdesign中的動(dòng)效切換，很多都提供了一個(gè)視覺焦點(diǎn)，用戶很容易找到界面需要關(guān)注的地方?！　　　?連貫動(dòng)

4、作法與關(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)作法?！　　　　　?漸快與漸慢　　物體的運(yùn)動(dòng)都有加速和減速的過程,不會(huì)突然停止和瞬間加速,。動(dòng)畫中的運(yùn)動(dòng)遵循物理定律會(huì)更容易讓人們接受，人機(jī)界面中通過貝塞爾曲線可以實(shí)現(xiàn)復(fù)雜的運(yùn)動(dòng)效

5、果?！　　　?跟隨動(dòng)作與重疊動(dòng)作　　迪士尼對(duì)于運(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í)性和趣味性?！　　　?附屬動(dòng)作　　動(dòng)畫中的附屬動(dòng)作，主要指的是依附在主要?jiǎng)幼髦碌募?xì)膩動(dòng)作，比如角色配件（胡須、衣角）的一些動(dòng)作。人機(jī)界面中在主要焦點(diǎn)出現(xiàn)的時(shí)候就可以執(zhí)行附屬動(dòng)作，比如更改列表順序時(shí)，

6、在拖拽的主要?jiǎng)幼靼l(fā)生后，其它列表就可以進(jìn)行順移?！　?弧形運(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)擬人，如MACOSX中，最小化窗口使用了弧線，顯得活潑有力?！　　　　　?時(shí)間控制　　時(shí)間是動(dòng)畫的重要元素，它的作用是控制角色動(dòng)作和運(yùn)動(dòng)的節(jié)奏與重量感。如圖中小老鼠起床-揉眼睛-哈欠-伸懶腰這一系列動(dòng)作，動(dòng)作之間的時(shí)間控制不同，給觀者的感受也是不同的。時(shí)間在人機(jī)界面動(dòng)效中發(fā)揮的是

7、同樣的作用，如下圖中滑塊的翻轉(zhuǎn)效果因時(shí)間設(shè)置不同，節(jié)奏感呈現(xiàn)出不同?！　　　　　?0夸張　　夸張是動(dòng)畫非常重要的表演形式，可以巧妙詮釋角色和劇情，并帶動(dòng)觀者的情緒。在人機(jī)界面中，可以根據(jù)產(chǎn)品形式和用戶的心理情緒確定夸張的程度?！　　　　　?1純熟的手繪技巧　　這點(diǎn)在動(dòng)畫和人機(jī)界面中都是非?；A(chǔ)和重要的原則，良好的視覺表現(xiàn)是動(dòng)畫和動(dòng)效流暢精彩的重要鋪墊?！　?2吸引力　　吸引力是畫面表現(xiàn)力的重要評(píng)估方式，動(dòng)畫吸引人的地方如充滿想象力的角色，充滿個(gè)性和細(xì)節(jié)的畫面等。同樣人機(jī)界面中的動(dòng)效，可以宣傳品牌，可以讓用戶感受到同理心

8、，造就獨(dú)特的產(chǎn)品魅力?！　　　】偨Y(jié)　　再次來看迪士尼動(dòng)畫12原則，通過上述分析，對(duì)它進(jìn)行歸類，原來動(dòng)畫是通過控制時(shí)間，運(yùn)用不同的表演方式，展現(xiàn)角色動(dòng)作和運(yùn)動(dòng)的一種藝術(shù)。那么對(duì)于人機(jī)界面，同樣可以從運(yùn)動(dòng)和動(dòng)作，時(shí)長(zhǎng)，元素特性三個(gè)角度思考界面動(dòng)效的設(shè)計(jì)?！　　　⒖嘉恼隆　ttp://uxren.cn/?p=44270&sukey=