前言

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

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

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

 

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

你永遠(yuǎn)不會(huì)創(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í)，使用相同的線(xiàn)寬、角半徑和填充樣式。這將確保你的圖標(biāo)看起來(lái)品牌統(tǒng)一和更容易識(shí)別。

例如：線(xiàn)寬 - 2px，角半徑 - 3px;

 

 

Icon set from Super Basic Icons.

 

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

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

技巧4 -使用相等的間距

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

你可以通過(guò)按住 Figma、Sketch 或 XD 中的 ALT 鍵來(lái)計(jì)算向量線(xiàn)之間的距離。

 

 

技巧5 -視覺(jué)矯正

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

技巧6 -填充空間

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

 

技巧7 -組合樣式

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

技巧8-便捷的工具

工具

• Icons8.com

• iconfinder.com

• flaticon.com

• thenouproject.com

 

資源

• Apple SF Symbols

• Material Icons

• Macosicons.com
  
  
  

  作者：知群

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

  

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

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

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