王廣文，王文操

（河北工業(yè)大學(xué) 建筑與藝術(shù)設(shè)計(jì)學(xué)院，天津 300130）

作為一名設(shè)計(jì)師，工作中會(huì)接觸很多B端圖標(biāo)設(shè)計(jì)的需求，相較于to C的業(yè)務(wù)，B端圖標(biāo)設(shè)計(jì)會(huì)涉及一些生僻抽象和復(fù)雜組合的行業(yè)概念，視覺設(shè)計(jì)師首先要深入理解其功能含義，然后再通過具象圖形表達(dá)這一含義。實(shí)際設(shè)計(jì)中這部分往往會(huì)遇見諸多難點(diǎn)。比如某天接到一個(gè)設(shè)計(jì)需求，需要給里面的內(nèi)容“負(fù)載均衡、彈性伸縮、私有網(wǎng)絡(luò)、安全組、net網(wǎng)關(guān)、關(guān)系性數(shù)據(jù)庫、鏡像服務(wù)”等等B端功能繪制圖標(biāo)，這些概念既是生僻抽象的（不是被大眾普遍認(rèn)知的），同時(shí)又是復(fù)雜組合的（往往是多個(gè)表意的聚合）。作為一名毫無計(jì)算專業(yè)背景的視覺設(shè)計(jì)師，很難弄清楚這些拗口的專業(yè)詞匯，因而設(shè)計(jì)無從下手。

本文結(jié)合符號(hào)學(xué)里的一些基礎(chǔ)理論，找尋一些設(shè)計(jì)方法上的可能性，簡化B端圖標(biāo)的設(shè)計(jì)難度。

一、符號(hào)學(xué)理論與圖標(biāo)的設(shè)計(jì)價(jià)值

符號(hào)學(xué)主要由瑞士語言學(xué)家索緒爾和美國哲學(xué)家皮爾斯奠定理論基礎(chǔ)。這兩位符號(hào)學(xué)先驅(qū)在一百多年前發(fā)表的符號(hào)學(xué)理論，經(jīng)久不衰沿用至今，對(duì)當(dāng)代圖形設(shè)計(jì)依舊有指導(dǎo)作用。在設(shè)計(jì)中，B端圖標(biāo)傳達(dá)的含義往往會(huì)更加復(fù)雜，而我們最終繪制出的圖標(biāo)圖形在界面中也許并不能完全表意所指功能（用戶還是需要靠文字注解去理解對(duì)應(yīng)功能），但用戶一旦對(duì)這個(gè)圖標(biāo)熟悉后便可以直接跳過文字靠圖形進(jìn)行定位，圖形相較于文字，圖標(biāo)能更快速地幫用戶識(shí)別認(rèn)知。不僅如此，圖標(biāo)還可以為視覺層面提升美感，傳達(dá)品牌，優(yōu)化信息層級(jí)，增加界面韻律等等。將符號(hào)學(xué)理論和我們工作中的實(shí)際圖標(biāo)需求相結(jié)合，可以得到一些簡化工作的理論依據(jù)及設(shè)計(jì)方法，能讓設(shè)計(jì)師對(duì)繪制B端圖標(biāo)有更深入的了解認(rèn)識(shí)。

二、符號(hào)學(xué)中的符號(hào)與圖標(biāo)設(shè)計(jì)

（一）符號(hào)由什么組成？符號(hào)=能指+所指

符號(hào)的結(jié)構(gòu)理論專注于分析符號(hào)和所表達(dá)內(nèi)容之間的聯(lián)系，了解這部分理論可以幫助我們更好地理解圖標(biāo)傳達(dá)意義的過程。早在20世紀(jì)初期符號(hào)學(xué)先驅(qū)索緒爾奠定了關(guān)于符號(hào)學(xué)的最早的研究，他將符號(hào)視為能指和所指的結(jié)合。能指的是符號(hào)可感知的部分，往往對(duì)應(yīng)符號(hào)的表現(xiàn)層，而所指對(duì)應(yīng)符號(hào)內(nèi)容面，也就是能指指向的意義。以大家最熟悉的漢堡鍵圖標(biāo)設(shè)計(jì)為例子（圖1），它的能指就是三個(gè)橫線的圖形符號(hào)，而所指可以是界面里的“菜單”。

（二）能指大于所指性質(zhì)的符號(hào)和圖標(biāo)設(shè)計(jì)

90%的圖標(biāo)都是有所指優(yōu)勢(shì)的，所指大于能指。舉個(gè)例子來說明這一概念，魯迅在《藤野先生》里說到他把解剖圖美化了一下，受到老師的批評(píng)。雖然圖形更好看了，但是改變了事實(shí)，影響了表意。這其實(shí)就是所指大于能指。B端設(shè)計(jì)更重視高效直接實(shí)用，這種特性下的圖標(biāo)（尤其是操作類圖標(biāo)）往往是輕裝飾的，過多的“美化和裝飾”會(huì)影響快速傳達(dá)表意。在這里內(nèi)容層的清晰表達(dá)往往會(huì)重要于表現(xiàn)層的美觀好看。

>圖1

>圖2

>圖3

>圖4

>圖5

>圖6

>圖7

有時(shí)候用戶在閱讀的時(shí)候，興趣甚至?xí)鲞@個(gè)圖標(biāo)本身，而指向它的概念。得意忘言，得魚忘筌，以表意優(yōu)先為目的，需明確地傳達(dá)出其指向。并且，在實(shí)際的視覺表現(xiàn)上，圖標(biāo)也并非越精細(xì)越好，過度追求精細(xì)和質(zhì)感會(huì)影響圖標(biāo)的表意，反而破壞了圖標(biāo)的識(shí)別性。圖標(biāo)設(shè)計(jì)的識(shí)別性與圖標(biāo)的精細(xì)程度有關(guān)系，識(shí)別性隨著精細(xì)度上升，但精細(xì)度上升到一定點(diǎn)時(shí)，識(shí)別性會(huì)呈下降趨勢(shì)（圖2），所以我們?cè)谠O(shè)計(jì)B端圖標(biāo)的時(shí)候，要把握好這個(gè)度。

（三）符號(hào)在設(shè)計(jì)中如何被解讀

符號(hào)在設(shè)計(jì)中傳遞含義有三個(gè)層面：

1.第一性。符號(hào)傳達(dá)出的情緒或是感受，例如“紅色”表達(dá)警告或失敗，綠色表達(dá)正?；虺晒Φ鹊龋?/p>

2.第二性。符號(hào)的事實(shí)層面，所指對(duì)象；例如電腦的圖標(biāo)就指向電腦，時(shí)鐘的圖標(biāo)就是指向時(shí)鐘等等；

3.第三性。符號(hào)所影響的心理意識(shí)層面，通常是一種社會(huì)文化的成規(guī)，五角星和紅色會(huì)聯(lián)系起國旗，界面中黃色的五角星會(huì)指向收藏功能等等。

（四）不同場(chǎng)景下，符號(hào)在設(shè)計(jì)中有不同的解讀

把某個(gè)符號(hào)元素放在特定的場(chǎng)景下便具有不同的意義，比如漢堡鍵這個(gè)圖標(biāo)同時(shí)也可以表達(dá)“列表”“文本”“筆記”等含義。識(shí)別符號(hào)時(shí)會(huì)形成基于這個(gè)符號(hào)的聯(lián)想和隱喻，在一定的背景下，從而牽扯出不同的語義。（圖3）

三、符號(hào)學(xué)中符號(hào)的分類與設(shè)計(jì)

了解符號(hào)分類理論有助于幫助我們總結(jié)一些抽象概念的圖標(biāo)繪制手法，進(jìn)而運(yùn)用到工作中。皮爾斯的符號(hào)分類學(xué)把符號(hào)歸為三類：相似符號(hào)，關(guān)聯(lián)符號(hào)和規(guī)約符號(hào)。

（一）相似符號(hào)

指的是與指代事物相似的圖形。這里的相似性分兩點(diǎn)：表象和內(nèi)質(zhì)。表象相似指的是和指代事物在外形上相似；內(nèi)質(zhì)相似指的是抽象再現(xiàn)指向事物的某種品質(zhì)，一些行為概念構(gòu)造等的相似性。

1.表象相似

與事物外在形式上的相似，比如圖4 的電腦微波爐相機(jī)都屬于表象相似符號(hào)。

2.內(nèi)質(zhì)相似

抽象再現(xiàn)對(duì)象的形態(tài)或行為品質(zhì)。比如圖5中聲波信號(hào)元素等的圖形則是通過對(duì)事物內(nèi)在形態(tài)的模擬來詮釋指代的對(duì)象。

（二）關(guān)聯(lián)符號(hào)

指的是能提示想到指向事物的，在表意過程中依托于語境的判斷。比如加油樁表意為“服務(wù)站”，游戲手柄對(duì)應(yīng) “娛樂”，行李箱來表意指代“旅行”等等，這些都屬于關(guān)聯(lián)符號(hào)。如果手柄在界面中就只是表意“游戲手柄”，行李箱只表意“行李箱”這個(gè)事物的話，這些圖形則還是相似符號(hào)。（圖6）

（三）規(guī)約符號(hào)

與指代事物沒有理據(jù)性聯(lián)系，依托于一些社會(huì)或行業(yè)規(guī)約來進(jìn)行表意。和前兩種符號(hào)不同，如果沒有學(xué)習(xí)這類信息，就難以辨識(shí)這類符號(hào)。比如聊天／藍(lán)牙／u盤等等的圖形圖標(biāo)，只有熟練使用電腦后，我們才對(duì)這些圖標(biāo)有了認(rèn)知。規(guī)約符號(hào)都是需要學(xué)習(xí)這些信息或機(jī)制才能被理解，不然它沒有辦法傳遞任何含義。

四、符號(hào)學(xué)理論在圖標(biāo)設(shè)計(jì)中的應(yīng)用

讓我們?cè)倩氐轿恼乱婚_始那部分，某天接到一個(gè)設(shè)計(jì)需求，需要給里面的內(nèi)容“負(fù)載均衡、彈性伸縮、私有網(wǎng)絡(luò)、安全組、net網(wǎng)關(guān)、關(guān)系性數(shù)據(jù)庫、鏡像服務(wù)”等等功能一一繪制圖標(biāo)……這個(gè)時(shí)候該思考了，針對(duì)這些要表意的對(duì)象，選擇哪一種圖形化手法（甚至組合運(yùn)用）會(huì)比較適合。本文來逐一舉例說明。

（一）表象相似

一些能夠?qū)?yīng)現(xiàn)實(shí)中具體事務(wù)的功能，適合用表象相似的手法 進(jìn)行繪制。比如物理服務(wù)器專用宿主機(jī)API網(wǎng)關(guān)等等。這類手法通過對(duì)外在形式上的模仿，使得圖標(biāo)能直觀生動(dòng)快速地指涉對(duì)象。（圖7）

（二）內(nèi)質(zhì)相似

B端很多功能都是抽象的復(fù)雜的，在現(xiàn)實(shí)中無法找到某一具象事務(wù)去對(duì)應(yīng)，面對(duì)這類功能再使用表象相似手法，往往會(huì)“詞不達(dá)意”。這時(shí)可以試試內(nèi)質(zhì)相似手法。抽象地去模仿這個(gè)功能的流程和原理，從而起到對(duì)應(yīng)作用。

比如云計(jì)算里的“負(fù)載均衡”服務(wù)。先來了解一下這個(gè)服務(wù)，找一段百科里負(fù)載均衡服務(wù)的解釋來說明。

“通過某種負(fù)載分擔(dān)技術(shù)，將外部發(fā)送來的請(qǐng)求均勻分配到對(duì)稱結(jié)構(gòu)中的某一臺(tái)服務(wù)器上，而接收到請(qǐng)求的服務(wù)器獨(dú)立地回應(yīng)客戶的請(qǐng)求”。

這概念有點(diǎn)長是不是，然而實(shí)際的設(shè)計(jì)需求就是需要將這一段概念轉(zhuǎn)變成界面里某個(gè)16px或32px的小圖標(biāo)。如何下手？可以先試著將負(fù)載均衡的功能含義轉(zhuǎn)化成業(yè)務(wù)流程圖。

通過流程圖可以提煉出這一功能的重點(diǎn)信息——發(fā)送的請(qǐng)求通過負(fù)載均衡器平均分配到服務(wù)器，并且服務(wù)器可以獨(dú)立回應(yīng)（負(fù)載均衡器／分發(fā)及均衡／服務(wù)器列陣）。將這些概念進(jìn)行收攏簡化，再聚合統(tǒng)一成一個(gè)圖形，于是有了下面的小圖標(biāo)。（圖8）

很多B端抽象的概念都可以使用內(nèi)質(zhì)相似手法，抽象f 去模仿這個(gè)功能的流程和原理，從而起到對(duì)應(yīng)作用。

（三）關(guān)聯(lián)手法

>圖8

>圖9

>圖10

>圖11

>圖12

>圖13

這一類手法指的是當(dāng)圖標(biāo)圖形與指涉對(duì)象因?yàn)槟骋环N關(guān)系（尤其是因果／鄰接／部分整體等），所以可以相互提醒，讓接受者能體悟其事物。

簡單說來，就是通過一種事物能想到另一種事物，讓用戶看到圖標(biāo)把注意力引到所指對(duì)象上。比如下面的鏡像和數(shù)據(jù)庫圖標(biāo)，就是一個(gè)很好的例子。（圖9）

（四）規(guī)約手法

這類手法下的圖標(biāo)需要學(xué)習(xí)這些信息或機(jī)制才能被理解，不然它沒有辦法傳遞任何含義。如果實(shí)在不知道怎么畫這個(gè)圖標(biāo)了，搜搜圖標(biāo)庫，看看行業(yè)里或是其他競品這類功能圖標(biāo)是什么樣的，以此得出一些靈感。（圖1 0）

可以發(fā)現(xiàn)，相似手法讓圖標(biāo)表意生動(dòng)直觀，關(guān)聯(lián)手法讓圖標(biāo)表意指向明確，規(guī)約手法讓圖標(biāo)表意準(zhǔn)確有效。弄清這三者的分類并不難，在大部分熟知的具體符號(hào)上，這三種圖形化手法卻往往是混合的，正如皮爾斯認(rèn)為的“blended as equally as possible盡可能地混合這三種關(guān)系的符號(hào)，是最完美的符號(hào)”。將其觀點(diǎn)聯(lián)想到圖標(biāo)上，對(duì)于一些需要精確表意的圖標(biāo)，盡可能去使用符合這三種分類的圖形圖標(biāo)，可以很大程度上降低用戶的認(rèn)知成本。

我們?cè)诶L制圖標(biāo)，或是在辨識(shí)圖標(biāo)時(shí)，也可以多想想它是依托于哪一種圖形化的手法來進(jìn)行表達(dá)。比如在駕駛車輛時(shí)儀表盤上的安全帶圖標(biāo)，它既是一個(gè)圖像符號(hào)，生動(dòng)形象地表現(xiàn)出安全帶這一事物，同時(shí)它也是一個(gè)指向符號(hào)，指向“系安全帶”這一動(dòng)作，并且它也是一個(gè)規(guī)約符號(hào)，行業(yè)里不同的車輛均會(huì)使用這一標(biāo)志進(jìn)行表意。（圖1 1）

（五）錨定與組合手法

盡管這些象征關(guān)聯(lián)和規(guī)約的手法可以將圖標(biāo)的表意相對(duì)收斂，但有時(shí)仍然也會(huì)有很多表意不確定的地方，這時(shí)就會(huì)用到符號(hào)學(xué)里的“錨定”手法。以騰訊云控制臺(tái)為例，很多圖標(biāo)是復(fù)雜且合成的，往往是多個(gè)表意的聚合。比如“彈性公網(wǎng)”“托管源”“兼容性測(cè)試”等等。而面對(duì)這樣的復(fù)雜和合成，單一圖形也較難詮釋其準(zhǔn)確的表意，需要拆解構(gòu)成元素及重構(gòu)表意規(guī)則。

錨定是將符號(hào)本身有可能的多種表意收歸到一處，過濾掉無關(guān)緊要的能指而直達(dá)表意的關(guān)鍵。比如圖1 2的圖標(biāo)可以解讀為文件／紙張／表單／筆記等等，在加入各類元素之后，表意會(huì)變得更加明確，錨定為具體某一種類型的文件。

組合則是補(bǔ)充符號(hào)本身的內(nèi)容，比如電影畫面的字幕和漫畫書里的對(duì)白，都屬于組合。通過對(duì)符號(hào)本身內(nèi)容的增補(bǔ)，推進(jìn)和深化對(duì)于符號(hào)的解讀。“云端下載”是云服務(wù)與下載圖標(biāo)的結(jié)合，數(shù)據(jù)分析是bucket和dashboard儀表盤的結(jié)合等等。（圖1 3）

總結(jié)

結(jié)合符號(hào)學(xué)里的理論，將其與工作中圖標(biāo)的設(shè)計(jì)相結(jié)合，得到一些簡化難度的設(shè)計(jì)方法，從而對(duì)繪制B端圖標(biāo)有了更深入的了解認(rèn)識(shí)，增加了更多的設(shè)計(jì)手段。當(dāng)然，運(yùn)用好這些手法的前提是需要我們深入地了解所表意對(duì)象的含義。在學(xué)習(xí)這些手法的過程中也發(fā)現(xiàn)了一些問題，設(shè)計(jì)師有時(shí)僅僅是根據(jù)功能名稱進(jìn)行設(shè)計(jì)，而不是針對(duì)其背后所指向的含義。無論是我們的產(chǎn)品，還是其他競品，都有一些不太正確的表意設(shè)計(jì)。比如我們一些業(yè)務(wù)“私有網(wǎng)絡(luò)”“安全組”這些概念都用鎖的圖形來表示，這其實(shí)都是基于字面上的推斷。私有網(wǎng)絡(luò)應(yīng)該對(duì)應(yīng)“自定義配置”，而安全組最核心的信息表達(dá)應(yīng)該聚焦在“流量控制”。用鎖來表意安全是設(shè)計(jì)上慣用的手法，但是顯然這里提及的兩個(gè)功能概念不應(yīng)該和鎖對(duì)應(yīng)起來。