前言

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

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

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

 

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

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

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

 

 

技巧2 -保持一致

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

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

 

 

Icon set from Super Basic Icons.

 

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

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

技巧4 -使用相等的間距

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

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

 

 

技巧5 -視覺矯正

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

技巧6 -填充空間

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

 

技巧7 -組合樣式

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

技巧8-便捷的工具

工具

• Icons8.com

• iconfinder.com

• flaticon.com

• thenouproject.com

 

資源

• Apple SF Symbols

• Material Icons

• Macosicons.com
  
  
  

  作者：知群

  藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

  

  分享此文一切功德，皆悉回向給文章原作者及眾讀者.
  免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
  

  藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

  UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司