一套ICON系統(tǒng)的定義，是需要很多的步驟和方法論的支撐的，這樣做出來的ICON才是有靈魂的。
本教程謹(jǐn)代表個(gè)人觀點(diǎn)，不做企業(yè)宣傳用途。
一、圖標(biāo)的作用
圖標(biāo)是一種抽象的，跨語言的符號(hào)，它不僅是一種圖形，更是一種標(biāo)識(shí)，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。隨著信息傳播速度和載體的快速增長，圖標(biāo)的使用頻率也在不斷提高。在設(shè)計(jì)圖標(biāo)之前，你有沒有想過圖標(biāo)的作用何在？通過反復(fù)思考，有助于我們?cè)O(shè)計(jì)水平的提升。
經(jīng)過設(shè)計(jì)師的總結(jié)和提煉，把圖標(biāo)的作用歸結(jié)為4個(gè)點(diǎn)：裝飾、表意、趣味和品宣。
1、裝飾
是指通過圖標(biāo)對(duì)頁面進(jìn)行潤色，使頁面看上去更加飽滿。同時(shí)，通過圖標(biāo)增加頁面的層次感，使頁面各部分內(nèi)容得以區(qū)分。裝飾作為圖標(biāo)的基礎(chǔ)作用，大多數(shù)圖標(biāo)都滿足裝飾的作用。
例如下圖中左側(cè)ENJOY的首頁中，icon作為頁面的亮點(diǎn)裝飾元素出現(xiàn)，在表意的基礎(chǔ)上，提高了頁面的識(shí)別性，在產(chǎn)品品牌推廣上功不可沒。右側(cè)的餓了么也是一個(gè)很好的案例。
左側(cè)：ENJOY 右側(cè)：餓了么
2、表意
圖標(biāo)的第二大功能就是表意，在裝飾的基礎(chǔ)上有所升華。直白來說，圖標(biāo)的表意體現(xiàn)在對(duì)于功能的解釋上?；ヂ?lián)網(wǎng)經(jīng)過這幾年的快速發(fā)展，用戶對(duì)于一些圖標(biāo)形成了一些約定俗成的認(rèn)知。我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)時(shí)要做到心中有數(shù)，使用的時(shí)候切忌打破常規(guī)。
例如網(wǎng)易云音樂里的分享、下載、播放等icon，和站酷里的閱讀、點(diǎn)贊、留言、收藏等icon，對(duì)于這些在用戶心智中形成固有模式的圖標(biāo)，我們使用的時(shí)候可以在此基礎(chǔ)上做變形、創(chuàng)新，但如果要打破用戶的習(xí)慣認(rèn)知，一定要謹(jǐn)慎。
左側(cè)：網(wǎng)易云音樂 右側(cè)：站酷
3、趣味
能帶給人愉悅感受的圖標(biāo)可以稱得上很好的圖標(biāo)了，這也就是圖標(biāo)的第三大功能。如果愉悅的同時(shí)有很好的表意性，無疑是一個(gè)極棒的圖標(biāo)了。
我們來看看QQ下面標(biāo)簽欄的icon是我們很熟悉的一組icon，在不同頁面進(jìn)行切換時(shí)，不僅icon有相對(duì)應(yīng)的小動(dòng)效，而且當(dāng)選中不同的頁面時(shí)，中間小人的眼睛也會(huì)隨之變化，一個(gè)微妙的小細(xì)節(jié)往往是打動(dòng)用戶的關(guān)鍵之所在。
QQ app的標(biāo)簽欄icon
4、品牌宣傳
隨著互聯(lián)網(wǎng)ui趨勢概念的增強(qiáng)，市面上的產(chǎn)品同質(zhì)化也越來越嚴(yán)重。那么如何能讓自家的產(chǎn)品脫穎而出？其中很重要的因素之一就是品牌塑造。通過icon來進(jìn)行品牌傳達(dá)是一種簡單有效的方法。
例如咸魚app很好的將icon結(jié)合品牌色，打造了個(gè)性化的視覺體驗(yàn)。大眾點(diǎn)評(píng)的V10改版更是通過整體的品牌升級(jí)，重新對(duì)UI進(jìn)行了定義，通過全新的icon展示，傳達(dá)了年輕化、娛樂化、社交化的產(chǎn)品理念。
左側(cè)：咸魚 右側(cè)：大眾點(diǎn)評(píng)
二、背景介紹
本次圖標(biāo)優(yōu)化的需求來源于積木盒子app的redesign。
圖標(biāo)位置：位于積木盒子app一級(jí)頁面“發(fā)現(xiàn)頁”頂部的4個(gè)常駐活動(dòng)入口。
由于本次優(yōu)化時(shí)間有限，僅對(duì)這4個(gè)icon進(jìn)行優(yōu)化。如果優(yōu)化效果好，會(huì)考慮在后期繼續(xù)優(yōu)化運(yùn)營活動(dòng)頁的整體ui。
原有圖標(biāo)樣式：
在app中的應(yīng)用：
結(jié)合前面講到的圖標(biāo)的作用，我們對(duì)原有圖標(biāo)進(jìn)行分析。
我們從標(biāo)簽欄看出，整個(gè)app分為4部分，有首頁、投資、發(fā)現(xiàn)、我的四個(gè)一級(jí)頁面，而我們優(yōu)化的圖標(biāo)位于發(fā)現(xiàn)頁的一級(jí)頁面中。根據(jù)圖標(biāo)的4個(gè)作用我們來逐個(gè)進(jìn)行分析。
1、裝飾
原有圖標(biāo)起到了較強(qiáng)的裝飾性作用，細(xì)節(jié)上非常到位，顏色也很豐富，但仍然存在一定的問題。
與pc相比，app的界面空間很有限，在如此小的空間里，圖標(biāo)大小僅有50pt左右，因此與豐富的細(xì)節(jié)相比，更看重其識(shí)別性。這組icon為面性icon，要求每一個(gè)色塊清晰可識(shí)別，盡可能避免含糊不清的陰影或顏色，使其即使在小屏也能迅速被用戶所識(shí)別。
統(tǒng)一性欠缺，1、2、4的icon均為圓形icon中主要元素進(jìn)行破形處理，第3個(gè)icon圓形即主元素，點(diǎn)綴的箭頭進(jìn)行破形處理。1、2、3的icon破形部分均有陰影，而第4個(gè)icon破形部分沒有陰影。
2、表意
表意上基本明確。
“邀好友”為伸出的友誼之手。
“招財(cái)獎(jiǎng)”利用招財(cái)貓為原型，如果再加入抽獎(jiǎng)的元素則表意更佳。
“轉(zhuǎn)轉(zhuǎn)贏”利用轉(zhuǎn)輪的元素，很好的表達(dá)了轉(zhuǎn)盤抽獎(jiǎng)的意思。
“周周樂”用寶箱來表意，雖不是特別貼切，但也不出錯(cuò)。如果結(jié)合實(shí)際的雙色球活動(dòng)，則表意效果更佳。
3、趣味
本組icon有較高的趣味性，希望改版優(yōu)化能給用戶帶來同等程度的愉悅感受。
4、品牌宣傳
由于改版對(duì)品牌及產(chǎn)品定位進(jìn)行了全新升級(jí)，因此新版icon希望更多的體現(xiàn)出年輕化，色彩上有更高的飽和度，與品牌logo風(fēng)格更貼近。
另外由于運(yùn)營活動(dòng)的更新，希望icon在風(fēng)格上能有更好的延展性，便于后期相同風(fēng)格的icon繪制。
總結(jié)：
通過以上分析，我們對(duì)新版icon提出了4個(gè)設(shè)計(jì)要點(diǎn)，對(duì)圖標(biāo)優(yōu)化的風(fēng)格定位起到指導(dǎo)性作用：高識(shí)別性、表意清晰、貼近品牌、易于擴(kuò)展
三、圖標(biāo)設(shè)計(jì)五步法
1、定義
圖標(biāo)是界面中的一部分，因此在設(shè)計(jì)圖標(biāo)時(shí)，我們首先要考慮圖標(biāo)的使用場景。根據(jù)圖標(biāo)的使用場景的關(guān)鍵因素，進(jìn)行樣式的推導(dǎo)?？梢詮囊韵滤膫€(gè)方面進(jìn)行分析。
（1）承載的作用
發(fā)現(xiàn)頁按功能可劃分為2部分：活動(dòng)入口、積分商城。由于積分商城圖片質(zhì)量較差，因此這4個(gè)圖標(biāo)成為影響頁面是否美觀的重要因素。因此構(gòu)圖上以整齊統(tǒng)一為主?？紤]去除破形設(shè)計(jì)，改為統(tǒng)一的圓形icon。
（2）重要性
此圖標(biāo)為當(dāng)前頁面最重要的ui元素，視覺層級(jí)較高。應(yīng)通過設(shè)計(jì)，增加活動(dòng)入口的吸引力，提高點(diǎn)擊率。
（3）所處頁面信息的復(fù)雜程度
發(fā)現(xiàn)頁信息較為簡單，僅有活動(dòng)icon和積分商城2部分，因此在設(shè)計(jì)時(shí)，可以考慮加入一些細(xì)節(jié)和質(zhì)感，使頁面更加豐富。
（4）擴(kuò)展性要求
由于后續(xù)會(huì)就該設(shè)計(jì)風(fēng)格進(jìn)行更多圖標(biāo)設(shè)計(jì)，需制定出圖標(biāo)規(guī)范，方便后續(xù)樣式風(fēng)格延伸。
2、提煉
經(jīng)過上面的推導(dǎo)，我們對(duì)即將設(shè)計(jì)的圖標(biāo)風(fēng)格大體上有了定位，可以開始針對(duì)單個(gè)圖標(biāo)進(jìn)行設(shè)計(jì)。由于圖標(biāo)設(shè)計(jì)時(shí)間有限，因此要在最短的時(shí)間里，得到最優(yōu)的效果。我使用的是發(fā)散關(guān)鍵詞—提煉關(guān)鍵詞—提煉特征的方法。
以邀好友為例：首先進(jìn)行頭腦風(fēng)暴，邀好友的活動(dòng)內(nèi)容大致為邀請(qǐng)好友后，自己和好友均可獲得超值大禮包。我列出的關(guān)鍵詞有：遞東西的手、愛心、緊握在一起的手、禮包、優(yōu)惠券、紅包、招財(cái)貓、溫暖、擁抱。通過歸納和提煉，最終保留的關(guān)鍵詞為遞東西的手，和禮包。設(shè)計(jì)上體現(xiàn)溫暖的感覺。
同理進(jìn)行其他icon的關(guān)鍵詞提煉。
接下來進(jìn)行圖片參考，經(jīng)過素材收集，最終選定靈感參考圖片。參考圖片種類可以很豐富，可以選擇風(fēng)格近似的插畫，也可找實(shí)物進(jìn)行參考，唯一要注意的是，內(nèi)容一定要符合提煉的關(guān)鍵詞。
由于設(shè)計(jì)時(shí)間并不富裕，設(shè)計(jì)時(shí)可以盡量借鑒參考圖片上的元素。還是以邀好友為例，參考圖片我找到了禮包原型，和手的原型，接下來很容易將兩者進(jìn)行結(jié)合，繪制出我們所需要的icon內(nèi)容。
3、風(fēng)格
通過關(guān)鍵詞提煉，我們已經(jīng)對(duì)即將繪制的圖標(biāo)有了大體的概念，但在顏色和風(fēng)格上還需要進(jìn)一步的考究。為了快速出圖，風(fēng)格借鑒必不可少。在這里要著重強(qiáng)調(diào)借鑒和抄襲的界限。我們所做的是優(yōu)秀作品風(fēng)格的提取，并不表示照搬優(yōu)秀設(shè)計(jì)作品。下面，我將從風(fēng)格提取、造型提取和顏色提取三個(gè)方面進(jìn)行借鑒的詳細(xì)講解。
圖標(biāo)的種類多種多樣，經(jīng)過上文對(duì)圖標(biāo)風(fēng)格的推導(dǎo)，我們將圖標(biāo)風(fēng)格大體定位：圓形面性圖標(biāo)，扁平風(fēng)，色彩鮮艷。我們發(fā)現(xiàn)，好好住app的插畫風(fēng)格清新扁平年輕化，顏色上雖然和品牌色有出入，但用色方法上值得借鑒，因此打算從提煉這組插畫的風(fēng)格入手。
好好住app的插畫
通過觀察，不難總結(jié)出，這組icon 在風(fēng)格上，采取扁平的風(fēng)格，將主題內(nèi)容抽象畫，去除多余的透視、肌理、投影關(guān)系，配合輕微的漸變色，給人以清爽舒適的感覺。
造型上：用簡單的幾何圖形和不規(guī)則的圖形的進(jìn)行組合，畫面主體部分顯示，并搭配適當(dāng)留白，制造出畫面的空間感。
顏色上：大面積使用同色系，營造和諧的氛圍；鄰近色作為點(diǎn)綴，使畫面更為生動(dòng)活潑（多為黃色）；利用消色（白色）表達(dá)明暗關(guān)系，起平衡作用。
在顏色設(shè)定上，并不建議大家直接吸取參考的顏色，而是通過規(guī)律的提煉，進(jìn)行大膽嘗試。在設(shè)計(jì)icon時(shí)，我利用同色系+消色+黃色點(diǎn)綴，進(jìn)行了4種顏色嘗試。
4、繪制
經(jīng)過之前的關(guān)鍵詞提煉，找出元素參考，再根據(jù)風(fēng)格和顏色提煉，選定繪制的主色和點(diǎn)綴色，繪制過程就變得簡單多了。
繪制圖標(biāo)時(shí)，要注意圖層之間的遮擋關(guān)系。即使畫面只露出了主體物的一部分，也要考慮主體物的形狀和比例是否正確。如果對(duì)主體的結(jié)構(gòu)把握不好，可以繼續(xù)尋找類似的插畫或照片進(jìn)行參考，或?qū)ΜF(xiàn)實(shí)物體進(jìn)行觀察。另外需要確保畫面中每一個(gè)鄰近的色塊，結(jié)構(gòu)和顏色都清晰可辨，不要有含糊不清的結(jié)構(gòu)，或糊在一起分不清邊界的顏色，不然會(huì)顯得畫面很臟，同時(shí)也會(huì)降低整體圖標(biāo)的識(shí)別度。
5、調(diào)整
通過上面4個(gè)把單個(gè)圖標(biāo)設(shè)計(jì)好后，需要從整體上和細(xì)節(jié)上重新審查我們的圖標(biāo)，看看是否整體能夠達(dá)到一致的視覺統(tǒng)一和視覺平衡。有時(shí)候自己設(shè)計(jì)的圖標(biāo)會(huì)因?yàn)檫^于熟悉而不易發(fā)現(xiàn)問題，這時(shí)候也可以請(qǐng)教下你的朋友，從旁觀者的角度提出問題，往往會(huì)得到建設(shè)性的意見。越到后面的階段越需要我們耐心和細(xì)心的調(diào)整，以達(dá)到更好的效果。
（1）以我們的圖標(biāo)為例，通過整體觀察，發(fā)現(xiàn)在統(tǒng)一性和視覺平衡上存在一定的問題。第1個(gè)圖標(biāo)主體物右下部分進(jìn)行隱藏，2、3圖標(biāo)左下部位隱藏，而4圖標(biāo)上面部分被隱藏，造成雜亂無序的視覺體驗(yàn)。經(jīng)過位置調(diào)整和主體物的翻轉(zhuǎn)，統(tǒng)一把主體物的左下角進(jìn)行隱藏，增加了圖標(biāo)的統(tǒng)一性。
（2）進(jìn)一步觀察發(fā)現(xiàn)，3圖標(biāo)的轉(zhuǎn)盤外圈和圓心部位給人以高起的感覺，原因是陰影給的過重，使其明顯與其他圖標(biāo)不協(xié)調(diào)。通過調(diào)整陰影透明度和局部顏色，最終得到了與其他icon協(xié)調(diào)的視覺呈現(xiàn)。
（3）再進(jìn)行細(xì)節(jié)觀察，2圖標(biāo)主體物在比例上有一些不舒服的地方，于是把老虎機(jī)的結(jié)構(gòu)進(jìn)行了調(diào)整優(yōu)化，使其看起來更舒服。
四、擴(kuò)展設(shè)計(jì)說明
為了方便后續(xù)圖標(biāo)的延展，還要將所繪制的圖標(biāo)要點(diǎn)進(jìn)行總結(jié)，概括出擴(kuò)展設(shè)計(jì)說明，一來方便以后查看，二來其他同事進(jìn)行同類icon繪制時(shí)，可以迅速把握?qǐng)D標(biāo)特點(diǎn)，繪制出一致統(tǒng)一的圖標(biāo)。
1、表意上，突出主題，表意清晰；
2、顏色上，采用同色系為主色，配合黃色或鄰近色進(jìn)行點(diǎn)綴，利用同色系的消色配合，表達(dá)明暗關(guān)系的變化；
3、風(fēng)格上，以扁平風(fēng)為主，適量加入漸變色，營造年輕化的感官效果；
4、主體物統(tǒng)一進(jìn)行左下角的隱藏，圓形的右上角適當(dāng)留白，增加icon的空氣感；
5、陰影上，考慮到視覺效果的統(tǒng)一，如需添加陰影，不易過深。
五、總結(jié)
以上四點(diǎn)可以幫助大家在繪制圖標(biāo)時(shí)捋清思路，摸清方法。扁平化風(fēng)格特點(diǎn)較為突出，具有很高的通用性，大部分日常設(shè)計(jì)中都會(huì)用到。當(dāng)然寫這篇教程的初衷，并不只是希望大家學(xué)會(huì)這種設(shè)計(jì)風(fēng)格，而是希望能在設(shè)計(jì)過程中進(jìn)行思考和方法總結(jié)。設(shè)計(jì)產(chǎn)物是靈活的，但方法是可以融會(huì)貫通的。在今后的工作中，不管是什么風(fēng)格，是圖標(biāo)還是插畫，我們都可以參考以上的設(shè)計(jì)方法來進(jìn)行設(shè)計(jì)。
第一次手寫教程，有不清楚或者不完善的地方希望大家多包涵。
參考文獻(xiàn)：
如何系統(tǒng)地設(shè)計(jì)界面圖標(biāo)
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
