古代裝飾器物在中國風手游UI設計中的擬物與抽象

蒲詩雨 李棟寧 （江南大學 214122）

古代裝飾器物在中國風手游UI設計中的擬物與抽象

蒲詩雨 李棟寧 （江南大學 214122）

中國風手游UI常會從古代裝飾器物中取材創作，通過擬物化和抽象化的手法將工藝元素融入UI創作中。本文對比分析了古代裝飾器物在擬物化與抽象化設計過程中，造型、色彩、質感和空間四個方面設計手法上的異同，總結歸納了兩種手法的優勢和弊端。

古代裝飾器物；手游UI

中國風手游UI常常會從傳統古代裝飾器物中取材創作，一些形態優美、設計精巧、極富美感的古代裝飾器物，通過擬物化或者抽象化的設計手法重新融入了手游UI這一現代設計創作中，這種新興的表現方式所呈現出來的傳統藝術，則在原來古代裝飾器物自身傳統美感的基礎上，又增添了一層全新的時代美感。一款手游中總是或多或少的同時存在著擬物化和抽象化兩種設計表現手法，隨著兩者占有比例的不同而使整體風格存在擬物化或者抽象化的傾向。擬物化風格傾向明顯的手游UI中，為了使整體風格統一，抽象化的部分一定會與擬物化的部分聯系緊密，抽象部分的造型以及色彩來源常提取自擬物部分的造型以及色彩特征。而抽象化風格的手游UI中的擬物化元素，也一定會在造型和色彩上有著抽象化的形態特點。本文將分別從造型、色彩、質感、空間四個方面具體分析中國風手游UI中古代裝飾器物的擬物化以及抽象化設計應用。

一、造型

手游UI中的古代裝飾器物擬物化在造型設計上有兩種類型的設計應用，一種是將某種古代裝飾器物物品整體運用于UI設計之中，另一種是提煉古代裝飾器物物品中的局部細節并運用于UI設計之中。常常作為整體被應用于設計的古代裝飾器物物品有卷軸、奏折、木盒等等，這些物品由于自身的特點十分適合作為展示板來承載文字內容，所以通常被設計構思成游戲的彈窗底板，用來展示游戲圖文信息。奏折源自清代，是皇帝批閱大臣諫言所呈遞的折本，由折疊而成的紙張和真絲包裹的封面及封底組成的。在手游《小倩來了》中被設計構思成展現游戲角色的底板，輔佐以云霧，使游戲角色像中國神話中的畫中仙子一樣從奏折中款款而出。被應用于UI設計的古代裝飾器物物品中的局部細節范圍很廣，唐刀上的防滑裝飾、青銅器上的饕餮紋樣、漆盒上的龍紋雕刻等都能在中國風UI設計中尋得蹤跡，這種類型的設計應用具有很大的自由性，同一處局部細節可根據不同情況應用于UI設計的各個部分中。《小倩來了》中用到的金屬裝飾，就是源自唐代寶劍劍柄上的防滑裝飾，設計師將其重新設計，并應用于裝飾游戲中的按鈕以及彈窗的標題欄，雖然不需要再具備防滑功能，卻將它的審美價值發揮了出來。

抽象化應用中造型設計的主要表現方式是，對古代裝飾器物元素的外輪廓和內部結構進行概括抽象。不同于擬物化設計中對輪廓與結構細節的極致追求，抽象化設計重視的是對美術元素的主觀提煉，略去細節，保留意象。在造型設計時，工藝元素的外輪廓會被簡化整合，用平滑的直線或者曲線來代替曲折起伏的輪廓線，內部高低錯落的結構也會被扁平化，用盡可能少的幾何塊面表達出大致構造。功能結構復雜和內容信息量巨大的手游在界面設計時會傾向于使用抽象化手法，因為這類手游需要將大面積的文字數據表現在界面上，過多的擬物化設計會侵占數據內容的空間，而抽象化的界面能提供更多承載它們的空間。《夢幻西游》手游就是一個需要呈現大量文字數據的例子，它復雜的功能層級需要它在一張界面上呈現盡可能多的信息，這款游戲的UI設計中抽象化扁平的面板占據大部分面積，這些面板既沒有復雜的輪廓外形，也沒有錯落的內部構造，它們簡約如白紙一般的效果為數據信息起到了良好的襯托作用，而游戲中少有的擬物化元素僅被用在了面板標題欄、部分按鈕和圖標上，起到點綴裝飾畫面的效果。

二、色彩

UI中古代裝飾器物擬物化設計的顏色構成方法是，以客觀對象為依據，以反映客觀對象真實色彩為目的，按照色彩自然規律來進行色彩設計的寫實性表現方法。一種色彩可以通過色相、明度以及純度三方面來描述，人眼可見的任何一種色彩都是這三種因素的綜合作用結果。擬物化設計的色彩在色相上除了要考慮客觀對象的自然色相以外，也要考慮在界面上與其他元素色彩搭配使用是否合適，界面中色相種類不宜過多，相互之間比例關系要和諧。擬物元素的明度變化與它所受光源強弱密切相關，受光面、灰面以及背光面所占比例的不同也影響著整體明度感受。比較寫實的色彩塑造往往整體純度都不會太高，因為這類寫實的設計元素需要依靠豐富的素描關系變化來營造立體視感，沒有被光源直接照射到的部分純度整體是比較低的。《功夫熊貓3》的章節界面整體來看棕紅色是主導色調，中間的黑白漫畫部分占據面積較大，但是整體偏灰，對界面色彩傾向影響較小。畫面中的擬物化元素有深棕色桌面、暗紅色桌旗、米白色書頁以及橙色燈籠，桌面、桌旗的整體明度都偏暗，用以突出米白色書頁上的內容，畫面中明度較高的地方大多都是需要點擊的部分，返回按鈕、寶箱圖標以及翻頁按鈕都用了較高的明度和純度來突顯這些部分的重要性。

不同于擬物化的寫實性色彩構成，古代裝飾器物的抽象化設計在色彩上追求的是，對客觀物象色彩特征進行主觀概括，提煉設計出適用于抽象化造型的色彩。寫實色彩具有多層次多變化的強空間體積關系，由于暗面和陰影所占比例較高而使得整體飽和度和明度降低，抽象化色彩層次較少并且結構更加扁平，大部分時候整體飽和度較高，明度變化差異小。抽象化色彩關系的表現方法是省去細節化的色彩變化，將客觀物象的色彩分成一些比較明確的色彩塊面來概括表達某種色彩關系。這種色彩設計方式主要在配合界面整體抽象風格時使用，所以在設計過程中需要參考界面中主要色彩的色相、明度和飽和度三個方面的關系，將整體與細節相統一。《大話西游》整體界面風格偏向抽象化，色彩則來源于古代裝飾器物中的玉制品，以米棕色為主色調，輔佐以翠綠色為點綴，整體色彩明度與飽和度較高，給人清爽干凈的印象。整套界面中最主要的信息背板設計成一種用和田玉雕琢而成的玉板的感覺，盡管沒有用非常寫實的手法塑造玉質，但是玉質的主要色彩視覺特征被主觀提煉概括，并且通過抽象化的手法表現出來，最終達到了和諧統一的效果。

三、質感

擬物化設計要求設計元素在質感表現上高度仿真，質感是讓繪制物品具有真實感的重要因素，質感模擬越逼真，繪制物體越真實可信。人對圖像中界面質感的判斷，是通過以往視覺對真實物體表面特征的感覺和印象形成的經驗。不同質感具備不同的表面特征，它們通過紋理、光滑度、反光度、透光度四個方面的差異組合產生區別。金屬有強反光、玻璃會透光、木頭表面有明顯紋理等等，這些表面特征差異讓我們在視覺上能夠對他們進行區分，而通過繪制出他們不同的特征便能夠達到模仿出不同質感的目的。古代裝飾器物的擬物化設計應用中出現頻率較高的材質類型有金屬、石頭、木頭、絲綢之類，這些質感之所以在視覺上形成差異，本質上是因為他們對光源反射能力的不同。光源在物體表面照射形成的高光面的形狀以及物體灰面的紋理能表現物體的光滑或者粗糙；光源是否穿透物體能表現物體的透明程度；反光的強烈與否能表現物體表面是否形成鏡面。石頭材質的表面特征是亮面高光對比較弱，灰面有一定紋理，暗面有弱反光，有時會有裂紋，《亂斗西游》的裝備合成界面就用到了大面積石頭質感，設計師用了深灰藍色調作為界面主色調，受光面的亮面用明度較高的淺灰藍色漸變作受光面，暗面有微弱的藍色反光，灰面有繪制上細微的顆粒紋理，在界面邊沿還有淺淺的裂紋，整體營造出的石板質感非常擬物化。

抽象化質感的表現同樣來源于對實物紋理、光滑度、反光度、透光度四個方面特征的觀察總結，只是抽象化的表現手法需要設計師對客觀實物的質感特征進行主觀概括提煉，抓住能夠體現質感的最關鍵的幾個特點進行表現，既要讓抽象元素的質感看起來是客觀實物的質感，又不能像擬物化設計時那樣過于寫實。擬物化質感表現中，除了鏡面材質以外，一個物體受到光源照射后，受光面向灰面過度的部分是漸變的，不具有明確的邊界，而背光部分的反光也是用柔和而微妙的漸變來表現，而抽象化設計卻可以讓受光面具有明確的邊界線，設計師只要保證這個設計元素具備正確的光源關系，那么在這個基礎之上，就能通過主觀概括將不同受光面的形狀抽象化表現的同時，依然使它看起來是某種確定的質感，并且這種質感與客觀實物的質感又那么不同。《大話西游》戰斗界面中的圖標統一設計成了與界面整體玉質質感相接近的質感效果，這種質感的特點是，有清晰形狀的高光點，光滑度高無明顯肌理，透光處飽和度高。真實玉質的高光形狀比較不規整，而經過概括處理后，高光可以被描繪成一個規整的圓形，這種處理方式使圖形物體看起來更抽象化。主觀提高圖形透光處的飽和度能強化透光的質感，達到加強質感表達的效果。

四、空間

UI中古代裝飾器物擬物化設計的空間感是指，依照透視的原理，描繪出設計元素之間的遠近、疊壓、穿插等關系，使之在平面上營造出有深度立體感的前后空間層次。宗白華先生曾說：“西洋透視法在平面上幻出逼真的空間構造，如鏡中影、水中月，其幻愈真，則其真愈幻。”通過幾何透視、光影透視兩個方面的塑造，平面上的設計元素可以具有更加逼真的立體視覺效果，整體畫面空間像內延伸，增強代入感。幾何透視指我們觀察立體空間物體時產生的近大遠小的錯覺，這種錯覺使我們觀察到的物體的外輪廓所形成的印象帶來一種三維空間感，在擬物化UI設計中，我們可以塑造這種帶來立體感的形態輪廓，從而使得所繪制元素像真實物體一樣具有空間體積感。光影透視指物體受光時顯出的明暗變化差異所產生的體積感，遠近距離因明暗層次而顯露。擬物化設計中光影透視的運用增強了設計元素的立體視覺效果，再配合幾何透視的外輪廓，平面上的設計元素則可栩栩如生躍然紙上了。在營造界面整體空間感時，光影透視往往發揮主要作用。在視覺感受上，明度高的物體比明度低的物體要更靠前，這種感受上的錯覺可用來區分界面的主次內容，提高主要元素的色彩明度讓它感覺更往前，壓低次要元素的色彩明度讓它往后隱退，利用明暗的差異化，使界面主次分明，層次豐富。《小倩來了》的戰斗界面將卡牌對戰場景設計在一個木盒中，盒蓋半開，四面抽屜全部抽出。木盒擺放與屏幕呈一定角度，輪廓上近大遠小，色彩明度上近亮遠暗，整體看來盒子像后延伸開去，畫面縱深感極強，模擬出了一種在真實木盒上進行對戰的場景效果。

古代裝飾器物的抽象化設計在空間關系上相較于擬物化來說整體上是更加扁平的。抽象化將元素設計重點放在整體形態上，用更加簡練的結構表達圖形意義，弱化了的立體空間能夠讓設計元素處于輔助重點信息的次要位置，突出主體內容。抽象化的空間關系表達大多時候主要依靠光影透視來實現，通過控制投影的虛實、遠近和角度，來表現出兩個物體之間的遠近、前后和穿插關系。不過抽象化設計中的空間范圍不止局限在畫面上可見的地方，還能用滾動模塊的形式來創造隱藏的空間，這樣便能讓更多的信息同時容納在一個界面中。《夢幻西游》整體界面被構思成了一幅垂落展開的卷軸形態，設計者主要表現了卷軸特征的軸身形態部分，簡化細節構造使整體空間更趨于扁平，抽象化后的卷軸成為信息主體的輔助背景。這套界面在整體扁平的基礎上，通過陰影的運用，為各組信息劃分出了規整的空間范圍，讓多樣的信息元素在同一界面中也能有序地分出主次關系。它的裝備界面中，左側的武器展示欄被設計成了滾動模塊的形式，這組模塊的下方用漸變的方式消失于一條邊界線。這樣的處理方式讓武器展示欄與底板產生了鑲嵌關系，武器展示欄的隱藏空間消失在了底板的邊線上，超過武器欄可見范圍的信息通過這種巧妙的方式留在了界面中。

擬物化與抽象化的設計有各自的優勢和弊端。擬物化設計的優勢體現在三個方面，首先擬物化設計能提高游戲親和度，增加趣味性，使設計富有感情；其次，擬物化設計能使用戶快速領會如何使用，降低學習成本；最后，擬物化設計能貼合游戲主題，提高沉浸感，增強產品響應。而擬物化的弊端在于，它過強的存在感會導致畫面視覺重心由信息內容向輔助裝飾偏移，同時風格化較明顯的設計，市場的可接受程度有限。抽象化設計的優勢正好能彌補擬物化的弊端，一方面簡約扁平的圖形化設計使畫面的重心能集中在內容上，另一方面抽象化設計帶來的輕快感受更能被大部分人群接受。正確把握和運用好這兩種設計方法有助于提升手游UI的設計水平。

[1]皇甫江.中國刀劍[M].明天出版社，2007.

[2]田自秉.中國紋樣史[M].高等教育出版社，2003.

[3]宗白華.美學散步[M].上海人民出版社，1981.

蒲詩雨，在讀研究生，研究方向：影視，設計。

李棟寧，教授，研究方向：美學，影視。