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

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

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

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

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

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

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

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

1. 線(xiàn)性圖標(biāo)

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

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

1）線(xiàn)條粗細(xì)

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

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

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

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

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

2）線(xiàn)條連接

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

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

3）顏色模式

線(xiàn)條的顏色方式一般有單色、雙色、漸變3種形式。

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

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

2. 面性圖標(biāo)

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

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

1）面性圖標(biāo)

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

2）漸變圖標(biāo)

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

3）元素疊加

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

4）統(tǒng)一外型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

比如淺灰的面性圖標(biāo)并沒(méi)有比線(xiàn)性圖標(biāo)更吸引用戶(hù)。

面性圖標(biāo)通過(guò)面積、色彩、質(zhì)感等相對(duì)于線(xiàn)性圖標(biāo)具備更強(qiáng)的視覺(jué)信息層級(jí)，更具引導(dǎo)性。

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

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

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

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

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

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

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

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

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

我們?cè)谠O(shè)計(jì)圖標(biāo)前需要找很多圖標(biāo)的設(shè)計(jì)風(fēng)格做為設(shè)計(jì)靈感，下面推薦幾個(gè)dribbble上很有名的圖標(biāo)師及團(tuán)隊(duì)。

1）smartisan（團(tuán)隊(duì)）

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

2）Anton Kuryatnikov

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

3）MVBen

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

4）Nucleo（團(tuán)隊(duì)）

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

5）Prakhar Neel Sharma

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

6）Yoga Perdana

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

7）OnionMath（團(tuán)隊(duì)）

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

8）Vitality Studio（團(tuán)隊(duì)）

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

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

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

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

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

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

1. 圖標(biāo)大小

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

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

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

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

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

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

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

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

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

3. 物理大小 VS 視覺(jué)大小

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

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

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

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

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

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

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

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

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

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

1）像素網(wǎng)格

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

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

2）關(guān)鍵形狀

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

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

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

3）交叉線(xiàn)

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

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

4）遮罩

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

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

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

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

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

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

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

三、總結(jié)

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

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

資料來(lái)源

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

作者：9號(hào)自習(xí)室； 公眾號(hào)：9號(hào)自習(xí)室；知乎專(zhuān)欄：9號(hào)自習(xí)室。

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

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