編輯導(dǎo)語：圖標(biāo)是界面視覺組成的關(guān)鍵要素之一，而了解這些圖標(biāo)的基礎(chǔ)知識，也是入門設(shè)計的必備條件之一。本文作者總結(jié)了一些產(chǎn)品的圖標(biāo)，對圖標(biāo)的基礎(chǔ)知識進行了分析，一起來看一下吧。

編輯導(dǎo)語：圖標(biāo)是界面視覺組成的關(guān)鍵要素之一，而了解這些圖標(biāo)的基礎(chǔ)知識，也是入門設(shè)計的必備條件之一。本文作者總結(jié)了一些產(chǎn)品的圖標(biāo)，對圖標(biāo)的基礎(chǔ)知識進行了分析，一起來看一下吧。

日常生活和工作中，我們與各種各樣的界面打交道。作為設(shè)計師，圖標(biāo)是界面視覺組成的關(guān)鍵元素之一。了解圖標(biāo)相關(guān)的知識，以及正確規(guī)范的繪制方法，是入門設(shè)計的必備條件之一。本文將對圖標(biāo)進行系統(tǒng)的介紹，希望我的這篇文章可以給大家?guī)硪恍椭?/p>

一、什么是圖標(biāo)1. 概念

圖標(biāo)，是一種圖形化的標(biāo)識，它有廣義和狹義兩種概念，廣義主要指具有指代意義的圖形符號，具有高度濃縮并快捷傳達信息、便于記憶的特性。一個圖標(biāo)是一個小的圖片或?qū)ο?，代表一個文件、程序、網(wǎng)頁或命令。

圖標(biāo)有助于用戶快速執(zhí)行命令和打開程序文件，單擊或雙擊圖標(biāo)以執(zhí)行一個命令。圖標(biāo)也用于在瀏覽器中快速展現(xiàn)內(nèi)容，所有使用相同擴展名的文件具有相同的圖標(biāo)。

隨著計算機的出現(xiàn)，圖標(biāo)被賦予了新的含義，又有了新的用武之地。在這里圖標(biāo)成了具有明確指代含義的計算機圖形，桌面圖標(biāo)是軟件標(biāo)識，界面中的圖標(biāo)是功能標(biāo)識，在計算機軟件中，它是程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示。

圖標(biāo)在計算機可視操作系統(tǒng)中扮演著極為重要的角色，它可以代表一個文檔、一段程序、一張網(wǎng)頁或是一段命令。我們還可以通過圖標(biāo)執(zhí)行一段命令或打開某種類型的文檔，你所要做的只是在圖標(biāo)上單擊或雙擊一下。

圖標(biāo)是具有指代意義的具有標(biāo)識性質(zhì)的圖形，它不僅是一種圖形，更是一種標(biāo)識，它具有高度濃縮并快捷傳達信息、便于記憶的特性。

2. 范圍

圖標(biāo)應(yīng)用范圍很廣，軟硬件網(wǎng)頁社交場所公共場合無所不在。例如：商城里的導(dǎo)視系統(tǒng)、男女廁所標(biāo)志和各種交通標(biāo)志等。狹義主要指應(yīng)用于計算機軟件方面，包括：程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示等。

展開全文

二、圖標(biāo)的發(fā)展史1. 起源

圖標(biāo)不僅歷史久遠，從上古時代的圖騰，到20、21世紀具有更多含義和功能的各種圖標(biāo)，而且應(yīng)用范圍極為廣泛，可以說它無所不在。1973年，在施樂公司帕洛阿爾托研究中心發(fā)明出來。該電腦首次使用了桌面比擬（Desktop metaphor）和鼠標(biāo)驅(qū)動的圖形用戶界面（GUI）技術(shù)，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。

但是當(dāng)時電腦性能不足，董事會也不看好，并未推出商品化，所以這款概念機并沒有走進人們的視野，但是它的后續(xù)機型施樂之星在1981年問世，并且成為了計算機史上的里程碑。

1979年喬布斯參觀了施樂的PARC研究所看到施樂原型機 Xerox Alto，喬布斯決定開發(fā)圖形用戶界面的新電腦。1983年蘋果公司推出了Apple Lisa，首次采用GUI的商品化電腦。1985年微軟公司也應(yīng)用GUI推出了Windows 1.0。

2. 歷程

80年代，本身是想把圖標(biāo)做的的具象，卻因為當(dāng)時電腦性能不足無法做到，所以設(shè)計師只能在有限的空間里面進行創(chuàng)作，對好的標(biāo)準是越具象越好。

微軟和蘋果相繼推出了新的系統(tǒng)界面，隨著1995年計算機顯卡在分辨率和色域上的提高，設(shè)計師或藝術(shù)家有了更大的發(fā)揮空間，隨之出現(xiàn)了更多顏色的運用以及更多透視效果的可能性。剛開始只能設(shè)計單色的簡單的圖標(biāo)，到后來可以執(zhí)行各種創(chuàng)意，實現(xiàn)各種效果，一直到現(xiàn)在。

2007年，蘋果發(fā)布第一代iPhone以及iOS系統(tǒng)，主題圖標(biāo)和當(dāng)時的 mac OS 系統(tǒng)一致，玻璃質(zhì)感及擬物化的風(fēng)格顯著，它的出現(xiàn)打破了人們對“傳統(tǒng)手機”的定義。這款 iPhone 的主題圖標(biāo)風(fēng)格，一直穩(wěn)定到了 iOS7 的發(fā)布，才出現(xiàn)了顛覆性的變化。

2013年的WWDC大會中，蘋果公司發(fā)布的iOS7系統(tǒng)，系統(tǒng)界面開始向扁平化風(fēng)格轉(zhuǎn)變。這場大會也使擬物風(fēng)格逐漸走向下坡路，直到扁平風(fēng)格的全面普及，擬物風(fēng)格就沒有再被廣泛應(yīng)用。

2020年WWDC20蘋果發(fā)布mac OS Big Sur，這次的更新把圖標(biāo)采用了“新擬物”?！靶聰M物”的前身就是擬物圖標(biāo)，這是最早被Apple提出的設(shè)計概念，就是在界面中模仿現(xiàn)實物體紋理材質(zhì)，在特定光照下的效果設(shè)計；目的是讓人們在使用界面時習(xí)慣性地聯(lián)想到現(xiàn)實物體的使用方式。而“新擬物”是將真實光線用于虛擬對象。

三、產(chǎn)品應(yīng)用圖標(biāo)

產(chǎn)品應(yīng)用圖標(biāo)，也叫啟動圖標(biāo)，是品牌和產(chǎn)品的核心元素。圖標(biāo)以簡單、大膽、友好的方式傳達產(chǎn)品的核心理念和意圖。因為產(chǎn)品應(yīng)用圖標(biāo)的設(shè)計師不同，設(shè)計無法得到統(tǒng)一，所以蘋果官方在ios系統(tǒng)中統(tǒng)一了圓角矩形的大小，在有限的區(qū)域內(nèi)進行設(shè)計。而安卓就沒有那么規(guī)范，處于百家齊放的現(xiàn)象。

1. 中文文字圖標(biāo)

常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型。提取產(chǎn)品名稱中最具代表性的獨立文字，進行字體設(shè)計，通過對筆畫及整體骨架進行設(shè)計調(diào)整，以達到符合產(chǎn)品特性和視覺差異化的目的。作為國人對漢字的敏感度，這樣的設(shè)計形式大大降低了用戶對品牌的認知成本。

2. 英文字母圖標(biāo)

英文字母圖標(biāo)通常是提取產(chǎn)品名稱首字母進行設(shè)計，由于英文字母本身造型簡潔，結(jié)合產(chǎn)品特點進行創(chuàng)意加工，很容易達到美感和識別性兼?zhèn)洹?/p>

3. 數(shù)字圖標(biāo)

數(shù)字對于我們來說是非常敏感的，利用數(shù)字進行設(shè)計能給人親和力。由于數(shù)字的識別性很強，易于品牌傳播與用戶記憶。

4. 特殊符號圖標(biāo)

特殊符號圖標(biāo)在應(yīng)用圖標(biāo)的設(shè)計案例中相對較少，由于符號本身的含義會對產(chǎn)品屬性有一定限制，所以針對性比較強。

5. 幾何圖形圖標(biāo)

幾何圖形的運用設(shè)計給人簡約、現(xiàn)代、個性、富有空間感等視覺感覺，從單個具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。

6. 動物/單雙行剪影圖標(biāo)

動物剪影通常是提取動物整體形象或者局部特征部位作為設(shè)計元素，這類應(yīng)用圖標(biāo)背景為單色或者漸變色，少量的會輔助一些圖形作為背景元素，動物采用單色填充，以白色填充居多。

單雙形是指應(yīng)用圖標(biāo)只展示單個或兩個的剪影圖形，生活中可以作為剪影設(shè)計的元素很多。如食物、工具、生活用品、學(xué)習(xí)用品、娛樂道具等等?？梢元毩⑿纬杉粲皥D形，也可以根據(jù)產(chǎn)品特點進行創(chuàng)意加工，最終形成應(yīng)用圖標(biāo)獨有的造型圖案。

7. 圖形重復(fù)圖標(biāo)

將相同的圖形進行有序的排列，排列形式有梯度變化、等大均排、規(guī)律性重復(fù)、配色差異、大小錯落等。這樣的設(shè)計方式可以給單調(diào)的圖形增加層次感和構(gòu)圖飽滿，有一定梯度變化和規(guī)律性重復(fù)的圖形組合可以傳遞一定的韻律感和動感。

8. 正負形圖標(biāo)

正負形的設(shè)計在LOGO圖形設(shè)計中是比較常見的表現(xiàn)手法，運用在圖標(biāo)設(shè)計中，以正形為底突出負形特征，以負形表達產(chǎn)品屬性。利用正負形進行設(shè)計，圖形設(shè)計感較強，正形與負形可以更加充分地表達產(chǎn)品特征與服務(wù)。

9. 線形圖標(biāo)

線性圖標(biāo)風(fēng)格給人簡潔輕快的感覺，線性設(shè)計的方式分閉合式和開放式，可以是一條連續(xù)的線條或者幾條線段組成。在有色背景上面線條通常反白處理，背景設(shè)計可以是單色、漸變色、其他輔助圖形設(shè)計等。

10. 白色漸變圖標(biāo)

白色漸變圖標(biāo)是利用白色漸變填充，不透明度 100%到X%之間設(shè)置完成。白色漸變圖形具有空間感、質(zhì)感，視覺效果較好，被廣泛運用在應(yīng)用圖標(biāo)設(shè)計中。

11. 彩色漸變圖形

彩色漸變圖標(biāo)是利用多種顏色進行漸變，比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。

12. 動物局部圖標(biāo)

利用動物局部進行圖形設(shè)計，可以讓元素特征更加明顯。比起展示整個動物形象，局部特征展示視覺表現(xiàn)力更強。

13. 人體局部圖形

利用人體局部作為圖形設(shè)計元素，比較常用的有眼、嘴巴、手掌、頭部等。利用人體的元素進行設(shè)計，用戶對圖形的敏感度更強，易于傳播和記憶。

14. 卡通形象圖標(biāo)

卡通形象與動物形象容易混淆，因為很多卡通形象都是基于動物設(shè)計演變而來。這里單獨提取出來是為了歸類一些單純以動物外形為設(shè)計元素的表現(xiàn)手法。卡通形象設(shè)計在應(yīng)用圖標(biāo)的設(shè)計中是非常常見的，很容易對用戶形成記憶。

15. 擬人化圖形圖標(biāo)

通過對接近圓形或者構(gòu)圖飽滿的圖形添加眼睛等元素，可以使整個圖形擬人化。給原本冰冷的圖形賦予其生命，擁有一定的情感表達，讓產(chǎn)品更加親民，更容易被用戶所接受和記憶。

16. 從功能服務(wù)提煉圖形

為了更加清晰的傳遞產(chǎn)品的某項功能與服務(wù)，根據(jù)產(chǎn)品的功能服務(wù)提取元素進行圖形設(shè)計也是比較常用的表現(xiàn)手法，如計算器、日歷、導(dǎo)航等直接提取相關(guān)聯(lián)的圖形元素進行設(shè)計，一目了然地傳遞出產(chǎn)品信息。也可以從產(chǎn)品服務(wù)內(nèi)容入手進行提煉，如教育類產(chǎn)品，提取學(xué)士帽為元素進行設(shè)計。

17. 漸變色背景圖標(biāo)

漸變色背景的運用越來越受到設(shè)計師青睞，相對于單色的背景視覺表現(xiàn)力更加豐富，整體色彩給人通透的感覺。漸變色可以是雙色漸變，也可以是多色漸變，根據(jù)產(chǎn)品的氣質(zhì)靈活地運用。

18. 文藝風(fēng)格圖標(biāo)

文藝風(fēng)格圖標(biāo)設(shè)計配色清新、復(fù)古、簡約，適合帶有文藝風(fēng)格類的產(chǎn)品。設(shè)計方向為簡約的圖形組合或者文藝風(fēng)格的字體設(shè)計為主，圖標(biāo)整體留白較多，配色簡約，白色背景居多。如果是深色背景則采用黑色、復(fù)古色為主。

19. 活動氛圍圖標(biāo)

對應(yīng)用圖標(biāo)進行特定的活動氛圍包裝。會保留原本的圖形面貌，進行整體的氛圍營造，以突出購物火爆的場景感。

20. 游戲角色圖標(biāo)

游戲類應(yīng)用圖標(biāo)設(shè)計需要設(shè)計師具備較強的寫實圖標(biāo)設(shè)計功底，設(shè)計方向主要有：游戲角色、純文字、道具或標(biāo)識、明星頭像、輔助圖形或元素等。設(shè)計表現(xiàn)力需要顏色鮮艷、角色表情和動作夸張、設(shè)計精美有質(zhì)感等。

IOS啟動圖標(biāo)keyline線規(guī)范：

蘋果官方會給 Production Templates 文件，我們只需要使用1024px*1024px這個尺寸進行啟動圖標(biāo)的設(shè)計，把設(shè)計好的的啟動圖標(biāo)放在文件里的智能對象的圖層里，這個時候你會發(fā)現(xiàn)所有的尺寸的圖標(biāo)都會換成我們做好的啟動圖標(biāo)。

這里提醒一下，雖然我們看見的iOS的圖標(biāo)是個圓角矩形，但是機上它并不是標(biāo)準的圓角矩形，而是某種連續(xù)曲線。但我們很難肉眼地看出區(qū)別，因此并不用糾結(jié)它的圓角，按照直角矩形的尺寸進行繪制就好。

Android啟動圖標(biāo)keyline線規(guī)范：

創(chuàng)安卓 Material Design 要求的基本尺寸說 48dp，但這是 1:1 的尺寸，也是原始尺寸，而繪制時要求是基礎(chǔ)尺寸的 400%，也就是 192dp，與之相對應(yīng)的網(wǎng)格基準由 1px 變?yōu)?4px。通過保持此比率，對原始圖像所做的任何更改都將按比例放大或縮小，從而在比例值返回到100%（48dp）時保留銳邊并正確對齊。

圖標(biāo)網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則。關(guān)鍵線形狀基于網(wǎng)格，通過使用這些核心形狀作為基線，您可以在整個產(chǎn)品圖標(biāo)中保持一致的視覺比例。這些關(guān)鍵線形狀使用預(yù)設(shè)標(biāo)準：圓形、正方形、矩形、正交線和對角線。它們統(tǒng)一了產(chǎn)品圖標(biāo)，并在網(wǎng)格上保持一致的位置。

四、功能圖標(biāo)1. 單色線性圖標(biāo)

風(fēng)格簡約、外形簡單，具有強烈的識別性，在視覺感知上輕松、干凈。

2. 雙色線性圖標(biāo)

更具表現(xiàn)力，細節(jié)更豐富，結(jié)合顏色的疊加、對比、互補提升了圖標(biāo)的層次感和豐富度。

3. 不透明度線性圖標(biāo)

不透明度的疊加和變化，提升圖標(biāo)的層次感和空間感，降低圖標(biāo)的壓迫性。

4. 漸變線性圖標(biāo)

漸變線性帶出圖標(biāo)的質(zhì)感，結(jié)合「不同深度」或「不同飽和度」的變化，讓圖標(biāo)更具有細節(jié)和層次。

5. 單色面 + 點綴色圖標(biāo)

外形使用統(tǒng)一的顏色，結(jié)合圖標(biāo)的不同屬性感知使用不同的顏色進行點綴；或使用不同顏色作為主色，黑白作為點綴色。

6. 雙色圖標(biāo)

通過對比色、鄰近色的搭配營造整體的圖標(biāo)氛圍，提升了圖標(biāo)的層次和豐富度，雙色的表達也增添了圖標(biāo)的趣味性。

7. 漸變圖標(biāo)

微弱的漸變提升圖標(biāo)的質(zhì)感，漸變的方向會影響整體圖標(biāo)的視覺效果，因此可以根據(jù)不同設(shè)計的需要調(diào)整。

8. 不透明度/灰度/飽和度變化

讓單色圖標(biāo)變得更加具有層次感和空間感，設(shè)計細節(jié)更加豐富，降低了單色面性圖標(biāo)的厚重感。

9. 不透明度/弧度/飽和度變化+漸變

漸變設(shè)計提升了面形圖標(biāo)的質(zhì)感，從顏色上具有一定的豐富度，在漸變的基礎(chǔ)上，還可以對圖標(biāo)做顏色的差異化，讓圖標(biāo)更有層次感。這類圖標(biāo)被應(yīng)用在UI界面的列表中或者頂部入口的位置。

10. 顏色疊加穿透

圖標(biāo)透明疊加之后產(chǎn)生了交錯的負形，疊加出來第三個面，整體設(shè)計依舊保持扁平化，但卻多了一份層次感，并增加了圖標(biāo)的細節(jié)。

11. 漸變層次疊加

整體效果與不透明度變化較為接近，通過漸變的深淺變化，使得形狀的銜接處出現(xiàn)了明暗對比，因此圖標(biāo)也具有了厚度和層次感。

12. 毛玻璃圖標(biāo)

利用背景模糊的效果，單從視覺上與透明度變化或者顏色疊加相比都更具有空間感一點，圖標(biāo)具有較強的設(shè)計感。

13. 輕質(zhì)感圖標(biāo)

與漸變層次疊加相似，區(qū)別在于顏色更加豐富，利用多個色塊，多種顏色或者多角度的漸變及陰影，整體風(fēng)格偏向插畫風(fēng)和漸變質(zhì)感，視覺上更接近于立體圖形，整體風(fēng)格比較偏向絢麗多彩的顏色風(fēng)格，質(zhì)感和細節(jié)比較豐富。大多數(shù)用在品類區(qū)，與常規(guī)的單色圖標(biāo)相比，需要更具有吸引力。

14. 輕擬物圖標(biāo)

核心基礎(chǔ)和擬物設(shè)計一致，省略了更多復(fù)雜的細節(jié)，重點放在光影的表達上，高光和陰影都非常到位。

15. 寫實圖標(biāo)

零幾年一幾年的時候，直接反映現(xiàn)實、投射現(xiàn)實，方便用戶看一眼就知道設(shè)個功能或者這個按鈕是干嘛的，后來因為顯示器的分辨率跟不上，慢慢風(fēng)格變?yōu)楸馄交?，最近幾年又逐漸興起，最典型的就是Apple的Mac系統(tǒng)上的圖標(biāo)。

16. 2.5D圖標(biāo)

建立在軸測圖的基礎(chǔ)上，XYZ軸，具有立體透視的感覺。

17. 卡通圖標(biāo)

比較適合固定的功能區(qū)/品類區(qū)，一般會用在運營位比較多。

18. 照片處理圖標(biāo)

常見于生鮮類APP，讓食物看上去更真實，更鮮活。

19. 裝飾圖案填充圖標(biāo)

黑白線+品牌色，或者兩個相近色。

20. 整體填充圖標(biāo)

弱面強線的外形識別度較高，更符合圖標(biāo)的表達。

21. 線面錯位圖標(biāo)

在雙色圖標(biāo)的基礎(chǔ)上，線和面按照統(tǒng)一的百分比進行縮放，或使用統(tǒng)一/有規(guī)律的圖案，進行透視和位移的設(shè)計，整體呈現(xiàn)一種交錯疊加的視覺效果。

22. 卡通插畫圖標(biāo)

整體感覺比較卡通、可愛、二次元。

五、設(shè)計規(guī)范

圖標(biāo)是任何設(shè)計系統(tǒng)或產(chǎn)品體驗的重要組成部分。圖標(biāo)能夠幫助我們快速導(dǎo)航，它們與語言無關(guān)，最重要的是：它們非常小，所以它們不占用很多地方。圖標(biāo)是良好設(shè)計系統(tǒng)的基本組成部分。因此科學(xué)嚴謹?shù)脑O(shè)計規(guī)范能幫助我們設(shè)計精致、風(fēng)格統(tǒng)一的圖標(biāo)。

1. 尺寸

ios的刪格式 4 的倍數(shù)，安卓的刪格式 8 的倍數(shù)。想要做到兩端都適配就得選用8的倍數(shù)，又因為ios的最小可點擊區(qū)域是 44px，所以 48px 是比較合適的尺寸。不是硬性規(guī)定，最好要遵行一下 4 或者 8 的倍數(shù)。

圖標(biāo)繪制基于 48x48px 畫布繪制的線性圖標(biāo)，線寬默認為 4px。

不同場景縮放比例使用：

圖標(biāo)為 64x64px 時線寬為 6px（基準線寬）

圖標(biāo)為 32x32px 時線寬為 3px（基準線寬）

圖標(biāo)為 24x24px 時線寬為 2px（基準線寬）

圖標(biāo)為 16x16px 時線寬為 2px（基準線寬）

2. 圖標(biāo)的keyline線

圖標(biāo)網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則，Keyline 形狀是網(wǎng)格的基礎(chǔ)。通過使用這些核心形狀作為指導(dǎo)，您可以跨系統(tǒng)圖標(biāo)保持一致的視覺比例。

3. 圖標(biāo)關(guān)鍵圖形

圖標(biāo)柵格用于圖標(biāo)元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界。關(guān)鍵線有助于促進圖標(biāo)統(tǒng)一性，簡化設(shè)計過程中比例調(diào)整成本。繪制小圖形需要參照小正方形的 Keyline。

4. 圖標(biāo)的拐角

1）直角拐角

當(dāng)基礎(chǔ)圖形為滿容器正方形時，建議使用3X 圓角。當(dāng)基礎(chǔ)圖形為滿高（寬）矩形時，建議使用2X圓角。當(dāng)基礎(chǔ)圖形為較?。ㄐ∮?1/2 寬高）矩形時，建議使用1X圓角。

2）非直角拐角

非直角根據(jù)圖標(biāo)場景，通常情況下無論角度，默認均為1X圓角；特殊弧度的曲線“拐角”情況除外，根據(jù)圖標(biāo)設(shè)計需要進行單獨考慮。

5. 圖標(biāo)區(qū)域 – 封閉和非封閉

封閉區(qū)域，由閉合曲線構(gòu)成的為封閉區(qū)域，可以進行獨立顏色填充。

非封閉區(qū)域，由非閉合曲線構(gòu)成的為非封閉區(qū)域，原則上是不能進行獨立的顏色填充。

封閉區(qū)域為曲線形狀且有相交線段時，原則上是不能進行獨立的顏色填充。

6. 圖標(biāo)組成 – 線段和端點

為保證風(fēng)格的整體一致性，圖標(biāo)所有線段端點默認均應(yīng)為與線段同寬的圓角端點；通常情況下線段端點和可編輯節(jié)點坐標(biāo)以整數(shù)坐標(biāo)為佳。

默認基于 48dp 畫布繪制的線性圖標(biāo)，線寬默認為 4dp；無論直線和曲線在任何時候均保持一致線寬。

7. 圖標(biāo)繪制規(guī)則

當(dāng)線段與曲線相交或者與直線非垂直相交時，線段末端用圓頭；當(dāng)線段與直線垂直相交時，線段末端用方頭；當(dāng)圓點的直徑與線寬一樣時，圓點用圖形繪制，不用線段。

當(dāng)圓形和方形在小于16px時建議用圖形繪制，不要用線。

8. 圖標(biāo)中的傾斜角度

圖標(biāo)中的傾斜角度應(yīng)為 45 的倍數(shù)，保持與 Keyline 中的對角線或十字垂直相交線保持平行關(guān)系。

若是矩形外框，傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關(guān)系。

角度為 45°、30° 和 60° 的對角線比 13.7° 或 81° 等不均勻角度的對角線看起來更銳利。

9. 圖標(biāo)斷口與間距

內(nèi)部結(jié)構(gòu)與外框的間距不得小于線寬；內(nèi)部元素之間的間距不得小于線寬的 2/1px。

外形框的端口尺寸梯度：4px、8px、12px，建議尺寸為4的倍數(shù)。

10. 圖標(biāo)風(fēng)格變換

圖標(biāo)的在特定規(guī)律下允許不同風(fēng)格之間的變換，分別為線性風(fēng)格（默認）、填充風(fēng)格、混合風(fēng)格、多色混合風(fēng)格。

11. 命名規(guī)則

科學(xué)和高效的命名規(guī)則能夠，幫助我們快速定位到自己制作的圖標(biāo)，并且?guī)椭_發(fā)縮短命名時間，加快團隊協(xié)作效率。切圖命名可以按照「業(yè)務(wù)_類型_功能_大小_狀態(tài)」的格式，最好使用英文。

12. 頁面或功能中英文對照表

13. UI模塊

六、圖標(biāo)設(shè)計的評判標(biāo)準

我們已經(jīng)了解了圖標(biāo)的基本理論，那我們?nèi)绾卧O(shè)計出一個好的圖標(biāo)呢？怎么看我們設(shè)計的圖標(biāo)是否符合產(chǎn)品呢？下面我們將從4個方面進行了解，什么才是一個好的圖標(biāo)。

1. 識別性

設(shè)計師們有時會過于注重形式，忽略了本身的功能，導(dǎo)致圖標(biāo)難以識別，這打破了它最重要的圖形意象屬性 – 圖標(biāo)的傳達含義功能必須放在首位。

圖標(biāo)是一個對象或動作的視覺體現(xiàn)。如果對于用戶而言，這個圖標(biāo)含義不明確，該圖標(biāo)就立刻失去它的實用價值，并成為一個視覺干擾。在圖標(biāo)設(shè)計中，我們必須保證圖形是簡潔、嚴謹、清晰、邊緣干凈利落的，這是提升產(chǎn)品界面品質(zhì)感的一個重要而且基礎(chǔ)的部分，而不是盲目地追求流行的視覺風(fēng)格和炫技。

達到基礎(chǔ)水平以外，在圖標(biāo)中我們還可以通過融入品牌信息、有趣的細節(jié)使圖標(biāo)更有吸引力，提升用戶對產(chǎn)品/品牌的好感度。

圖標(biāo)設(shè)計理念的本質(zhì)是減到最簡形態(tài) – 簡化圖標(biāo)是出于降低學(xué)習(xí)曲線的需要。設(shè)計應(yīng)確保即使圖標(biāo)在小尺寸更具有可讀性和清晰度，所以精心設(shè)計的圖標(biāo)應(yīng)該能夠快速辨認，一目了然。

2. 規(guī)范性

我們需要保證每個圖標(biāo)的視覺大小的一致性，圖標(biāo)柵格用于圖標(biāo)元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界。關(guān)鍵線有助于促進圖標(biāo)統(tǒng)一性，簡化設(shè)計過程中比例調(diào)整成本。

3. 統(tǒng)一性

在繪制一整套圖標(biāo)時候，統(tǒng)一性就非常重要，不要在一整套圖標(biāo)中混入不同風(fēng)格的樣式，風(fēng)格一致性將幫助用戶識別圖標(biāo)并理解它們具有同等重要性或狀態(tài)。

界面中的圖標(biāo)一般是成系列的設(shè)計，除了視覺風(fēng)格和特征保持一致以外，在同一產(chǎn)品內(nèi)，同樣的功能和信息圖標(biāo)應(yīng)也保持一致的形態(tài)，避免用戶產(chǎn)生疑惑。圖標(biāo)的統(tǒng)一性上可以從線條的粗細、顏色、圓角、傾斜角度方面進行檢查。

4. 呼吸感

呼吸感的意思就是適當(dāng)留白。不管是在做圖標(biāo)還是做界面，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w，讓空間更有張力，更具備可看性。圖標(biāo)的相鄰元素之間的空間不應(yīng)太小或在整體中不一致。定義最小間隙并將其保留在任何地方以避免輪廓“粘連”。

七、總結(jié)

圖標(biāo)??????????????????????????????????????????????????????????????????????設(shè)計是設(shè)計師必備的能力，圖標(biāo)繪制看似簡單，要做好卻并不容易，好的圖標(biāo)設(shè)計不僅能幫助用戶更高效地解決問題，還能幫助產(chǎn)品和品牌形成差異化，非?？简炘O(shè)計師們的細節(jié)，不過UI設(shè)計處處充滿細節(jié)，想要自己的界面更加精致，就不要忽略每一個可以提升的點。

以上就是分享的圖標(biāo)基礎(chǔ)知識的大部分內(nèi)容了，圖標(biāo)本身是一個比較大的范圍，文中難免有很多不深入的內(nèi)容，歡迎各位總監(jiān)們的指教。最后感謝大家閱讀，希望今天的這篇文章能夠幫到你。

附錄·參考文獻

《Material Design》

《Apple Developer》

《History of icons》

《An oral history of the hamburger icon》

《Hopefully, the Ultimate Guide to an Interface Icon Set》

《設(shè)計師必看的圖標(biāo)設(shè)計指南》

本文由郝小七指導(dǎo)http://www.woshipm.com/u/917803

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

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