圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形，它不僅是一種圖形，更是一種標(biāo)識(shí)。本文主要與大家探討關(guān)于小圖標(biāo)的設(shè)計(jì)思考和法則。

什么是圖標(biāo)？

圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形，其中桌面圖標(biāo)是軟件標(biāo)識(shí)，界面中的圖標(biāo)是功能標(biāo)識(shí)。它源自于生活中的各種圖形標(biāo)識(shí)，是計(jì)算機(jī)應(yīng)用圖形化的重要組成部分。

圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形，它不僅是一種圖形，更是一種標(biāo)識(shí)，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。

圖標(biāo)的設(shè)計(jì)是輔助我們更好的傳達(dá)信息和目標(biāo)，所以在一個(gè)界面里面，圖標(biāo)其實(shí)其實(shí)發(fā)揮了相當(dāng)大的作用：

• 首頁(yè)金剛區(qū)入口引導(dǎo)；
• 個(gè)人中心選項(xiàng)? ；
• 底部標(biāo)簽功能模塊。

由此可見(jiàn)圖標(biāo)占比確實(shí)蠻大的。

怎么設(shè)計(jì)好這些小圖標(biāo)呢？

先進(jìn)行設(shè)計(jì)思考：

1. 產(chǎn)品視覺(jué)風(fēng)格定位（行業(yè)領(lǐng)域）；
2. 圖標(biāo)具體應(yīng)用的界面；
3. 產(chǎn)品面相的用戶(hù)人群是怎樣的？

先看一組不用風(fēng)格的圖標(biāo)：

卡通風(fēng)格???? 趣味性很強(qiáng)

基礎(chǔ)線(xiàn)性???? 適合用戶(hù)群廣

圓滑線(xiàn)面???? 常規(guī)形式（干凈簡(jiǎn)潔）

極簡(jiǎn)???????? 凸顯品質(zhì)和風(fēng)格

看完以上四個(gè)例子，大家應(yīng)該都明白了吧，不同行業(yè)、不同場(chǎng)景、不同用戶(hù)，圖標(biāo)的設(shè)計(jì)和表達(dá)方式是不一樣的，所以設(shè)計(jì)前需要思考，你需要表達(dá)的設(shè)計(jì)思路和產(chǎn)品的定位。

圖標(biāo)設(shè)計(jì)的三原則

1. 可識(shí)別性

在設(shè)計(jì)圖標(biāo)時(shí)，盡量保證可識(shí)別性的存在，因?yàn)閳D標(biāo)是輔助我們與機(jī)器之間交互的紐帶，能夠更加幫助我們?nèi)ダ斫庑畔ⅲ栽O(shè)計(jì)不要過(guò)于復(fù)雜，提煉元素準(zhǔn)確，不拖泥帶水，言簡(jiǎn)意賅。

2. 視覺(jué)統(tǒng)一

我主要?dú)w納為三點(diǎn)：像素?cái)?shù)值統(tǒng)一：2PX/3PX/4PX。

線(xiàn)性和面性要區(qū)分開(kāi)來(lái)，視覺(jué)大小要保持一致性，前面兩者很好理解，視覺(jué)大小我給大家演示一下。

說(shuō)一下我最開(kāi)始畫(huà)圖標(biāo)的框架吧：

我之前一直用這種框架來(lái)平衡視覺(jué)大小，后來(lái)發(fā)現(xiàn)有誤差，現(xiàn)在會(huì)規(guī)范一些了。

這種應(yīng)該是最規(guī)范的，也是最嚴(yán)謹(jǐn)?shù)?，你們可以試試?/p>

3. 差異性

中國(guó)的文字很相似，意思也很相近，所以在設(shè)計(jì)圖標(biāo)的時(shí)候，一定要準(zhǔn)確地去理解文字信息，首先在字面意思上找出差異化，然后你在設(shè)計(jì)圖標(biāo)形式的時(shí)候就很容易拉開(kāi)兩者之間的差異性了！

在圖形處理上也要區(qū)分：

圖標(biāo)到底是線(xiàn)性好還是面性好？

經(jīng)常有設(shè)計(jì)師小伙伴在做圖標(biāo)的時(shí)候，就掉坑了，看到很多圖標(biāo)，然后就在糾結(jié)到底是做線(xiàn)性還是做面性？

在這里，我給大家分享我自己的理解和設(shè)計(jì)思路：

• 如果你希望你做的圖標(biāo)具有品牌感或是有氣質(zhì)一些的話(huà)，我建議還是做線(xiàn)性的，因?yàn)榫€(xiàn)性的圖標(biāo)可以非常好規(guī)范而且能夠做出一定的設(shè)計(jì)基調(diào)，能夠彰顯你設(shè)計(jì)師的風(fēng)格和產(chǎn)品氣質(zhì)。
• 如果你希望你做的圖標(biāo)想表達(dá)突出和厚重，還有豐富細(xì)節(jié)或是著重表達(dá)的話(huà)，我可以建議你做面性的，因?yàn)槊嫘钥梢园l(fā)揮的修飾程度可以更加廣泛。

現(xiàn)在流行的圖標(biāo)風(fēng)格

線(xiàn)性雙色風(fēng)格（多為對(duì)比色）：

線(xiàn)性雙色+局部面性（豐富細(xì)節(jié)化）：

線(xiàn)面結(jié)合（很直接）：

炫彩風(fēng)格+彌散陰影（用于特定的場(chǎng)景）：

多色相微漸變質(zhì)感：

多色相微漸變質(zhì)感+結(jié)構(gòu)虛實(shí)疊?。?/strong>