本篇文章分享了一些如何確定、把控圖標(biāo)風(fēng)格，以及圖標(biāo)設(shè)計(jì)的創(chuàng)意方法，對(duì)于剛?cè)肼殘?chǎng)的設(shè)計(jì)師們來說非常實(shí)用。

圖標(biāo)是用戶在應(yīng)用中接觸最多的視覺符號(hào)，它既承載了引導(dǎo)用戶操作的功能，也是構(gòu)成產(chǎn)品視覺風(fēng)格的重要元素。

新入職場(chǎng)的設(shè)計(jì)師可能會(huì)因?yàn)闀r(shí)間緊張或急于出效果，而直接上網(wǎng)找素材開始設(shè)計(jì)圖標(biāo)，導(dǎo)致最終被問及設(shè)計(jì)依據(jù)時(shí)，只能說出“流行”或者“比較有設(shè)計(jì)感”這樣的理由。

所以本文主要分享在接到新項(xiàng)目時(shí)，如何確定、把控圖標(biāo)風(fēng)格，以及圖標(biāo)設(shè)計(jì)的創(chuàng)意方法。

Step1.設(shè)計(jì)分析：從產(chǎn)品出發(fā)確定視覺方向

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

圖標(biāo)是產(chǎn)品整體視覺的一部分，它和界面的其他設(shè)計(jì)元素應(yīng)保持統(tǒng)一的設(shè)計(jì)語言。通過產(chǎn)品定位、品牌確定的視覺方向，能夠?qū)崿F(xiàn)產(chǎn)品界面中所有視覺設(shè)計(jì)的一致性。

從產(chǎn)品到視覺，如何提煉視覺關(guān)鍵詞？

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

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

有經(jīng)驗(yàn)的設(shè)計(jì)師可能在接到需求時(shí)腦海中已經(jīng)有一個(gè)大概的設(shè)計(jì)圖了。

對(duì)于新人來說，需要平時(shí)多研究別人的產(chǎn)品設(shè)計(jì)，網(wǎng)上有很多關(guān)于如何賞析的文章可以閱讀，積累素材。

總之通過產(chǎn)品定位，目標(biāo)是要獲得一些形容視覺氛圍印象的詞匯，最終才能變成具體的、設(shè)計(jì)語言表述的東西。

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

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

產(chǎn)品中沒有用到大面積的彩色色塊或分割線，界面很干凈；圖標(biāo)設(shè)計(jì)方面，則采用非常細(xì)的描邊（2-3px，和頂部tab下的線條一致），同時(shí)應(yīng)用了斷線的處理和短線條的修飾，圖標(biāo)顯得非常精致。

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

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

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

如果用蝦米那種細(xì)線形式的圖標(biāo)，首先它無法傳遞力量感，其次也無法撐起界面（因?yàn)轭^部色彩太重了）。

圖標(biāo)造型雖中規(guī)中矩，沒有過多的修飾性設(shè)計(jì)，但圖標(biāo)表意準(zhǔn)確，簡(jiǎn)潔易懂，較為大眾化。

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

所以，當(dāng)我們需要為產(chǎn)品設(shè)計(jì)一套新圖標(biāo)時(shí)，不能急著找參考，首要理解產(chǎn)品定位和用戶群特征，提煉視覺關(guān)鍵詞，拿準(zhǔn)視覺方向。

Step2. 設(shè)計(jì)方法：確定圖標(biāo)各要素的設(shè)計(jì)表現(xiàn)

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

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

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

在這個(gè)階段的設(shè)計(jì)并不是一蹴而就的，需要耐心地多去嘗試，對(duì)比不同的效果。

Step3. 設(shè)計(jì)加分項(xiàng)：創(chuàng)意方法

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

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

1. 從品牌LOGO延伸設(shè)計(jì)

這是最為推薦的思路，因?yàn)閺腖ogo設(shè)計(jì)特征延展出來的圖標(biāo)設(shè)計(jì)，其實(shí)是把品牌基因融進(jìn)UI設(shè)計(jì)，能讓用戶自然地產(chǎn)生與品牌間的聯(lián)想，加深品牌印象。

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

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

2. 從品牌IP延伸設(shè)計(jì)

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

3. 造型創(chuàng)意

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

幾何法：

運(yùn)用基礎(chǔ)的幾何圖形如圓、方、線條、點(diǎn)等做設(shè)計(jì)，這種設(shè)計(jì)語言最終呈現(xiàn)的風(fēng)格往往會(huì)有較強(qiáng)的設(shè)計(jì)感，適合需要強(qiáng)調(diào)自己調(diào)性的、或是和藝術(shù)相關(guān)品類的app；

由于這種設(shè)計(jì)造型簡(jiǎn)潔，所以通常會(huì)結(jié)合稍粗的線條增加圖標(biāo)視覺重量。

4. 色彩創(chuàng)意

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

2. 微漸變（大眾點(diǎn)評(píng)）：流行了一整年的設(shè)計(jì)，在很多app的金剛區(qū)圖標(biāo)上會(huì)采用這種設(shè)計(jì)來強(qiáng)調(diào)入口，吸引用戶視覺注意力；

3. 鄰近色的碰撞（enjoy）：比較少見，如果應(yīng)用不當(dāng)容易導(dǎo)致圖標(biāo)過于花哨，失去視覺焦點(diǎn)。

4. 同色相的不同透明度或不同明度組合：能夠豐富圖標(biāo)的色彩層次，同時(shí)又不至于讓圖標(biāo)太復(fù)雜。

5. 質(zhì)感創(chuàng)意

具有質(zhì)感的設(shè)計(jì)會(huì)讓圖標(biāo)視覺非常突出，因此通常適合應(yīng)用在界面本身內(nèi)容較多，需要特別強(qiáng)調(diào)的圖標(biāo)類型上（如金剛區(qū)圖標(biāo)）。

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

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

6. 動(dòng)效創(chuàng)意

在圖標(biāo)上應(yīng)用動(dòng)效的例子越來越多了，但多數(shù)是在切換tab時(shí)有一個(gè)縮放效果的動(dòng)效。

以下這兩個(gè)例子是圖標(biāo)在選中狀態(tài)時(shí)有很輕的動(dòng)畫效果，讓人感覺很舒服：

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

餓了么：分類圖標(biāo)的“水果”圖標(biāo)，是會(huì)輕微彈跳的（嗯截圖的時(shí)候橙子正跳著所以拉長(zhǎng)了）；

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

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

總結(jié)

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

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

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

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