本文將圍繞圖標(biāo)的基本規(guī)則，探討圖標(biāo)的視覺(jué)重量和對(duì)齊問(wèn)題。

1. 使用網(wǎng)格規(guī)范，確保視覺(jué)尺寸一致

界面中的圖標(biāo)通常可以粗略地看成是一些基本形狀的組合：水平矩形、垂直矩形、傾斜矩形、圓形、三角形、正方形。它們?cè)谀：乜磿r(shí)具有相同的視覺(jué)重量，因?yàn)樗鼈兓蚨嗷蛏僮兂闪讼嗤狞c(diǎn)。

圖標(biāo)的基本輪廓

圖標(biāo)根據(jù)其形狀插入網(wǎng)格。例如，方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

網(wǎng)格中的圖標(biāo)

網(wǎng)格中的基本圖形

圖標(biāo)越緊湊，占用的空間就越小。圖標(biāo)的尖角或小細(xì)節(jié)越多，它在畫板上占用的空間就越大。

圖標(biāo)示例。不同形狀的圖標(biāo)可以放置在網(wǎng)格中。

網(wǎng)格中具有更多細(xì)節(jié)的基本形狀：正方形、圓形、三角形

小心不要成為網(wǎng)格的奴隸；網(wǎng)格的存在是為了幫助你，而不是限制你。如果圖標(biāo)與某些突出元素搭配效果更好，那就讓它們脫穎而出。

2. 注意像素網(wǎng)格，確保圖標(biāo)足夠清晰

為了使圖標(biāo)在非視網(wǎng)膜屏幕上清晰易讀，請(qǐng)堅(jiān)持使用像素網(wǎng)格，并在線性圖標(biāo)上最好使用 2px 描邊粗細(xì)。2px 中心對(duì)齊描邊通?？梢蕴峁┳銐虻拇旨?xì)和清晰的輪廓。

2 像素線圖標(biāo)示例

2 像素線圖標(biāo)示例

如果為圖標(biāo)選擇了 1px 描邊，則應(yīng)使用內(nèi)描邊或外描邊，而不是將其居中。

1px 外描邊圖標(biāo)示例

1px 外描邊圖標(biāo)示例

1px 居中描邊將使圖標(biāo)在 100% 縮放時(shí)變得模糊，但在更大尺寸時(shí)變得更清晰。

1 像素居中描邊線圖標(biāo)示例

1 像素居中描邊線圖標(biāo)示例

像素網(wǎng)格用于設(shè)置對(duì)角線的起點(diǎn)和終點(diǎn)。當(dāng)對(duì)角線的角度為 45°、30° 和 60° 時(shí)，它會(huì)比不規(guī)則的角度（如 13.7° 或 81°）更清晰。仍有數(shù)百萬(wàn)人在使用低分辨率屏幕設(shè)備，這就是為什么圖標(biāo)清晰度仍然很重要。

矢量和位圖圖標(biāo)示例

3.保持細(xì)節(jié)一致

最好從復(fù)雜的圖標(biāo)開(kāi)始創(chuàng)建圖標(biāo)集。它將定義細(xì)節(jié)級(jí)別，并幫助您設(shè)計(jì)具有相同視覺(jué)重量的圖標(biāo)。

不同細(xì)節(jié)級(jí)別的圖標(biāo)示例

當(dāng)圖標(biāo)具有不同級(jí)別的細(xì)節(jié)時(shí)，細(xì)節(jié)更豐富的圖標(biāo)會(huì)更吸引用戶的注意力，并且顯得具有更大的視覺(jué)重量。

細(xì)節(jié)不一致

4.控制最小間隙

圖標(biāo)內(nèi)相鄰元素之間的間距不應(yīng)太小，或在整個(gè)圖標(biāo)集中不一致。定義最小間距，并在所有地方以相同的方式使用它，以避免輪廓“粘連”。

不一致的差距

間隙均勻性

對(duì)于線條圖標(biāo)，最好保持最小間距和線條粗細(xì)相等。線條應(yīng)該清晰分開(kāi)或精確連接，不要模糊。

不一致的差距

間隙均勻性

5.刪除重復(fù)部分

在一組圖標(biāo)中，可能會(huì)有一些重復(fù)的細(xì)節(jié)。刪除它們并讓用戶關(guān)注它們的差異，就像數(shù)學(xué)中的簡(jiǎn)化分?jǐn)?shù)一樣。你看到的視覺(jué)噪音越少，你能看到的東西就越多，你對(duì)它的理解就會(huì)越清晰。

如果目標(biāo)用戶已經(jīng)了解自己正在使用什么，就沒(méi)必要一遍又一遍地重復(fù)。例如：避免使用基于信封的圖標(biāo)，這樣人們就不會(huì)認(rèn)為這是一個(gè)電子郵件應(yīng)用程序。人們會(huì)知道這是一款電子郵件應(yīng)用程序，而無(wú)需添加相關(guān)系列的輔助圖標(biāo)）

此規(guī)則也適用于圖標(biāo)周圍的裝飾（框架、背景）。如果這些裝飾無(wú)助于提高圖標(biāo)的可識(shí)別性，那么它們就會(huì)成為阻礙。

6. 遵循風(fēng)格

不要在同一個(gè)圖標(biāo)集中混合不同風(fēng)格和角度的元素。一致的風(fēng)格將有助于用戶識(shí)別圖標(biāo)，并讓用戶明白這些圖標(biāo)具有同等的重要性和地位。

同一緯度的圖標(biāo)

不同尺寸的圖標(biāo)

同樣的原則也適用于線圖標(biāo)和臉圖標(biāo)。如果你把它們混在一起，人們可能會(huì)認(rèn)為它們有不同的重要性或地位。當(dāng)然，除非你是故意這樣做的。例如，臉圖標(biāo)用于鍵，線圖標(biāo)用于其他命令。

一組一致性圖標(biāo)

一組不一致的圖標(biāo)

界面中最好有兩種不同的圖標(biāo)。線形圖標(biāo)表示不可點(diǎn)擊或正常狀態(tài)，面形圖標(biāo)表示可點(diǎn)擊狀態(tài)。

7. 設(shè)計(jì)圖標(biāo)時(shí)使用 2 的倍數(shù)

8px 網(wǎng)格和 12 列是許多界面中常用的尺寸sketch 圖標(biāo)打組，比基于十進(jìn)制的尺寸更靈活。12 可以被 2、3、4、6 整除。因此，24 或 48px 圖標(biāo)已成為標(biāo)準(zhǔn)。如果需要更大的尺寸，可以縮放它們。

8.保持形狀簡(jiǎn)單而精確

完美主義不是我們的目標(biāo)：沒(méi)有人需要追求完美的線條以實(shí)現(xiàn)像素完美。然而，最終產(chǎn)品能夠正確呈現(xiàn)圖標(biāo)而不失真是很重要的。請(qǐng)記住將形狀中的錨點(diǎn)數(shù)量保持在最低限度，并確保它們是一致的。相鄰元素之間不應(yīng)有間隙。

矢量圖標(biāo)調(diào)整優(yōu)化

那那些煩人的“8.999px”或“100.001px”怎么辦？如果錨點(diǎn)放置準(zhǔn)確，圖標(biāo)的邊緣會(huì)看起來(lái)很清晰。此外，合并形狀時(shí)不會(huì)有多余的錨點(diǎn)和間隙風(fēng)險(xiǎn)。

矢量圖標(biāo)調(diào)整優(yōu)化

9. 清除 SVG 文件中的垃圾圖層

許多設(shè)計(jì)軟件（例如）生成的 svg 文件包含不必要的文件 - 額外的組、顏色層和剪貼蒙版。讓我們看看，在 中，一切似乎都很好。

圖標(biāo)示例

在其他軟件（例如 Ai）中打開(kāi)此 SVG 文件，您會(huì)看到很多空?qǐng)D層、不必要的組，有時(shí)還有剪貼蒙版。這些可能會(huì)在您的網(wǎng)站上使用 SVG 文件時(shí)造成問(wèn)題。

Ai 中的圖標(biāo)示例

你可以刪除這些垃圾文件并保存它們。

在文件查看器中預(yù)覽時(shí)，您可以看到生成的 SVG 文件 (.svg) 和編輯后的 ??SVG 文件 (.svg) 有所不同。順便說(shuō)一句sketch 圖標(biāo)打組，您也可以在代碼編輯器中刪除這些垃圾層。如果您知道 SVG 代碼是什么樣子的，您可以嘗試只刪除不必要的數(shù)據(jù)字符串。

10. 圖標(biāo)進(jìn)化、情感和特征

當(dāng)然，這些建議并不是不可打破的規(guī)則。如果你知道自己在做什么，可以隨意跳過(guò)它們。在我看來(lái)，至少有兩種情況下，嚴(yán)肅的幾何圖標(biāo)并不是最好的選擇。

空狀態(tài)。如果你正在為“無(wú)任務(wù)”或“所有郵件已讀”等頁(yè)面設(shè)計(jì)空狀態(tài)（默認(rèn)頁(yè)面），最好使用表情圖標(biāo)或僅使用文字來(lái)描述。表情表情圖標(biāo)會(huì)讓用戶感到開(kāi)心，而沒(méi)有表情的幾何圖標(biāo)則不會(huì)增加任何交互價(jià)值。

吉祥物和插圖。如果您的界面上有吉祥物或插圖，圖案應(yīng)該富有情感。我不知道設(shè)計(jì)師如何用有限的形狀選項(xiàng)和網(wǎng)格來(lái)描繪一個(gè)角色。

還有一件事。在某些特殊情況下，最好問(wèn)問(wèn)自己圖標(biāo)是否真的有必要。這是解決問(wèn)題的最佳方法嗎？一些有意義的文字怎么樣？使用時(shí)要注意平衡，否則，可愛(ài)、時(shí)尚的圖標(biāo)會(huì)讓人感到沮喪，所有的努力都將白費(fèi)。

謝謝閱讀！

歡迎加入設(shè)計(jì)大師官方設(shè)計(jì)交流群，掃描下方二維碼，回復(fù)代碼“入群”，有問(wèn)題可以進(jìn)群討論。

//////結(jié)尾//////

—

是時(shí)候提高自己了

快來(lái)看看豆瓣高分設(shè)計(jì)書籍吧！

▼

如有侵權(quán)請(qǐng)聯(lián)系刪除！