圖形用戶界面中圖標(biāo)的視覺(jué)形式美探析

自從上個(gè)世紀(jì)圖形用戶界面的普及為人機(jī)交互行為和用戶體驗(yàn)帶來(lái)了全新變革，無(wú)論是4K電視還是視網(wǎng)膜屏幕，分辨率的提高對(duì)圖形用戶界面，特別是圖標(biāo)的視覺(jué)表現(xiàn)和形式美提出了更高的要求，用戶已經(jīng)不滿足于視覺(jué)感官設(shè)計(jì)，他們需要在高分辨率下享受美麗且有細(xì)節(jié)的圖標(biāo)乃至圖形用戶界面。文章以形式定義作為支撐，詳細(xì)闡述了圖標(biāo)設(shè)計(jì)中的形式要素、形式美的特征以及形式美的原則等三個(gè)方面，最后根據(jù)前期的設(shè)計(jì)與研究經(jīng)驗(yàn)提出圖標(biāo)設(shè)計(jì)形式美的兩個(gè)遞進(jìn)式訓(xùn)練方法的建議，希望能夠淺析圖標(biāo)的形式美以及提供設(shè)計(jì)解決方案。

圖形用戶界面的發(fā)展與圖標(biāo)（ICON）

“圖形用戶界面（Graphic User Interface）是二十世紀(jì)最重要的創(chuàng)造發(fā)明之一，它為數(shù)字化普及革命所帶來(lái)的巨大貢獻(xiàn)是軟件領(lǐng)域中其它任何發(fā)明所不能比擬的?！眻D形用戶界面的起源于上個(gè)世紀(jì)60年代計(jì)算機(jī)操作技術(shù)革新，在這次變革中，圖形用戶界面替換了大量的字符命令，解脫了對(duì)命令的大量記憶負(fù)擔(dān)，同時(shí)由于采用圖形方式與計(jì)算機(jī)操作環(huán)境對(duì)接，對(duì)于用戶來(lái)說(shuō)更為簡(jiǎn)便易用，方便了非專業(yè)用戶的使用，人們可以通過(guò)窗口、菜單、按鍵等方式來(lái)方便地進(jìn)行操作，其中尤為重要的就是圖標(biāo)。

圖標(biāo)也有廣義和狹義之分，廣義上是指所有的圖形標(biāo)識(shí)，而這里討論的主要是狹義的圖形用戶界面圖標(biāo)，是ICON意譯。由于圖形用戶界面（GUI）是一個(gè)舶來(lái)品，所以其中的“圖標(biāo)”，也只能用西方語(yǔ)系中ICON來(lái)解釋。由于計(jì)算機(jī)技術(shù)和圖形用戶界面的發(fā)展，越來(lái)越多的圖形通過(guò)擬物化的設(shè)計(jì)方式參與替代計(jì)算機(jī)命令和信息，ICON逐漸成為圖形用戶界面的命令接口之一。當(dāng)然，研究圖形用戶界面或者是其中的圖標(biāo)（ICON），可以有多種角度，從認(rèn)知心理學(xué)、人機(jī)工程學(xué)、行為學(xué)、符號(hào)學(xué)、社會(huì)學(xué)等眾多領(lǐng)域都可以切入，但無(wú)論目的如何，都無(wú)法回避圖形符號(hào)的視覺(jué)表現(xiàn)這一問(wèn)題。今天的社會(huì)早已進(jìn)入了一個(gè)高度發(fā)達(dá)的“讀圖時(shí)代”，特別是物聯(lián)網(wǎng)以及移動(dòng)互聯(lián)的飛速發(fā)展，指代計(jì)算機(jī)命令的圖像信息更是撲面而來(lái)，蘋(píng)果、微軟、谷歌乃至國(guó)內(nèi)的小米、長(zhǎng)虹等眾多企業(yè)不惜余力的發(fā)展圖形用戶界面，更加重視圖標(biāo)在界面中的作用和美的體驗(yàn)。小米以極客引領(lǐng)粉絲的方式推出自定義用戶界面，甚至把圖標(biāo)作為藝術(shù)品來(lái)推廣，用戶可以根據(jù)自己喜好下載更符合自己審美需求和習(xí)慣的圖標(biāo)安裝，打造唯美的藝術(shù)界面。

圖標(biāo)的形式和形式美淺析

假設(shè)圖標(biāo)可以作為藝術(shù)作品成立，那么任何藝術(shù)作品都必須通過(guò)一定的組織結(jié)構(gòu)和表現(xiàn)手段體現(xiàn)出來(lái)，因此用來(lái)表現(xiàn)作品內(nèi)容的組織結(jié)構(gòu)以及表現(xiàn)手段，就是作品的形式，圖標(biāo)也不例外。在藝術(shù)領(lǐng)域中，形式一般為表現(xiàn)內(nèi)容而產(chǎn)生。圖標(biāo)的內(nèi)容主要是提供計(jì)算機(jī)指令信息，當(dāng)前絕大多數(shù)圖標(biāo)的組織結(jié)構(gòu)和表現(xiàn)手段為擬物化的設(shè)計(jì)，讓我們來(lái)看一個(gè)大家熟悉的例子，“搜索”圖標(biāo)。搜索，其實(shí)是一個(gè)動(dòng)詞，但是為什么要用擬物化的名詞“放大鏡”來(lái)表現(xiàn)哪？“我們大腦中充滿了鏡像神經(jīng)元，它們使我們能夠快速的憑直覺(jué)了解他人的意圖，甚至感同身受”。設(shè)計(jì)師呈現(xiàn)擬物化的放大鏡作為圖標(biāo)形式的時(shí)候，其實(shí)希望用戶聯(lián)想到別人或自己曾經(jīng)的搜索、尋找的行為，以模仿行為的隱語(yǔ)方式告知用戶這就是搜索命令的內(nèi)容。

那么，形式的要素有哪些？什么樣的形式才美？ “形式美是指自然、生活、藝術(shù)中各種形式要素（色彩、線條、形體、聲音），及其規(guī)律的組合所具有的美。”在圖標(biāo)設(shè)計(jì)中，形式美是指形狀、空間、質(zhì)感、影調(diào)、色彩等形式要素的組合所具有的美。

1.圖標(biāo)中形式的本質(zhì)要素（形狀、體積、空間）和表現(xiàn)要素（影調(diào)、質(zhì)感、色彩）的視覺(jué)表現(xiàn)

形狀、體積、空間是形式的本質(zhì)要素，質(zhì)感、影調(diào)、色彩是形式的表象要素。在圖標(biāo)設(shè)計(jì)中，形式的要素都離不開(kāi)在屏幕上的視覺(jué)表現(xiàn)。因此，我們更加強(qiáng)調(diào)以體積感和質(zhì)感以及色彩構(gòu)成形式美的視覺(jué)表現(xiàn)。

圖標(biāo)視覺(jué)表現(xiàn)的立體感，即體積感，使擬物化的圖標(biāo)更加生動(dòng)自然、真實(shí)可信的重要因素。在屏幕上設(shè)計(jì)圖形與空間上的藝術(shù)方式（例如雕塑）不同，主要還是通過(guò)二維空間塑造形象。通常情況下塑造栩栩如生、富有表現(xiàn)力的圖標(biāo)視覺(jué)表現(xiàn)，主要運(yùn)用其自身所固有造型語(yǔ)言在二維空間上模擬對(duì)象的三維空間，即表現(xiàn)出擬物化對(duì)象的形狀、體積和所占空間大小。

圖標(biāo)所比擬的物體的表面結(jié)構(gòu)，稱為質(zhì)感。并非所有物體的質(zhì)感都值得表現(xiàn)，但卻是所有物體都必不可少的重要形式部分，因此圖標(biāo)設(shè)計(jì)中對(duì)它的視覺(jué)呈現(xiàn)一定程度上會(huì)使圖形出彩，增強(qiáng)藝術(shù)感染力。例如蘋(píng)果公司打造的水晶系列按鈕和圖標(biāo)就為Macintosh系統(tǒng)迎來(lái)視覺(jué)表現(xiàn)上的溢美之詞。圖標(biāo)設(shè)計(jì)過(guò)程中通過(guò)對(duì)被模擬物體的影調(diào)、光線的視覺(jué)表現(xiàn)來(lái)實(shí)現(xiàn)表面狀態(tài)的質(zhì)感。

色彩，自古就是所有圖形圖像語(yǔ)言表達(dá)的重要因素之一。圖標(biāo)設(shè)計(jì)中通過(guò)色彩的調(diào)整，不僅僅是客觀描繪被模擬物體的色彩特點(diǎn)，還可以發(fā)揮色彩的性格來(lái)定義不同的主觀情調(diào)，增強(qiáng)藝術(shù)表現(xiàn)力的同時(shí)帶給用戶良好的情感體驗(yàn)。圖標(biāo)設(shè)計(jì)中的色彩運(yùn)用既要符合造型藝術(shù)用色的一般規(guī)律，同時(shí)也要考慮屏幕載體的色彩模式特點(diǎn)。

2.圖標(biāo)中形式美感的特征

前文中我們已經(jīng)討論了圖標(biāo)的形式美的定義和要素，接下來(lái)我們可以主動(dòng)地分析，具備了什么特征可以成為形式美。

第一個(gè)特征：既然圖標(biāo)設(shè)計(jì)中大多采用的是擬物化設(shè)計(jì)，那么形式美和自然以及人工物的物質(zhì)屬性、規(guī)律有著密切的聯(lián)系。任何藝術(shù)設(shè)計(jì)形式的原理都來(lái)人們對(duì)生活的認(rèn)知，但不是對(duì)自然物和人工無(wú)目的盲目的模仿，圖標(biāo)設(shè)計(jì)師通過(guò)模擬自然的法則來(lái)構(gòu)成畫(huà)面。這里談到的法則也就是物質(zhì)屬性、規(guī)律。我們對(duì)自然界的認(rèn)識(shí)和了解的實(shí)踐活動(dòng)，伴隨時(shí)代發(fā)展而擴(kuò)展。貝爾發(fā)明電話以前，又有誰(shuí)會(huì)想到今天代表?yè)艽螂娫捗畹膱D標(biāo)會(huì)是聽(tīng)筒的形式哪？更何況今天我們可以放大一千倍去看細(xì)胞，站在地球以外觀察銀河系，這必然為圖標(biāo)的設(shè)計(jì)提供新的形式美。

第二個(gè)特征：具有一定的抽象概括性，形式美概括了自然和生活中美的某些共同特征。抽象概括性，所體現(xiàn)的內(nèi)容是簡(jiǎn)潔的、清晰的。我們面對(duì)紛繁復(fù)雜的圖像時(shí)代，信息量越來(lái)越龐大，身處其中非常容易迷失，這就越來(lái)越需要更加簡(jiǎn)潔明了的突出圖標(biāo)的擬物化和指代性，這不僅僅是功能的需求，同時(shí)也是視覺(jué)本能審美的需求。“我們的知覺(jué)往往偏好簡(jiǎn)單的結(jié)構(gòu)，直線、圖形以及其它簡(jiǎn)單的秩序，我們?cè)诨靵y的外部世界往往易于看清這類有規(guī)則的形狀，而不是雜亂的形狀。”人們?cè)趧?chuàng)造美的圖像時(shí)都具有自覺(jué)的高度概括性和抽象性。

第三個(gè)特征：相對(duì)的獨(dú)立性，這里指的獨(dú)立性是指形式美具有獨(dú)立的審美意義。前面曾經(jīng)提過(guò)，圖標(biāo)一詞來(lái)源于ICON，而符號(hào)學(xué)對(duì)ICON的定義源自古代宗教的圖形符號(hào)以及早期人類的巖畫(huà)，它們都具有獨(dú)立的審美意義。后來(lái)的藝術(shù)領(lǐng)域也有一定的嘗試，例如畢加索對(duì)公牛的抽象概括，即其簡(jiǎn)潔的線條勾畫(huà)輪廓，讓簡(jiǎn)潔的具有粗細(xì)變化的線條也具備了相對(duì)的藝術(shù)生命力。早期的黑莓手機(jī)圖標(biāo)上也有類似的例子。

3.圖標(biāo)設(shè)計(jì)中的形式美原則

從古至今，各地的圖形圖像，無(wú)論文化背景多么不同，外觀形象差異多大，不論是巴西皮奧伊州巖畫(huà)還是埃及法老金字塔壁畫(huà)，或是中國(guó)敦煌壁畫(huà)，不論是古典的紋樣還是現(xiàn)代藝術(shù)或者是圖標(biāo)等等，單從形式條件來(lái)評(píng)價(jià)某一事物或某一造型設(shè)計(jì)時(shí)，人們都會(huì)存在一種共識(shí)，它依據(jù)的就是美的形式原則。比如，在我們的視覺(jué)經(jīng)驗(yàn)中的垂直線，在藝術(shù)形式上給人上升、高大、嚴(yán)格等感受；而水平線則產(chǎn)生開(kāi)闊、平靜等形式感。所以，我們可以得出一個(gè)結(jié)論，“任何審美活動(dòng)都離不開(kāi)感性形式，這些感性形式是由體、線、面、質(zhì)地色彩和音響組成的復(fù)合體，是一種在空間和時(shí)間中可以感性直觀的物質(zhì)存在。”人們?cè)趧?chuàng)造美的事物中發(fā)展了形式美，并從大量美的事物中概括出美的形式的共同特點(diǎn)，由此產(chǎn)生了形式美的原則，主要包括對(duì)稱與均衡、抽象與變形、主從與層次等方面。

第一個(gè)原則“對(duì)稱與均衡”。 幾何學(xué)上的對(duì)稱包括：中軸對(duì)稱、中心對(duì)稱、平衡對(duì)稱等等，對(duì)稱是一種最穩(wěn)定的物理狀態(tài)，也是最穩(wěn)定的視覺(jué)形式，對(duì)稱可以給人穩(wěn)定、秩序感、莊嚴(yán)感、神圣感，對(duì)稱與均衡是圖標(biāo)擬物化設(shè)計(jì)過(guò)程中必須考慮的問(wèn)題。例如近來(lái)飽受爭(zhēng)議IOS7用戶圖形界面中的圖標(biāo)設(shè)計(jì)就具有強(qiáng)烈的對(duì)稱關(guān)系。

第二個(gè)原則，抽象與變形。由于大部分圖標(biāo)所占區(qū)域?yàn)橐粋€(gè)正方形像素矩陣，所以在形態(tài)上為了達(dá)到視覺(jué)均衡，我們不得不考慮適當(dāng)?shù)某橄笞冃?，例如用一支鉛筆作為繪畫(huà)功能圖標(biāo)的擬物化設(shè)計(jì)中，我們不得不對(duì)鉛筆的寬度放大，突破鉛筆自身的比例關(guān)系來(lái)表現(xiàn)，才能保證視覺(jué)上的平衡。

第三個(gè)原則，主從與層次是任何一門(mén)藝術(shù)的基本關(guān)系，心理學(xué)家告訴我們，人的視知覺(jué)是對(duì)事物或圖像具有一定的歸納和概括能力，這與視知覺(jué)追求簡(jiǎn)化是一致的。圖標(biāo)設(shè)計(jì)擬物化過(guò)程中常常會(huì)遇到多個(gè)物體組合或是一個(gè)物體上有多個(gè)組合元素的情況，這個(gè)時(shí)候就需要我們分清主次，通過(guò)視覺(jué)焦點(diǎn)突出主體，而后合理運(yùn)用空間關(guān)系以及色彩明確視覺(jué)上的層與層的遞進(jìn)關(guān)系。

圖標(biāo)形式美的視覺(jué)訓(xùn)練

圖標(biāo)設(shè)計(jì)中的形式美是值得我們研究的，并非只是功能和審美的需求，同時(shí)也是良好的用戶情感體驗(yàn)的需要。我曾經(jīng)在視覺(jué)傳達(dá)的思維方法訓(xùn)練的相關(guān)論文《“由表及里”的視覺(jué)傳達(dá)設(shè)計(jì)基礎(chǔ)訓(xùn)練》中提到過(guò)一些可通用的訓(xùn)練方法，也是基于形式的要素和整體視知覺(jué)的，其中兩個(gè)遞進(jìn)式訓(xùn)練方法在文章的最后加以引用，也可作為圖標(biāo)設(shè)計(jì)形式訓(xùn)練的工具。通過(guò)這樣的訓(xùn)練可以為設(shè)計(jì)提供新的視野，不同的視覺(jué)體驗(yàn)，幫助他們尋求多樣化的形式表達(dá)。

“首先、由‘復(fù)制形式本質(zhì)要素轉(zhuǎn)為抽象思維訓(xùn)練，訓(xùn)練學(xué)生對(duì)形式的視覺(jué)感受能力，強(qiáng)調(diào)形狀或體積、空間等形式本質(zhì)要素的抽象思維能力；其次、對(duì)形式表象要素的視覺(jué)訓(xùn)練，光影構(gòu)成訓(xùn)練強(qiáng)調(diào)光影表現(xiàn)及正負(fù)形的構(gòu)成關(guān)系，質(zhì)感模擬訓(xùn)練觸感轉(zhuǎn)化為視知覺(jué)的過(guò)程，色彩構(gòu)成訓(xùn)練著力探尋色彩世界中的視覺(jué)體驗(yàn)”

注釋

黎 鷹 李 亮 “圖形用戶界面的發(fā)展與分類” 《工程地質(zhì)計(jì)算機(jī)應(yīng)用》 2006 年第 4 期 第24頁(yè)

[英]亞歷柯斯.本特利 馬克.伊爾斯 [美]邁克爾.奧布萊恩 著 何亞婧 譯《竊言盜行---模仿的科學(xué)與行為》 清華大學(xué)出版社 2013年2月 第49頁(yè)

（作者單位：四川美術(shù)學(xué)院設(shè)計(jì)藝術(shù)學(xué)院）

作者簡(jiǎn)介：任宏偉，講師。