圖標icon

圖標作為頁面中顯示最直接的設計元素之一，有著非常重要的傳播與提示作用。而圖標風格的設計，與產品屬性，設計理念，頁面風格搭配等因素有很大的關係。

一.圖標風格

1.面性圖標

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

2.線性圖標

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

3.線面混合圖標

線面混合圖標，樣式更加豐富，細節更多。不透明度、漸變、多色、粗描邊等 可組合的形式也更多。

4.插畫類圖標

插畫類圖標有非常豐富的細節，複雜程度很高。但使用局限性也相對高，常用於節日活動更換圖標，或特定產品屬性的APP中使用。

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

二.圖標製作

圖標製作的幾點要素：①形態、 ②配色、 ③規範、 ④趣味、 ⑤提示

1.形態

以金融產品為例，為了突顯產品安全、效率等屬性，圖標風格應該設計得穩重，大氣、簡潔、精緻。一來圖標所表達的內容清晰易懂，不需要用戶思考就可以識別；二來消除了新用戶開始使用時的不安情緒。

精緻的設計可以提升整體頁面的品質，使得產品更加專業可信。細節的優化可以使得產品在眾多競品中更加亮眼。當設計精緻得當的產品與設計粗糙的產品進行視覺比對時，用戶的選擇不言自明。

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

線性圖標標籤切換時，由線性轉化為面性時變化細節更明顯，加上動效效果更豐富。面性圖標給人的感覺更加有整體感，更加穩重。

線性圖標

面性圖標

標籤欄設計當中，首頁位置的圖標常用的有房屋標誌，或者是直接使用產品logo的樣式來進行設計。

logo直接用作首頁圖標

細節上，前面已經通過分析「產品屬性」、提煉「LOGO特點」等方法得到了延伸圖形。這裡的icon也可使用這種方法。

土豆視頻and天貓

2.配色

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

鏈家and百度外賣

3.規範

統一性，是圖標設計中非常重要的一項內容。拿方形、圓形等形狀來說，雖然都是在統一大小的框中進行設計，但從視覺上給人的感覺卻不一樣大，這種情況時有發生。

這時候我們可以用輔助模板來進行視覺約束，來輔助我們進行設計。谷歌的material design設計規範中就為我們提供了這樣的模板，我們在設計圖標時，在固定的框架內製作即可。

4.趣味

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

所以，找准切入點，在合適的時機適當更新頁面版式或icon，會起到不錯的效果，讓用戶眼前一亮。

ofo and 百度外賣

5.提示

現在有越來越的產品都將重要信息或者是迫切需要讓用戶知道的內容，做成浮動的氣泡形式，懸浮在標籤欄之上。或是在消息、我的icon上添加「紅點」來進行提示。

網易雲音樂 and 京東金融

這麼做的好處是搭配動效可以讓用戶在打開產品時第一時間看到，起到非常醒目的效果。同時，不佔用首頁的面積，小巧靈活的解決了「提示」這一問題。

三.細節梳理

① 圖標製作時，始終保持為矢量圖形，不能轉為智能對象或柵格化。

② 圖標設計不能過於複雜，形狀簡潔易懂就好，適當用「減法」。

③ 圖標尺寸要為整數，不能有小數的出現。

④ 圓角大小統一、描邊粗細統一、變化的角度統一

⑤ 設計時要預留出足夠的可點擊區域的位置。

⑥ 產品中的icon風格不要過多，三種是極限；配色要達到和諧。

⑦製作工具建議使用AI或者sketch，成稿確定後不要忘記將路徑變為形狀。

⑧使用PS或者AI設計時，可以調節網格線間隔方便設計。

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

延展圖形

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

網易考拉

菜鳥 and QQ支付

一.分析產品屬性

在理念和認知上尋找品牌、產品的屬性特點。以金融APP為例，提到金融相關產品我們會想到什麼？結合上一篇分析出的品牌關鍵詞可以得出：安全、保險、金錢、供應鏈等等。我們可以結合這些關鍵點分析出相關圖形。

1.安全——盾牌、鎖

2.保險——保險箱——矩形

3.金融——金幣紙幣——矩形、圓形

4.供應鏈——融合、連接——鏈條、重疊

5.專業性——醫療——六邊形

二.觀察LOGO特點

視覺上觀察分析品牌logo，抓住其每一點細節與特點。並將它們作為「元素」提取出來，加以運用。這裡以公司目前的主要產品logo為例。

三.組合示例

1.實物搭配

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

2.帶入場景

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

延展圖形的分析與建立使我們對產品的認知更近了一步。同時，新的圖形方案也打開了我們的視野。使我們可以更多的去嘗試不同的風格，去尋找更多優秀的案例。慢慢的我們會發現，即使是一些簡單的圖形，在正確的運用之後也會起到意想不到的效果。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！