古代裝飾器物在中國風(fēng)手游UI設(shè)計(jì)中的擬物與抽象

蒲詩雨 李棟寧 （江南大學(xué) 214122）

古代裝飾器物在中國風(fēng)手游UI設(shè)計(jì)中的擬物與抽象

蒲詩雨 李棟寧 （江南大學(xué) 214122）

中國風(fēng)手游UI常會(huì)從古代裝飾器物中取材創(chuàng)作，通過擬物化和抽象化的手法將工藝元素融入U(xiǎn)I創(chuàng)作中。本文對(duì)比分析了古代裝飾器物在擬物化與抽象化設(shè)計(jì)過程中，造型、色彩、質(zhì)感和空間四個(gè)方面設(shè)計(jì)手法上的異同，總結(jié)歸納了兩種手法的優(yōu)勢(shì)和弊端。

古代裝飾器物；手游UI

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

一、造型

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

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

二、色彩

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

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

三、質(zhì)感

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

抽象化質(zhì)感的表現(xiàn)同樣來源于對(duì)實(shí)物紋理、光滑度、反光度、透光度四個(gè)方面特征的觀察總結(jié)，只是抽象化的表現(xiàn)手法需要設(shè)計(jì)師對(duì)客觀實(shí)物的質(zhì)感特征進(jìn)行主觀概括提煉，抓住能夠體現(xiàn)質(zhì)感的最關(guān)鍵的幾個(gè)特點(diǎn)進(jìn)行表現(xiàn)，既要讓抽象元素的質(zhì)感看起來是客觀實(shí)物的質(zhì)感，又不能像擬物化設(shè)計(jì)時(shí)那樣過于寫實(shí)。擬物化質(zhì)感表現(xiàn)中，除了鏡面材質(zhì)以外，一個(gè)物體受到光源照射后，受光面向灰面過度的部分是漸變的，不具有明確的邊界，而背光部分的反光也是用柔和而微妙的漸變來表現(xiàn)，而抽象化設(shè)計(jì)卻可以讓受光面具有明確的邊界線，設(shè)計(jì)師只要保證這個(gè)設(shè)計(jì)元素具備正確的光源關(guān)系，那么在這個(gè)基礎(chǔ)之上，就能通過主觀概括將不同受光面的形狀抽象化表現(xiàn)的同時(shí)，依然使它看起來是某種確定的質(zhì)感，并且這種質(zhì)感與客觀實(shí)物的質(zhì)感又那么不同?！洞笤捨饔巍窇?zhàn)斗界面中的圖標(biāo)統(tǒng)一設(shè)計(jì)成了與界面整體玉質(zhì)質(zhì)感相接近的質(zhì)感效果，這種質(zhì)感的特點(diǎn)是，有清晰形狀的高光點(diǎn)，光滑度高無明顯肌理，透光處飽和度高。真實(shí)玉質(zhì)的高光形狀比較不規(guī)整，而經(jīng)過概括處理后，高光可以被描繪成一個(gè)規(guī)整的圓形，這種處理方式使圖形物體看起來更抽象化。主觀提高圖形透光處的飽和度能強(qiáng)化透光的質(zhì)感，達(dá)到加強(qiáng)質(zhì)感表達(dá)的效果。

四、空間

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

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

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

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

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

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

蒲詩雨，在讀研究生，研究方向：影視，設(shè)計(jì)。

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