編輯導(dǎo)語：在頁面應(yīng)用中，圖標(biāo)是常見的視覺選項。合理的圖標(biāo)設(shè)計有助于引導(dǎo)用戶點擊、操作，提升用戶體驗，或是給用戶留下相對較好的產(chǎn)品印象。本篇文章里，作者分析總結(jié)了圖標(biāo)的屬性，以及線性圖標(biāo)與面性圖標(biāo)的分類，一起來看一下。

圖標(biāo)設(shè)計詳解的第一篇，講述了什么是圖標(biāo)、圖標(biāo)的優(yōu)勢、圖標(biāo)的歷史以及圖標(biāo)的表意分類，可以點擊我的個人主頁文章《圖標(biāo)設(shè)計詳解（一）——圖標(biāo)初識》進行回顧。

圖標(biāo)設(shè)計詳解第二篇帶你了解圖標(biāo)的屬性，線性圖標(biāo)、面性圖標(biāo)的分類、大小規(guī)范、keyline線的使用等等。

進行繪制時，什么時候使用線性圖標(biāo)，什么時候使用面性圖標(biāo)？為什么圖標(biāo)的物理大小一樣，但總是視覺不平衡？設(shè)計們常說的圖標(biāo)keyline線是什么？到底怎么使用？

本篇將帶你了解圖標(biāo)的各種屬性、圖標(biāo)的繪制知識，以及推薦一些我喜歡的圖標(biāo)設(shè)計師。

一、圖標(biāo)的設(shè)計屬性

我們經(jīng)?？吹綀D標(biāo)有很多種設(shè)計風(fēng)格，比如：單色圖標(biāo)、斷點圖標(biāo)、雙色圖標(biāo)、等軸測圖標(biāo)，或者最近流行的毛玻璃質(zhì)感圖標(biāo)以及新擬態(tài)。

但將所有圖標(biāo)進行拆解后，會發(fā)現(xiàn)圖標(biāo)的設(shè)計過程為定型——顏色——質(zhì)感——陰影，圖標(biāo)最終的表現(xiàn)形式是線性圖標(biāo)、面性圖標(biāo)或線面結(jié)合圖標(biāo)，再賦予不同的設(shè)計細(xì)節(jié)，形成了不同風(fēng)格的圖標(biāo)樣式。

1. 線性圖標(biāo)

線性圖標(biāo)，圖形是通過線條進行視覺表現(xiàn)，線性圖標(biāo)可以通過線條的粗細(xì)、線條的顏色、險段是否缺口等創(chuàng)造出多種設(shè)計風(fēng)格。

現(xiàn)在很多產(chǎn)品圖標(biāo)還是扁平設(shè)計風(fēng)格居多，底部導(dǎo)航的未選中狀態(tài)、個人中心圖標(biāo)以及頁面中的功能性圖標(biāo)都會使用線性風(fēng)格圖標(biāo)。

1）線條粗細(xì)

線性圖標(biāo)由于線條的粗細(xì)不同會使圖標(biāo)產(chǎn)生不同的力度和重量感。

粗線條由于視覺面積大，會顯的圖標(biāo)厚重、粗糙，也更吸引用戶的注意力。細(xì)線條則會顯得優(yōu)美、精致。

有些應(yīng)用也會使用圖標(biāo)線條的粗細(xì)對比來顯示選中與未選中狀態(tài)。

甚至?xí)捎么旨?xì)結(jié)合的手法來增加圖標(biāo)的設(shè)計細(xì)節(jié)，一般采用外粗內(nèi)細(xì)的雙線條設(shè)計表現(xiàn)形式。

但當(dāng)圖標(biāo)本身線條就比較多時，再增加線條的粗細(xì)對比設(shè)計手法，會使得原本就復(fù)雜的圖標(biāo)顯得冗余。

2）線條連接

常見的線條圖標(biāo)是連續(xù)、封閉的線條。但為了追求不同的設(shè)計形式，設(shè)計師會有意識地將圖標(biāo)連接的某部分進行斷開連接，由于視覺慣性，用戶會自行腦補斷開的部分，形成另一種美感。

在應(yīng)用中除了應(yīng)用在底部導(dǎo)航欄以外，功能性圖標(biāo)也經(jīng)常使用這種風(fēng)格的線型圖標(biāo)，比如瓜子二手車。

3）顏色模式

線條的顏色方式一般有單色、雙色、漸變3種形式。

單色以及雙色圖標(biāo)比較常見在底部導(dǎo)航或個人中心功能入口圖標(biāo)，其中一些應(yīng)用會將品牌色作為強調(diào)色在雙色圖標(biāo)中使用來強調(diào)品牌感。

漸變色當(dāng)線條過細(xì)時，視覺變化不太明顯。因此線性圖標(biāo)中不太常見，面性圖標(biāo)中會經(jīng)常使用漸變色的設(shè)計風(fēng)格。

2. 面性圖標(biāo)

面性圖標(biāo)相對線性圖標(biāo)有更大的視覺面積，更能吸引用戶的注意力，因此設(shè)經(jīng)常出現(xiàn)在首頁第一屏功能入口的區(qū)域，或是底部導(dǎo)航的選中狀態(tài)。

另一方面，面性圖標(biāo)相對線性圖標(biāo)可以通過色彩的填充、多種形狀組合、圖標(biāo)質(zhì)感的刻畫、陰影等更多質(zhì)感疊加效果來增加圖標(biāo)的視覺表現(xiàn)，面性圖標(biāo)的視覺表現(xiàn)形式也更多樣。

1）面性圖標(biāo)

單色面性圖標(biāo)常見于底部導(dǎo)航欄、個人中心頁、詳情頁等，顏色會使用的品牌色來增加品牌歸屬感。

2）漸變圖標(biāo)

漸變圖標(biāo)相對單色圖標(biāo)有更多變化，設(shè)計中會使用同色系漸變或撞色漸變。

3）元素疊加

將兩個元素進行疊加設(shè)計，如下圖中淘票票應(yīng)用提取未選中狀態(tài)下的某個元素與圖標(biāo)的外形形狀進行疊加，或者類似看理想APP應(yīng)用的底部圖標(biāo)，使用圓形、三角、方形等無意義形狀進行疊加設(shè)計。

4）統(tǒng)一外型

我們常會看到將不同外形的面性圖標(biāo)放在統(tǒng)一形狀內(nèi)的設(shè)計方式，這類設(shè)計除了可以統(tǒng)一所有圖標(biāo)的外形，另一方面相對其他圖標(biāo)，完整大面積的顏色區(qū)域也更能吸引用戶的注意力，視覺感知也更重。

常見于應(yīng)用首頁上部的功能入口圖標(biāo)。但也有類似品玩應(yīng)用，在底部導(dǎo)航圖標(biāo)使用這種設(shè)計形式。

5）質(zhì)感圖標(biāo)

隨著現(xiàn)在手機屏幕分辨率越來越高，以及每年設(shè)計趨勢的改變，各家應(yīng)用為了做出設(shè)計差異性，圖標(biāo)一直是設(shè)計改版的重點優(yōu)化部分。

比如喜馬拉雅的功能圖標(biāo)使用了從去年年底就討論度極高的玻璃質(zhì)感表現(xiàn)形式。京東的功能圖標(biāo)則使用輕質(zhì)感圖標(biāo)形式，而類似螞蟻莊園簽到游戲的界面，為了迎合運營游戲話的使用場景，圖標(biāo)的質(zhì)感會更精致、偏游戲化。

設(shè)計師在進行圖標(biāo)設(shè)計時都希望能夠做出更多的設(shè)計感及差異性，每年流行的設(shè)計風(fēng)格就是設(shè)計師們會爭相嘗試的風(fēng)格，比如新擬物設(shè)計風(fēng)格、MBE設(shè)計風(fēng)格、等軸測風(fēng)格等。

但設(shè)計細(xì)節(jié)越多，也就意味著會有更多的視覺信息干擾，一定要牢記圖標(biāo)的最終目的是為了清晰地傳遞信息，不要本末倒置。

3. 線面結(jié)合圖標(biāo)

基于線性圖標(biāo)的線條粗細(xì)、顏色模式等等，面性圖標(biāo)的面積大小、顏色變化，設(shè)計出相互結(jié)合的線面圖標(biāo)、線條勾勒外型、內(nèi)部進行形狀填充或在線條外增加底部形狀等設(shè)計方式。設(shè)計師在設(shè)計的過程中，根據(jù)不同的產(chǎn)品特征、及使用場景，產(chǎn)生更多的設(shè)計變化。

4. 線性圖標(biāo) OR 面性圖標(biāo)

當(dāng)設(shè)計師拿到圖標(biāo)的設(shè)計需求時，首先會思考到底使用「線性圖標(biāo)」還是「面性圖標(biāo)」？

圖標(biāo)最重要的作用是快速傳遞信息，即圖標(biāo)的識別效率。

2014年《填充圖標(biāo)與輪廓圖標(biāo)：圖標(biāo)樣式對可用性的影響》論文中指出，在用戶對于圖標(biāo)的識別很大程度是對圖標(biāo)的某個明顯特征的辨識，比如對話圖標(biāo)的尾巴、設(shè)置圖標(biāo)的齒輪、鑰匙的齒輪等。

當(dāng)圖標(biāo)為線性時，這些特征更容易被識別到，而面性時這些特征則會被忽略掉。

因此當(dāng)圖標(biāo)的特征線條比較微妙且出現(xiàn)在形狀邊緣時，線性圖標(biāo)比面性圖標(biāo)更容易識別。

圖形的識別性是由形狀、顏色或其他元素決定的，因此在外形一樣的情況下，線性圖標(biāo)要比面性圖標(biāo)更吸引眼球，而面性圖標(biāo)其實是通過填充顏色吸引用戶的注意力。

比如淺灰的面性圖標(biāo)并沒有比線性圖標(biāo)更吸引用戶。

面性圖標(biāo)通過面積、色彩、質(zhì)感等相對于線性圖標(biāo)具備更強的視覺信息層級，更具引導(dǎo)性。

因此應(yīng)用圖標(biāo)的第一層級的使用場景，標(biāo)簽欄、導(dǎo)航欄、品類區(qū)會使用面性圖標(biāo)；第二層級使用場景，個人中心、分類、詳情頁則多為線性圖標(biāo)。

當(dāng)然這也不是絕對的，比如很多導(dǎo)航欄的未選中狀態(tài)也有使用線性圖標(biāo)的情況。

而線性圖標(biāo)也由于看起來更加精致、細(xì)膩，適合使用在精致簡潔的應(yīng)用或產(chǎn)品。

5. 圖角決定圖標(biāo)氣質(zhì)

圓角自身的圓形屬性會給人柔和、舒適，更加安全、親密的感覺。

同時由于人眼睛的生理構(gòu)造上的中央凹（視網(wǎng)膜中視覺最敏銳的區(qū)域）在處理其他形狀時需要涉及大腦中更多的“神經(jīng)影像工具”，圓形則不需要，因此相較于其他形狀人類的眼睛在識別圓角弧形的時候更容易。

因此社交、娛樂、直播、美食等圖標(biāo)多會使用圓角圖標(biāo)（面性圖標(biāo)講解里面已經(jīng)放了很多圓角圖標(biāo)，這里放一套我最近比較喜歡的一套圖標(biāo)）。

尖角則會給人一種尖銳、具有攻擊性的感覺，直角圖標(biāo)整體氣質(zhì)會比較硬朗商務(wù)，比如：得物、愛范兒。

6. 圖標(biāo)設(shè)計師推薦

我們在設(shè)計圖標(biāo)前需要找很多圖標(biāo)的設(shè)計風(fēng)格做為設(shè)計靈感，下面推薦幾個dribbble上很有名的圖標(biāo)師及團隊。

1）smartisan（團隊）

錘子圖標(biāo)設(shè)計圖標(biāo)大部分都是輕質(zhì)感風(fēng)格的圖標(biāo)，細(xì)節(jié)一如既往地讓人驚艷，第一篇圖標(biāo)的歷史中展示了很多錘子的圖標(biāo)，強烈建議自己查看網(wǎng)站原圖。

2）Anton Kuryatnikov

名字一如既往地難拼，設(shè)計風(fēng)格都是立體風(fēng)格圖標(biāo)，適合有特殊風(fēng)格需求的設(shè)計。

3）MVBen

質(zhì)感風(fēng)，好像好久沒上傳作品了，圖標(biāo)設(shè)計細(xì)節(jié)及風(fēng)格都是很厲害的設(shè)計師。

4）Nucleo（團隊）

專門做線性圖標(biāo)的團隊，團隊內(nèi)有3名成員，上傳的作品全是一整套的線形圖標(biāo)，一整套哦！

5）Prakhar Neel Sharma

設(shè)計的圖標(biāo)個人風(fēng)格很強烈，都是比較有個性圖標(biāo)設(shè)計，我個人最近很喜歡圖中那套黑紅的圖標(biāo)設(shè)計。

6）Yoga Perdana

有段時間國內(nèi)特別風(fēng)靡這種層疊式的啟動圖標(biāo)設(shè)計風(fēng)格。設(shè)計師發(fā)布的圖標(biāo)也都絕大部分是這個風(fēng)格，有相應(yīng)需求的同學(xué)可以自行查看。

7）OnionMath（團隊）

國內(nèi)洋蔥數(shù)學(xué)的設(shè)計團隊，設(shè)計風(fēng)格比較可愛都，K12教育可以參考。

8）Vitality Studio（團隊）

Vitality Studio團隊作品都是3D立體質(zhì)感的設(shè)計。2020年Big sur圖標(biāo)更新，Vitality Studio也跟著發(fā)布了一套蘋果桌面圖標(biāo)，但相對蘋果圖標(biāo)更立體與質(zhì)感。

在實際工作中，圖標(biāo)的設(shè)計其實是多種手法結(jié)合使用的，復(fù)雜程度越多，圖標(biāo)就會越繁復(fù)，視覺信息也越多，而當(dāng)圖標(biāo)縮小時，這些視覺信息反而會成為干擾。

那么圖標(biāo)在實際設(shè)計中的尺寸應(yīng)該是多大？傳說中的keyline線怎么使用？為什么明明我的圖標(biāo)大小一樣，但總感覺視覺上卻不統(tǒng)一？

下面我們來講講圖標(biāo)的尺寸。

二、圖標(biāo)的尺寸大小

圖標(biāo)的繪制過程中首先我們要確定所有圖標(biāo)繪制完成后在相應(yīng)的界面大小是合適的，相同使用場景下圖標(biāo)的視覺大小是一致的。

1. 圖標(biāo)大小

圖標(biāo)有16x16pt、24x24pt、32x32pt、48x48pt、64x64pt、128x128pt、512x512pt、1024x1024pt幾個尺寸。

其中App Store上架圖圖標(biāo)最大為1024，B端比較小的圖標(biāo)為16，其他根據(jù)對應(yīng)的平臺規(guī)范來就好。

這里建議以48pt為常規(guī)設(shè)計尺寸。

iOS的網(wǎng)格大小要求是4的倍數(shù)，最小點擊區(qū)域是44pt。安卓要求網(wǎng)格是8的倍數(shù)，最小操作熱區(qū)為48dp。同時要考慮不同倍圖下的適配問題（@2x要求4的倍數(shù)，被2整除，用來適配@1x；@3x要求12的倍數(shù)，分別被2、3、4整除，適配@1x、@2x）。

同時也要注意，當(dāng)圖標(biāo)中的小元素越多，越難理解它所傳達的含義。

2. 圖標(biāo)粗細(xì)

為了保證圖標(biāo)能夠看清，圖標(biāo)的粗細(xì)也有相應(yīng)的要求，太細(xì)會存在看不清的情況，無論畫線形圖標(biāo)或面性圖標(biāo)最好越小越好，這樣的話會更加精準(zhǔn)。

在@1x一倍圖設(shè)計模式下，以48px為網(wǎng)格基準(zhǔn)，常用的圖標(biāo)粗細(xì)有：1.5px、2px、3px、4px。

需要注意在48X48px畫布上繪制線性圖標(biāo)，線寬為4px時，當(dāng)不同場景縮放，需要按比例進行使用調(diào)整：圖標(biāo)為32X32px時線寬為3px（基準(zhǔn)線寬）；圖標(biāo)為24X24px時線寬為2px（基準(zhǔn)線寬）；圖標(biāo)為16X16px時線寬為2px（基準(zhǔn)線寬）。

3. 物理大小 VS 視覺大小

當(dāng)繪制單個圖標(biāo)時，我們只需要關(guān)注單個圖標(biāo)規(guī)范與美觀。當(dāng)需要繪制一整套圖標(biāo)時，卻總會被說視覺不統(tǒng)一、大小不一樣，度量數(shù)據(jù)卻是一樣的，這是為什么？

從幾何學(xué)上來說，兩個形狀的寬度和高度相同，即物理大小相同。但上圖中的實際情況卻是，方形明顯大于圓形，也就是視覺重量中，相同大小的正方形要大于圓形（視覺重量是指人眼如何感知物體的大小和比例，并不一定等于其像素大小或面積）。

實際上物理平衡和視覺平衡是相互矛盾的關(guān)系，相同大小區(qū)域內(nèi)繪制正方形、圓形和三角形時，雖然在物理上關(guān)系一致，但在視覺上給人的感覺是大小不一樣。

菱形、三角形與相同大小的方形對比也具有相同的視覺效果。為了視覺上的保持重量相同，菱形與三角形也應(yīng)該更寬或更高。

在界面中我們可以將圖標(biāo)近似地看作是一些基本形狀的組合：橫向矩形、縱向矩形、傾斜矩形、圓、三角形、正方形。當(dāng)物理大小一樣時，方形圖標(biāo)的視覺重量要大于圓形，大于多邊形。

當(dāng)我們要創(chuàng)建一整套的圖標(biāo)時，最重要的規(guī)制就是必須保證所有圖標(biāo)的大小是一樣的，這里指的不是物理大小而是視覺大小。因此我們需要借助一套規(guī)則來幫助我們統(tǒng)一圖標(biāo)的視覺大小，這就是圖標(biāo)網(wǎng)格（keyline線）。

4. 圖標(biāo)網(wǎng)絡(luò)（keyline線）

圖標(biāo)網(wǎng)格是為了圖形元素的一致性以及靈活的定位而建立的明確規(guī)則，通過核心形狀為指導(dǎo)，保證跨系統(tǒng)圖標(biāo)一致的視覺比例。

蘋果、谷歌、IBM，國內(nèi)的阿里Ant Design都出過相關(guān)的圖標(biāo)網(wǎng)格規(guī)范，鏈接我會放在文章的參考來源里，這里以谷歌的Material System 圖標(biāo)網(wǎng)格來進行說明。

大部分人看到圖標(biāo)網(wǎng)格，都知道關(guān)鍵形狀的用法，那么像素網(wǎng)格、交叉線、遮罩、安全區(qū)域/裁剪區(qū)域到底怎么使用？

1）像素網(wǎng)格

像素網(wǎng)格是用來幫助用戶在繪制過程中可以控制每個線位置、粗細(xì)，保障在低分辨率的屏幕上呈現(xiàn)出清晰的圖標(biāo)，當(dāng)繪制線條沒有完全繪制像素對齊時，尤其是小尺寸的圖標(biāo)，最終導(dǎo)出的顯示效果會出現(xiàn)模糊、邊界不清晰等情況。

但隨著硬件呈現(xiàn)的改進，以及使用矢量工具繪制圖標(biāo)等原因，現(xiàn)在對像素網(wǎng)格方面要求已經(jīng)沒有之前那么高了。

2）關(guān)鍵形狀

關(guān)鍵形狀的四個基本形狀為圓形、正方形縱向矩形和橫向矩形。通過關(guān)鍵形狀的規(guī)則統(tǒng)一圖標(biāo)大小及位置，達到視覺的平衡。

阿里的圖標(biāo)規(guī)范Ant Design的關(guān)鍵形狀除了基本的圓形、正方形縱向矩形、橫向矩形外，增加了兩個等邊三角形，并進行了寬高比調(diào)整，感興趣的可以點擊鏈接查看。

（鏈接中大三角的尺寸不知道是標(biāo)錯還是什么原因，按原尺寸是對不上的，可以以下圖中我梳理的數(shù)據(jù)作為參考。）

3）交叉線

交叉線是指與圖標(biāo)中心點相交并創(chuàng)建額外定點供使用的關(guān)鍵線，這些線條通常將畫布以90度或45度進行切割。

需要注意角度的傾斜也會影響圖標(biāo)的清晰度，出現(xiàn)鋸齒問題。因此圖標(biāo)中出現(xiàn)斜線以45度為標(biāo)準(zhǔn)，出現(xiàn)其他角度時，應(yīng)該以15度的角度進行增量。

4）遮罩

遮罩是默認(rèn)的方形畫布自定義圖標(biāo)的容器，常用于應(yīng)用商店的啟動圖標(biāo)。蘋果App Store在所有圖標(biāo)上都應(yīng)用了圓角矩形的遮罩。

啟動程序圖標(biāo)（位于主屏幕和應(yīng)用程序抽屜中），不同的Android原始設(shè)備制造商在其圖標(biāo)上應(yīng)用不同的形狀。常見的有圓、方形、超橢圓、圓角等。

5）安全區(qū)域/裁剪區(qū)域

安全區(qū)域是Google的Material System提出的，顯示圖標(biāo)的重要內(nèi)容應(yīng)該處于安全區(qū)的區(qū)間內(nèi)，防止遮擋或被裁剪。

但iOS系統(tǒng)中并沒有關(guān)于桌面圖標(biāo)過多關(guān)于這方面的限制，比如618活動、周年活動、版本號等關(guān)于啟動圖標(biāo)的運營設(shè)計。

遮罩以及安全區(qū)域/裁剪區(qū)域僅在啟動圖標(biāo)中需要注意，其他主要以像素網(wǎng)格、關(guān)鍵形狀、交叉線為圖標(biāo)規(guī)范進行使用。

需要注意的是很多同學(xué)在畫圖標(biāo)時，會以keyline線作為圖標(biāo)繪制的絕對標(biāo)準(zhǔn)，沉迷于各種規(guī)則，但實際畫圖標(biāo)時還是以實際視覺感受、圖標(biāo)的清晰度及信息傳達為主，網(wǎng)格的作用只是輔助，并不一定適用所有圖標(biāo)。

三、總結(jié)

這是關(guān)于圖標(biāo)的第二篇文章，對圖標(biāo)屬性、常見線形圖標(biāo)與面性圖標(biāo)、圖標(biāo)的大小、視覺大小的影響以及圖標(biāo)網(wǎng)格（Keyline線）等進行了結(jié)構(gòu)。

當(dāng)然關(guān)于圖標(biāo)的內(nèi)容還有很多，下一篇想講講工作中的圖標(biāo)繪制流程、圖標(biāo)的原則以及圖標(biāo)的可用性測試等等。

資料來源

• Icon Grids & Keylines Demystified
• Meterial DesignSystem icons
• Ant Design-圖標(biāo)設(shè)計
• Icon-Design-Guide-by-IconUtopia
• 圖標(biāo)設(shè)計-快速分析設(shè)計APP

作者：9號自習(xí)室； 公眾號：9號自習(xí)室；知乎專欄：9號自習(xí)室。

本文由 @9號自習(xí)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議