本文是關(guān)于視覺比重和光學(xué)校準(zhǔn)，文字最小化，GIF動圖最大化，下面一起來看看，平面圖標(biāo)的終極指南吧！

一、使用光學(xué)網(wǎng)格

界面圖標(biāo)通常都有一個相近的基本格式：風(fēng)景矩形、肖像矩形、對角矩形、圓形、三角形、正方形。模糊顯示它們具有相同的視覺重量感，因?yàn)樗鼈儠兂苫蚨嗷蛏俚南嗤陌唿c(diǎn)。

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

不要成為網(wǎng)格的奴隸，它是用來幫助你，而不是限制你。如果圖標(biāo)在視覺方面突出一些元素效果會更好，那何樂而不為。

圖標(biāo)越緊湊，所需的空間就越少。圖標(biāo)的尖銳邊緣或小細(xì)節(jié)越多，它所占據(jù)的空間就越大。

二、注意像素網(wǎng)格

要使圖標(biāo)在非視網(wǎng)膜屏幕上清晰顯示，請堅(jiān)持像素網(wǎng)格，并優(yōu)先選擇線條圖標(biāo)的2像素邊框。

中心2像素的邊框，提供了足夠的厚度和清晰的輪廓。如果選擇1像素的邊框，它們應(yīng)該是外部的或者是內(nèi)部的，而不是中心的。否則，這個圖標(biāo)將會在100%的范圍內(nèi)被模糊。

根據(jù)像素網(wǎng)格，設(shè)置對角線的起始點(diǎn)和結(jié)束點(diǎn)。以45°、30°和60°的對角線看起來，比對角線上的角度更清晰，比如：13.7°或81°。

三、保持一定程度的細(xì)節(jié)

最好從最復(fù)雜的圖標(biāo)開始一個圖標(biāo)集，定義細(xì)節(jié)層次，并幫助制作相同視覺比重的圖標(biāo)。

當(dāng)圖標(biāo)有不同層次的細(xì)節(jié)時，更詳細(xì)的圖標(biāo)，會吸引更多用戶的注意力，隨之視覺比重也會增大。

四、控制最小的間隙大小

一個圖標(biāo)，相鄰元素之間的空間，在整個圖標(biāo)集中，不應(yīng)該太小或不一致。定義最小的間隙，避免輪廓隨處“粘附”。

對于線條圖標(biāo)來說，最小的空間與線的粗細(xì)相等是最好的。但線條應(yīng)該是清晰明確的，或是精確的連接，而不是全部連在一起。

五、刪除重復(fù)的部分

在一組圖標(biāo)中，可能會重復(fù)一些細(xì)節(jié)，刪除讓用戶的分散注意力的東西。這就像數(shù)學(xué)中簡化的部分，你看到的圖像越少，你的理解就會越清晰。

如果目標(biāo)用戶已經(jīng)實(shí)現(xiàn)了Ta的工作，就不需要再次重復(fù)這個過程，就像為避免人們認(rèn)為，信封的圖標(biāo)不是電子郵件應(yīng)用。

這個規(guī)則，也涉及到各種各樣的裝飾框架、背景——圍繞著一個圖標(biāo)。如果他們對閱讀圖標(biāo)沒有幫助，反之便會阻礙閱讀圖標(biāo)。

六、選擇并遵循一種特定的風(fēng)格

不要在一個圖標(biāo)集合中，混合顯示體積的正面描述。風(fēng)格的一致性會幫助用戶去識別圖標(biāo)，了解他們所具有的同等重要性狀態(tài)。

同樣的原理，也適用于線條圖標(biāo)和填充圖標(biāo)。如果你把它們混在一起，人們可能會認(rèn)為它們有不同的重要性，除非你有意這樣做。例如：一個填充的圖標(biāo)用于關(guān)鍵命令，而行圖標(biāo)用于其他命令。

但在界面中有兩個不同的圖標(biāo)是很好的。一個線條圖標(biāo)——用于禁用或常規(guī)狀態(tài)；一個填充圖標(biāo)——用于點(diǎn)擊狀態(tài)。

七、利用二進(jìn)制系統(tǒng)

8像素網(wǎng)格和12列布局，被用于許多界面，比十進(jìn)制的規(guī)模更靈活。12可以除以2 3 4 6。因此，以24或48像素的圖標(biāo)區(qū)域?yàn)闃?biāo)準(zhǔn)。如果需要更大的尺寸，這些圖標(biāo)是可以擴(kuò)大的。

八、保持清晰準(zhǔn)確的輪廓

完美主義并不是目標(biāo)，沒有人會需要完美的像素線條。這本身對最終產(chǎn)品就很重要，而不是在最終產(chǎn)品中，用扭曲的圖標(biāo)打底。記住，最基本的形狀錨點(diǎn)數(shù)量和相鄰元素之間的間隙。

同樣的還有令人頭疼的“8.999像素”和“100.001像素”的大小，如果形狀錨定位準(zhǔn)確，圖標(biāo)邊緣看上去會很尖銳。當(dāng)你合并形狀時，就不會冒著有過多的錨和間隙的風(fēng)險。

九、從垃圾箱中凈化可縮放矢量圖形(SVG)

許多像Sketch這樣的界面編輯器，都可以生成帶有不必要的可縮放矢量圖形——過多的組、彩色層和剪切蒙版。在Sketch中，一切看起來都很合適。

在不同的編輯器中，打開可縮放矢量圖形（AI）。你會注意到空的圖層，不需要的組，有時還會有剪切蒙版。當(dāng)前端開發(fā)人員，將圖標(biāo)轉(zhuǎn)換為圖標(biāo)字體或在網(wǎng)頁上使用SVGs時，所有這些都會引起問題。

你可以把這些垃圾保存完并刪除。

可以看到Sketch的SVG（picture.svg）和AI的SVG（picture.svg）的不同預(yù)覽。

譯文作者：SKYUI

原文作者：Slava Shestopalov

原文地址：https://medium.muz.li/icon-set-3b4fc87dc6b5

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議