小游說：昨天看到一個(gè)很好的問題，詳細(xì)解釋了圖標(biāo)設(shè)計(jì)流程的各個(gè)方面。 明天我們來看看設(shè)計(jì)師Slava的文章：

1.使用光柵更好地設(shè)計(jì)圖標(biāo)

UI界面的圖標(biāo)一般可以視為以下基本格式之一：垂直正方形、水平圓形、對(duì)角線圓形、正方形、三角形、正圓形。 如果將它們?cè)O(shè)為高斯模糊效果，您會(huì)發(fā)現(xiàn)它們都具有相同的視覺權(quán)重，因?yàn)樗鼈兓蚨嗷蛏贂?huì)產(chǎn)生相同的光斑效果。

根據(jù)圖標(biāo)形狀，將它們放置在相應(yīng)的框架中。 您會(huì)注意到圓形圖標(biāo)比三角形或窄圖標(biāo)更緊湊。

圖標(biāo)越緊湊，所需的空間就越少。 圖標(biāo)的邊緣越鋒利、細(xì)節(jié)越多sketch icon邊框范圍，它們占用的畫板空間就越大。

注意不要過多依賴網(wǎng)格來設(shè)計(jì)圖標(biāo)。 他們是來幫助你的，而不是限制你的。 如果圖標(biāo)的各個(gè)元素看起來拉伸得更好，那就讓它們自然拉伸。

2.注意像素網(wǎng)格的重要性

在非黃斑屏幕上設(shè)計(jì)圖形時(shí)，請(qǐng)非常緊密地使用像素網(wǎng)格sketch icon邊框范圍，并更喜歡使用 2 像素邊框作為圖標(biāo)的腰線。 因?yàn)樗梢宰屵@個(gè)顯示器上的圖標(biāo)更加清晰。

如果給圖標(biāo)設(shè)置了1像素的邊框，此時(shí)邊框應(yīng)該使用outer或inner mask樣式，但不建議居中。 在右側(cè)，您可以聽到差異。

用于使蒙版居中的一像素邊框，即使在放大時(shí)它們也看起來很清晰。 但當(dāng)以 100% 列大小顯示時(shí)，它們會(huì)變得模糊。 所以，請(qǐng)謹(jǐn)慎使用~下面兩張圖是圖標(biāo)居中、屏蔽后形成的效果：

根據(jù)像素的網(wǎng)格線設(shè)置線條的起點(diǎn)和終點(diǎn)將使您的圖標(biāo)看起來更清晰。 一般來說，當(dāng)線條的傾斜角度為45°、30°、60°時(shí)，銳度會(huì)比一些不常見的角度（如13.7°、81°等）更好。 因此，盡量避免使用此類值。

3.保留某些圖標(biāo)細(xì)節(jié)

從一組中最復(fù)雜的圖標(biāo)開始通常是最有效的，因?yàn)樗鼘椭覀兌x相同的視覺權(quán)重并保持所有圖標(biāo)的視覺權(quán)重一致。

當(dāng)圖標(biāo)具有不同的細(xì)節(jié)級(jí)別時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引更多用戶的注意力，但在視覺上顯得更重。

4、控制最小間隙規(guī)格

圖標(biāo)的相鄰元素之間的間距不應(yīng)太小或在整個(gè)圖標(biāo)集中不一致。 在任何情況下，都會(huì)定義最小間隙以防止型材“粘住”。 例如下圖，如果間隙太小，形成的粘性要非常小心：

下面這個(gè)是調(diào)整后的療效，是不是很多？

對(duì)于線性圖標(biāo)，圖標(biāo)線段之間的最小間隙應(yīng)等于線條的粗細(xì)。 另外，腰線應(yīng)明顯分開或絕對(duì)閉合。 右圖來自錯(cuò)誤的案例：

下面這個(gè)是改變后的療效，是不是很多？

5. 刪除重復(fù)項(xiàng)

在圖標(biāo)集中，您可能會(huì)重復(fù)一些細(xì)節(jié)，例如右側(cè)的細(xì)節(jié)。 盡量不要這樣做，讓觀眾的注意力集中在不同的事情上。 這就像物理學(xué)中的分?jǐn)?shù)簡化。 您看到的圖形噪音越少，用戶的理解就越清晰。

比如下面的郵件收發(fā)主題的圖標(biāo)，當(dāng)用戶已經(jīng)非常熟悉自己的具體操作，比如接收郵件、發(fā)短信、回復(fù)等時(shí)，就不要重復(fù)點(diǎn)“信封”了設(shè)計(jì)圖標(biāo)時(shí)的圖形。 簡化它們，療效會(huì)更好。

該規(guī)則還涵蓋圖標(biāo)周圍的各種裝飾、框架和背景。 如果它們不能幫助更好地閱讀圖標(biāo)，最好使它們更加簡化。

6.保持圖標(biāo)風(fēng)格統(tǒng)一

下面兩張圖可以很好地展示正確和錯(cuò)誤的例子。 例如，對(duì)于一組燈圖標(biāo)，如果其中一個(gè)圖標(biāo)以45°的傾斜角度繪制，那么其他圖標(biāo)也應(yīng)該盡量保持這個(gè)角度。 一是不能正視眼睛，二是目光短淺。 看看下面兩張圖，哪一張是正確的？

同樣的原理適用于線性圖標(biāo)和填充圖標(biāo)。 如果你將它們混為一談，人們可能會(huì)認(rèn)為它們具有不同的重要性或地位。 事實(shí)上，除非你故意想要那樣。 例如，實(shí)心圖標(biāo)用于鍵盤命令，線條圖標(biāo)用于其他命令。

其實(shí)我們可以用實(shí)心圖標(biāo)來表示當(dāng)前狀態(tài)，用線形圖標(biāo)來表示非選中狀態(tài)，這也是一個(gè)不錯(cuò)的選擇。

7、基于雙打測量系統(tǒng)的設(shè)計(jì)

對(duì)于許多套接字來說，8 像素網(wǎng)格和 12 列布局比基于十補(bǔ)碼的大小調(diào)整更加靈活。 12可以分為2、3、4和6。因此，24或48像素圖標(biāo)區(qū)域已成為標(biāo)準(zhǔn)。 如果需要更大的尺寸，可以縮放該圖標(biāo)。 又到了上物理課的時(shí)間了！

8.保持輪廓干凈、準(zhǔn)確

對(duì)于完美主義來說，設(shè)計(jì)師不能鉆入死胡同，因?yàn)橥昝赖臇|西是不存在的。 而在你的最終設(shè)計(jì)稿中，正確、不扭曲的圖標(biāo)設(shè)計(jì)仍然非常重要。 請(qǐng)務(wù)必小心確保相鄰節(jié)點(diǎn)和相鄰元素完全對(duì)齊或沒有間隙。

請(qǐng)務(wù)必避免使用“8.999px”或“100.001px”等規(guī)格。 如果節(jié)點(diǎn)位置正確，圖標(biāo)邊緣將看起來很銳利。 這是特別必要的，保持整數(shù)！

9. 清理SVG圖標(biāo)中的垃圾代碼

我們都知道，SVG 圖標(biāo)最終是一串代碼。 生成的SVG圖標(biāo)一般會(huì)包含很多不必要的冗余代碼，比如組、顏色視口和筆畫。 下面的圖標(biāo)看起來很棒，并且......

當(dāng)我們?cè)贏I中打開生成的SVG圖標(biāo)時(shí)，你會(huì)發(fā)現(xiàn)它的視口非?；靵y。 這種混亂的視口會(huì)給后端開發(fā)工程師在轉(zhuǎn)換代碼時(shí)帶來問題。

我們可以刪除這個(gè)不必要的視口，這樣看起來就簡單多了：

10.不要把這篇文章當(dāng)作公式

事實(shí)上，我們上面討論的建議只是建議，并不是硬性的公式。 如果您知道自己在做什么，則可以將它們用作參考，而不必完全遵循它們。 設(shè)計(jì)靈活多變，只要符合用戶體驗(yàn)的規(guī)則，就可以為我們所用。

又一客（陌陌公眾號(hào)sx-uek）UI設(shè)計(jì)、Web全棧開發(fā)、JAVA開發(fā)等免費(fèi)試聽課程目前正在報(bào)名考試。 希望這個(gè)時(shí)代的每個(gè)人都能站在聚光燈下，成就更好的自己！

四月堅(jiān)持讀書，九月就業(yè)！

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