UI靜態(tài)頁(yè)面設(shè)計(jì)與卡通動(dòng)效結(jié)合研究

關(guān)志如（廣東工商職業(yè)學(xué)院，廣東 肇慶 526020）

?

UI靜態(tài)頁(yè)面設(shè)計(jì)與卡通動(dòng)效結(jié)合研究

關(guān)志如
（廣東工商職業(yè)學(xué)院，廣東 肇慶 526020）

摘 要：“好的產(chǎn)品關(guān)注功能，優(yōu)秀的產(chǎn)品關(guān)注情感”，這句話充分體現(xiàn)了功能和情感因素在產(chǎn)品設(shè)計(jì)中的重要作用，UI設(shè)計(jì)也不例外。本文以卡通動(dòng)畫(huà)效果為研究對(duì)象，重點(diǎn)就其在UI靜態(tài)頁(yè)面設(shè)計(jì)中的合理運(yùn)用進(jìn)行了探究。

關(guān)鍵詞：UI設(shè)計(jì)；卡通；動(dòng)畫(huà)效果

UI是基于靜態(tài)頁(yè)面來(lái)進(jìn)行設(shè)計(jì)的，并且頁(yè)面之間通過(guò)跳轉(zhuǎn)進(jìn)行切換。在實(shí)際 UI設(shè)計(jì)的過(guò)程中，設(shè)計(jì)人員大都將設(shè)計(jì)重點(diǎn)放在了單頁(yè)視覺(jué)效果上，卻常常忽略對(duì)界面跳轉(zhuǎn)這個(gè)過(guò)渡期的處理，所以很容易使用戶感覺(jué)到困惑。然而，在卡通領(lǐng)域中，由于使用了大量的動(dòng)畫(huà)效果，可以幫助用戶更好地理解某個(gè)動(dòng)作。雖然UI設(shè)計(jì)領(lǐng)域與卡通動(dòng)畫(huà)效二者之間存在差異，但如果可以從情感認(rèn)知層面上將UI設(shè)計(jì)與卡通動(dòng)效的優(yōu)點(diǎn)結(jié)合起來(lái)，則可以大大提高UI設(shè)計(jì)的質(zhì)量。

1　UI界面與卡通動(dòng)效概述

1.1UI界面的含義

UI界面實(shí)際上就是用戶界面，用一句話概括就是人和工具之間的界面［1］。在我們?nèi)粘Ｉ町?dāng)中，界面同樣體現(xiàn)在某些方面，比如在用戶觀看電視的時(shí)候，遙控器和屏幕就相當(dāng)于這個(gè)界面。它不僅僅是由用戶與界面兩個(gè)部分組成，同時(shí)還包含著用戶與界面之間的交互關(guān)系。

1.2UI界面與卡通動(dòng)效的聯(lián)系性

UI界面通常均是基于靜態(tài)頁(yè)面來(lái)進(jìn)行設(shè)計(jì)，并且無(wú)數(shù)個(gè)頁(yè)面構(gòu)成了一個(gè)軟件。而UI設(shè)計(jì)人員也大都從靜態(tài)頁(yè)面開(kāi)始設(shè)計(jì)，卻忽略了他們之間的切換。由于用戶事先不了解頁(yè)面之間的聯(lián)系性，所以很可能不理解，甚至?xí)艿襟@嚇，進(jìn)一步增加了用戶理解的難度。實(shí)際上，卡通動(dòng)畫(huà)效果為用戶理解圖標(biāo)之間的切換提供了必要的視覺(jué)線索，可以使用戶清楚地理解對(duì)象的變形，深化用戶對(duì)于某種動(dòng)作的理解和認(rèn)識(shí)。

2　UI界面設(shè)計(jì)中的常用技術(shù)

與卡通動(dòng)效一樣，UI界面也需要明確，清晰，簡(jiǎn)潔的溝通，同時(shí)也可以借助虛擬世界的營(yíng)造來(lái)增強(qiáng) UI界面對(duì)用戶的吸引力。而就卡通動(dòng)效在UI界面設(shè)計(jì)中應(yīng)用的幾個(gè)常用技術(shù)主要包括擬物化技術(shù)、夸張技術(shù)和增強(qiáng)現(xiàn)實(shí)技術(shù)等，下面就這幾個(gè)技術(shù)的具體內(nèi)容進(jìn)行詳細(xì)地闡述。

2.1擬物化技術(shù)

擬物化技術(shù)實(shí)際上是指將 UI界面設(shè)計(jì)中的各個(gè)元素當(dāng)作真實(shí)的，有重量的實(shí)際物體。在卡通動(dòng)畫(huà)領(lǐng)域，人物和元素等均是有重量的真實(shí)物體，他們的每個(gè)動(dòng)作均與我們實(shí)際生活中的表現(xiàn)保持一致，所以可以使觀看者感覺(jué)非常真實(shí)。但是這種擬物感不單單只是填充像素區(qū)域，還需要借助增加慣性來(lái)實(shí)現(xiàn)物體的運(yùn)動(dòng)［2］。動(dòng)畫(huà)領(lǐng)域中全部原則，比如弧形運(yùn)動(dòng)、跟隨和快進(jìn)慢出等均需要按照有質(zhì)量的物體來(lái)考慮。將UI界面設(shè)計(jì)中的各個(gè)主要元素變成獨(dú)立的，并使其顯著區(qū)別于其他背景物體，則可以進(jìn)一步凸顯主元素的動(dòng)作變化。而就擬物化技術(shù)在UI靜態(tài)頁(yè)面設(shè)計(jì)中的具體應(yīng)用而言，其可以通過(guò)采用運(yùn)動(dòng)模糊、出現(xiàn)和消失等形式來(lái)加以體現(xiàn)。其中的運(yùn)動(dòng)模糊是在確保 UI圖標(biāo)無(wú)卡頓的基礎(chǔ)上來(lái)幫助用戶的眼睛更好地接受其所捕捉到的物體的運(yùn)動(dòng)；而出現(xiàn)和消失則是在UI設(shè)計(jì)中，通過(guò)移入、擦除和模糊消失等三種消失效果來(lái)給用戶必要的視覺(jué)線索來(lái)理解發(fā)生了什么。

2.2夸張技術(shù)

實(shí)踐研究表表明，通過(guò)“夸張現(xiàn)實(shí)”的技術(shù)，常常也可以大大提高UI界面設(shè)計(jì)的效果，這恰好就是夸張技術(shù)在卡通動(dòng)畫(huà)領(lǐng)域中的處理來(lái)更加真實(shí)地展現(xiàn)某些東西的真實(shí)性，從而可以使觀眾更好地理解卡通動(dòng)畫(huà)所要展示的效果。與卡通動(dòng)畫(huà)效果一樣，為了突出UI界面設(shè)計(jì)中的某些細(xì)節(jié)，增強(qiáng)用戶理解的效果，也可以適當(dāng)采用夸張技術(shù)來(lái)使UI界面中的各種對(duì)象變得更加“現(xiàn)實(shí)”，以增強(qiáng)UI界面對(duì)用戶的吸引性。而就夸張技術(shù)的具體應(yīng)用方法而言，可以給用戶充足的時(shí)間來(lái)考慮下個(gè)界面的形象，避免被突如其來(lái)的UI動(dòng)畫(huà)效果所驚訝。比如，在Tumblr中當(dāng)鼠標(biāo)移動(dòng)到某一功能的時(shí)候，相應(yīng)的圖標(biāo)會(huì)調(diào)動(dòng)一下來(lái)提醒用戶點(diǎn)擊之后會(huì)發(fā)生變化等。

2.3增強(qiáng)現(xiàn)實(shí)技術(shù)

增強(qiáng)現(xiàn)實(shí)技術(shù)主要是通過(guò)采用緩進(jìn)緩出、弧形運(yùn)動(dòng)和跟隨運(yùn)動(dòng)等三個(gè)方面的動(dòng)作來(lái)更加真實(shí)的體驗(yàn)和感受某種真實(shí)效果。其中的緩進(jìn)緩出實(shí)際上就是在主元素緩慢進(jìn)入屏幕，接著一個(gè)快速的動(dòng)作，最后以緩慢的動(dòng)作首尾，其可以凸顯主元素在移動(dòng)過(guò)程中的質(zhì)量感，UI界面設(shè)計(jì)也不例外，否則會(huì)使用戶感覺(jué)元素運(yùn)動(dòng)非常假；弧形運(yùn)動(dòng)則可以給用戶更加活潑的感覺(jué)，不像直線運(yùn)動(dòng)那樣生硬，從而有效地增強(qiáng)了動(dòng)畫(huà)的活潑性；而跟隨運(yùn)動(dòng)則可以使主元素的部分結(jié)構(gòu)運(yùn)動(dòng)，以進(jìn)一步增強(qiáng)動(dòng)效變化感。在動(dòng)畫(huà)設(shè)計(jì)領(lǐng)域中，當(dāng)動(dòng)畫(huà)人物停止走動(dòng)后，其身體或者衣服等一些局部動(dòng)作可以大大增強(qiáng)人物的動(dòng)效變效果，UI界面設(shè)計(jì)中也不例外。比如在ISO系統(tǒng)中，將某個(gè)app移動(dòng)位置的時(shí)候，其他的app位置也會(huì)跟著發(fā)生位移等。

3　注意事項(xiàng)

3.1要遵從“零感知”特性

零感知是相對(duì)于操作用戶而言，即讓UI界面操作用戶感知不到UI界面的過(guò)渡狀態(tài)，使用戶可以在UI過(guò)渡動(dòng)畫(huà)結(jié)束之前進(jìn)行下一個(gè)操作。雖然動(dòng)效在 UI界面中的應(yīng)用具有很好的效果，但是UI畢竟不是卡通，他們二者之間的最大差距就在于卡通是一種被動(dòng)的介質(zhì)，而 UI界面則是互動(dòng)式。因此，UI界面設(shè)計(jì)需要合理運(yùn)用動(dòng)畫(huà)技術(shù)來(lái)實(shí)現(xiàn)用戶最直接的控制。

3.2要遵從嚴(yán)謹(jǐn)性特性

卡通與 UI的另一個(gè)顯著區(qū)別就是他們的使用目標(biāo)：卡通動(dòng)畫(huà)效果專注在于娛樂(lè)和享受，而UI用戶界面則是用來(lái)完成工作的，所以UI靜態(tài)頁(yè)面設(shè)計(jì)工作具有明顯的嚴(yán)謹(jǐn)性，必須要排除卡通動(dòng)畫(huà)效果中存在的娛樂(lè)元素。但是如果某些古怪的元素可以更好地讓用戶理解 UI界面的某些功能，則可以適當(dāng)加以保留。

3.3要遵從清晰性特性

UI靜態(tài)頁(yè)面設(shè)計(jì)除了要盡可能的快之外，也要保持足夠的清晰度，從而更好地幫助用戶來(lái)完成 UI所要完成的任務(wù)。例如，將卡通動(dòng)畫(huà)作為UI靜態(tài)頁(yè)面設(shè)計(jì)中的元素時(shí)，要確保動(dòng)畫(huà)效果的速度，以便減少UI界面操作用戶理解的時(shí)間。

總之，從情感認(rèn)知層角度來(lái)講，卡通動(dòng)畫(huà)效果在UI界面間的切換中具有很大的益處。它不僅可以幫助用戶更好地理解UI界面，也可以增強(qiáng)用戶體驗(yàn)的舒適感和愉悅感。本文重點(diǎn)就卡通動(dòng)畫(huà)效果在 UI靜態(tài)頁(yè)面設(shè)計(jì)中的應(yīng)用方法進(jìn)行了探究，以期更好地指導(dǎo) UI靜態(tài)頁(yè)面設(shè)計(jì)工作的開(kāi)展，確保所設(shè)計(jì)出的UI產(chǎn)品具有良好的品質(zhì)，并包含著豐富的情感因素。

參考文獻(xiàn)：

［1］崔薔.論在 UI設(shè)計(jì)中制定設(shè)計(jì)的規(guī)范［J］.藝術(shù)品鑒，2015，15（3）:167-168.

［2］吳瓊.交互設(shè)計(jì)的域與界［J］.裝飾， 2010，27（2）:167-168.

（責(zé)任編輯：黃 密）

中圖分類號(hào)：S611

文獻(xiàn)標(biāo)識(shí)碼：A

doi:10.3969/j.issn.1672-7304.2016.01.065

文章編號(hào)：1672–7304（2016）01–0140–02

作者簡(jiǎn)介：關(guān)志如（1987-），女，廣東肇慶人，研究方向：二維動(dòng)畫(huà)、Flash動(dòng)畫(huà)。

Research on the combination of UI static page design and cartoon dynamic effect

GUAN Zhi-ru
（Guangdong College of Business and Technology， Zhaoqing Guangdong 526020）

Abstract:"Good products focus on function， excellent products pay more attention to the emotional"，this sentence fully embodies the important role of functional and emotional factors in product design， UI design is no exception. However， in UI design， design personnel mostly not to cut between the UI for enough to handle， so users often feel confused. And reasonable application of cartoon animation effect between the UI page switching can help users to better understand a certain action. This paper to cartoon animation effect as the research object， focus on the UI static page design in the rational use of were explored.

Key words:UI design； cartoon； animation effect