本篇文章分享了一些如何確定、把控圖標風格，以及圖標設計的創(chuàng)意方法，對于剛入職場的設計師們來說非常實用。

圖標是用戶在應用中接觸最多的視覺符號，它既承載了引導用戶操作的功能，也是構成產品視覺風格的重要元素。

新入職場的設計師可能會因為時間緊張或急于出效果，而直接上網找素材開始設計圖標，導致最終被問及設計依據(jù)時，只能說出“流行”或者“比較有設計感”這樣的理由。

所以本文主要分享在接到新項目時，如何確定、把控圖標風格，以及圖標設計的創(chuàng)意方法。

Step1.設計分析：從產品出發(fā)確定視覺方向

為什么要從產品出發(fā)？

圖標是產品整體視覺的一部分，它和界面的其他設計元素應保持統(tǒng)一的設計語言。通過產品定位、品牌確定的視覺方向，能夠實現(xiàn)產品界面中所有視覺設計的一致性。

從產品到視覺，如何提煉視覺關鍵詞？

這其實是一個從產品開始發(fā)散，漸漸具像化、視覺化的過程。

籠統(tǒng)地說可以歸納為“名詞（產品定位）-形容詞（視覺關鍵詞）-名詞（設計語言）”的過程，舉個簡單的例子：bilibili-二次元、彈幕（名詞）-快樂/活潑/可愛（形容詞）-多彩/圓/表情（名詞）。

有經驗的設計師可能在接到需求時腦海中已經有一個大概的設計圖了。

對于新人來說，需要平時多研究別人的產品設計，網上有很多關于如何賞析的文章可以閱讀，積累素材。

總之通過產品定位，目標是要獲得一些形容視覺氛圍印象的詞匯，最終才能變成具體的、設計語言表述的東西。

舉例：產品定位與視覺表現(xiàn)

蝦米：以“聽見不同”為產品Slogan，定位于小眾、文藝、品質，通過它的產品我們能感受到它的精致和細膩的品質感。

產品中沒有用到大面積的彩色色塊或分割線，界面很干凈；圖標設計方面，則采用非常細的描邊（2-3px，和頂部tab下的線條一致），同時應用了斷線的處理和短線條的修飾，圖標顯得非常精致。

外加造型上的創(chuàng)意：首頁的功能入口圖標都結合了圓（CD的造型）的形式，這些細節(jié)烘托出蝦米音樂的細膩。

網易云音樂：app開屏Slogan是“音樂的力量”，進入主頁看到頂部用了大面積的主題紅，整體氛圍較為熱烈。

相應的，它的金剛區(qū)圖標也運用了紅色漸變的圓形底板，以平衡界面的視覺重量，避免頭重腳輕。

如果用蝦米那種細線形式的圖標，首先它無法傳遞力量感，其次也無法撐起界面（因為頭部色彩太重了）。

圖標造型雖中規(guī)中矩，沒有過多的修飾性設計，但圖標表意準確，簡潔易懂，較為大眾化。

QQ音樂：Slogan是“聽我想聽的音樂”，給人的品牌印象是“潮流的”、“個性的”。因此首頁入口圖標采用更有重量感的面性設計而非線性，即便是其他線性圖標的設計（如播放控制及“我的”界面中），所用的描邊也是較粗的，以形成更為“強烈”和“肯定”的風格。

所以，當我們需要為產品設計一套新圖標時，不能急著找參考，首要理解產品定位和用戶群特征，提煉視覺關鍵詞，拿準視覺方向。

Step2. 設計方法：確定圖標各要素的設計表現(xiàn)

視覺的關鍵詞確定后，可以開始定義設計語言了。如果你對于圖標設計還不是很熟練，那么可以嘗試將圖標設計細分成幾個要素：造型、描邊、色彩、圓角、大小、質感等，分別去定義這些要素，一套圖標的設計語言的雛形也基本形成了。

如果你的產品是活潑的社交產品，那么你可能要去嘗試圓角、較細的描邊、飽和豐富的色彩，來表現(xiàn)產品的親和力，渲染熱烈的氛圍。

如果你要做高端的電商平臺，那么你的圖標可能采用稍細的描邊、干凈簡潔的圖形表現(xiàn)、以及較為克制的用色，來體現(xiàn)平臺的高級感。

在這個階段的設計并不是一蹴而就的，需要耐心地多去嘗試，對比不同的效果。

Step3. 設計加分項：創(chuàng)意方法

按照這個思路基本可以把圖標風格定下來，但是如果只按照這個思（套）路（路）去做圖標，最終設計可能會陷入嚴重同質化。這時候就需要加入一些創(chuàng)意性、特色的設計表達，形成與競品的差異。

但是創(chuàng)意難求，也許很多人都經歷過在網上不斷刷圖片找參考期待靈感閃現(xiàn)，所以我嘗試從圖標的造型、色彩、質感等維度去歸納圖標的創(chuàng)意方法，從其中一個點切入尋求創(chuàng)新，也許能更快地找到好的表達。

1. 從品牌LOGO延伸設計

這是最為推薦的思路，因為從Logo設計特征延展出來的圖標設計，其實是把品牌基因融進UI設計，能讓用戶自然地產生與品牌間的聯(lián)想，加深品牌印象。

馬蜂窩：提取了Logo底部的弧線設計，在系統(tǒng)圖標中多處都應用了弧線，成為其標志性的設計元素，app logo和系統(tǒng)圖標形成一套統(tǒng)一的視覺系統(tǒng)。

鏈家、Quark：都采用斷線（或稱為開口）的設計，由于品牌Logo本身具有這種特點，因此讓人感覺非常自然、一體化。

2. 從品牌IP延伸設計

和從品牌logo延伸的設計一樣，從IP延展也能讓用戶自然地聯(lián)想到品牌，并且擬人化的形象能讓圖標富有情感和活力，更好地將情緒傳遞給用戶。

3. 造型創(chuàng)意

斷線法：斷線（開口）的設計讓圖標更有造型感。需注意的是，開口通常選擇在線條交界的地方，讓圖標有透氣的感覺。

幾何法：

運用基礎的幾何圖形如圓、方、線條、點等做設計，這種設計語言最終呈現(xiàn)的風格往往會有較強的設計感，適合需要強調自己調性的、或是和藝術相關品類的app；

由于這種設計造型簡潔，所以通常會結合稍粗的線條增加圖標視覺重量。

4. 色彩創(chuàng)意

1. 色塊（自如）：描邊的圖標造型結合幾何形狀的色塊，是現(xiàn)在較為流行的一種設計；

2. 微漸變（大眾點評）：流行了一整年的設計，在很多app的金剛區(qū)圖標上會采用這種設計來強調入口，吸引用戶視覺注意力；

3. 鄰近色的碰撞（enjoy）：比較少見，如果應用不當容易導致圖標過于花哨，失去視覺焦點。

4. 同色相的不同透明度或不同明度組合：能夠豐富圖標的色彩層次，同時又不至于讓圖標太復雜。

5. 質感創(chuàng)意

具有質感的設計會讓圖標視覺非常突出，因此通常適合應用在界面本身內容較多，需要特別強調的圖標類型上（如金剛區(qū)圖標）。

常用的表現(xiàn)手法：

1. 漸變：應用漸變色讓圖標具有厚度或形成前后關系；
2. 投影：應用投影提高圖標的視覺層級，使具有重量感；
3. 輕擬物：比起以前追求逼真細節(jié)的擬物，通過色彩變化形成的輕微擬物質感能讓圖標更具現(xiàn)代感。

6. 動效創(chuàng)意

在圖標上應用動效的例子越來越多了，但多數(shù)是在切換tab時有一個縮放效果的動效。

以下這兩個例子是圖標在選中狀態(tài)時有很輕的動畫效果，讓人感覺很舒服：

氧氣app：商店Tab在選中時，盒子上方的氣泡在輕盈地晃動碰撞，創(chuàng)意也符合產品“氧氣”的主題。并且這種微動效很輕，不會過于分散用戶注意力，在圖標動起來的瞬間，能給用戶眼前一亮的驚喜；

餓了么：分類圖標的“水果”圖標，是會輕微彈跳的（嗯截圖的時候橙子正跳著所以拉長了）；

VSCO：DSCO icon有漸變色彩變化的動效，可能是出于推廣的需求，需要吸引用戶的注意，對于第一次看到的用戶來說，出于好奇點擊的可能性應該比較大。

只需要一點點的創(chuàng)新就能讓圖標形成差異化，深化品牌風格。以上每種創(chuàng)意方法都有各自的特點，在我們確定好風格方向后，需要結合項目特點選擇合適的創(chuàng)意方法。

總結

1. 設計分析是基礎：從產品、品牌出發(fā)判斷視覺方向是設計合理的前提，還能讓我們被產品或者老板挑戰(zhàn)時有理有據(jù)不心虛啊；
2. 嘗試“逐個擊破”：設計圖標時，將圖標各元素“解構”（形、色、質、動效），耐心對比各種組合的效果；
3. 創(chuàng)意形成差異：融入品牌基因的創(chuàng)意，是與競品形成差異化、建立品牌獨特風格的關鍵。但在追求表現(xiàn)和創(chuàng)意的過程中需要維持既定的方向，時不時停下來看看，參考前面所做的分析，檢視自己的設計是否滿足要求。

（文中有部分圖片來源花瓣所以沒有標注出處，如果設計師本人看到可以和我聯(lián)系補充出處，謝謝～）

本文由 @REMY 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

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