1.使用光柵

界面圖標(biāo)通常可以近似為基本格式之一：橫向矩形，縱向矩形，對(duì)角矩形，圓形，三角形，正方形。模糊顯示它們具有相同的視覺重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)。

根據(jù)圖標(biāo)形狀，將其刻入光柵的相應(yīng)框架中。例如，方形圖標(biāo)比三角形或細(xì)長圖標(biāo)更緊湊。

圖標(biāo)越緊湊，所需空間越小。圖標(biāo)具有更銳利的邊緣或小細(xì)節(jié)，它應(yīng)占據(jù)的畫板空間越多。

小心你成為網(wǎng)格的奴隸。它是幫助，而不是限制。如果一個(gè)圖標(biāo)在視覺上更好用一些伸出的元素，讓它們伸出來。

---

2.注意像素網(wǎng)格

要在非視網(wǎng)膜屏幕上使圖標(biāo)清晰，請(qǐng)堅(jiān)持使用像素網(wǎng)格，并優(yōu)先選擇2像素邊框作為線條圖標(biāo)。中心2像素邊框提供足夠的厚度和清晰的輪廓。

如果為圖標(biāo)選擇1像素邊框，則它們應(yīng)該是外部或內(nèi)部但不是居中。

居中的1像素邊框使圖標(biāo)以100％的比例模糊，但如果放大則看起來很清晰。

根據(jù)像素網(wǎng)格設(shè)置對(duì)角線的起點(diǎn)和終點(diǎn)。角度為45°，30°和60°的對(duì)角線看起來比對(duì)角線不規(guī)則的更銳利，如13.7°或81°。

3.保持一定的細(xì)節(jié)水平

最好從最復(fù)雜的圖標(biāo)開始一個(gè)做圖標(biāo)集。它將定義細(xì)節(jié)級(jí)別并幫助制作相同視覺重量的圖標(biāo)。

當(dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更詳細(xì)的圖標(biāo)會(huì)吸引更多用戶的注意力，并且看起來視覺上更重。

4.控制最小間隙尺寸

圖標(biāo)的相鄰元素之間的空間在整個(gè)集合中不應(yīng)太小或不一致。定義最小間隙并將其保持在任何地方以避免輪廓“粘住”。

對(duì)于線圖標(biāo)，最小空間等于線條粗細(xì)是很好的。線應(yīng)該是明顯分離或準(zhǔn)確連接，從未幾乎相連。

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

在圖標(biāo)集中，你可能會(huì)重復(fù)細(xì)節(jié)。擺脫它們，將觀眾的注意力集中在不同的東西上。這就像數(shù)學(xué)中的分?jǐn)?shù)簡化一樣。你看到的圖形噪聲越少，你的理解就越清晰。

如果目標(biāo)用戶已經(jīng)意識(shí)到他或她的工作原理，則無需一次又一次地重復(fù)。例如，避免基于信封的圖標(biāo)不會(huì)讓人們認(rèn)為這不是電子郵件應(yīng)用程序。

此規(guī)則還涉及圖標(biāo)周圍的各種裝飾 - 框架，背景。如果他們沒有幫助閱讀圖標(biāo)，他們會(huì)阻礙閱讀圖標(biāo)。

---

6.選擇某種風(fēng)格并按照它進(jìn)行操作

不要在一個(gè)圖標(biāo)集內(nèi)混合顯示。樣式一致性將幫助用戶識(shí)別圖標(biāo)并理解它們具有相同的重要性或狀態(tài)。

相同的原理適用于線圖標(biāo)和填充圖標(biāo)。如果你混合它們，人們可能會(huì)認(rèn)為它們具有不同的重要性或地位。當(dāng)然，除非你故意要那樣。例如，填充圖標(biāo)用于鍵命令，線圖標(biāo)用于其他命令。

在接口中有兩個(gè)每個(gè)圖標(biāo)的變體很好。線圖標(biāo) - 用于禁用或常規(guī)狀態(tài)。填充圖標(biāo) - 用于單擊狀態(tài)。

7.使用基于2的尺寸系統(tǒng)

與基于十進(jìn)制的大小調(diào)整相比，8像素網(wǎng)格和12列布局用于許多接口更靈活。12可以分為2,3,4和6.因此，24或48像素圖標(biāo)區(qū)域已成為標(biāo)準(zhǔn)。如果需要更大的尺寸，可以縮放這些圖標(biāo)。

8.保持輪廓清潔準(zhǔn)確

完美主義不是目標(biāo)。對(duì)于像素完美的線條，沒有人需要像素完美的線條。但這對(duì)于最終產(chǎn)品中正確但不扭曲的圖標(biāo)渲染非常重要。請(qǐng)記住所需的最少數(shù)量的形狀錨點(diǎn)和相鄰元素之間沒有間隙。

與惱人的“8.999 px”或“100.001 px”尺寸相同的故事。如果形狀錨定位準(zhǔn)確，圖標(biāo)邊緣看起來很清晰。并且在合并形狀時(shí)不會(huì)冒出過多錨點(diǎn)和間隙的風(fēng)險(xiǎn)。

9.從垃圾中清理SVG

許多界面編輯器（如Sketch）可以生成具有不必要的工件的SVG - 過多的組，顏色層和剪切蒙版。讓我們來看看。在Sketch中，一切看起來都很好。

在另一個(gè)編輯器（例如，Adobe Illustrator）中打開此SVG。你會(huì)注意到空?qǐng)D層，不必要的組，有時(shí)還有剪貼蒙版。當(dāng)前端開發(fā)人員將圖標(biāo)轉(zhuǎn)換為iconfont或在網(wǎng)頁上使用SVG時(shí)，所有這些都可能會(huì)導(dǎo)致問題。

你可以刪除此垃圾并保存。

你將看到Sketch SVG（picture.svg）和已編輯的Illustrator SVG（picture_new.svg）在文件查看器中具有不同的預(yù)覽。