倪世明

摘? 要：隨著智能手機(jī)的普及，手機(jī)從通信工具迅速變成了集社交、辦公、娛樂等為一體的生活必需品，人們對(duì)UI設(shè)計(jì)的要求也越來越高。但目前國內(nèi)的UI設(shè)計(jì)，更多趨向于學(xué)習(xí)、借鑒西方的審美元素，缺乏中國傳統(tǒng)元素。在移動(dòng)互聯(lián)網(wǎng)時(shí)代背景下，文章用現(xiàn)代人的審美視角對(duì)中國傳統(tǒng)紋樣加以傳承與創(chuàng)新，并將其融入U(xiǎn)I設(shè)計(jì)中，賦予更多的文化內(nèi)涵，滿足用戶的審美體驗(yàn)與精神需求。

關(guān)鍵詞：中國傳統(tǒng)紋樣;UI設(shè)計(jì);創(chuàng)新應(yīng)用

中圖分類號(hào)：TS958 文獻(xiàn)標(biāo)志碼：A? ? ? ? ?文章編號(hào)：2095-2945（2019）09-0038-03

Abstract： With the popularity of smart phones， mobile phones from communication tools have quickly become a set of social， office， entertainment and other necessities of life， people have higher and higher requirements for UI design. However， at present， the domestic UI design tends to learn and draw lessons from the western aesthetic elements， lack of Chinese traditional elements. Under the background of the mobile Internet era， this paper inherits and innovates the Chinese traditional patterns from the aesthetic perspective of modern people， and integrates them into the UI design， endowing them with more cultural connotations to meet the aesthetic experience and spiritual needs of users.

Keywords： Chinese traditional pattern; UI design; innovative application

引言

根據(jù)工信部2019年1月發(fā)布的《2018年通信業(yè)統(tǒng)計(jì)公報(bào)》，2018年移動(dòng)電話用戶總數(shù)達(dá)到15.7億戶，移動(dòng)電話用戶普及率達(dá)到112.2部/百人[1]。面對(duì)如此巨大的用戶體量，以及人們使用手機(jī)時(shí)間的不斷增長， UI行業(yè)迅猛發(fā)展。隨之而來的是UI設(shè)計(jì)中出現(xiàn)的種種弊端。APP同質(zhì)化現(xiàn)象日趨嚴(yán)重，無法滿足用戶的個(gè)性化、高質(zhì)量的體驗(yàn)需求。此外，現(xiàn)今UI設(shè)計(jì)的標(biāo)準(zhǔn)，仍以歐美國家的設(shè)計(jì)師、設(shè)計(jì)形式為主導(dǎo)。

中國傳統(tǒng)紋樣內(nèi)涵豐富、形式多樣、不勝枚舉，對(duì)現(xiàn)代UI設(shè)計(jì)具有參考價(jià)值，是UI設(shè)計(jì)師們創(chuàng)意的來源。但目前，傳統(tǒng)紋樣仍未被充分的利用、傳承。本文對(duì)中國傳統(tǒng)紋樣進(jìn)行研究，利用數(shù)字技術(shù)對(duì)提煉出來的傳統(tǒng)元素進(jìn)行復(fù)制、變形、再創(chuàng)造，將其抽象概括成現(xiàn)代的視覺表現(xiàn)語言，并結(jié)合UI設(shè)計(jì)進(jìn)行創(chuàng)新應(yīng)用實(shí)踐。本文用現(xiàn)代人的審美視角對(duì)中國傳統(tǒng)紋樣加以傳承與創(chuàng)新，使傳統(tǒng)紋樣在UI設(shè)計(jì)中煥發(fā)新生，既能豐富UI設(shè)計(jì)的文化內(nèi)涵、表現(xiàn)形式，又能傳承和弘揚(yáng)中國傳統(tǒng)文化，讓更多的手機(jī)用戶接觸傳統(tǒng)紋樣、喜愛傳統(tǒng)文化。

1 UI設(shè)計(jì)概述

1.1 UI設(shè)計(jì)概念

UI，User Interface（用戶界面）的簡稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)， 是專門研究、規(guī)劃和設(shè)計(jì)讓人與計(jì)算機(jī)或智能手機(jī)協(xié)同工作，滿足人們工作、生活等需求的一種新的媒體藝術(shù)[2]。UI設(shè)計(jì)由用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)三個(gè)部分組成。好的UI設(shè)計(jì)是人機(jī)溝通、交互的橋梁，視覺美觀，操作舒適、便捷。目前，伴隨著人們?nèi)找嫣嵘能浖缑嫘枨?，有?nèi)涵、個(gè)性化的UI界面顯得尤為重要，這也是本文創(chuàng)新實(shí)踐的著力點(diǎn)。

1.2 UI設(shè)計(jì)現(xiàn)狀

在國外，UI設(shè)計(jì)已有幾十年的發(fā)展，UI設(shè)計(jì)師崗位分工明細(xì)，不斷完善發(fā)展。在國內(nèi)，UI設(shè)計(jì)尚處于起步階段，高水平、有經(jīng)驗(yàn)、能滿足市場需求的設(shè)計(jì)師為數(shù)甚少。此外，國內(nèi)UI企業(yè)缺乏對(duì)用戶的研究，在人機(jī)交互、界面設(shè)計(jì)上都學(xué)習(xí)借鑒歐美設(shè)計(jì)模式，同質(zhì)化現(xiàn)象嚴(yán)重，一定程度上導(dǎo)致國內(nèi)UI設(shè)計(jì)落后于國外。與此同時(shí)，互聯(lián)網(wǎng)產(chǎn)業(yè)極速發(fā)展、日新月異，人們對(duì)美好生活的需求日益增長，倒逼國內(nèi)UI設(shè)計(jì)行業(yè)走上升級(jí)之路。UI設(shè)計(jì)行業(yè)不能簡單停留在復(fù)制操作上[3]，要不斷探索設(shè)計(jì)方向，尋求更為合理的設(shè)計(jì)方案，滿足用戶的視覺、心理、交互等全方位的體驗(yàn)，突破現(xiàn)有的發(fā)展瓶頸，實(shí)現(xiàn)由中國制造向中國創(chuàng)造最終走向中國智造的領(lǐng)先水平。

而作為UI設(shè)計(jì)師，應(yīng)該積極思考如何在數(shù)字平臺(tái)上應(yīng)用中國傳統(tǒng)紋樣，創(chuàng)造出具有中國特色的UI設(shè)計(jì)作品。本文將中國傳統(tǒng)紋樣在UI設(shè)計(jì)中創(chuàng)新應(yīng)用，就是一次很好的嘗試。

2 中國傳統(tǒng)紋樣

中國傳統(tǒng)紋樣作為傳統(tǒng)文化的重要構(gòu)成部分，貫穿中國五千年歷史發(fā)展的各個(gè)階段，是不同時(shí)期風(fēng)俗、生活習(xí)慣的符號(hào)演化，凝結(jié)了歷代人民的智慧與創(chuàng)造。中國傳統(tǒng)紋樣文化內(nèi)涵豐富，具有成熟完善的視覺系統(tǒng)，具有跨文化交流的能力，能彰顯傳統(tǒng)文化個(gè)性，展現(xiàn)美學(xué)精神[4]。在高度現(xiàn)代化、信息化的時(shí)代，如何將中國傳統(tǒng)紋樣與現(xiàn)代UI設(shè)計(jì)更好的結(jié)合，是UI從業(yè)者需要思考并實(shí)踐的問題。

2.1 中國傳統(tǒng)紋樣分類

中國傳統(tǒng)紋樣種類繁多、寓意深刻、內(nèi)涵豐富，如表1所示。

按照構(gòu)成形式分，有單獨(dú)紋樣、適合紋樣、混合紋飾、連續(xù)紋樣、其他紋樣等。

按照紋樣形象分，有植物類紋樣、動(dòng)物類紋樣、人物類紋樣、幾何類紋樣、器物類紋樣等[5]。

2.2 中國傳統(tǒng)紋樣的應(yīng)用方法

如何將中國傳統(tǒng)紋樣融入U(xiǎn)I設(shè)計(jì)？

首先要正確理解中國傳統(tǒng)紋樣的文化內(nèi)涵。傳統(tǒng)紋樣經(jīng)過歷史的積淀，具有獨(dú)特的寓意和理念，要深入解讀其中的內(nèi)涵，而不是“拿來主義、照搬照抄”。其次，對(duì)紋樣進(jìn)行重構(gòu)、互融、借鑒[6]。重構(gòu)：在保持傳統(tǒng)紋樣基本形態(tài)的前提下，依照現(xiàn)代的審美觀念，對(duì)紋樣造型進(jìn)行簡化、變異、重組;互融：融合不同性質(zhì)或種類的紋樣造型元素，再重組;借鑒：在UI設(shè)計(jì)中，借鑒傳統(tǒng)紋樣的設(shè)計(jì)原則、文化理念與表現(xiàn)手法。最后，形成既具中國傳統(tǒng)特色，又具當(dāng)代氣息的UI設(shè)計(jì)作品。

3 中國傳統(tǒng)紋樣在UI設(shè)計(jì)中的創(chuàng)新應(yīng)用

在研究了中國傳統(tǒng)紋樣的精神內(nèi)涵、色彩、形態(tài)后，運(yùn)用重構(gòu)、互融、借鑒的方法，結(jié)合UI用戶研究和設(shè)計(jì)趨勢，將傳統(tǒng)紋樣創(chuàng)新應(yīng)用于UI 設(shè)計(jì)中，推出一系列具有中國特色的現(xiàn)代UI設(shè)計(jì)方案。

3.1 傳統(tǒng)紋樣在ICON設(shè)計(jì)中的應(yīng)用

ICON，即圖標(biāo)，是一種視覺符號(hào)，具有標(biāo)志意義。受眾對(duì)圖標(biāo)的第一視覺感非常短[7]，因此，在圖標(biāo)設(shè)計(jì)上，要盡可能造型簡潔，又能引導(dǎo)用戶進(jìn)行交互操作。如圖1所示，學(xué)生設(shè)計(jì)師A從傳統(tǒng)“連珠紋”中得到設(shè)計(jì)靈感，與現(xiàn)代視覺符號(hào)“箭頭”進(jìn)行互融，巧妙地應(yīng)用于線性ICON設(shè)計(jì)中，向人們傳達(dá)輸入法的信息，設(shè)計(jì)生動(dòng)、獨(dú)特，富有想象力。此外，在視覺感官上，給用戶一種傳統(tǒng)與現(xiàn)代融合的秩序美感;在交互操作上，能迅速讓用戶聯(lián)想到ICON含義，增加了UI產(chǎn)品的內(nèi)在張力。

3.2 傳統(tǒng)紋樣在 BANNER設(shè)計(jì)中的應(yīng)用

BANNER，即橫幅廣告，形象鮮明，表達(dá)UI頁面中最主要情感思想、宣傳中心。BANNER由文案、商品/模特、背景、點(diǎn)綴物等構(gòu)成，具有較強(qiáng)的表現(xiàn)力和交互內(nèi)容。如圖2所示，學(xué)生設(shè)計(jì)師B應(yīng)用了傳統(tǒng)“吉星錦”紋樣，以吉祥星星做底圖裝飾，讓高科技的VR虛擬現(xiàn)實(shí)產(chǎn)品更具神秘氣息。該傳統(tǒng)紋樣應(yīng)用的情境、傳達(dá)的內(nèi)涵恰如其分，整個(gè)BANNER畫面極具設(shè)計(jì)美感，給用戶一種躍躍欲試的感覺。

3.3 傳統(tǒng)紋樣在APP頁面設(shè)計(jì)中的應(yīng)用

將傳統(tǒng)紋樣應(yīng)用于APP頁面設(shè)計(jì)中，是一種極具創(chuàng)意的表現(xiàn)手法，一方面讓UI設(shè)計(jì)作品更加多樣化，另一方面也提升了作品內(nèi)涵。如圖3所示，學(xué)生設(shè)計(jì)師C在“網(wǎng)易云音樂”的APP改版設(shè)計(jì)中，應(yīng)用傳統(tǒng)植物紋樣作為底紋，整個(gè)APP畫面用牛皮紙的土黃色調(diào)，形式統(tǒng)一，讓用戶感受到富有濃厚歷史底蘊(yùn)的音樂力量。

如圖4所示，學(xué)生設(shè)計(jì)師D在做了大量用戶研究后，了解到現(xiàn)代人生活繁忙，沒時(shí)間去博物館，故而設(shè)計(jì)了一個(gè)名為“每日博物”APP，包括博物館、展覽展示信息、個(gè)人中心、每周精選等版塊，讓用戶在手機(jī)上也能逛博物館。該款A(yù)PP設(shè)計(jì)，給用戶一種全新的博物館體驗(yàn)。在“每日博物”APP啟動(dòng)頁面，就應(yīng)用了諸多傳統(tǒng)紋樣：仕女紋樣、飛鶴紋樣、植物紋樣等，APP頁面唯美動(dòng)人，自然流露出一種文化氣韻。

4 結(jié)論

從中國傳統(tǒng)紋樣中汲取靈感，運(yùn)用重構(gòu)、互融、借鑒方法，創(chuàng)新應(yīng)用于UI設(shè)計(jì)，不但豐富了UI設(shè)計(jì)的作品形式，展現(xiàn)了傳統(tǒng)紋樣的獨(dú)特魅力，也有利于傳承弘揚(yáng)中國傳統(tǒng)文化。立足傳統(tǒng)，積極創(chuàng)新，本文也為其他傳統(tǒng)紋樣的創(chuàng)新設(shè)計(jì)與應(yīng)用提供借鑒。

參考文獻(xiàn)：

[1]2018年通信業(yè)統(tǒng)計(jì)公報(bào)[R].北京：工業(yè)和信息化部，2019.

[2]周陟.UI進(jìn)化論[M].清華大學(xué)出版社，2012.

[3]武利敏.UI設(shè)計(jì)中的視覺表現(xiàn)研究與實(shí)踐[D].蘭州大學(xué)，2018.

[4]周岳.傳統(tǒng)紋樣構(gòu)建當(dāng)代視覺形象的五大優(yōu)勢[J].美術(shù)觀察，2018（9）.

[5]班昆.中國傳統(tǒng)圖案大觀（二）[M].北京：人民美術(shù)出版社，2003.

[6]杜文娟.傳統(tǒng)圖形紋樣在現(xiàn)代家具設(shè)計(jì)中的應(yīng)用——以幾何形紋樣為例[J].美術(shù)大觀，2012（9）.

[7]楊潔.網(wǎng)頁圖形界面的圖標(biāo)設(shè)計(jì)風(fēng)格研究[J].設(shè)計(jì)，2015（7）.