一套ICON系統的定義,是需要很多的步驟和方法論的支撐的,這樣做出來的ICON才有靈魂。

 

一、圖標的作用

圖標是一種抽象的,跨語言的符號,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。隨著信息傳播速度和載體的快速增長,圖標的使用頻率也在不斷提高。在設計圖標之前,你有沒有想過圖標的作用何在?

通過反復思考,有助于我們設計水平的提升。經過設計師的總結和提煉,把圖標的作用歸結為4個點:裝飾、表意、趣味和品宣。

 

1.1 裝飾

是指通過圖標對頁面進行潤色,使頁面看上去更加飽滿。同時,通過圖標增加頁面的層次感,使頁面各部分內容得以區分。裝飾作為圖標的基礎作用,大多數圖標都滿足裝飾的作用。

 

例如下圖中左側ENJOY的首頁中,icon作為頁面的亮點裝飾元素出現,在表意的基礎上,提高了頁面的識別性,在產品品牌推廣上功不可沒。右側的餓了么也是一個很好的案例。

左側:ENJOY? 右側:餓了么

1.2 表意

圖標的第二大功能就是表意,在裝飾的基礎上有所升華。直白來說,圖標的表意體現在對于功能的解釋上。互聯網經過這幾年的快速發展,用戶對于一些圖標形成了一些約定俗成的認知。我們在進行產品設計時要做到心中有數,使用的時候切忌打破常規。

 

例如網易云音樂里的分享、下載、播放等icon,和站酷里的閱讀、點贊、留言、收藏等icon,對于這些在用戶心智中形成固有模式的圖標,我們使用的時候可以在此基礎上做變形、創新,但如果要打破用戶的習慣認知,一定要謹慎。

左側:網易云音樂? 右側:站酷

 

1.3 趣味

能帶給人愉悅感受的圖標可以稱得上很好的圖標了,這也就是圖標的第三大功能。如果愉悅的同時有很好的表意性,無疑是一個極棒的圖標了。

 

我們來看看QQ下面標簽欄的icon是我們很熟悉的一組icon,在不同頁面進行切換時,不僅icon有相對應的小動效,而且當選中不同的頁面時,中間小人的眼睛也會隨之變化,一個微妙的小細節往往是打動用戶的關鍵之所在。

QQ app的標簽欄icon

1.4 品牌宣傳

隨著互聯網ui趨勢概念的增強,市面上的產品同質化也越來越嚴重。那么如何能讓自家的產品脫穎而出?其中很重要的因素之一就是品牌塑造。通過icon來進行品牌傳達是一種簡單有效的方法。

 

例如咸魚app很好的將icon結合品牌色,打造了個性化的視覺體驗。大眾點評的V10改版更是通過整體的品牌升級,重新對UI進行了定義,通過全新的icon展示,傳達了年輕化、娛樂化、社交化的產品理念。

左側:咸魚? 右側:大眾點評

 

二、背景介紹

本次圖標優化的需求來源于積木盒子app的redesign。

圖標位置:位于積木盒子app一級頁面“發現頁”頂部的4個常駐活動入口。

由于本次優化時間有限,僅對這4個icon進行優化。如果優化效果好,會考慮在后期繼續優化運營活動頁的整體ui。

原有圖標樣式:

在app中的應用:

結合前面講到的圖標的作用,我們對原有圖標進行分析。我們從標簽欄看出,整個app分為4部分,有首頁、投資、發現、我的四個一級頁面,而我們優化的圖標位于發現頁的一級頁面中。根據圖標的4個作用我們來逐個進行分析。

 

2.1 裝飾

原有圖標起到了較強的裝飾性作用,細節上非常到位,顏色也很豐富,但仍然存在一定的問題。

 

與pc相比,app的界面空間很有限,在如此小的空間里,圖標大小僅有50pt左右,因此與豐富的細節相比,更看重其識別性。這組icon為面性icon,要求每一個色塊清晰可識別,盡可能避免含糊不清的陰影或顏色,使其即使在小屏也能迅速被用戶所識別。

 

統一性欠缺,1、2、4的icon均為圓形icon中主要元素進行破形處理,第3個icon圓形即主元素,點綴的箭頭進行破形處理。1、2、3的icon破形部分均有陰影,而第4個icon破形部分沒有陰影。

 

2.2 表意

表意上基本明確。

“邀好友”為伸出的友誼之手。

“招財獎”利用招財貓為原型,如果再加入抽獎的元素則表意更佳。

“轉轉贏”利用轉輪的元素,很好的表達了轉盤抽獎的意思。

“周周樂”用寶箱來表意,雖不是特別貼切,但也不出錯。如果結合實際的雙色球活動,則表意效果更佳。

 

2.3 趣味

本組icon有較高的趣味性,希望改版優化能給用戶帶來同等程度的愉悅感受。

 

2.4 品牌宣傳

由于改版對品牌及產品定位進行了全新升級,因此新版icon希望更多的體現出年輕化,色彩上有更高的飽和度,與品牌logo風格更貼近。

 

另外由于運營活動的更新,希望icon在風格上能有更好的延展性,便于后期相同風格的icon繪制。

 

通過以上分析,我們對新版icon提出了4個設計要點,對圖標優化的風格定位起到指導性作用:高識別性、表意清晰、貼近品牌、易于擴展

 

三、圖標設計五步法

3.1 定義

圖標是界面中的一部分,因此在設計圖標時,我們首先要考慮圖標的使用場景。根據圖標的使用場景的關鍵因素,進行樣式的推導。可以從以下四個方面進行分析。

 

(1)承載的作用:發現頁按功能可劃分為2部分:活動入口、積分商城。由于積分商城圖片質量較差,因此這4個圖標成為影響頁面是否美觀的重要因素。因此構圖上以整齊統一為主。考慮去除破形設計,改為統一的圓形icon。

 

(2)重要性:此圖標為當前頁面最重要的ui元素,視覺層級較高。應通過設計,增加活動入口的吸引力,提高點擊率。

 

(3)所處頁面信息的復雜程度:發現頁信息較為簡單,僅有活動icon和積分商城2部分,因此在設計時,可以考慮加入一些細節和質感,使頁面更加豐富。

 

(4)擴展性要求:由于后續會就該設計風格進行更多圖標設計,需制定出圖標規范,方便后續樣式風格延伸。

 

3.2 提煉

經過上面的推導,我們對即將設計的圖標風格大體上有了定位,可以開始針對單個圖標進行設計。由于圖標設計時間有限,因此要在最短的時間里,得到最優的效果。我使用的是發散關鍵詞—提煉關鍵詞—提煉特征的方法。

 

以邀好友為例:首先進行頭腦風暴,邀好友的活動內容大致為邀請好友后,自己和好友均可獲得超值大禮包。我列出的關鍵詞有:遞東西的手、愛心、緊握在一起的手、禮包、優惠券、紅包、招財貓、溫暖、擁抱。通過歸納和提煉,最終保留的關鍵詞為遞東西的手,和禮包。設計上體現溫暖的感覺,同理進行其他icon的關鍵詞提煉。

 

接下來進行圖片參考,經過素材收集,最終選定靈感參考圖片。參考圖片種類可以很豐富,可以選擇風格近似的插畫,也可找實物進行參考,唯一要注意的是,內容一定要符合提煉的關鍵詞。

 

由于設計時間并不富裕,設計時可以盡量借鑒參考圖片上的元素。還是以邀好友為例,參考圖片我找到了禮包原型,和手的原型,接下來很容易將兩者進行結合,繪制出我們所需要的icon內容。

 

3.3 風格

通過關鍵詞提煉,我們已經對即將繪制的圖標有了大體的概念,但在顏色和風格上還需要進一步的考究。為了快速出圖,風格借鑒必不可少。在這里要著重強調借鑒和抄襲的界限。我們所做的是優秀作品風格的提取,并不表示照搬優秀設計作品。下面,我將從風格提取、造型提取和顏色提取三個方面進行借鑒的詳細講解。

 

圖標的種類多種多樣,經過上文對圖標風格的推導,我們將圖標風格大體定位:圓形面性圖標,扁平風,色彩鮮艷。我們發現,好好住app的插畫風格清新扁平年輕化,顏色上雖然和品牌色有出入,但用色方法上值得借鑒,因此打算從提煉這組插畫的風格入手。

好好住app的插畫

 

通過觀察,不難總結出,這組icon 在風格上,采取扁平的風格,將主題內容抽象畫,去除多余的透視、肌理、投影關系,配合輕微的漸變色,給人以清爽舒適的感覺。

 

造型上:用簡單的幾何圖形和不規則的圖形的進行組合,畫面主體部分顯示,并搭配適當留白,制造出畫面的空間感。

 

顏色上:大面積使用同色系,營造和諧的氛圍;鄰近色作為點綴,使畫面更為生動活潑(多為黃色);利用消色(白色)表達明暗關系,起平衡作用。

 

在顏色設定上,并不建議大家直接吸取參考的顏色,而是通過規律的提煉,進行大膽嘗試。在設計icon時,我利用同色系+消色+黃色點綴,進行了4種顏色嘗試。

 

3.4 繪制

經過之前的關鍵詞提煉,找出元素參考,再根據風格和顏色提煉,選定繪制的主色和點綴色,繪制過程就變得簡單多了。

 

繪制圖標時,要注意圖層之間的遮擋關系。即使畫面只露出了主體物的一部分,也要考慮主體物的形狀和比例是否正確。如果對主體的結構把握不好,可以繼續尋找類似的插畫或照片進行參考,或對現實物體進行觀察。另外需要確保畫面中每一個鄰近的色塊,結構和顏色都清晰可辨,不要有含糊不清的結構,或糊在一起分不清邊界的顏色,不然會顯得畫面很臟,同時也會降低整體圖標的識別度。

 

3.5 調整

通過上面4個把單個圖標設計好后,需要從整體上和細節上重新審查我們的圖標,看看是否整體能夠達到一致的視覺統一和視覺平衡。有時候自己設計的圖標會因為過于熟悉而不易發現問題,這時候也可以請教下你的朋友,從旁觀者的角度提出問題,往往會得到建設性的意見。越到后面的階段越需要我們耐心和細心的調整,以達到更好的效果。

 

(1)以我們的圖標為例,通過整體觀察,發現在統一性和視覺平衡上存在一定的問題。第1個圖標主體物右下部分進行隱藏,2、3圖標左下部位隱藏,而4圖標上面部分被隱藏,造成雜亂無序的視覺體驗。經過位置調整和主體物的翻轉,統一把主體物的左下角進行隱藏,增加了圖標的統一性。

 

(2)進一步觀察發現,3圖標的轉盤外圈和圓心部位給人以高起的感覺,原因是陰影給的過重,使其明顯與其他圖標不協調。通過調整陰影透明度和局部顏色,最終得到了與其他icon協調的視覺呈現。

 

(3)再進行細節觀察,2圖標主體物在比例上有一些不舒服的地方,于是把老虎機的結構進行了調整優化,使其看起來更舒服。

四、擴展設計說明

為了方便后續圖標的延展,還要將所繪制的圖標要點進行總結,概括出擴展設計說明,一來方便以后查看,二來其他同事進行同類icon繪制時,可以迅速把握圖標特點,繪制出一致統一的圖標。

 

1、表意上,突出主題,表意清晰;

2、顏色上,采用同色系為主色,配合黃色或鄰近色進行點綴,利用同色系的消色配合,表達明暗關系的變化;

3、風格上,以扁平風為主,適量加入漸變色,營造年輕化的感官效果;

4、主體物統一進行左下角的隱藏,圓形的右上角適當留白,增加icon的空氣感;

5、陰影上,考慮到視覺效果的統一,如需添加陰影,不易過深。

 

五、總結

以上四點可以幫助大家在繪制圖標時捋清思路,摸清方法。扁平化風格特點較為突出,具有很高的通用性,大部分日常設計中都會用到。當然寫這篇教程的初衷,并不只是希望大家學會這種設計風格,而是希望能在設計過程中進行思考和方法總結。設計產物是靈活的,但方法是可以融會貫通的。在今后的工作中,不管是什么風格,是圖標還是插畫,我們都可以參考以上的設計方法來進行設計。