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