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