學(xué)習(xí)UI圖標(biāo)設(shè)計關(guān)鍵點有哪些
圖標(biāo)的設(shè)計需要表意明確,并具有適合的隱喻特征。首先,要根據(jù)對象確定圖標(biāo)的整體風(fēng)格并進(jìn)行概念草圖繪制;其次,在草圖的基礎(chǔ)上給圖標(biāo)上色,設(shè)計圖標(biāo)適合的角度和透視;再對圖標(biāo)進(jìn)行細(xì)節(jié)調(diào)整,以表現(xiàn)圖標(biāo)的質(zhì)感;最后,根據(jù)一個圖標(biāo)樣式發(fā)散進(jìn)行成套圖標(biāo)設(shè)計,使界面內(nèi)的圖標(biāo)形成統(tǒng)一的風(fēng)格。

形態(tài)
移動應(yīng)用界面圖標(biāo)的形態(tài)既豐富又具有概括性。形態(tài)是定義圖標(biāo)的大致輪廓和基本樣式。為了使用戶更容易理解和接受圖標(biāo),設(shè)計形態(tài)時要根據(jù)對象特征進(jìn)行一定的隱喻,使圖標(biāo)形態(tài)貼近用戶的認(rèn)知范圍。因此,圖標(biāo)的形態(tài)要盡量簡潔易懂,避免過度使用象征性的隱喻符號,用簡單的圖形作為整體象征性的代表。

色彩
色彩是圖標(biāo)設(shè)計的一個重要屬性,要處理好圖標(biāo)的主要顏色與次要顏色之間的關(guān)系,它在很大程度上決定了圖標(biāo)的最終視覺效果。不同的顏色蘊含著不同的情感意義,因此設(shè)計師在設(shè)計手機(jī)界面圖標(biāo)時要基于應(yīng)用的功能同時遵循用戶的心理模型,以選擇合適的色彩搭配。

例如:日歷、通訊錄這類代表客觀事物的應(yīng)用圖標(biāo)多采用綠色、灰色和藍(lán)色,而一些游戲類圖標(biāo)則采用給人帶來愉快心理暗示的暖色系配色。此外,成套圖標(biāo)的色彩在注意區(qū)分界面背景色的基礎(chǔ)上還需統(tǒng)一在同類色系的視覺環(huán)境中,以保持界面視覺的穩(wěn)定性。

光影
用戶在實際生活中看到的物品在受到自然光線和物理光線的影響下會呈現(xiàn)立體的形態(tài),因此要使一個圖標(biāo)變得立體就需要添加光影的效果。設(shè)計師首先要將圖標(biāo)想象成一個圓形的球體,通過定義圖標(biāo)的素描關(guān)系(即光線的方向)將圖標(biāo)分為白、灰、黑、影子、反光5個部分。

白是距離光線最近的部分,是圖標(biāo)最亮的模塊;灰是白與黑的緩沖區(qū)域,起到柔和過渡的作用;黑是圖標(biāo)中顏色最重的部分,一般稱為明暗交界線,也是呈現(xiàn)圖標(biāo)體積感的關(guān)鍵;影子是由于光線不能穿透物體而形成的物體的投影,它能使圖標(biāo)更加真實;反光在實際生活中是受到周邊環(huán)境影響的反射光線,因此它能使圖標(biāo)看起來更加真實和立體。

隨著對圖標(biāo)質(zhì)感細(xì)膩程度的追求,圖標(biāo)的光影層級也會變得越來越豐富。此外,設(shè)計師還需注意成套圖標(biāo)中光影效果尤其是角度的一致性。

材質(zhì)
從視覺傳達(dá)的角度來看,手機(jī)界面圖標(biāo)所體現(xiàn)的材質(zhì)感是指其模擬真實物體所呈現(xiàn)的豐富視覺效果。各種不同的質(zhì)感為圖標(biāo)設(shè)計的主題表現(xiàn)提供了更多可能的形式,同時也提高了圖標(biāo)的可視性。例如:針對一些科技軟件的圖標(biāo),會采用金屬拉絲的質(zhì)感效果;針對卡通游戲類軟件的圖標(biāo),會用水晶質(zhì)感效果。

布局
手機(jī)界面內(nèi)空間的布局除了影響到整體界面的視覺效果之外,更重要的是能否讓用戶準(zhǔn)確快速地進(jìn)行識別和操作整體界面。這要求桌面背景和主要圖標(biāo)的集合以某種特定的主題方式加以展現(xiàn),這種展現(xiàn)不僅涉及界面空間中圖標(biāo)的視覺,也涉及圖標(biāo)與圖標(biāo)、圖標(biāo)與背景之間的聯(lián)系方式。因此,單個圖標(biāo)的大小與其他圖標(biāo)之間的比例關(guān)系以及整體圖標(biāo)排列的布局都是設(shè)計圖標(biāo)時應(yīng)該考慮到的問題。

界面圖標(biāo)設(shè)計要點
①易識別。圖標(biāo)內(nèi)容需表達(dá)簡潔、清晰,避免過多元素堆積。設(shè)計時應(yīng)首先考慮怎樣使圖標(biāo)傳遞更多的信息而不會增加用戶的視覺和理解負(fù)擔(dān)。其次,圖標(biāo)在界面中的分組與排列也很重要,相似功能的圖標(biāo)盡量排列在一起。

②統(tǒng)一性。保持圖標(biāo)中元素表達(dá)的一致性和連續(xù)性。一致的外觀與感覺可以在軟件界面中創(chuàng)造一種和諧。如果界面圖標(biāo)缺乏一致性則很可能引起混淆,并使界面看起來沒有條理。由于圖標(biāo)的功能各異,所用的圖形必定不同,在同一軟件界面里面的圖標(biāo)可以添加共同元素來統(tǒng)一風(fēng)格。

在設(shè)計圖標(biāo)時,應(yīng)考慮到用戶已有的習(xí)慣和接受能力,最好調(diào)查一下其他同類軟件的圖標(biāo)情況,以了解已經(jīng)創(chuàng)建了什么樣的用戶使用習(xí)慣。

③根據(jù)目標(biāo)用戶群確定圖標(biāo)的風(fēng)格。設(shè)計圖標(biāo)前一定要考慮清楚使用該應(yīng)用的目標(biāo)用戶特點,不同的用戶群具備不同的認(rèn)知特點和審美情趣。

④構(gòu)筑合理的隱喻。設(shè)計師在構(gòu)建圖形隱喻時,需要認(rèn)真考慮所指代的對象以及用戶解碼后可能產(chǎn)生的各種理解、圖標(biāo)的使用情景、與其他圖標(biāo)之間的關(guān)系,從而尋找合適的喻體。

⑤設(shè)計的規(guī)范。圖標(biāo)中圖形的設(shè)計要盡量飽滿,充分利用圖標(biāo)的有限空間。設(shè)計師要按照不同系統(tǒng)平臺設(shè)計規(guī)范中規(guī)定的圖標(biāo)尺寸大小進(jìn)行設(shè)計。
