谷歌這套圖標設計標準，零基礎也能快速掌握

今天分享的是「圖標設計準則」。

圖標是界面設計里的 “剛需元素”，一個小圖標能快速傳遞很多信息。好的圖標需要兼顧簡潔、現代、友好。但圖標的尺寸很小，設計時既要嚴格遵守設計規則，又得清晰表達信息，這樣才能保證整套圖標的風格統一、辨識度高。

今天就來聊聊大廠在用的圖標設計原則和設計規范，配合案例進行設計分析~

01 圖標設計的3個核心原則

① 形式夠簡潔

給大家舉個例子，就說下面的小船圖標，想讓圖標清晰好認，就得做減法，那么用正面的簡約船身造型最合適。

如果圖標設計的過于細致，例如圖標中添加了船帆、桅桿或者旗幟等細節，太寫實的圖標不僅會降低識別速度，還會破壞整套圖標的視覺統一性。

設計總結：

? 簡化圖標造型，提升清晰度和辨識度

? 拒絕過度寫實，避開復雜繁瑣的設計

② 多用幾何形狀打底

使用幾何圖形和統一的基礎形狀來設計圖標，能打造出清晰醒目的視覺感受。哪怕結構簡單，也能保持清晰的形態，縮小到小尺寸時也照樣容易分辨。

反過來講，盡量少用那些纖細、松散的不規則形狀，它們會破壞線條的連貫性，讓整套圖標看起來亂糟糟的，沒個統一的調性。

設計總結：

? 靠幾何圖形和統一的造型，打造醒目視覺效果

? 少用纖細、不規則的形狀

③ 整套風格保持一致

這里給大家看一組風格統一的圖標示例。對品牌識別和系統適配來說，保持圖標集的視覺一致性太重要了。

要是把不同風格的圖標混在一起用，用戶根本沒法把它們當成“一家人”。所以同一套圖標里，不管是形狀、線條粗細，還是比例、邊角處理，都得按同一個標準來。

設計總結：

? 單套圖標集里視覺風格要保持統一

? 千萬別混搭不同風格的圖標

02 圖標尺寸怎么選？

在谷歌的Material Design 3 設計規范中，標準 (基線) 圖標尺寸是24dp×24dp，設計時建議按100%的比例來做，這樣能保證像素級的精準度。

除了這個標準尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：

20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺元素

40dp/48dp：針對顯示器、大屏幕，還有標題欄這類特殊場景

03 標準 圖標布局

設計圖標時，內容需要放在有效區域內里。有效區域是指頁面滾動或適配不同設備時圖標不會被遮擋的“安全可視區域”。

如果想讓圖標的視覺沖擊力更強，可以讓內容延伸到有效區域和裁剪區域之間的留白處，但不能超出裁剪區域，不然圖標很容易被裁剪顯示不全。

具體要怎么布局呢？看下面這兩點就夠了：

① 有效區域：圖標內容要放在20dp×20dp的范圍內，四周各留2dp的邊距

② 邊距：給有效區域留出2dp邊距，既能讓圖標和周圍元素拉開視覺距離，又能讓整體看起來更平衡

接下來通過一個圖標案例來簡單總結一下：

上圖從左到右分別代表了在有效區域、在有效區域和裁剪區域、在裁剪區域之外創建的圖標案例。

設計總結：

? 圖標內容保持在20dp×20dp的有效區域里，記得留2dp邊距

?? 想加視覺沖擊力？內容可以延伸到邊距區域

? 任何情況下，圖標都不能超出裁剪區域

① 網格和關輔助線

一套圖標中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標保持視覺大小的一致性呢？

這種情況大家在設計圖標時應該都碰到過，解決方法可能大多是通過眼睛對比查看，把看著小的圖標調大一些或者把看著大的圖標調小一點。這種方法效率不高，而且設計出來的圖標大小不容易保持一致性。

這里提供一個更科學和高效的輔助圖標設計方法——使用網格和輔助線，照著這些輔助線來設計圖標，能輕松保持比例一致。

例如常用的24dp×24dp圖標網格，由正方形、圓形、豎矩形、橫矩形這四種基礎輔助線構成。它們就像圖標的“骨架”，能幫所有圖標保持統一的比例和對齊效果，哪怕放大10倍看，結構也照樣清晰。

給大家拆解一下這四種輔助線：

方形輔助線：邊長18dp，是圖標的基礎平衡基準。比如圖表類圖標就可以照著這個方形來畫，保證比例穩定。

圓形輔助線：直徑20dp，用來設計圓潤平衡的圖標。像地球圖標用這個圓形打底，就能和其他圖標和諧搭配。

垂直矩形輔助線：高20dp、寬16dp，適合強調縱向比例的圖標。比如文檔圖標圍著這個豎矩形設計，比例會特別清晰。

水平矩形輔助線：高16dp、寬20dp，適合橫向比例的圖標。像郵件圖標用這個橫矩形當基礎，形狀會很均衡。

04 圖標結構解析

一個完整的圖標，由圓角、起始/結束點、內部形狀、外部輪廓等組成。

① 圖標圓角

這里重點說下大家容易踩坑的“圓角”的設計：例如下圖的銀行卡圖標，采用外角2dp圓角、內角尖角的設計，這樣既柔和又利落。

如果把圓角做得太大，如下圖左側文檔圖標，圖標的辨識度就會下降；如果一個圖標中混用不同半徑的圓角，如下圖右側的圖標，整個圖標看著就會很雜亂。

設計總結：

? 按規則設置圓角，統一圓角半徑

? 避免圓角半徑過大/半徑混用的情況

② 描邊粗細

推薦的圖標描邊粗細是2dp或常規 (400)，也可以根據需求靈活調整，例如在MD3設計規范中就提供了100 (細)到700 (粗)的多種選擇。

這里有兩個小技巧：

設計直角線性圖標時，描邊的末端盡量做成直角，例如下圖左側的箭頭圖標，45度切割的直角就很清晰；在下圖右側的添加圖標中，內部的加號也采用了2dp的描邊粗細，與外輪廓保持一致。

另外要注意一套圖標需要保持相同的描邊粗細。如果描邊x粗細不一致，不僅會模糊圖標形狀，還會破壞視覺一致性。

設計總結：

? 描邊粗細保持統一，直角圖標末端也用直角

05 復雜圖標怎么處理？

如果圖標需要一些精細的細節，可以通過一些靈活的調整來提升辨識度，但不能扭曲基礎的幾何形狀或破壞整體比例。

比如回形針圖標，為了在24dp的空間里放下多個曲線，可以把 2dp的標準描邊粗細微調成1.5dp；再比如拉面圖標，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細節更多，則采用1.5dp的細描邊，讓細節更清晰。

還有一個小原則：設計復雜圖標時，盡量保持正面視角，別做傾斜、旋轉的等距或者3D效果——多余的深度感會增加識別難度。

設計總結

? 正面視角設計，細節微調不跑偏

? 少用傾斜、旋轉的等距/3D呈現方式

06 最后

圖標是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優勢，必須建立在清晰的結構和統一的規則之上。

設計時基于標準的輔助網格走，保持比例均衡、視覺重量一致，設計出的圖標才不會喧賓奪主，反而能提升整個產品的用戶體驗。

來源 | Clip設計夾（ID：ClipppDesign）

作者 | 趙一 ; 編輯 | 蝦餃

內容僅代表作者獨立觀點，不代表早讀課立場