圖標(biāo)作為頁面中顯示最直接的設(shè)計元素之一，有著非常重要的傳播與提示作用。而圖標(biāo)風(fēng)格的設(shè)計，與產(chǎn)品屬性，設(shè)計理念，頁面風(fēng)格搭配等因素有很大的關(guān)系。

一、圖標(biāo)風(fēng)格

1. 面性圖標(biāo)

面性圖標(biāo)，常見的樣式有元素輪廓圖形和統(tǒng)一化圖形兩種。 風(fēng)格上有：多色、漸變、不透明度、 微擬物等風(fēng)格。

2. 線性圖標(biāo)

線性圖標(biāo)，常見的風(fēng)格有：漸變、斷點、粗描邊、雙色、高光、直角、點綴填充等樣式。

3. 線面混合圖標(biāo)

線面混合圖標(biāo)，樣式更加豐富，細(xì)節(jié)更多。不透明度、漸變、多色、粗描邊等 可組合的形式也更多。

4. 插畫類圖標(biāo)

插畫類圖標(biāo)有非常豐富的細(xì)節(jié)，復(fù)雜程度很高。但使用局限性也相對高，常用于節(jié)日活動更換圖標(biāo)，或特定產(chǎn)品屬性的APP中使用。

可以選擇和搭配的圖標(biāo)種類有很多，但不能盲目使用，并不是圖標(biāo)做的足夠炫就是好的。使用時，要結(jié)合產(chǎn)品屬性，頁面的布局和風(fēng)格，選擇合適的圖標(biāo)。合適的出彩的圖標(biāo)可以在很短的時間吸引住人們的眼球，并且可以增加用戶使用時的舒適度，也有很好的辨識度以及傳播性。相反，不合適的圖標(biāo)在頁面中十分眨眼，影響用戶的體驗。

二、圖標(biāo)制作

圖標(biāo)制作的幾點要素：①形態(tài)、 ②配色、 ③規(guī)范、 ④趣味、 ⑤提示

1. 形態(tài)

以金融產(chǎn)品為例，為了突顯產(chǎn)品安全、效率等屬性，圖標(biāo)風(fēng)格應(yīng)該設(shè)計得穩(wěn)重，大氣、簡潔、精致。一來圖標(biāo)所表達(dá)的內(nèi)容清晰易懂，不需要用戶思考就可以識別；二來消除了新用戶開始使用時的不安情緒。

精致的設(shè)計可以提升整體頁面的品質(zhì)，使得產(chǎn)品更加專業(yè)可信。細(xì)節(jié)的優(yōu)化可以使得產(chǎn)品在眾多競品中更加亮眼。當(dāng)設(shè)計精致得當(dāng)?shù)漠a(chǎn)品與設(shè)計粗糙的產(chǎn)品進(jìn)行視覺比對時，用戶的選擇不言自明。

常用的樣式大致分為兩種：純面性或線面結(jié)合。

線性圖標(biāo)標(biāo)簽切換時，由線性轉(zhuǎn)化為面性時變化細(xì)節(jié)更明顯，加上動效效果更豐富。面性圖標(biāo)給人的感覺更加有整體感，更加穩(wěn)重。

線性圖標(biāo)

面性圖標(biāo)

標(biāo)簽欄設(shè)計當(dāng)中，首頁位置的圖標(biāo)常用的有房屋標(biāo)志，或者是直接使用產(chǎn)品logo的樣式來進(jìn)行設(shè)計。

logo直接用作首頁圖標(biāo)

細(xì)節(jié)上，前面已經(jīng)通過分析“產(chǎn)品屬性”、提煉“LOGO特點”等方法得到了延伸圖形。這里的icon也可使用這種方法。

土豆視頻and天貓

2. 配色

上一篇中分享了選擇顏色的方法，這個時候便派上了用場。我們在標(biāo)簽欄中可以直接使用品牌主色，未選中的標(biāo)簽圖標(biāo)可以搭配灰色來使用。當(dāng)然，顏色的選擇也與產(chǎn)品屬性以及產(chǎn)品定位相關(guān)。比如：百度外賣首頁的icon，為了突顯科技與品質(zhì)，選擇了線性紅黑兩色搭配。

鏈家and百度外賣

3. 規(guī)范

統(tǒng)一性，是圖標(biāo)設(shè)計中非常重要的一項內(nèi)容。拿方形、圓形等形狀來說，雖然都是在統(tǒng)一大小的框中進(jìn)行設(shè)計，但從視覺上給人的感覺卻不一樣大，這種情況時有發(fā)生。

這時候我們可以用輔助模板來進(jìn)行視覺約束，來輔助我們進(jìn)行設(shè)計。谷歌的material design設(shè)計規(guī)范中就為我們提供了這樣的模板，我們在設(shè)計圖標(biāo)時，在固定的框架內(nèi)制作即可。

4. 趣味

ofo、百度外賣、淘寶、優(yōu)酷、京東等APP在節(jié)日或是重要活動發(fā)布時，首頁版式以及重要的icon都進(jìn)行了更換。這不僅僅是為了迎合活動內(nèi)容或是節(jié)日的到來，更主要的是為了增加產(chǎn)品的趣味性，增加用戶粘度，讓用戶覺得產(chǎn)品有趣并且想繼續(xù)使用深挖功能。同時，也緩解了用戶長期使用此產(chǎn)品所產(chǎn)生的審美疲勞。

所以，找準(zhǔn)切入點，在合適的時機適當(dāng)更新頁面版式或icon，會起到不錯的效果，讓用戶眼前一亮。

ofo and 百度外賣

5. 提示

現(xiàn)在有越來越的產(chǎn)品都將重要信息或者是迫切需要讓用戶知道的內(nèi)容，做成浮動的氣泡形式，懸浮在標(biāo)簽欄之上?；蚴窃谙?、我的icon上添加“紅點”來進(jìn)行提示。

網(wǎng)易云音樂 and 京東金融

這么做的好處是搭配動效可以讓用戶在打開產(chǎn)品時第一時間看到，起到非常醒目的效果。同時，不占用首頁的面積，小巧靈活的解決了“提示”這一問題。

三、細(xì)節(jié)梳理

① 圖標(biāo)制作時，始終保持為矢量圖形，不能轉(zhuǎn)為智能對象或柵格化。

② 圖標(biāo)設(shè)計不能過于復(fù)雜，形狀簡潔易懂就好，適當(dāng)用“減法”。

③ 圖標(biāo)尺寸要為整數(shù)，不能有小數(shù)的出現(xiàn)。

④ 圓角大小統(tǒng)一、描邊粗細(xì)統(tǒng)一、變化的角度統(tǒng)一。

⑤ 設(shè)計時要預(yù)留出足夠的可點擊區(qū)域的位置。

⑥ 產(chǎn)品中的icon風(fēng)格不要過多，三種是極限，配色要達(dá)到和諧。

⑦ 制作工具建議使用AI或者sketch，成稿確定后不要忘記將路徑變?yōu)樾螤睢?/p>

⑧ 使用PS或者AI設(shè)計時，可以調(diào)節(jié)網(wǎng)格線間隔方便設(shè)計。

⑨ 常用icon素材網(wǎng)站：https://icons8.com、http://www.iconfont.cn

四、延展圖形

延展圖形的應(yīng)用場景非常廣泛，線上的網(wǎng)站或是APP中的banner素材、icon下拉刷新等細(xì)節(jié)，線下的海報易拉寶等都可以用到；延伸圖形并不僅僅是作為素材被使用，更有加強品牌認(rèn)知等功能，潛移默化中加強用戶對品牌的了解。

網(wǎng)易考拉

菜鳥 and QQ支付

1. 分析產(chǎn)品屬性

在理念和認(rèn)知上尋找品牌、產(chǎn)品的屬性特點。以金融APP為例，提到金融相關(guān)產(chǎn)品我們會想到什么？

結(jié)合上一篇分析出的品牌關(guān)鍵詞可以得出：安全、保險、金錢、供應(yīng)鏈等等。我們可以結(jié)合這些關(guān)鍵點分析出相關(guān)圖形。

（1）安全——盾牌、鎖

（2）保險——保險箱——矩形

（3）金融——金幣紙幣——矩形、圓形

（4）供應(yīng)鏈——融合、連接——鏈條、重疊

（5）專業(yè)性——醫(yī)療——六邊形

2. 觀察LOGO特點

視覺上觀察分析品牌logo，抓住其每一點細(xì)節(jié)與特點，并將它們作為“元素”提取出來，加以運用，這里以公司目前的主要產(chǎn)品logo為例。

3. 組合示例

（1）實物搭配

將選中的圖形，搭配人物或者物品作為展示，觀察哪種圖形更加合適，這種搭配可以運用在banner或線下物料等。

（2）帶入場景

將挑選出來的圖形進(jìn)行設(shè)計并帶入場景，去掉樣式重復(fù)、延展性差等圖形，選出最終品牌圖形。這一過程不僅可以找到適合的圖形，也可以根據(jù)設(shè)計的場景海報等作為后面運營設(shè)計方面的風(fēng)格參考，完善情緒板，對后期頁面等整體風(fēng)格有一個預(yù)期走向。

延展圖形的分析與建立使我們對產(chǎn)品的認(rèn)知更近了一步。同時，新的圖形方案也打開了我們的視野。使我們可以更多的去嘗試不同的風(fēng)格，去尋找更多優(yōu)秀的案例。慢慢的我們會發(fā)現(xiàn)，即使是一些簡單的圖形，在正確的運用之后也會起到意想不到的效果。

作者：FLYXMF，微信公眾號：Fly Lab

本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。