界面設(shè)計(jì)中基于符號(hào)學(xué)的設(shè)計(jì)元素提取方法研究

楊 程 （浙江大學(xué)城市學(xué)院 310015）

在界面設(shè)計(jì)的應(yīng)用領(lǐng)域，網(wǎng)易、騰訊等大型互聯(lián)網(wǎng)公司多次提出以情緒板設(shè)計(jì)方法進(jìn)行設(shè)計(jì)創(chuàng)意。根據(jù)情緒板設(shè)計(jì)方法，設(shè)計(jì)實(shí)現(xiàn)的過程為根據(jù)意向語義尋找參考圖像，并從參考圖像中提取設(shè)計(jì)元素進(jìn)行設(shè)計(jì)。在實(shí)際應(yīng)用中發(fā)現(xiàn)，對(duì)于從參考圖像進(jìn)行設(shè)計(jì)元素提取的過程主要依賴于設(shè)計(jì)師的經(jīng)驗(yàn)積累或直覺獲取，過程較為抽象，具有不確定性。所以需要為設(shè)計(jì)者提供從視覺圖像中提取設(shè)計(jì)元素的參考方法。

一、設(shè)計(jì)元素的符號(hào)學(xué)解讀

從圖像中提取設(shè)計(jì)元素的過程是通過材料刺激來驅(qū)動(dòng)思考的過程，是將抽象的視覺感受轉(zhuǎn)化為具象的設(shè)計(jì)元素的創(chuàng)意思考過程。符號(hào)學(xué)是設(shè)計(jì)過程中重要的方法論，包含了許多思考途徑，為設(shè)計(jì)師提供了重要的參考方式。軟件界面設(shè)計(jì)中包括了小圖標(biāo)的設(shè)計(jì)、文字排版、頁面布局、色彩等設(shè)計(jì)元素，這些設(shè)計(jì)元素本身就是一種符號(hào)。所以對(duì)于界面設(shè)計(jì)中設(shè)計(jì)元素的提取，可參考符號(hào)學(xué)的角度分類。

根據(jù)符號(hào)學(xué)特征，將設(shè)計(jì)符號(hào)分為語意，語境，語用，語構(gòu)成四個(gè)維度：語意在界面設(shè)計(jì)中表現(xiàn)為通過圖標(biāo)、構(gòu)圖形式等設(shè)計(jì)所表達(dá)出產(chǎn)品所具有的功能性，如頁面跳轉(zhuǎn)功能、上下左右滑動(dòng)功能，以及各個(gè)小圖標(biāo)表達(dá)出的購物籃、個(gè)人中心等具體使用功能；語境研究的是設(shè)計(jì)中符號(hào)的區(qū)域性與時(shí)代性，是社會(huì)化的考慮范疇，由于區(qū)域和時(shí)代的劃分，用戶對(duì)相同事物的認(rèn)知會(huì)隨時(shí)空和區(qū)域的不同而有所區(qū)別；語用研究的是用戶的使用經(jīng)驗(yàn)、習(xí)慣等因素對(duì)于設(shè)計(jì)元素使用的影響，符合用戶使用習(xí)慣的設(shè)計(jì)能夠提升用戶對(duì)產(chǎn)品的認(rèn)知度；語構(gòu)研究的是視覺圖像的構(gòu)成形式，通過對(duì)視覺參考圖像的提煉概括、變異修飾、分解再構(gòu)等設(shè)計(jì)手法，通過對(duì)原有的參考圖像在表現(xiàn)形態(tài)方面的變換，得出適合的設(shè)計(jì)元素。

二、設(shè)計(jì)元素提取原則

在進(jìn)行元素轉(zhuǎn)化時(shí)，首先設(shè)計(jì)師要收集資料，對(duì)產(chǎn)品目標(biāo)和用戶需求有深刻的理解，在大腦中形成相應(yīng)目標(biāo)體系，包括目標(biāo)人群喜好、產(chǎn)品風(fēng)格特征以及產(chǎn)品核心價(jià)值觀等一系列的約束與期望，這些約束與期望就是產(chǎn)品的符號(hào)學(xué)語境。然后，設(shè)計(jì)師應(yīng)從產(chǎn)品的語用功能和語意出發(fā)，結(jié)合元素的語構(gòu)特征，設(shè)計(jì)出符合需求的作品。最后從符號(hào)學(xué)語構(gòu)角度進(jìn)行設(shè)計(jì)元素的提取，并將其向圖案、色彩、構(gòu)圖等設(shè)計(jì)要素進(jìn)行映射。接下來提出具體設(shè)計(jì)元素提取方法。

（一）圖形線條提取

在界面設(shè)計(jì)中的圖形設(shè)計(jì)元素提取過程中，首先要分析圖片素材的特征，根據(jù)符號(hào)學(xué)特性進(jìn)行映射。根據(jù)符號(hào)學(xué)理論，設(shè)計(jì)符號(hào)學(xué)映射分為顯性映射和隱性映射。其中，顯性映射主要適用于紋理可直接用在界面設(shè)計(jì)中的圖片，通常是作為APP的背景底紋素材；隱性映射為通過常用的設(shè)計(jì)方法對(duì)視覺圖案進(jìn)行再創(chuàng)造，適用于較為復(fù)雜的圖案，一般參考原型為生活中的實(shí)體物品，設(shè)計(jì)師通過提取輪廓線，對(duì)其簡化、夸張變形、重復(fù)等手段對(duì)其再設(shè)計(jì)，作為界面設(shè)計(jì)中的圖標(biāo)或裝飾元素。如圖1所示，為根據(jù)實(shí)際優(yōu)惠券的圖片進(jìn)行設(shè)計(jì)元素提取過程，通過提取實(shí)體優(yōu)惠券具有代表性的鋸齒狀線框和釘孔凹陷等外形輪廓特征，設(shè)計(jì)出識(shí)別性強(qiáng)的優(yōu)惠券圖標(biāo)。

圖1 優(yōu)惠券設(shè)計(jì)

（二）色彩的提取

依據(jù)界面設(shè)計(jì)的風(fēng)格，選取能夠表達(dá)相應(yīng)設(shè)計(jì)風(fēng)格的圖片。從圖像中選取顏色可通過Photoshop軟件來完成，使用Photoshop中“存儲(chǔ)為Web和設(shè)備所用格式”的方法，顏色選擇為4種或8種顏色得到色彩方案。如圖2所示為選取的代表溫馨感的圖片，通過上述方法得到該界面設(shè)計(jì)的主色及輔助色。該組色系由低純度的棕色系，高明度的淡綠色搭配而成，提取出的色彩也能夠給人溫馨、舒適的感受。選取不同的參考圖像，得出的色彩都不盡相同，比如同是代表現(xiàn)代簡約的偏青藍(lán)色調(diào)的圖片，但在得出顏色的色相、純度、明度上還是有所不同，同時(shí)也形成了具有特色的配色方案，這也正是設(shè)計(jì)的魅力所在。

圖2 圖片色彩提取

（三）構(gòu)圖形式的提取

構(gòu)圖形式的產(chǎn)生需要根據(jù)圖片素材的構(gòu)圖形式來推測相應(yīng)的排版來完成。具體參考方法為：根據(jù)設(shè)計(jì)的主題風(fēng)格和功能需求，構(gòu)建整體范圍的外形線為界面邊界，將專題內(nèi)容依據(jù)信息層級(jí)填充進(jìn)較大的圖形輪廓中。例如圖3所示的支付寶的交電費(fèi)頁面中，背景的構(gòu)圖參考了實(shí)際生活中電燈泡的排版形式，形成富有趣味性的構(gòu)圖形式。

圖3 支付寶交電費(fèi)頁面

三、總結(jié)

依據(jù)符號(hào)學(xué)設(shè)計(jì)理論，總結(jié)了設(shè)計(jì)符號(hào)學(xué)在界面設(shè)計(jì)中的分類，并結(jié)合各個(gè)維度梳理出通過視覺參考圖像提取設(shè)計(jì)元素的具體方法。結(jié)合符號(hào)學(xué)設(shè)計(jì)方法，從圖形提取、色彩提取、構(gòu)圖提取三個(gè)方面對(duì)設(shè)計(jì)元素提取方法進(jìn)行具體說明。希望本文提出的方法，能為實(shí)際應(yīng)用中的用戶圖形界面設(shè)計(jì)提供參考。

[1]Endrissat N，Islam G，Noppeney C.Visual organizing：Balancing coordination and creative freedom via mood boards[J].Journal of Business Research，2016（69）2353-2362.

[2]付彧.符號(hào)學(xué)視閾下的智能手機(jī)應(yīng)用程序圖標(biāo)視覺分析[J].包裝工程，2016（12）：57-60.

[3]朱上上，羅仕鑒.產(chǎn)品設(shè)計(jì)中基于設(shè)計(jì)符號(hào)學(xué)的文物元素再造[J].浙江大學(xué)學(xué)報(bào)（工學(xué)版），2013（11）：2065-2072.