中國(guó)傳統(tǒng)圖案在手機(jī)UI界面中的設(shè)計(jì)應(yīng)用研究

梁 黎

?

中國(guó)傳統(tǒng)圖案在手機(jī)UI界面中的設(shè)計(jì)應(yīng)用研究

梁 黎

在移動(dòng)通訊技術(shù)與智能手機(jī)普及的當(dāng)下，手機(jī)已不是單純的通訊工具，而轉(zhuǎn)變?yōu)橐苿?dòng)社交、辦公和娛樂的綜合終端。手機(jī)UI成為體現(xiàn)使用者個(gè)性與品味的一大考量。但當(dāng)前手機(jī)UI界面設(shè)計(jì)重視功能，UI設(shè)計(jì)更多地借鑒、應(yīng)用西方審美元素。作為我國(guó)藝術(shù)瑰寶的中國(guó)傳統(tǒng)圖案在手機(jī)UI界面設(shè)計(jì)中鮮見。在這樣的背景下，本文簡(jiǎn)述了中國(guó)傳統(tǒng)圖案及手機(jī)UI幾面設(shè)計(jì)中應(yīng)用傳統(tǒng)圖案的思路，分析手機(jī)UI界面設(shè)計(jì)的成功案例，分析未來UI設(shè)計(jì)界面的趨勢(shì)與國(guó)內(nèi)用戶的審美取向。

一、智能手機(jī)UI設(shè)計(jì)概述

智能手機(jī)目前逐漸成為通訊行業(yè)的主導(dǎo)產(chǎn)品，可視化和觸摸式的操作讓手機(jī)UI界面成為了客戶體驗(yàn)的第一道程序，手機(jī)UI一方面是智能手機(jī)屏幕外觀的重要組成部分之一，另一方面也是移動(dòng)手機(jī)應(yīng)用客戶端的logo展示平臺(tái)。

手機(jī)UI界面的設(shè)計(jì)有著多方面的考慮因素，首先要考慮界面的整體效果，是扁平化風(fēng)格（圖1）還是后現(xiàn)代金屬風(fēng)格還是清新設(shè)計(jì)的風(fēng)格，風(fēng)格的一致性能夠給客戶帶來較為舒適的視覺體驗(yàn)；其次是客戶心理的分析，需要根據(jù)客戶的年齡階段、文化背景、地域背景等因素分析客戶對(duì)于手機(jī)UI界面的心理需求；除此之外，還要考慮到客戶的操作習(xí)慣、界面的交互可操作性等不同的因素。

二、中國(guó)傳統(tǒng)常用圖案及其交流的信息

中國(guó)傳統(tǒng)文化經(jīng)過數(shù)千年的歷史積淀和現(xiàn)代文化的洗禮，留存下來了許多具有豐富含義的傳統(tǒng)圖案，這些圖案能夠通過較為簡(jiǎn)潔的構(gòu)圖和線條來展現(xiàn)一個(gè)或幾個(gè)特定含義，例如京劇的臉譜可以用顏色和線條走向表現(xiàn)人物的善惡忠奸、喜怒哀樂，印章可以通過筆勢(shì)深淺、鐵畫銀鉤呈現(xiàn)印章主人的性格偏好，祥云圖案寓意吉祥、元寶圖案寓意財(cái)富、筆墨紙硯寓意才華、窗花剪紙?jiān)⒁庀矐c與節(jié)氣（圖2）、風(fēng)箏指代春天，等等。

現(xiàn)代產(chǎn)品中常常運(yùn)用一定的傳統(tǒng)圖案來表達(dá)具有一定敘事意義的設(shè)計(jì)思想，例如2008年的背景奧運(yùn)火炬，整體就用祥云圖案進(jìn)行裝飾，一方面表現(xiàn)了中國(guó)傳統(tǒng)圖案的美，另一方面也有著美好的祝愿。傳統(tǒng)圖案也如同音樂的音符一樣在應(yīng)用時(shí)有一定的章法，如應(yīng)用的情境、顏色的搭配、含義是否恰如其分等等。

iphone5手機(jī)界面圖1　

傳統(tǒng)吉祥圖案-蓮圖2　

隨著移動(dòng)技術(shù)的發(fā)展，智能手機(jī)在我國(guó)應(yīng)用比例越來越高。手機(jī)各開發(fā)商往往只注重手機(jī)UI界面的功能性與實(shí)用性，忽視了UI界面的審美特性。尤其是在西方審美占據(jù)工業(yè)設(shè)計(jì)審美主流價(jià)值的情況下，扁平化、極簡(jiǎn)主義等色彩、圖案大行其道。相反，我國(guó)傳統(tǒng)圖案這一藝術(shù)瑰寶被冷落，如何讓傳統(tǒng)圖案在手機(jī)UI界面設(shè)計(jì)中煥發(fā)新生不僅是傳統(tǒng)文化的弘揚(yáng)，更是對(duì)手機(jī)UI界面設(shè)計(jì)素材的豐富和多元化體現(xiàn)。

三、傳統(tǒng)圖案在手機(jī)UI界面中的設(shè)計(jì)應(yīng)用

1.手機(jī)UI界面設(shè)計(jì)的視覺藝術(shù)表現(xiàn)

（1）統(tǒng)一文化主題的視覺風(fēng)格

設(shè)計(jì)師在應(yīng)用傳統(tǒng)圖案進(jìn)行設(shè)計(jì)的時(shí)候，需要對(duì)傳統(tǒng)圖案所表達(dá)的文化內(nèi)涵有較為深刻的理解，在文化走向方面能夠有一個(gè)較為明確的把握方向，例如圖-3的示例當(dāng)中，文化主題是道教文化，其圖標(biāo)設(shè)計(jì)展示這一主題尤為明顯，例如天氣圖標(biāo)運(yùn)用了祥云圖案作為圖標(biāo)的主體部分之一，微博圖標(biāo)則應(yīng)用了蓮花這一吉祥圖案，同樣應(yīng)用蓮花圖案的還有時(shí)鐘圖標(biāo)和應(yīng)用列表圖標(biāo)，電話圖標(biāo)則應(yīng)用了太極圖案來表達(dá)人與人的信息交互共享，整體顏色也用得額是飽和度高但明度較低的顏色，與中國(guó)傳統(tǒng)建筑和服飾用色一致，具有較強(qiáng)的文化代表性。

（2）頁(yè)面布局的傳統(tǒng)圖案應(yīng)用

頁(yè)面布局的傳統(tǒng)圖案應(yīng)用有三類，一是圖標(biāo)設(shè)計(jì)中的傳統(tǒng)圖案應(yīng)用，二是跳轉(zhuǎn)按鈕的傳統(tǒng)圖案應(yīng)用，三是主題設(shè)計(jì)的傳統(tǒng)圖案應(yīng)用。跳轉(zhuǎn)按鈕和圖標(biāo)設(shè)計(jì)中的傳統(tǒng)圖案應(yīng)用方式相似，也是符號(hào)意義的應(yīng)用和顏色的選擇，但與圖標(biāo)設(shè)計(jì)不同的一點(diǎn)，跳轉(zhuǎn)按鈕的圖形大小較小，因此按鈕中所應(yīng)用的傳統(tǒng)圖案不能復(fù)雜，否則圖案表達(dá)不明晰反而達(dá)不到預(yù)期效果。主題設(shè)計(jì)是手機(jī)UI界面的總體效果，包括歡迎界面、圖標(biāo)界面以及系統(tǒng)界面等等，是多個(gè)UI界面的有機(jī)結(jié)合，可以有較多的角度來應(yīng)用中國(guó)傳統(tǒng)圖案，例如時(shí)間界面可以根據(jù)時(shí)間、月份、季節(jié)更替不同的代表該時(shí)段的傳統(tǒng)圖案UI。

傳統(tǒng)圖案在手機(jī)UI設(shè)計(jì)中的應(yīng)用 圖3　

2.手機(jī)UI界面的操作設(shè)計(jì)

手機(jī)UI界面的操作可以應(yīng)用較多的傳統(tǒng)圖案元素，首先是解鎖界面，目前的手機(jī)界面解鎖應(yīng)用到UI設(shè)計(jì)的有兩種，一種是滑動(dòng)解鎖一種是圖形解鎖，這兩種解鎖均可以講操作互動(dòng)的UI圖標(biāo)替換為具有中國(guó)傳統(tǒng)圖案設(shè)計(jì)理念的圖標(biāo)。例如滑動(dòng)解鎖可以應(yīng)用風(fēng)箏圖案，在動(dòng)態(tài)中還有一絲風(fēng)箏飛舞的童趣，圖案解鎖可以用不同的臉譜圖案分布在九宮按鈕上，避免了解鎖界面的呆板。其次是輸入界面，輸入界面根據(jù)輸入法的不同有著不同的界面風(fēng)格，以搜狗手機(jī)輸入法為例，該輸入法有許多應(yīng)用了傳統(tǒng)圖案的輸入法皮膚風(fēng)格，如竹子圖案配綠色輸入法界面風(fēng)格、中國(guó)結(jié)配紅色輸入法界面風(fēng)格，不一而足。三是短信界面，短信界面的UI設(shè)計(jì)可以體現(xiàn)在兩個(gè)方面，一是對(duì)話框的UI傳統(tǒng)圖案應(yīng)用，如外框應(yīng)用傳統(tǒng)窗欞圖案、祥云圖案等等，二是發(fā)送狀態(tài)圖標(biāo)應(yīng)用傳統(tǒng)圖案，如發(fā)送失敗是“怒”的臉譜，成功是“喜”的臉譜，等等。

四、小結(jié)

中國(guó)傳統(tǒng)文化博大精深，傳統(tǒng)圖案為手機(jī)UI界面設(shè)計(jì)帶來了新的靈感和新的方向，在手機(jī)UI界面的設(shè)計(jì)過程中，既有設(shè)計(jì)師的審美偏好，還有整個(gè)社會(huì)的文化心理和消費(fèi)取向，傳統(tǒng)圖案越來越多應(yīng)用于手機(jī)UI界面中，是中國(guó)文化傳承的證明也是中華民族文化自信心的體現(xiàn)。手機(jī)UI界面的設(shè)計(jì)在滿足用戶體驗(yàn)的需求這一基本要求的基礎(chǔ)上，設(shè)計(jì)師們還應(yīng)該有更高層次的理念需求，傳統(tǒng)圖案的應(yīng)用還有待設(shè)計(jì)師的進(jìn)一步發(fā)掘。

＊ 本文系武漢理工大學(xué)華夏學(xué)院科研項(xiàng)目（編號(hào)：15024）的階段性成果

參考文獻(xiàn)：

1.張玉昆,李冰.淺談中國(guó)元素在現(xiàn)代UI設(shè)計(jì)中的應(yīng)用[J].西北美術(shù),2014(03).

2.李黎.論手機(jī)UI設(shè)計(jì)中視覺藝術(shù)元素的構(gòu)成[J].現(xiàn)代裝飾(理論),2015(07).

3.雷菁.淺析中國(guó)傳統(tǒng)元素在手機(jī)UI界面設(shè)計(jì)中的應(yīng)用[J].通訊世界,2015(10).

梁 黎：武漢理工大學(xué)華夏學(xué)院講師