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

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

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

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

1. 圖標(biāo)設(shè)計(jì)詳解：先對圖標(biāo)有個(gè)整體的認(rèn)識，了解圖標(biāo)總共有哪些類型和應(yīng)用場景。

2. 工具圖標(biāo)設(shè)計(jì)：最常見的工具型圖標(biāo)的相關(guān)規(guī)范，以及對應(yīng)的設(shè)計(jì)案例演示。

3. 裝飾圖標(biāo)設(shè)計(jì)：近年來使用越來越廣泛的視覺型圖標(biāo)設(shè)計(jì)認(rèn)識，以及對應(yīng)的講解。

4. 啟動圖標(biāo)設(shè)計(jì)：講解啟圖標(biāo)的相關(guān)規(guī)范，如何高效的進(jìn)行設(shè)計(jì)。

5. 圖標(biāo)應(yīng)用詳解：介紹在一個(gè)UI項(xiàng)目中，要應(yīng)用多少種圖標(biāo)規(guī)格，并如何設(shè)計(jì)出正確的圖標(biāo)

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

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

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

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

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

這就涉及對圖標(biāo)作用的探討了，為了節(jié)約篇幅，更快進(jìn)入大家最想看的重點(diǎn)干貨，我就不長篇大論從上古時(shí)期人類與圖形符號的糾葛開始寫了！就談對于圖形界面本身，為什么圖標(biāo)有這么重要的地位，沒它不行。有兩個(gè)原因，第一就是，文字雖然也是一種圖形符號，但相對于圖標(biāo)而言，文字實(shí)在太復(fù)雜了，在識別效率上有先天的劣勢！再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標(biāo)可以以一種更高效的方式，將我們想要傳遞的信息進(jìn)行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。

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

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

可以先劃分成三種大類：

    ? 工具圖標(biāo)

    ? 裝飾圖標(biāo)

    ? 啟動圖標(biāo)

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

1.1 工具圖標(biāo)

首先，我們要說的是工具圖標(biāo)。這是我們在日常討論中提及最頻繁的圖標(biāo)類型，即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識。作為最常見的圖標(biāo)類型，我們就不需要做太多的說明了。

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

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

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

下面我們把它們統(tǒng)一羅列出來。

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

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

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

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

1.2 裝飾圖標(biāo)

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

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

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

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

扁平風(fēng)格

扁平風(fēng)格的裝飾圖標(biāo)，通?？梢岳斫獬墒怯帽馄讲瀹嫷姆绞疆嫵鰜淼膱D標(biāo)，除了繼承扁平的純色填充特性以外，也相對于普通圖標(biāo)有更豐富的細(xì)節(jié)與趣味性。

擬物風(fēng)格

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

2.5D 風(fēng)格

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

炫彩漸變

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

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

實(shí)物貼圖

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

1.3 啟動圖標(biāo)

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

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

文字形式

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

圖標(biāo)形式

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

圖形形式

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

插畫形式

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

擬物形式

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

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

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

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

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

Sketch/XD

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

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

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

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

Adobe Photoshop

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

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

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

    ? 路徑創(chuàng)建和調(diào)整

    ? 鋼筆工具和錨點(diǎn)

    ? 路徑圖層

    ? 布爾運(yùn)算

    ? 圖層屬性

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

PS：最近在準(zhǔn)備一套 PS 教學(xué)，就會比較完整的講解一遍這些功能和對應(yīng)操作。

Adobe Illustrator

AI 也是 UI 設(shè)計(jì)必學(xué)的一款軟件，它的功能異常豐富，主要用來設(shè)計(jì)矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細(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)知識點(diǎn)以后，就可以為我們后續(xù)的學(xué)習(xí)提供良好的支持！

但是現(xiàn)在還不要迫不及待地打開軟件，在實(shí)際上手操作繪制圖標(biāo)之前，我想先講講規(guī)范。

是的，現(xiàn)在還不到實(shí)操的時(shí)候，規(guī)范之于畫圖標(biāo)，就好像音標(biāo)之于學(xué)英語，都是基礎(chǔ)中的基礎(chǔ)，也都是大家最容易忽略的東西。

如果對規(guī)范沒有一個(gè)清晰的認(rèn)知，那也是無法獨(dú)立畫好一套圖標(biāo)的！希望讀者千萬不要跳過這部分的講解直接去看演示了。

3.1 表意的準(zhǔn)確性

在第一部分中，我們知道圖標(biāo)的主要作用之一就是作為文字的替代品，具有明確的寓意。比如看見一個(gè)放大鏡，我們會當(dāng)成那是搜索，看見鑰匙或者鎖，我們就會理解成是密碼，比如下面這些圖標(biāo)，每一個(gè)指代的功能和寓意都是非常直白、清晰的。

表達(dá)的寓意清晰，是工具圖標(biāo)最基本的要求，否則它只會傳遞錯(cuò)誤的信息，造成用戶的困惑。

在常見的圖標(biāo)類型里，如通知、設(shè)置、用戶、分享之類的圖標(biāo)，對于任何手機(jī)用戶來說都沒有認(rèn)知和選擇壓力。但表意準(zhǔn)確麻煩的地方在于，一些非常規(guī)的寓意，極難用圖標(biāo)表現(xiàn)出來，這才是我們使用工具圖標(biāo)的首要麻煩。

比如下方這些圖標(biāo)，如果我不加上文字信息，大家能理解它們是什么嗎？

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507

那么，我們再把文字信息補(bǔ)充進(jìn)去，是不是就會覺得圖形挺貼合內(nèi)容的。

在這種案例中，我們要關(guān)注的就是，面對這樣不常見的內(nèi)容，設(shè)計(jì)師是怎么把圖形的創(chuàng)意和樣式想出來的！如果自己遇到一樣的問題怎么辦？

所以，除了知道每個(gè)工具圖標(biāo)都要表意準(zhǔn)確這樣 “正確的廢話” 以后，我們該看看如何通過合適的創(chuàng)意將圖標(biāo)樣式確定出來。

一般抽象的圖標(biāo)，難點(diǎn)在于寓意信息是非實(shí)體的，所以我們很難直接構(gòu)建對圖形樣式的聯(lián)想，所以首先我們得想辦法將抽象的內(nèi)容 “實(shí)體化”。也就是說，我們可以先把這個(gè)詞寫到紙上，然后把和這個(gè)抽象信息相關(guān)的所有實(shí)體物寫下來。

然后，我們可以挑選出某個(gè)合適的實(shí)物，以它作為原型開始繪制。如果對這些挑選出來的實(shí)物要以什么圖形表現(xiàn)還是沒概念，那就可以借助網(wǎng)上的圖標(biāo)素材網(wǎng)站，比如 iconfont、iconfinder 等，在搜索框中輸入這些詞語，通過別人的設(shè)計(jì)收獲靈感。

如果本身擁有比較好的手繪基礎(chǔ)或是平面基礎(chǔ)，也可以直接通過對照片進(jìn)行提煉的方式，設(shè)計(jì)出圖形內(nèi)容。

所以，在設(shè)計(jì)圖標(biāo)時(shí)符合表意準(zhǔn)確的概念，需要設(shè)計(jì)師不斷收集圖形，并提升對詞匯聯(lián)想的能力。很多圖標(biāo)圖形優(yōu)秀的創(chuàng)意，就是在這些基礎(chǔ)的積累之上逐漸形成的，而不是一撮而就。

3.2 圖標(biāo)的一致性

第二個(gè)規(guī)范，叫圖標(biāo)的一致性。即一個(gè)或一套圖標(biāo)中，應(yīng)該保持一致的細(xì)節(jié)。首先看看下面的反面案例。

在上面的案例中，不同圖標(biāo)間有很大的割裂感，完全不像處于同一套設(shè)計(jì)體系之下，這就是缺乏一致性的表現(xiàn)。這也是新手在設(shè)計(jì)一整套圖標(biāo)最大的難點(diǎn)，要讓所有圖標(biāo)保持視覺細(xì)節(jié)上的一致。

下面對工具圖標(biāo)要保持視覺一致性有哪些細(xì)節(jié)進(jìn)行詳細(xì)的說明。

類型一致

前面說過，工具圖標(biāo)有線性的、填充的類型，在正常的情況中，同一套圖標(biāo)應(yīng)該在類型中保持相同，如果使用了線性圖標(biāo)那么后續(xù)就不要設(shè)計(jì)填充以及混合的類型。

風(fēng)格一致

每一套圖標(biāo)都有自己的設(shè)計(jì)風(fēng)格，不同風(fēng)格在細(xì)節(jié)中都有不同的表現(xiàn)，需要讓這些風(fēng)格特征保持高度的統(tǒng)一，看看下面這些案例。

第一，為圖標(biāo)添加缺口的設(shè)計(jì)風(fēng)格，我們要保證這個(gè)缺口的大小是一致的，并且每一個(gè)圖標(biāo)中有且只有一個(gè)缺口，而不是靠感覺隨意添加。

第二，在設(shè)計(jì)一套偏圓潤可愛的設(shè)計(jì)風(fēng)格中，外輪廓使用了較大的圓角，那么我們盡可能保證圓角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。

第三，采用了填充色偏移的設(shè)計(jì)風(fēng)格中，首先要保證填充色的一致，并且偏移的距離和方向也要保持固定的規(guī)律，不能隨喜好任意制定。

透視一致

透視關(guān)系是在平面中對物體空間性質(zhì)的表現(xiàn)方式，當(dāng)我們應(yīng)用了透視時(shí)，物體就有了一定的 “立體感”。

透視的表現(xiàn)不是繪制圖標(biāo)時(shí)必須使用的風(fēng)格，但是如果我們在圖標(biāo)中應(yīng)用了透視，就要確保我們使用的視角是一致的。要極力避免同一套圖標(biāo)中既用了正視圖又包含了斜視圖。

粗細(xì)一致

在圖標(biāo)中我們會應(yīng)用到矩形線段或是描邊，我們要盡可能保證它們的粗細(xì)是一致的。

比如，在線性的設(shè)計(jì)中，路徑的描邊尺寸要保持一致，不能這個(gè)圖標(biāo)用 2pt，那個(gè)圖標(biāo)用 1pt。

在填充圖標(biāo)中，我們會在一個(gè)矩形或是圓形中增加矩形的鏤空，比如下圖的幾個(gè)圖標(biāo)，在這種情況下也要保證它們的粗細(xì)是一致的，而不是各不相同。

大小一致

大小一致，就是讓圖標(biāo)的視覺大小保持一致，而不是它們字面上的長寬屬性保持一致。

因?yàn)檫@是一個(gè)比較復(fù)雜的知識點(diǎn)，需要我們對幾何圖形的視覺差有比較完整的認(rèn)識，我會在下一部分做出介紹。這些和一致性有關(guān)的特征，是一套圖標(biāo)看起來專業(yè)、有整體感的必要條件。但是，在真實(shí)的設(shè)計(jì)場景中需要靈活變通。

如果有一些特定的圖標(biāo)，在保證了一致性的所有要求后卻極難被人理解，且找不到更好的設(shè)計(jì)方式，就可以差別對待。比如在一套線性的圖標(biāo)中，播放、快進(jìn)等圖標(biāo)往往都是填充類型的，這并不會造成視覺或是使用上的困擾。

3.3 幾何圖形的視覺差

幾何圖形的視覺差，是對于工具圖標(biāo)來說最重要的細(xì)節(jié)，在上一節(jié)圖標(biāo)一致性中已經(jīng)提及，它也是平面基礎(chǔ)理論中不可忽視的內(nèi)容，這個(gè)理論要解決一個(gè)核心的問題，即

怎么讓不同的圖形看上去一樣大？

可能有的讀者看到這里會輕蔑一笑，這有什么難的，通過軟件的參考線或者屬性設(shè)置，把它們的長寬設(shè)置成一樣不就完事了，比如下圖這樣。

嗯，畫起來輕輕松松，參數(shù)上完美無缺。但等等，怎么看上去這些圖形大小有點(diǎn)不一樣，為什么正方形看起來這么大，三角形看起來這么??？

恭喜你們，發(fā)現(xiàn)了這個(gè)問題的根源，不同幾何圖形帶給我們的視覺大小是不同的。而要解決這樣的問題，就要對它們的尺寸做出額外的調(diào)整，比如下圖這樣。

適當(dāng)調(diào)整完圓形和三角形以后，是不是覺得大小的感覺一致了？這就要牽扯一個(gè)更基礎(chǔ)的視覺規(guī)律，占據(jù)面積越大的圖形，給視覺的感受就越大，所以給我們感受越小的元素，就要放的越大。

并且，這個(gè)問題在一個(gè)圖形的內(nèi)部也會產(chǎn)生影響，比如知乎 APP 下面的點(diǎn)贊、反對按鈕，都有三角形圖標(biāo)對吧，但圖形其實(shí)對于外部舉行是非居中的，我們看看下面的演示。

如果一個(gè)圖形其中一部分面積遠(yuǎn)大于另一部分，那么就會讓這個(gè)圖形的重心產(chǎn)生偏移，必須要往較小的部分的方向移動才能產(chǎn)生平衡。

所以，在設(shè)計(jì)一整套的應(yīng)用中，如果沒有對這個(gè)理論的理解，只定義一個(gè)矩形出來，把所有圖形的尺寸于矩形對齊，那么最終看到的圖標(biāo)效果一定是極度不平衡的。

3.4 工具圖標(biāo)的柵格

其實(shí)，針對圖標(biāo)的規(guī)范，新人第一個(gè)想到的應(yīng)該就是參考線了，也就是所謂的柵格模版。但之所以放第二個(gè)，是因?yàn)楣ぞ邎D標(biāo)的柵格規(guī)范，是根據(jù)幾何的視覺差特性衍生出來的，而不像后面會提到的應(yīng)用圖標(biāo)由官方提供出來。

我們先簡單看看，常見的工具圖標(biāo)柵格是什么樣的。

里面包含了正方形、長方形、圓形對不對，那我們把它們分別羅列出來看看。是不是就發(fā)現(xiàn)這些圖形的視覺尺寸是非常接近的？然后再通過這樣的尺寸設(shè)計(jì)對應(yīng)的圖形，也就看起來都一樣大。

所以，應(yīng)用圖標(biāo)的柵格系統(tǒng)對于圖標(biāo)的設(shè)計(jì)來說，是一個(gè)用來應(yīng)對幾何圖形視覺差的“參照物”。

之所以要說參照物，原因在于，一套圖標(biāo)，不會只存在這幾種圖形的樣式，還有很多千奇百怪的形狀，但大體上我們可以識別出來它的類似輪廓或者重心方向，于是就可以通過參照圖形來判斷我們設(shè)計(jì)出來的圖形尺寸是否符合標(biāo)準(zhǔn)。

如果設(shè)計(jì)圖形和參照圖形的類似，那么尺寸就不能大于參照圖形，如果設(shè)計(jì)圖形的寬大于參照圖，那么高就要小于參照圖，反之亦然。如果圖形的重心有偏移，那就要往重心偏移的反方向移動，比如搜索按鈕，Wifi 圖標(biāo)等。

最后，說說柵格系統(tǒng)的畫法，和大家想象的不一樣，想要畫一套圖標(biāo)，柵格系統(tǒng)是我們自己畫出來的，不是到網(wǎng)上下載下來的，所以怎么畫也是這個(gè)知識的重點(diǎn)。

如何繪制圖標(biāo)柵格系統(tǒng)

如果我們定義一套 28pt（如果看不懂可以當(dāng)成 28px） 的圖標(biāo)，那么我們首先要畫一個(gè) 28pt 的正方形，然后確定一個(gè) 2-4pt 的內(nèi)邊距，正所謂四邊留一線，日后好相見。

然后就要開始繪制其中正方形和圓形，正方形通常在整個(gè)圖標(biāo)尺寸 1/2 的比例，可以使用 14 或 16 的偶數(shù) （為了可以居中）。然后再確定圓形的尺寸，圓肯定比正方形大 2-4 pt，于是就得到下方的圖形。

之后，我們再確定橫豎長方形的尺寸，可以直接頂?shù)絻?nèi)邊距的邊緣。它的尺寸不是通過數(shù)值計(jì)算的，而是要我們先畫出來，把它們和前面的圓、正方形置于一條水平線上，調(diào)整出一個(gè)平衡的視覺尺寸，再和并進(jìn)柵格系統(tǒng)中，就完成了柵格系統(tǒng)的繪制，如下圖的案例。

這一步也旨在檢查我們的參考線系統(tǒng)是否在基礎(chǔ)結(jié)構(gòu)上經(jīng)得起考驗(yàn)，是非常關(guān)鍵的一步。因?yàn)椴煌叽绲膱D標(biāo)中，參考線系統(tǒng)都是有區(qū)別的，我們不能直接按一個(gè)固定的比例來設(shè)置，要根據(jù)實(shí)際場景做判斷。

當(dāng)然，為了進(jìn)一步方便大家的學(xué)習(xí)，我特意準(zhǔn)備了一套現(xiàn)成的柵格素材，包含 16、24、28、32、36、48 等六個(gè)尺寸。大家可以進(jìn)入我的主頁關(guān)注公眾號并回復(fù) “圖標(biāo)素材” 獲取。

3.5 像素對齊

在柵格的繪制中，細(xì)心的讀者肯定發(fā)現(xiàn)了幾個(gè)關(guān)鍵字，“對齊”、“偶數(shù)”，這就是在這一部分要提及的內(nèi)容。關(guān)于顯示器的倍率問題是 UI 基礎(chǔ)知識點(diǎn)之一，可能有的同學(xué)不太了解，不過沒關(guān)系，直接看下面的內(nèi)容即可。

我們都知道像素是屏幕顯示中的最小單位，一個(gè)像素只能顯示一種顏色。小時(shí)候玩過的 GBA、FC 游戲機(jī)，都是通過像素畫的形式呈現(xiàn)，人物鋸齒是無法避免的。

而隨著技術(shù)發(fā)展，像素密度是降低了，但如果依舊是按過去這種一個(gè)蘿卜一個(gè)坑的方式顯示內(nèi)容，那鋸齒感無論如何是無法消除的。于是，開發(fā)了次像素渲染（Subpixel Rendering）的技術(shù)。一個(gè)在顯示器中讓我們覺得平滑的圓，一直放大，就可以發(fā)現(xiàn)它的周邊充滿了飽和度較低的其它方塊色彩。

這項(xiàng)技術(shù)，讓像素可以用特有的方式來顯示非完整的色塊，即盡可能還原我們對元素定義的小數(shù)點(diǎn)。但為什么我們還要提這個(gè)概念呢？

因?yàn)楣ぞ叩膱D標(biāo)太小了，而且 UI 的元素對精細(xì)和準(zhǔn)確度的要求都不低，如果我們沒有盡可能滿足像素對齊的要求，那么就可能導(dǎo)致元素邊緣的模糊。

所以要滿足像素對齊的要求，就要符合元素本身的尺寸為整數(shù)、描邊為整數(shù)、XY 軸坐標(biāo)為整數(shù)的特性。

AI 中的像素對齊設(shè)置

在 AI 中，我們可以通過兩個(gè)設(shè)定來查看和保證像素對齊，即網(wǎng)格的設(shè)置顯示，以及對齊到點(diǎn)的設(shè)置。

像素的對齊主要表現(xiàn)在橫線和豎線上，雖然現(xiàn)在手機(jī)顯示精度越來越高，但并不意味著我們可以無視像素對齊的規(guī)律！在線性圖標(biāo)中，類似對于 1pt 或者 2pt 描邊的應(yīng)用，覺得不是太細(xì)就是太粗，可以用 1.5pt 的數(shù)值（1.5 pt 在 2x 中就是 3px），但切記不要出現(xiàn)類似 1.23、2.16、3.46 這種小數(shù)。

像素對齊是一個(gè)專業(yè) UI 設(shè)計(jì)師對于極致追求的表現(xiàn)之一，是每一個(gè)一線大廠 UI 設(shè)計(jì)師的基本職能，所以，想要沖刺更高的段位，就不要忽視這個(gè)規(guī)范的使用。

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

    ? 知識點(diǎn)1：在 UI 的界面中，圖標(biāo)的主要作用是用來高效的傳遞信息，以及起到美化界面的作用。

    ? 知識點(diǎn)2：UI 會涉及的圖標(biāo)類型主要有三種，工具圖標(biāo)、裝飾圖標(biāo)、應(yīng)用圖標(biāo)。

    ? 知識點(diǎn)3：工具圖標(biāo)，是界面中用來傳遞信息的圖形符號，主要包含線性、面性、混合三種設(shè)計(jì)風(fēng)格。

    ? 知識點(diǎn)4：裝飾圖標(biāo)，是界面中用來提升視覺體驗(yàn)的圖形，主要包含扁平、擬物、2.5D、炫彩漸變等風(fēng)格。

    ? 知識點(diǎn)5：應(yīng)用圖標(biāo)，是用來啟動應(yīng)用的圖標(biāo)，主要包含文字、圖標(biāo)、圖形、插畫、擬物等設(shè)計(jì)形式。

    ? 知識點(diǎn)6：學(xué)習(xí)繪制圖標(biāo)，優(yōu)先學(xué)習(xí) PS、AI 的路徑相關(guān)功能，而不是 Sketch 和 XD。

    ? 知識點(diǎn)7：圖標(biāo)首先要表意準(zhǔn)確，能被用戶識別并契合想要表達(dá)的寓意。

    ? 知識點(diǎn)8：設(shè)計(jì)整套圖標(biāo)的時(shí)候要符合一致性原則，包含類型、風(fēng)格、粗細(xì)、透視、大小等特征。

    ? 知識點(diǎn)9：不同的幾何圖形會打給我們不同的大小視感，不能只看元素的參數(shù)。

    ? 知識點(diǎn)10：我們根據(jù)視覺差的方式定義出柵格系統(tǒng)，作為圖標(biāo)尺寸設(shè)定的重要參考。

 藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司