【UI設(shè)計(jì)】教你設(shè)計(jì)一套合理圖標(biāo)
如何設(shè)計(jì)一套合理的圖標(biāo),我們可以從以下幾點(diǎn)出發(fā)警醒思考:是否符合用戶的使用習(xí)慣?當(dāng)前系統(tǒng)的顯示原則是什么?是否符合產(chǎn)品定位?是否具有很強(qiáng)的識(shí)別性?圖標(biāo)設(shè)計(jì)的藝術(shù)風(fēng)格是否一致?構(gòu)成元素是否合理?

界面需求
圖標(biāo)的設(shè)計(jì),首先要看懂界面的需求,需對(duì)每一個(gè)功能圖標(biāo)的定義非常清楚,否則會(huì)造成很多不必要的麻煩。例如:我們所設(shè)計(jì)的結(jié)果不能被用戶理解,或者一圖多意,使用戶無法正常操作。在圖標(biāo)設(shè)計(jì)中,我們必須做到視覺上,功能上、可用性上一對(duì)一高度匹配。
對(duì)于界面需求,首先我們需要懂界面,從硬件上講,我們必須先明確該產(chǎn)品界面大小尺寸、系統(tǒng)要求、媒介要求;從軟件上講,我們需要設(shè)定產(chǎn)品界面設(shè)計(jì)的風(fēng)格、構(gòu)圖方式、布局版式、產(chǎn)品主題圖標(biāo)主題元素等。只有這一系列的內(nèi)容確定下來我們才能有把握地完成圖標(biāo)的設(shè)計(jì)。

圖形之間的轉(zhuǎn)化
圖標(biāo)設(shè)計(jì)所采用的元素大多為用戶常見并熟悉的物件,原則上是越貼近用戶的心理越好,例如:音樂我們可以聯(lián)想到音符、CD光盤、音樂播放器、耳機(jī)、鋼琴、古箏、蕭、鼓、播放開關(guān)等。

這些都是很直觀的可看到的和音樂有直接聯(lián)系的設(shè)計(jì)元素。當(dāng)這些元素被找出來,我們只需要完成“詞語一圖形”之間的轉(zhuǎn)化,依據(jù)產(chǎn)品的特性來確定適當(dāng)?shù)脑O(shè)計(jì)風(fēng)格來完成圖標(biāo)的設(shè)計(jì),例如:這個(gè)圖標(biāo)是簡(jiǎn)潔的,還是復(fù)雜的;擬物的,還是扁平的;華麗的,還是淡雅的;多色彩的,還是單色的。
在圖標(biāo)設(shè)計(jì)中,隱喻也是一種常用的設(shè)計(jì)思維方式,也就是找出物與所指之間內(nèi)在的聯(lián)系,捕捉事物對(duì)象的特征,提煉元素,再創(chuàng)作。做到這點(diǎn)需要設(shè)計(jì)師豐富的聯(lián)想能力和對(duì)生活的細(xì)微觀察。

圖標(biāo)設(shè)計(jì)的思考方式
①思路。首先我們需要考慮圖標(biāo)的造型,系統(tǒng)圖標(biāo)按照造型構(gòu)圖可分為線構(gòu)圖、面構(gòu)圖、線和面的組合。

然后,我們需要考慮產(chǎn)品的性質(zhì),不同性質(zhì)的產(chǎn)品圖標(biāo)設(shè)計(jì)所采用的元素也是不一樣的,表現(xiàn)出來的效果自然也不一樣。例如:一個(gè)美食類型的App,如果該產(chǎn)品針對(duì)的目標(biāo)群體是年輕人,那么對(duì)于圖標(biāo)的設(shè)計(jì)我們就需要仔細(xì)考慮了。是寫實(shí)的還是簡(jiǎn)潔的;色彩的選擇是豐富的、鮮艷的;還是簡(jiǎn)單的,某一色系下的是浪漫的,還是安靜的。

最后設(shè)定圖標(biāo)主題,一組應(yīng)用圖標(biāo)設(shè)定主題后,我們需要根據(jù)主題找出相對(duì)應(yīng)的元素,通過元素重組來完成整套圖標(biāo)的設(shè)計(jì)。有一點(diǎn)我們需要注意,在做主題圖標(biāo)設(shè)計(jì)時(shí),需要盡量地簡(jiǎn)化和概括元素。

②制作。對(duì)于圖標(biāo)的制作要注意兩點(diǎn):

●視覺一致,一致的線條粗細(xì),圖標(biāo)組合方式,規(guī)范圓角;使用統(tǒng)一主題的設(shè)計(jì)元素或符號(hào);色彩一致,采用套色,無論是多色彩還是色彩,需在明度上或者純度上有一項(xiàng)保持一致。

●識(shí)別性,圖標(biāo)組合元素不宜過多,最多三項(xiàng);盡可能簡(jiǎn)化圖標(biāo),圖標(biāo)不宜過度繁瑣;對(duì)于元素的選擇,需恰到好處,便于用戶認(rèn)知。
