設(shè)計師必看的圖設(shè)計標(biāo)（icon）設(shè)計指南

2022-02-09 點擊量：

圖標(biāo)設(shè)計是UI設(shè)計中非常重要的環(huán)節(jié)，因為除了文字和圖片的排版之外，在扁平時代能夠傳遞給用戶情緒和設(shè)計感的通道就是頁面中的各種圖形與圖標(biāo)。全文16,834字，閱讀時長約35分鐘。

圖標(biāo)是UI設(shè)計中除了文字之外最不可或缺的視覺元素，在設(shè)計中看似只占一個很小的區(qū)域，但是它卻是考驗設(shè)計師基本功的重要標(biāo)準(zhǔn)，了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計的必備條件。

本文盡量將圖標(biāo)進行系統(tǒng)一些的介紹說明，當(dāng)然僅一篇文章是不可能面面俱到包含所有知識點。內(nèi)容比較基礎(chǔ)，主要以 設(shè)計概念 和 設(shè)計思路 為主，對圖標(biāo)相關(guān)的內(nèi)容進行組織梳理和分類，便于小伙伴們建立圖標(biāo)的概念體系。過程中也有針對幾種典型的圖標(biāo)結(jié)構(gòu)進行實操代練，想要把圖標(biāo)設(shè)計的更好，這就需要我們在平時勤加練習(xí)外，還要進行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?/p>

1.1 圖標(biāo)的定義

圖標(biāo)，也稱為icon或Picoto，是計算機世界對現(xiàn)實世界的隱喻和概括，代表軟件產(chǎn)品中的功能及操作。它的本質(zhì)是一種符號，它采用對這個世界的隱喻，來指代功能，含義，用途等。

圖標(biāo)做為國際通用性語言，生活中隨處可見，例如商場導(dǎo)視中收銀臺圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等，日常手機里使用的那些App圖標(biāo)，如微信、電話、短信等。的確，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中，并且表現(xiàn)方式非常豐富，有線的、有面的、還有擬物的等。  

如果粗淺劃分的話，UI設(shè)計中常見的圖標(biāo)大致分為2大類，第一類我們稱之為「標(biāo)志性圖標(biāo)」，比如手機中應(yīng)用啟動圖標(biāo)；第二類我們稱之為「功能性圖標(biāo)」，這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中，用于功能性指示引導(dǎo)或操作。

1.2 圖標(biāo)的重要性

對于UI設(shè)計而言，圖標(biāo)可以說是整個產(chǎn)品的點睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中，圖標(biāo)幾乎是這個頁面的核心支撐體，它直接影響著產(chǎn)品的視覺體驗和產(chǎn)品調(diào)性。它有以下幾點好處：

全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣；

節(jié)約空間：如果在一個圖標(biāo)能夠表述清楚含義的時候，比如用一個叉就可以不用寫「關(guān)閉」；

快速定位：圖標(biāo)可以用它獨特的形狀或者顏色讓人快速定位到一個功能；

上下文的定位：比如小飛機的圖標(biāo)單獨放出來不確定是什么，但是在和收件箱在一起它就可以認(rèn)為是發(fā)件箱了。

1.3 發(fā)展歷程

如你所知，圖標(biāo)、標(biāo)識都不是界面設(shè)計師所創(chuàng)造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當(dāng)中，早期用來傳達信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標(biāo)和標(biāo)識。

隨著技術(shù)的發(fā)展，計算機誕生了，而顯示器的出現(xiàn)，也為圖形化界面的誕生，鋪平了道路。20世紀(jì)70年代，施樂在位于帕羅奧托的研究所當(dāng)中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續(xù)機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計算機歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟，Windows 對抗 Macintosh。當(dāng)然這都是后話。

來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發(fā)布了彩色的圖標(biāo)設(shè)計。圖標(biāo)所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。