UI靜態頁面設計與卡通動效結合研究

關志如（廣東工商職業學院，廣東 肇慶 526020）

?

UI靜態頁面設計與卡通動效結合研究

關志如
（廣東工商職業學院，廣東 肇慶 526020）

摘 要：“好的產品關注功能，優秀的產品關注情感”，這句話充分體現了功能和情感因素在產品設計中的重要作用，UI設計也不例外。本文以卡通動畫效果為研究對象，重點就其在UI靜態頁面設計中的合理運用進行了探究。

關鍵詞：UI設計；卡通；動畫效果

UI是基于靜態頁面來進行設計的，并且頁面之間通過跳轉進行切換。在實際 UI設計的過程中，設計人員大都將設計重點放在了單頁視覺效果上，卻常常忽略對界面跳轉這個過渡期的處理，所以很容易使用戶感覺到困惑。然而，在卡通領域中，由于使用了大量的動畫效果，可以幫助用戶更好地理解某個動作。雖然UI設計領域與卡通動畫效二者之間存在差異，但如果可以從情感認知層面上將UI設計與卡通動效的優點結合起來，則可以大大提高UI設計的質量。

1　UI界面與卡通動效概述

1.1UI界面的含義

UI界面實際上就是用戶界面，用一句話概括就是人和工具之間的界面［1］。在我們日常生活當中，界面同樣體現在某些方面，比如在用戶觀看電視的時候，遙控器和屏幕就相當于這個界面。它不僅僅是由用戶與界面兩個部分組成，同時還包含著用戶與界面之間的交互關系。

1.2UI界面與卡通動效的聯系性

UI界面通常均是基于靜態頁面來進行設計，并且無數個頁面構成了一個軟件。而UI設計人員也大都從靜態頁面開始設計，卻忽略了他們之間的切換。由于用戶事先不了解頁面之間的聯系性，所以很可能不理解，甚至會受到驚嚇，進一步增加了用戶理解的難度。實際上，卡通動畫效果為用戶理解圖標之間的切換提供了必要的視覺線索，可以使用戶清楚地理解對象的變形，深化用戶對于某種動作的理解和認識。

2　UI界面設計中的常用技術

與卡通動效一樣，UI界面也需要明確，清晰，簡潔的溝通，同時也可以借助虛擬世界的營造來增強 UI界面對用戶的吸引力。而就卡通動效在UI界面設計中應用的幾個常用技術主要包括擬物化技術、夸張技術和增強現實技術等，下面就這幾個技術的具體內容進行詳細地闡述。

2.1擬物化技術

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

2.2夸張技術

實踐研究表表明，通過“夸張現實”的技術，常常也可以大大提高UI界面設計的效果，這恰好就是夸張技術在卡通動畫領域中的處理來更加真實地展現某些東西的真實性，從而可以使觀眾更好地理解卡通動畫所要展示的效果。與卡通動畫效果一樣，為了突出UI界面設計中的某些細節，增強用戶理解的效果，也可以適當采用夸張技術來使UI界面中的各種對象變得更加“現實”，以增強UI界面對用戶的吸引性。而就夸張技術的具體應用方法而言，可以給用戶充足的時間來考慮下個界面的形象，避免被突如其來的UI動畫效果所驚訝。比如，在Tumblr中當鼠標移動到某一功能的時候，相應的圖標會調動一下來提醒用戶點擊之后會發生變化等。

2.3增強現實技術

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

3　注意事項

3.1要遵從“零感知”特性

零感知是相對于操作用戶而言，即讓UI界面操作用戶感知不到UI界面的過渡狀態，使用戶可以在UI過渡動畫結束之前進行下一個操作。雖然動效在 UI界面中的應用具有很好的效果，但是UI畢竟不是卡通，他們二者之間的最大差距就在于卡通是一種被動的介質，而 UI界面則是互動式。因此，UI界面設計需要合理運用動畫技術來實現用戶最直接的控制。

3.2要遵從嚴謹性特性

卡通與 UI的另一個顯著區別就是他們的使用目標：卡通動畫效果專注在于娛樂和享受，而UI用戶界面則是用來完成工作的，所以UI靜態頁面設計工作具有明顯的嚴謹性，必須要排除卡通動畫效果中存在的娛樂元素。但是如果某些古怪的元素可以更好地讓用戶理解 UI界面的某些功能，則可以適當加以保留。

3.3要遵從清晰性特性

UI靜態頁面設計除了要盡可能的快之外，也要保持足夠的清晰度，從而更好地幫助用戶來完成 UI所要完成的任務。例如，將卡通動畫作為UI靜態頁面設計中的元素時，要確保動畫效果的速度，以便減少UI界面操作用戶理解的時間。

總之，從情感認知層角度來講，卡通動畫效果在UI界面間的切換中具有很大的益處。它不僅可以幫助用戶更好地理解UI界面，也可以增強用戶體驗的舒適感和愉悅感。本文重點就卡通動畫效果在 UI靜態頁面設計中的應用方法進行了探究，以期更好地指導 UI靜態頁面設計工作的開展，確保所設計出的UI產品具有良好的品質，并包含著豐富的情感因素。

參考文獻：

［1］崔薔.論在 UI設計中制定設計的規范［J］.藝術品鑒，2015，15（3）:167-168.

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

（責任編輯：黃 密）

中圖分類號：S611

文獻標識碼：A

doi:10.3969/j.issn.1672-7304.2016.01.065

文章編號：1672–7304（2016）01–0140–02

作者簡介：關志如（1987-），女，廣東肇慶人，研究方向：二維動畫、Flash動畫。

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