今天分享的是「圖標(biāo)設(shè)計準(zhǔn)則」。

圖標(biāo)是界面設(shè)計里的 “剛需元素”，一個小圖標(biāo)能快速傳遞很多信息。好的圖標(biāo)需要兼顧簡潔、現(xiàn)代、友好。但圖標(biāo)的尺寸很小，設(shè)計時既要嚴(yán)格遵守設(shè)計規(guī)則，又得清晰表達(dá)信息，這樣才能保證整套圖標(biāo)的風(fēng)格統(tǒng)一、辨識度高。

今天就來聊聊大廠在用的圖標(biāo)設(shè)計原則和設(shè)計規(guī)范，配合案例進(jìn)行設(shè)計分析~

01 圖標(biāo)設(shè)計的3個核心原則

① 形式夠簡潔

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

如果圖標(biāo)設(shè)計的過于細(xì)致，例如圖標(biāo)中添加了船帆、桅桿或者旗幟等細(xì)節(jié)，太寫實的圖標(biāo)不僅會降低識別速度，還會破壞整套圖標(biāo)的視覺統(tǒng)一性。

設(shè)計總結(jié)：

? 簡化圖標(biāo)造型，提升清晰度和辨識度

? 拒絕過度寫實，避開復(fù)雜繁瑣的設(shè)計

② 多用幾何形狀打底

使用幾何圖形和統(tǒng)一的基礎(chǔ)形狀來設(shè)計圖標(biāo)，能打造出清晰醒目的視覺感受。哪怕結(jié)構(gòu)簡單，也能保持清晰的形態(tài)，縮小到小尺寸時也照樣容易分辨。

反過來講，盡量少用那些纖細(xì)、松散的不規(guī)則形狀，它們會破壞線條的連貫性，讓整套圖標(biāo)看起來亂糟糟的，沒個統(tǒng)一的調(diào)性。

設(shè)計總結(jié)：

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

? 少用纖細(xì)、不規(guī)則的形狀

③ 整套風(fēng)格保持一致

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

要是把不同風(fēng)格的圖標(biāo)混在一起用，用戶根本沒法把它們當(dāng)成“一家人”。所以同一套圖標(biāo)里，不管是形狀、線條粗細(xì)，還是比例、邊角處理，都得按同一個標(biāo)準(zhǔn)來。

設(shè)計總結(jié)：

? 單套圖標(biāo)集里視覺風(fēng)格要保持統(tǒng)一

? 千萬別混搭不同風(fēng)格的圖標(biāo)

02 圖標(biāo)尺寸怎么選？

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

除了這個標(biāo)準(zhǔn)尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：

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

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

03 標(biāo)準(zhǔn) 圖標(biāo)布局

設(shè)計圖標(biāo)時，內(nèi)容需要放在有效區(qū)域內(nèi)里。有效區(qū)域是指頁面滾動或適配不同設(shè)備時圖標(biāo)不會被遮擋的“安全可視區(qū)域”。

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

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

① 有效區(qū)域：圖標(biāo)內(nèi)容要放在20dp×20dp的范圍內(nèi)，四周各留2dp的邊距

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

接下來通過一個圖標(biāo)案例來簡單總結(jié)一下：

上圖從左到右分別代表了在有效區(qū)域、在有效區(qū)域和裁剪區(qū)域、在裁剪區(qū)域之外創(chuàng)建的圖標(biāo)案例。

設(shè)計總結(jié)：

? 圖標(biāo)內(nèi)容保持在20dp×20dp的有效區(qū)域里，記得留2dp邊距

?? 想加視覺沖擊力？內(nèi)容可以延伸到邊距區(qū)域

? 任何情況下，圖標(biāo)都不能超出裁剪區(qū)域

① 網(wǎng)格和關(guān)輔助線

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

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

這里提供一個更科學(xué)和高效的輔助圖標(biāo)設(shè)計方法——使用網(wǎng)格和輔助線，照著這些輔助線來設(shè)計圖標(biāo)，能輕松保持比例一致。

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

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

方形輔助線：邊長18dp，是圖標(biāo)的基礎(chǔ)平衡基準(zhǔn)。比如圖表類圖標(biāo)就可以照著這個方形來畫，保證比例穩(wěn)定。

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

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

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

04 圖標(biāo)結(jié)構(gòu)解析

一個完整的圖標(biāo)，由圓角、起始/結(jié)束點、內(nèi)部形狀、外部輪廓等組成。

① 圖標(biāo)圓角

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

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

設(shè)計總結(jié)：

? 按規(guī)則設(shè)置圓角，統(tǒng)一圓角半徑

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

② 描邊粗細(xì)

推薦的圖標(biāo)描邊粗細(xì)是2dp或常規(guī) (400)，也可以根據(jù)需求靈活調(diào)整，例如在MD3設(shè)計規(guī)范中就提供了100 (細(xì))到700 (粗)的多種選擇。

這里有兩個小技巧：

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

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

設(shè)計總結(jié)：

? 描邊粗細(xì)保持統(tǒng)一，直角圖標(biāo)末端也用直角

05 復(fù)雜圖標(biāo)怎么處理？

如果圖標(biāo)需要一些精細(xì)的細(xì)節(jié)，可以通過一些靈活的調(diào)整來提升辨識度，但不能扭曲基礎(chǔ)的幾何形狀或破壞整體比例。

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

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

設(shè)計總結(jié)

? 正面視角設(shè)計，細(xì)節(jié)微調(diào)不跑偏

? 少用傾斜、旋轉(zhuǎn)的等距/3D呈現(xiàn)方式

06 最后

圖標(biāo)是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優(yōu)勢，必須建立在清晰的結(jié)構(gòu)和統(tǒng)一的規(guī)則之上。

設(shè)計時基于標(biāo)準(zhǔn)的輔助網(wǎng)格走，保持比例均衡、視覺重量一致，設(shè)計出的圖標(biāo)才不會喧賓奪主，反而能提升整個產(chǎn)品的用戶體驗。

來源 | Clip設(shè)計夾（ID：ClipppDesign）

作者 | 趙一 ; 編輯 | 蝦餃

內(nèi)容僅代表作者獨立觀點，不代表早讀課立場