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

什么是圖標(biāo)？

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

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

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

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

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

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

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

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

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

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

基礎(chǔ)線性???? 適合用戶群廣

圓滑線面???? 常規(guī)形式（干凈簡潔）

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

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

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

1. 可識別性

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

2. 視覺統(tǒng)一

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

線性和面性要區(qū)分開來，視覺大小要保持一致性，前面兩者很好理解，視覺大小我給大家演示一下。

說一下我最開始畫圖標(biāo)的框架吧：

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

這種應(yīng)該是最規(guī)范的，也是最嚴(yán)謹(jǐn)?shù)模銈兛梢栽囋嚒?/p>

3. 差異性

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

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

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

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

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

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

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

線性雙色風(fēng)格（多為對比色）：

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

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

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

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

多色相微漸變質(zhì)感+結(jié)構(gòu)虛實(shí)疊印：

小結(jié)：

設(shè)計一套完整的圖標(biāo)，除了保證視覺統(tǒng)一性，還要主要風(fēng)格上的不斷嘗試和創(chuàng)新，甚至可以去嘗試三維或是2.5D的形式去設(shè)計，從而更加立體的去表現(xiàn)圖標(biāo)的意思。

總結(jié)

今天很高興能夠有時間和大家分享一些自己的設(shè)計思路和方法，希望能夠幫助到大家。圖標(biāo)是一種計算機(jī)圖形，可以輔助我們了解信息，圖標(biāo)在界面中的應(yīng)用重要是十分廣泛的，在設(shè)計前應(yīng)考慮到產(chǎn)品視覺風(fēng)格和圖標(biāo)風(fēng)格。

設(shè)計中應(yīng)遵循圖標(biāo)設(shè)計的三個原則來設(shè)計，根據(jù)產(chǎn)品和公司需要來選擇線性還是面性，多嘗試不用風(fēng)格的圖標(biāo)會有意外的收獲。

作者：MoreDesign ，公眾號： Moredesign ，一名具有設(shè)計思維和嚴(yán)謹(jǐn)邏輯的視覺設(shè)計學(xué)生，喜歡設(shè)計并且熱愛，善于分析設(shè)計問題，對設(shè)計喜歡刨根問底。

本文由 @MoreDesign授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖作者提供