谷歌Material Design的圖標(biāo)設(shè)計(jì)標(biāo)準(zhǔn)正在重新定義界面視覺語言。蘭亭妙微UI設(shè)計(jì)公司深度解析從簡潔性、幾何形狀到風(fēng)格統(tǒng)一的三大核心原則，詳解24dp標(biāo)準(zhǔn)尺寸下的網(wǎng)格系統(tǒng)與布局規(guī)范，并揭秘復(fù)雜圖標(biāo)的細(xì)節(jié)處理技巧。無論是圓角控制還是描邊粗細(xì)，這套方法論讓零基礎(chǔ)設(shè)計(jì)師也能快速掌握專業(yè)級(jí)圖標(biāo)設(shè)計(jì)。
今天分享的是「圖標(biāo)設(shè)計(jì)準(zhǔn)則」。圖標(biāo)是界面設(shè)計(jì)里的 “剛需元素”，一個(gè)小圖標(biāo)能快速傳遞很多信息。好的圖標(biāo)需要兼顧簡潔、現(xiàn)代、友好。但圖標(biāo)的尺寸很小，設(shè)計(jì)時(shí)既要嚴(yán)格遵守設(shè)計(jì)規(guī)則，又得清晰表達(dá)信息，這樣才能保證整套圖標(biāo)的風(fēng)格統(tǒng)一、辨識(shí)度高。
今天就來聊聊大廠在用的圖標(biāo)設(shè)計(jì)原則和設(shè)計(jì)規(guī)范，配合案例進(jìn)行設(shè)計(jì)分析~
01 圖標(biāo)設(shè)計(jì)的3個(gè)核心原則
① 形式夠簡潔
給大家舉個(gè)例子，就說下面的小船圖標(biāo)，想讓圖標(biāo)清晰好認(rèn)，就得做減法，那么用正面的簡約船身造型最合適。
如果圖標(biāo)設(shè)計(jì)的過于細(xì)致，例如圖標(biāo)中添加了船帆、桅桿或者旗幟等細(xì)節(jié)，太寫實(shí)的圖標(biāo)不僅會(huì)降低識(shí)別速度，還會(huì)破壞整套圖標(biāo)的視覺統(tǒng)一性。
設(shè)計(jì)總結(jié)：
? 簡化圖標(biāo)造型，提升清晰度和辨識(shí)度
? 拒絕過度寫實(shí)，避開復(fù)雜繁瑣的設(shè)計(jì)
② 多用幾何形狀打底
使用幾何圖形和統(tǒng)一的基礎(chǔ)形狀來設(shè)計(jì)圖標(biāo)，能打造出清晰醒目的視覺感受。哪怕結(jié)構(gòu)簡單，也能保持清晰的形態(tài)，縮小到小尺寸時(shí)也照樣容易分辨。
反過來講，盡量少用那些纖細(xì)、松散的不規(guī)則形狀，它們會(huì)破壞線條的連貫性，讓整套圖標(biāo)看起來亂糟糟的，沒個(gè)統(tǒng)一的調(diào)性。
設(shè)計(jì)總結(jié)：
? 靠幾何圖形和統(tǒng)一的造型，打造醒目視覺效果
? 少用纖細(xì)、不規(guī)則的形狀
③ 整套風(fēng)格保持一致
這里給大家看一組風(fēng)格統(tǒng)一的圖標(biāo)示例。對(duì)品牌識(shí)別和系統(tǒng)適配來說，保持圖標(biāo)集的視覺一致性太重要了。
要是把不同風(fēng)格的圖標(biāo)混在一起用，用戶根本沒法把它們當(dāng)成“一家人”。所以同一套圖標(biāo)里，不管是形狀、線條粗細(xì)，還是比例、邊角處理，都得按同一個(gè)標(biāo)準(zhǔn)來。
設(shè)計(jì)總結(jié)：
? 單套圖標(biāo)集里視覺風(fēng)格要保持統(tǒng)一
? 千萬別混搭不同風(fēng)格的圖標(biāo)
02 圖標(biāo)尺寸怎么選？
在谷歌的Material Design 3 設(shè)計(jì)規(guī)范中，標(biāo)準(zhǔn) (基線) 圖標(biāo)尺寸是24dp×24dp，設(shè)計(jì)時(shí)建議按100%的比例來做，這樣能保證像素級(jí)的精準(zhǔn)度。
除了這個(gè)標(biāo)準(zhǔn)尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：
20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺元素
40dp/48dp：針對(duì)顯示器、大屏幕，還有標(biāo)題欄這類特殊場(chǎng)景
03 標(biāo)準(zhǔn)圖標(biāo)布局
設(shè)計(jì)圖標(biāo)時(shí)，內(nèi)容需要放在有效區(qū)域內(nèi)里。有效區(qū)域是指頁面滾動(dòng)或適配不同設(shè)備時(shí)圖標(biāo)不會(huì)被遮擋的“安全可視區(qū)域”。
如果想讓圖標(biāo)的視覺沖擊力更強(qiáng)，可以讓內(nèi)容延伸到有效區(qū)域和裁剪區(qū)域之間的留白處，但不能超出裁剪區(qū)域，不然圖標(biāo)很容易被裁剪顯示不全。
具體要怎么布局呢？看下面這兩點(diǎn)就夠了：
① 有效區(qū)域：圖標(biāo)內(nèi)容要放在20dp×20dp的范圍內(nèi)，四周各留2dp的邊距
② 邊距：給有效區(qū)域留出2dp邊距，既能讓圖標(biāo)和周圍元素拉開視覺距離，又能讓整體看起來更平衡
接下來通過一個(gè)圖標(biāo)案例來簡單總結(jié)一下：
上圖從左到右分別代表了在有效區(qū)域、在有效區(qū)域和裁剪區(qū)域、在裁剪區(qū)域之外創(chuàng)建的圖標(biāo)案例。
設(shè)計(jì)總結(jié)：
? 圖標(biāo)內(nèi)容保持在20dp×20dp的有效區(qū)域里，記得留2dp邊距?? 想加視覺沖擊力？內(nèi)容可以延伸到邊距區(qū)域
? 任何情況下，圖標(biāo)都不能超出裁剪區(qū)域
① 網(wǎng)格和關(guān)輔助線
一套圖標(biāo)中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標(biāo)保持視覺大小的一致性呢？
這種情況大家在設(shè)計(jì)圖標(biāo)時(shí)應(yīng)該都碰到過，解決方法可能大多是通過眼睛對(duì)比查看，把看著小的圖標(biāo)調(diào)大一些或者把看著大的圖標(biāo)調(diào)小一點(diǎn)。這種方法效率不高，而且設(shè)計(jì)出來的圖標(biāo)大小不容易保持一致性。
這里提供一個(gè)更科學(xué)和高效的輔助圖標(biāo)設(shè)計(jì)方法——使用網(wǎng)格和輔助線，照著這些輔助線來設(shè)計(jì)圖標(biāo)，能輕松保持比例一致。
例如常用的24dp×24dp圖標(biāo)網(wǎng)格，由正方形、圓形、豎矩形、橫矩形這四種基礎(chǔ)輔助線構(gòu)成。它們就像圖標(biāo)的“骨架”，能幫所有圖標(biāo)保持統(tǒng)一的比例和對(duì)齊效果，哪怕放大10倍看，結(jié)構(gòu)也照樣清晰。
給大家拆解一下這四種輔助線：
方形輔助線：邊長18dp，是圖標(biāo)的基礎(chǔ)平衡基準(zhǔn)。比如圖表類圖標(biāo)就可以照著這個(gè)方形來畫，保證比例穩(wěn)定。
圓形輔助線：直徑20dp，用來設(shè)計(jì)圓潤平衡的圖標(biāo)。像地球圖標(biāo)用這個(gè)圓形打底，就能和其他圖標(biāo)和諧搭配。
垂直矩形輔助線：高20dp、寬16dp，適合強(qiáng)調(diào)縱向比例的圖標(biāo)。比如文檔圖標(biāo)圍著這個(gè)豎矩形設(shè)計(jì)，比例會(huì)特別清晰。
水平矩形輔助線：高16dp、寬20dp，適合橫向比例的圖標(biāo)。像郵件圖標(biāo)用這個(gè)橫矩形當(dāng)基礎(chǔ)，形狀會(huì)很均衡。
04 圖標(biāo)結(jié)構(gòu)解析
一個(gè)完整的圖標(biāo)，由圓角、起始/結(jié)束點(diǎn)、內(nèi)部形狀、外部輪廓等組成。
① 圖標(biāo)圓角
這里重點(diǎn)說下大家容易踩坑的“圓角”的設(shè)計(jì)：例如下圖的銀行卡圖標(biāo)，采用外角2dp圓角、內(nèi)角尖角的設(shè)計(jì)，這樣既柔和又利落。
如果把圓角做得太大，如下圖左側(cè)文檔圖標(biāo)，圖標(biāo)的辨識(shí)度就會(huì)下降；如果一個(gè)圖標(biāo)中混用不同半徑的圓角，如下圖右側(cè)的圖標(biāo)，整個(gè)圖標(biāo)看著就會(huì)很雜亂。
設(shè)計(jì)總結(jié)：
? 按規(guī)則設(shè)置圓角，統(tǒng)一圓角半徑
? 避免圓角半徑過大/半徑混用的情況
② 描邊粗細(xì)
推薦的圖標(biāo)描邊粗細(xì)是2dp或常規(guī) (400)，也可以根據(jù)需求靈活調(diào)整，例如在MD3設(shè)計(jì)規(guī)范中就提供了100 (細(xì))到700 (粗)的多種選擇。
這里有兩個(gè)小技巧：
設(shè)計(jì)直角線性圖標(biāo)時(shí)，描邊的末端盡量做成直角，例如下圖左側(cè)的箭頭圖標(biāo)，45度切割的直角就很清晰；在下圖右側(cè)的添加圖標(biāo)中，內(nèi)部的加號(hào)也采用了2dp的描邊粗細(xì)，與外輪廓保持一致。
另外要注意一套圖標(biāo)需要保持相同的描邊粗細(xì)。如果描邊x粗細(xì)不一致，不僅會(huì)模糊圖標(biāo)形狀，還會(huì)破壞視覺一致性。
設(shè)計(jì)總結(jié)：
? 描邊粗細(xì)保持統(tǒng)一，直角圖標(biāo)末端也用直角
05 復(fù)雜圖標(biāo)怎么處理？
如果圖標(biāo)需要一些精細(xì)的細(xì)節(jié)，可以通過一些靈活的調(diào)整來提升辨識(shí)度，但不能扭曲基礎(chǔ)的幾何形狀或破壞整體比例。
比如回形針圖標(biāo)，為了在24dp的空間里放下多個(gè)曲線，可以把 2dp的標(biāo)準(zhǔn)描邊粗細(xì)微調(diào)成1.5dp；再比如拉面圖標(biāo)，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細(xì)節(jié)更多，則采用1.5dp的細(xì)描邊，讓細(xì)節(jié)更清晰。
還有一個(gè)小原則：設(shè)計(jì)復(fù)雜圖標(biāo)時(shí)，盡量保持正面視角，別做傾斜、旋轉(zhuǎn)的等距或者3D效果——多余的深度感會(huì)增加識(shí)別難度。
設(shè)計(jì)總結(jié)
? 正面視角設(shè)計(jì)，細(xì)節(jié)微調(diào)不跑偏
? 少用傾斜、旋轉(zhuǎn)的等距/3D呈現(xiàn)方式
最后
圖標(biāo)是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優(yōu)勢(shì)，必須建立在清晰的結(jié)構(gòu)和統(tǒng)一的規(guī)則之上。
設(shè)計(jì)時(shí)基于標(biāo)準(zhǔn)的輔助網(wǎng)格走，保持比例均衡、視覺重量一致，設(shè)計(jì)出的圖標(biāo)才不會(huì)喧賓奪主，反而能提升整個(gè)產(chǎn)品的用戶體驗(yàn)。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
