符號學路徑下互聯網企業端圖標設計方法研究

王廣文，王文操

（河北工業大學 建筑與藝術設計學院，天津 300130）

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

本文結合符號學里的一些基礎理論，找尋一些設計方法上的可能性，簡化B端圖標的設計難度。

一、符號學理論與圖標的設計價值

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

二、符號學中的符號與圖標設計

（一）符號由什么組成？符號=能指+所指

符號的結構理論專注于分析符號和所表達內容之間的聯系，了解這部分理論可以幫助我們更好地理解圖標傳達意義的過程。早在20世紀初期符號學先驅索緒爾奠定了關于符號學的最早的研究，他將符號視為能指和所指的結合。能指的是符號可感知的部分，往往對應符號的表現層，而所指對應符號內容面，也就是能指指向的意義。以大家最熟悉的漢堡鍵圖標設計為例子（圖1），它的能指就是三個橫線的圖形符號，而所指可以是界面里的“菜單”。

（二）能指大于所指性質的符號和圖標設計

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

>圖1

>圖2

>圖3

>圖4

>圖5

>圖6

>圖7

有時候用戶在閱讀的時候，興趣甚至會超出這個圖標本身，而指向它的概念。得意忘言，得魚忘筌，以表意優先為目的，需明確地傳達出其指向。并且，在實際的視覺表現上，圖標也并非越精細越好，過度追求精細和質感會影響圖標的表意，反而破壞了圖標的識別性。圖標設計的識別性與圖標的精細程度有關系，識別性隨著精細度上升，但精細度上升到一定點時，識別性會呈下降趨勢（圖2），所以我們在設計B端圖標的時候，要把握好這個度。

（三）符號在設計中如何被解讀

符號在設計中傳遞含義有三個層面：

1.第一性。符號傳達出的情緒或是感受，例如“紅色”表達警告或失敗，綠色表達正常或成功等等；

2.第二性。符號的事實層面，所指對象；例如電腦的圖標就指向電腦，時鐘的圖標就是指向時鐘等等；

3.第三性。符號所影響的心理意識層面，通常是一種社會文化的成規，五角星和紅色會聯系起國旗，界面中黃色的五角星會指向收藏功能等等。

（四）不同場景下，符號在設計中有不同的解讀

把某個符號元素放在特定的場景下便具有不同的意義，比如漢堡鍵這個圖標同時也可以表達“列表”“文本”“筆記”等含義。識別符號時會形成基于這個符號的聯想和隱喻，在一定的背景下，從而牽扯出不同的語義。（圖3）

三、符號學中符號的分類與設計

了解符號分類理論有助于幫助我們總結一些抽象概念的圖標繪制手法，進而運用到工作中。皮爾斯的符號分類學把符號歸為三類：相似符號，關聯符號和規約符號。

（一）相似符號

指的是與指代事物相似的圖形。這里的相似性分兩點：表象和內質。表象相似指的是和指代事物在外形上相似；內質相似指的是抽象再現指向事物的某種品質，一些行為概念構造等的相似性。

1.表象相似

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

2.內質相似

抽象再現對象的形態或行為品質。比如圖5中聲波信號元素等的圖形則是通過對事物內在形態的模擬來詮釋指代的對象。

（二）關聯符號

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

（三）規約符號

與指代事物沒有理據性聯系，依托于一些社會或行業規約來進行表意。和前兩種符號不同，如果沒有學習這類信息，就難以辨識這類符號。比如聊天／藍牙／u盤等等的圖形圖標，只有熟練使用電腦后，我們才對這些圖標有了認知。規約符號都是需要學習這些信息或機制才能被理解，不然它沒有辦法傳遞任何含義。

四、符號學理論在圖標設計中的應用

讓我們再回到文章一開始那部分，某天接到一個設計需求，需要給里面的內容“負載均衡、彈性伸縮、私有網絡、安全組、net網關、關系性數據庫、鏡像服務”等等功能一一繪制圖標……這個時候該思考了，針對這些要表意的對象，選擇哪一種圖形化手法（甚至組合運用）會比較適合。本文來逐一舉例說明。

（一）表象相似

一些能夠對應現實中具體事務的功能，適合用表象相似的手法 進行繪制。比如物理服務器專用宿主機API網關等等。這類手法通過對外在形式上的模仿，使得圖標能直觀生動快速地指涉對象。（圖7）

（二）內質相似

B端很多功能都是抽象的復雜的，在現實中無法找到某一具象事務去對應，面對這類功能再使用表象相似手法，往往會“詞不達意”。這時可以試試內質相似手法。抽象地去模仿這個功能的流程和原理，從而起到對應作用。

比如云計算里的“負載均衡”服務。先來了解一下這個服務，找一段百科里負載均衡服務的解釋來說明。

“通過某種負載分擔技術，將外部發送來的請求均勻分配到對稱結構中的某一臺服務器上，而接收到請求的服務器獨立地回應客戶的請求”。

這概念有點長是不是，然而實際的設計需求就是需要將這一段概念轉變成界面里某個16px或32px的小圖標。如何下手？可以先試著將負載均衡的功能含義轉化成業務流程圖。

通過流程圖可以提煉出這一功能的重點信息——發送的請求通過負載均衡器平均分配到服務器，并且服務器可以獨立回應（負載均衡器／分發及均衡／服務器列陣）。將這些概念進行收攏簡化，再聚合統一成一個圖形，于是有了下面的小圖標。（圖8）

很多B端抽象的概念都可以使用內質相似手法，抽象f 去模仿這個功能的流程和原理，從而起到對應作用。

（三）關聯手法

>圖8

>圖9

>圖10

>圖11

>圖12

>圖13

這一類手法指的是當圖標圖形與指涉對象因為某一種關系（尤其是因果／鄰接／部分整體等），所以可以相互提醒，讓接受者能體悟其事物。

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

（四）規約手法

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

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

我們在繪制圖標，或是在辨識圖標時，也可以多想想它是依托于哪一種圖形化的手法來進行表達。比如在駕駛車輛時儀表盤上的安全帶圖標，它既是一個圖像符號，生動形象地表現出安全帶這一事物，同時它也是一個指向符號，指向“系安全帶”這一動作，并且它也是一個規約符號，行業里不同的車輛均會使用這一標志進行表意。（圖1 1）

（五）錨定與組合手法

盡管這些象征關聯和規約的手法可以將圖標的表意相對收斂，但有時仍然也會有很多表意不確定的地方，這時就會用到符號學里的“錨定”手法。以騰訊云控制臺為例，很多圖標是復雜且合成的，往往是多個表意的聚合。比如“彈性公網”“托管源”“兼容性測試”等等。而面對這樣的復雜和合成，單一圖形也較難詮釋其準確的表意，需要拆解構成元素及重構表意規則。

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

組合則是補充符號本身的內容，比如電影畫面的字幕和漫畫書里的對白，都屬于組合。通過對符號本身內容的增補，推進和深化對于符號的解讀。“云端下載”是云服務與下載圖標的結合，數據分析是bucket和dashboard儀表盤的結合等等。（圖1 3）

總結

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