如何設(shè)計(jì)更好的圖標(biāo)？

2022-5-29    純純

如何在你的產(chǎn)品中設(shè)計(jì)和使用圖標(biāo)？怎樣給品牌帶來獨(dú)特的感覺？我的以下幾點(diǎn)建議建議可以來幫助你設(shè)計(jì)更棒的圖標(biāo)。

 

前言

圖標(biāo)是用戶界面中重要的組成部分之一。它是一種表示命令、內(nèi)容并揭示功能背后含義的視覺語言。

你設(shè)計(jì)的圖標(biāo)應(yīng)該可以被用戶立即理解和識別。

如何在你的產(chǎn)品中設(shè)計(jì)和使用圖標(biāo)？怎樣給品牌帶來獨(dú)特的感覺？我的以下幾點(diǎn)建議建議可以來幫助你設(shè)計(jì)更棒的圖標(biāo)。

 

技巧1 -設(shè)置網(wǎng)格

你永遠(yuǎn)不會創(chuàng)建單獨(dú)一個(gè)的圖標(biāo)，因?yàn)閳D標(biāo)總是一套的。為了讓你的圖標(biāo)具備統(tǒng)一性，你需要一個(gè)網(wǎng)格。

定義安全區(qū)域并設(shè)置邊框。使用生成的網(wǎng)格作為模板，以固化所有圖標(biāo)的比例和大小。

 

 


技巧2 -保持一致

在設(shè)計(jì)一組圖標(biāo)時(shí)，使用相同的線寬、角半徑和填充樣式。這將確保你的圖標(biāo)看起來品牌統(tǒng)一和更容易識別。

例如：線寬 - 2px，角半徑 - 3px;

 

 


Icon set from Super Basic Icons.

 

技巧3：表達(dá)清楚

在圖標(biāo)設(shè)計(jì)中，少即是多。使用清晰的隱喻和點(diǎn)到為止的細(xì)節(jié)，使每個(gè)圖標(biāo)易于識別和理解。



技巧4 -使用相等的間距

在你的圖標(biāo)元素之間使用相等的間距，使你的一整套圖標(biāo)看起來和諧。

你可以通過按住 Figma、Sketch 或 XD 中的 ALT 鍵來計(jì)算向量線之間的距離。

 

 

技巧5 -視覺矯正

基于視覺中心對齊圖標(biāo)元素，平衡視覺重量。


技巧6 -填充空間

旋轉(zhuǎn)局促的圖標(biāo)，充分利用空間來獲得更好的可讀性。

 

技巧7 -組合樣式

使用填充和輪廓樣式來描述界面狀態(tài)，幫助用戶找到正確的圖標(biāo)或按鈕。


技巧8-便捷的工具

工具

  • Icons8.com

  • iconfinder.com

  • flaticon.com

  • thenouproject.com

 

資源


日歷

鏈接

個(gè)人資料

存檔