在 UI 的設(shè)計(jì)體系中，圖標(biāo)是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計(jì)的必備條件。

網(wǎng)上現(xiàn)存不少關(guān)于圖標(biāo)繪制的文章和教學(xué)，但不是太籠統(tǒng)，就是太片面。即使看了很多這種碎片化的知識(shí)，也很難在我們的認(rèn)知中對(duì)它有比較全面、系統(tǒng)的認(rèn)識(shí)，所以大多數(shù)初級(jí)的 UI設(shè)計(jì)師，始終畫不好圖標(biāo)。

針對(duì)這個(gè)問題，我希望用一篇長(zhǎng)文來(lái)講清楚圖標(biāo)設(shè)計(jì)的所有要點(diǎn)和具體的設(shè)計(jì)方法，讓所有設(shè)計(jì)新人更快地上手圖標(biāo)設(shè)計(jì)。

本文共分為5個(gè)部分：

• 圖標(biāo)簡(jiǎn)介：先對(duì)圖標(biāo)有個(gè)整體的認(rèn)識(shí)，了解圖標(biāo)總共有哪些類型和應(yīng)用場(chǎng)景。
• 工具圖標(biāo)：最常見的工具型圖標(biāo)的相關(guān)規(guī)范，以及對(duì)應(yīng)的設(shè)計(jì)案例演示。
• 裝飾圖標(biāo)：近年來(lái)使用越來(lái)越廣泛的視覺型圖標(biāo)設(shè)計(jì)認(rèn)識(shí)，以及對(duì)應(yīng)的講解。
• 啟動(dòng)圖標(biāo)：講解啟動(dòng)圖標(biāo)的相關(guān)規(guī)范，如何高效的進(jìn)行設(shè)計(jì)。
• 應(yīng)用案例：介紹在一個(gè) UI項(xiàng)目中，要應(yīng)用多少種圖標(biāo)規(guī)格，如何設(shè)計(jì)出正確的圖標(biāo)。

圖標(biāo)的基本認(rèn)識(shí)

圖標(biāo)，是一種圖形化的標(biāo)識(shí)，它有廣義和狹義兩種概念，廣義指的是所有現(xiàn)實(shí)中有明確指向含義的圖形符號(hào)，狹義主要指在計(jì)算機(jī)設(shè)備界面中的圖形符號(hào)，有非常大的覆蓋范圍。

對(duì)于 UI設(shè)計(jì)師而言，我們主要針對(duì)的就是狹義的概念，它是 UI 界面視覺組成的關(guān)鍵元素之一。

在當(dāng)下最常見的扁平化設(shè)計(jì)風(fēng)格中，界面的實(shí)際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標(biāo)。

△ 由圖片、文字、幾何、圖標(biāo)組成的界面

可以說，圖片、文字、幾何圖形的運(yùn)用，都只用到排版的技巧，而圖標(biāo)，是 UI設(shè)計(jì)中除了插畫元素以外唯一需要我們「繪制」、「創(chuàng)作」的元素，一涉及到這兩件事，難度就直線上升了。

本來(lái)往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來(lái)了，比如 Clear APP，不僅工作量少，而且還符合極簡(jiǎn)原則，為什么還要吃力不討好的設(shè)計(jì)圖標(biāo)？

△ Clear APP 的截圖

這就涉及圖標(biāo)作用的探討了，為了節(jié)約篇幅，更快進(jìn)入大家最想看的重點(diǎn)干貨，我就不長(zhǎng)篇大論從上古時(shí)期人類與圖形符號(hào)的糾葛開始寫了，就談對(duì)于圖形界面本身，為什么圖標(biāo)有這么重要的地位，沒它不行？

有兩個(gè)原因，第一文字雖然也是一種圖形符號(hào)，但相對(duì)于圖標(biāo)而言，文字實(shí)在太復(fù)雜了，在識(shí)別效率上有先天的劣勢(shì)。再者，不同的語(yǔ)言，文字的長(zhǎng)度也不同，如果換成阿拉伯語(yǔ)或者俄羅斯語(yǔ)，或許一行還裝不下所有文字。圖標(biāo)可以以一種更高效的方式，將我們想要傳遞的信息進(jìn)行濃縮，不僅易于識(shí)別，也能讓界面更簡(jiǎn)潔，利于排版，比如下方案例。

△ 應(yīng)用文字替換了圖標(biāo)的對(duì)比

第二點(diǎn)，就是關(guān)于視覺的觀賞性。有些頁(yè)面中，如果把圖標(biāo)去掉了，也絲毫不會(huì)影響我們的操作效率，以及對(duì)內(nèi)容的理解。但沒有圖標(biāo)，缺少這些點(diǎn)綴，我們就會(huì)覺得這個(gè)頁(yè)面看起來(lái)太枯燥了，不得勁，最好的例子就是應(yīng)用的設(shè)置頁(yè)了，見下方案例。

△ 設(shè)置頁(yè)有圖標(biāo)和沒有圖標(biāo)的對(duì)比

既然知道了圖標(biāo)的作用和重要性，那么接下來(lái)，就要進(jìn)一步了解在工作中我們要設(shè)計(jì)哪些圖標(biāo)。

可以先劃分成三種大類：

• 工具圖標(biāo)
• 裝飾圖標(biāo)
• 啟動(dòng)圖標(biāo)

下面，我們將對(duì)它們分別進(jìn)行介紹，以及展示相關(guān)的設(shè)計(jì)類型，方便讀者在開始學(xué)習(xí)具體設(shè)計(jì)前，對(duì) UI設(shè)計(jì)會(huì)創(chuàng)作的圖標(biāo)有更全面的認(rèn)識(shí)。

工具圖標(biāo)

首先，我們要說的是工具圖標(biāo)。這是我們?cè)谌粘Ｓ懻撝刑峒白铑l繁的圖標(biāo)類型，即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識(shí)。作為最常見的圖標(biāo)類型，我們就不需要做太多的說明了。

△ 常見的工具圖標(biāo)

雖然理解起來(lái)容易，但是它所包含的設(shè)計(jì)樣式卻并不少，可以把它們歸納成線性、面性兩個(gè)大類，再分別進(jìn)行細(xì)分。

1. 風(fēng)格1：線性風(fēng)格

線性圖標(biāo)，即圖形是通過線條的描邊輪廓勾勒出來(lái)的。多數(shù)人對(duì)它樣式認(rèn)識(shí)的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓，比如上圖案例，線性圖標(biāo)的創(chuàng)作空間看似不多，但實(shí)際上有非常多的調(diào)整空間。

下面我們把它們羅列出來(lái)。

△ 線性風(fēng)格的工具圖標(biāo)

2. 風(fēng)格2：面性風(fēng)格

面性圖標(biāo)，即使用對(duì)內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣，在這類圖標(biāo)中，也不是只能應(yīng)用純色的方式進(jìn)行填充，還有非常多的視覺表現(xiàn)類型。

△ 面性風(fēng)格的工具圖標(biāo)

3. 風(fēng)格3：混合風(fēng)格

當(dāng)然，在設(shè)計(jì)圖標(biāo)類型的時(shí)候，也不一定非線性和面性不可，有一些熱衷創(chuàng)造和嘗試的設(shè)計(jì)師，還創(chuàng)作出了混合型的圖標(biāo)，既有線性描邊的輪廓，又有色彩填充的區(qū)域。常見的樣式類型如下：

△ 混合風(fēng)格的工具圖標(biāo)

裝飾圖標(biāo)

和工具圖標(biāo)比起來(lái)，裝飾圖標(biāo)的視覺性作用更多。對(duì)于一些比較復(fù)雜的應(yīng)用來(lái)說，過分的簡(jiǎn)約并不能彌補(bǔ)信息過多的信噪問題，我們要通過豐富視覺體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性，減少一屏內(nèi)顯示內(nèi)容的數(shù)量。

比如在分類列表里，是可以只使用線框和文字把大量?jī)?nèi)容濃縮到一屏以內(nèi)，但實(shí)際瀏覽效率并不會(huì)增加，而且并不美觀。

△ 裝飾圖標(biāo)在識(shí)別性上的作用

還有就是國(guó)內(nèi)的界面設(shè)計(jì)環(huán)境，會(huì)根據(jù)運(yùn)營(yíng)需求設(shè)計(jì)進(jìn)行特殊化處理，尤其在電商領(lǐng)域，首屏的圖標(biāo)都會(huì)改成首頁(yè)風(fēng)格的樣式，增加活動(dòng)氛圍。

△ 節(jié)日活動(dòng)中的裝飾圖標(biāo)

裝飾性的圖標(biāo)設(shè)計(jì)，雖然沒有明確的規(guī)范該怎么做，效果怎么好怎么來(lái)，但最常見的類型有四種，下面分別進(jìn)行介紹。

1. 扁平風(fēng)格

扁平風(fēng)格的裝飾圖標(biāo)，通常可以理解成是用扁平插畫的方式畫出來(lái)的圖標(biāo)，除了繼承扁平的純色填充特性以外，也比普通圖標(biāo)有更豐富的細(xì)節(jié)與趣味性。

△ 扁平風(fēng)格的裝飾圖標(biāo)

2. 擬物風(fēng)格

擬物風(fēng)格的圖標(biāo)現(xiàn)在出現(xiàn)的頻率越來(lái)越高，集中在大型的運(yùn)營(yíng)活動(dòng)中，通常這些活動(dòng)會(huì)通過擬物的方式將頭部設(shè)計(jì)成有故事性的場(chǎng)景，所以自然頂部的相關(guān)圖標(biāo)使用擬物的設(shè)計(jì)形式會(huì)更貼合。

△ 擬物風(fēng)格的裝飾圖標(biāo)

3. 2.5D風(fēng)格

2.5D是一種偏卡通、像素畫風(fēng)格的扁平設(shè)計(jì)類型，在一些非必要的設(shè)計(jì)環(huán)境中，使用2.5D會(huì)比較容易搭配主流的界面設(shè)計(jì)風(fēng)格，有更強(qiáng)的趣味性和層次感。

△ 2.5D風(fēng)格的裝飾圖標(biāo)

4. 炫彩漸變

這是一個(gè)拗口的原創(chuàng)名詞，找不到更合適的形容，還是覺得浮夸點(diǎn)符合它的氣質(zhì)。這種圖標(biāo)，就是通過一系列非常激進(jìn)的漸變和撞色實(shí)現(xiàn)，通常還會(huì)使用彩色的陰影。

使用這樣圖標(biāo)的區(qū)域，通常都會(huì)呈現(xiàn)出一副五彩斑斕的景象，只有在內(nèi)容非常豐富且用戶偏向年輕化的產(chǎn)品中可以使用，是一種非常難駕馭的設(shè)計(jì)風(fēng)格。

△ 炫彩漸變風(fēng)格的裝飾圖標(biāo)

5. 實(shí)物貼圖

最后一種，就是采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來(lái)的，但想想還是放進(jìn)來(lái)合適。因?yàn)檫@種圖標(biāo)的出現(xiàn)頻率非常高，有必要在后面掌握它的做法。

△ 應(yīng)用攝影實(shí)物的裝飾圖標(biāo)

啟動(dòng)圖標(biāo)

最后，就要說說啟動(dòng)圖標(biāo)了。啟動(dòng)圖標(biāo)的設(shè)計(jì)比前面兩種類型的圖標(biāo)說起來(lái)更難，因?yàn)樗鼘?shí)際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。

除了掌握必要的規(guī)范以外，啟動(dòng)圖標(biāo)的主體物設(shè)計(jì)就是 LOGO 的設(shè)計(jì)，已經(jīng)超出了圖標(biāo)繪制本身的知識(shí)點(diǎn)。所以，在后面我會(huì)針對(duì)這個(gè)問題講解一些比較套路易懂的設(shè)計(jì)方案供新手學(xué)習(xí)，這里我們先來(lái)了解一下它有哪幾種設(shè)計(jì)形式。

1. 文字形式

使用了文字作為圖標(biāo)主體物的類型，通常是這類應(yīng)用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來(lái)。

△ 文字類的啟動(dòng)圖標(biāo)

2. 圖標(biāo)形式

對(duì)于一些偏工具，適合用簡(jiǎn)單圖形傳達(dá)應(yīng)用功能的啟動(dòng)圖標(biāo)，就會(huì)采取使用工具圖標(biāo)的方式設(shè)計(jì)。

△ 圖標(biāo)類的啟動(dòng)圖標(biāo)

3. 圖形圖標(biāo)

圖形形式看起來(lái)和圖標(biāo)形式很接近，但實(shí)際上完全不屬于同一類型，之所以它不是圖標(biāo)，是因?yàn)檫@類圖標(biāo)的主體圖形是一種經(jīng)過高度抽象化的標(biāo)識(shí)，傳達(dá)的是品牌性，而不是圖形的含義。

△ 圖形類的啟動(dòng)圖標(biāo)

4. 插畫形式

對(duì)于一些比較純粹的應(yīng)用，如讀本、漫畫、幼兒類應(yīng)用，就熱衷于采用卡通形象作為圖標(biāo)的主體進(jìn)行設(shè)計(jì)。

△ 插畫類的啟動(dòng)圖標(biāo)

5. 擬物形式

雖然現(xiàn)在扁平化的設(shè)計(jì)占據(jù)主導(dǎo)地位，但依舊有很多應(yīng)用的啟動(dòng)圖標(biāo)是通過擬物的方式設(shè)計(jì)的。因?yàn)閷?duì)于這些應(yīng)用來(lái)說，擬物設(shè)計(jì)所傳遞的信息往往更直觀和準(zhǔn)確。

△ 擬物類的啟動(dòng)圖標(biāo)

當(dāng)然，還有其它的數(shù)之不盡的啟動(dòng)圖標(biāo)設(shè)計(jì)方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了。

前面介紹的三種圖標(biāo)，就是今后在進(jìn)入 UI 行業(yè)設(shè)計(jì)的內(nèi)容。雖然圖標(biāo)看起來(lái)簡(jiǎn)單，但可以玩出的花樣不少。除了正確設(shè)計(jì)出圖標(biāo)以外，高低階的 UI設(shè)計(jì)師之間的區(qū)別也包含圖標(biāo)設(shè)計(jì)類型掌握的多寡。

所以，在開始學(xué)習(xí)前，不要將設(shè)計(jì)圖標(biāo)的目標(biāo)局限在最簡(jiǎn)單的圖形繪制上，還有很多有趣的設(shè)計(jì)形式等待你們?nèi)L試。

學(xué)習(xí)圖標(biāo)所需的軟件

了解了圖標(biāo)的類型，就要開始了解做出這些圖標(biāo)應(yīng)該使用哪些軟件了。通常，UI 主要使用的設(shè)計(jì)軟件包含 PS、AI、Sketch、XD四款，理論上，它們都包含了圖標(biāo)繪制的功能，如果我直接告訴大家去精通這4款軟件那么畫圖標(biāo)就一點(diǎn)難度都沒有了，這是非常不負(fù)責(zé)任的，所以為了對(duì)新人更友好一點(diǎn)（如果已經(jīng)全部精通了，就直接略過），我會(huì)分析一遍這四款軟件對(duì)于圖標(biāo)設(shè)計(jì)的優(yōu)劣，以及需要掌握的部分。

1. Sketch / XD

這兩款軟件是我們?cè)O(shè)計(jì) UI 界面的主力。但大家一定要記得，它們主要的功能是用來(lái)完成 UI 界面元素的排版，而不是創(chuàng)作和繪圖。

雖然它們都包含路徑、鋼筆、布爾運(yùn)算等功能（Sketch 相對(duì) XD 更完善一點(diǎn)），想要繪制一些非?；A(chǔ)的線性或面性圖標(biāo)時(shí)沒有問題，但只要涉及到比較復(fù)雜的圖形，往往就束手無(wú)策。

所以，我建議所有學(xué)習(xí) UI 的新人，都不要從這兩個(gè)軟件中入手，而是先掌握 PS 和 AI，后面想要快速實(shí)現(xiàn)一些簡(jiǎn)單的圖標(biāo)時(shí)，自然懂得如何使用 Sketch 和 XD。

可以說，PS 和 AI 的應(yīng)用決定了我們圖標(biāo)設(shè)計(jì)的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。

2. Photoshop

PS 是一款無(wú)論什么東西都設(shè)計(jì)得出來(lái)的設(shè)計(jì)軟件，但是，它本質(zhì)上是一款「位圖軟件」。后續(xù)的文章中會(huì)提及，在界面中采用矢量格式的圖標(biāo)是最理想的，而 PS 針對(duì)矢量的操作并不便捷，比如將矢量圖層復(fù)制到其它軟件中。

實(shí)際項(xiàng)目中，我們會(huì)用 PS 設(shè)計(jì)一些視覺表現(xiàn)相對(duì)復(fù)雜的圖標(biāo)，例如啟動(dòng)圖標(biāo)、擬物圖標(biāo)、實(shí)物圖標(biāo)等等。

繪制圖標(biāo)需要用到的 PS 功能并不太多，需要在前期學(xué)習(xí)這個(gè)軟件的過程中加以篩選，重點(diǎn)是以下知識(shí)點(diǎn)：

• 路徑創(chuàng)建和調(diào)整
• 鋼筆工具和錨點(diǎn)
• 路徑圖層
• 布爾運(yùn)算
• 圖層屬性

雖然 PS 在實(shí)際項(xiàng)目中是用來(lái)畫復(fù)雜的圖標(biāo)，但并不妨礙我們使用 PS 從最基礎(chǔ)的圖標(biāo)開始畫起，因?yàn)橄胍炀氄莆丈戏降闹R(shí)點(diǎn)，簡(jiǎn)易的工具圖標(biāo)是最好的磨刀石，之后再學(xué)習(xí) AI 的操作，就可以更快的上手。

3. Illastrator

AI 也是 UI 設(shè)計(jì)必學(xué)的一款軟件，它的功能異常豐富，主要用來(lái)設(shè)計(jì)矢量圖形。對(duì)比 PS，它有更好的矢量操作支持，對(duì)于路徑細(xì)節(jié)的調(diào)整上，是最全面最細(xì)膩的軟件，并且 AI 中的圖形還可以直接復(fù)制粘貼到其它應(yīng)用的畫布中。

如果掌握了上方提及的 PS 基礎(chǔ)，那么學(xué)習(xí) AI 也就輕松了不少，其中，AI 設(shè)計(jì)圖標(biāo)中有三個(gè)特殊的功能是需要重點(diǎn)掌握和學(xué)習(xí)的：

• 形狀生成器
• 輪廓化描邊
• 路徑查找器

花幾個(gè)晚上，掌握了 PS 和 AI 的相關(guān)知識(shí)點(diǎn)以后，就為我們后續(xù)的學(xué)習(xí)提供了技術(shù)支持，可以進(jìn)入下一階段了。

結(jié)尾

這是圖標(biāo)系列文章的第一篇，信息量不算少。所以我們?cè)诮Y(jié)尾再總結(jié)一次，方便大家記憶。

• 知識(shí)點(diǎn)一：在 UI 的界面中，圖標(biāo)的主要作用是用來(lái)高效地傳遞信息，以及起到美化界面的作用。
• 知識(shí)點(diǎn)二：UI 會(huì)涉及的圖標(biāo)類型主要有三種，工具圖標(biāo)、裝飾圖標(biāo)、應(yīng)用圖標(biāo)。
• 知識(shí)點(diǎn)三：工具圖標(biāo)，是界面中用來(lái)傳遞信息的圖形符號(hào)，主要包含線性、面性、混合三種設(shè)計(jì)風(fēng)格。
• 知識(shí)點(diǎn)四：裝飾圖標(biāo)，是界面中用來(lái)提升視覺體驗(yàn)的圖形，主要包含扁平、擬物、2.5D、漸變炫彩等設(shè)計(jì)風(fēng)格。
• 知識(shí)點(diǎn)五：應(yīng)用圖標(biāo)，是用來(lái)啟動(dòng)應(yīng)用的圖標(biāo)，主要包含文字、圖標(biāo)、圖形、插畫、擬物等設(shè)計(jì)形式。
• 知識(shí)點(diǎn)六：學(xué)習(xí)繪制圖標(biāo)，優(yōu)先學(xué)習(xí) PS、AI 的路徑相關(guān)功能，而不是 Sketch 和 XD。

文章來(lái)源：優(yōu)設(shè)網(wǎng)     作者：超人的電話亭

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)