自從扁平化還有極簡(jiǎn)設(shè)計(jì)開始流行之后,圖標(biāo)的設(shè)計(jì)越來越重要,經(jīng)常有設(shè)計(jì)師問,到底軟件程序里面的這個(gè)圖標(biāo)怎么設(shè)計(jì)?
另外網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)師也會(huì)問,我們這平臺(tái)有vip會(huì)員,那vip會(huì)員的圖標(biāo)要怎么設(shè)計(jì)?
還有一個(gè)app的設(shè)計(jì),這聊天里面的群組圖標(biāo),要怎么設(shè)計(jì)?
圖標(biāo)的設(shè)計(jì),我認(rèn)為是對(duì)于ui/ux設(shè)計(jì)師來說;是最難的工作之一。
圖標(biāo)的用意是什么
我們會(huì)使用圖標(biāo)就是用它來在使用者界面上傳達(dá)有意義的東西;而這個(gè)有意義的東西,有可能是你的對(duì)象、想法、動(dòng)作,然后設(shè)計(jì)師把這些有意義東西視覺化。
圖標(biāo)的優(yōu)點(diǎn)
1. 它是一個(gè)全世界共通的語言,不會(huì)受到你文化與語言的影響,舉個(gè)例子,大家都知道手機(jī)對(duì)吧,手機(jī)的樣式很多種,但是看下這個(gè)圖標(biāo)你是不是馬上就可理解到這個(gè)是手機(jī)的圖標(biāo)?
手機(jī)圖標(biāo)
2. 可以快速讓使用者識(shí)別,尤其是在快速移動(dòng)的時(shí)候,你可以馬上輕易的找到你要的功能與東西。
手機(jī)在移動(dòng)的中圖標(biāo)的形象會(huì)是這樣子,比起文字,更容易在移動(dòng)的時(shí)候識(shí)別
3. 增加設(shè)計(jì)的美感。
4. 節(jié)省空間,尤其對(duì)于喜歡極簡(jiǎn)設(shè)計(jì)或者扁化的設(shè)計(jì)。
5. 圖標(biāo)是一個(gè)非常好的點(diǎn)擊目標(biāo)。
以上說了那么多的優(yōu)點(diǎn),但是這個(gè)優(yōu)點(diǎn)有個(gè)前提,那就是你的圖標(biāo)要設(shè)計(jì)得非常好,并且可以讓使用者馬上看的出來你要表達(dá)的意思,如果不是,那么你會(huì)讓使用者產(chǎn)生困惑,導(dǎo)致使用者想要完成某項(xiàng)任務(wù)或者事情,使用者會(huì)操作失敗或者錯(cuò)誤點(diǎn)擊。
比如:
看下一下gmail,我紅色圈起來的部分
gmail信件內(nèi)的圖標(biāo)
你可以只看圖標(biāo)就知道這個(gè)是什么意思嗎?
設(shè)計(jì)師通常犯的錯(cuò)誤
說了那么多來看很多設(shè)計(jì)師曾經(jīng)犯的那些錯(cuò),導(dǎo)致使用者抱怨最多,并且造成使用者困擾。
1.經(jīng)常發(fā)明圖標(biāo),導(dǎo)致使用者對(duì)于圖標(biāo)不是很了解導(dǎo)致使用者常常錯(cuò)誤點(diǎn)擊。
2.常常抱怨只要一改版就不知道哪一個(gè)功能跑到哪里去了。
3.圖標(biāo)畫得太細(xì)節(jié),太會(huì)發(fā)揮創(chuàng)意導(dǎo)致使用者與內(nèi)容搞混,說白點(diǎn)就是圖標(biāo)搶了內(nèi)容的風(fēng)采,讓使用者注意的點(diǎn)放在圖標(biāo)上不是內(nèi)容上,然后在小尺寸上那么細(xì)節(jié)的圖標(biāo)根本沒有必要;使用者大多也看不是很清楚。
4.使用一些通用圖標(biāo)但是沒有考慮到多平臺(tái)的問題,實(shí)際上同樣是垃圾桶,ios與android本身就有很大的不同。
5.使用意義不是很明確的東西卻要用圖標(biāo)表達(dá),自己太會(huì)發(fā)揮創(chuàng)意導(dǎo)致使用者認(rèn)知上的困難,例如app的里面的特殊圖標(biāo)要怎么畫,結(jié)果往往是自己在爽,沒有考慮使用者能否領(lǐng)會(huì)。
6.為了省下空間而省下空間,沒有考慮使用者對(duì)于學(xué)習(xí)新圖標(biāo)的學(xué)習(xí)成本。
設(shè)計(jì)與選擇圖標(biāo)遵循的五個(gè)原則
所以你應(yīng)該這樣子做:
一. 能不能在五秒內(nèi)判斷出你的圖標(biāo)的意義
如果不行請(qǐng)重新設(shè)計(jì)。
二. 選擇通用性高的圖標(biāo)
例如下面這些,你一看就知道什么意思
如果你是自己定義這些圖標(biāo),ios與android的雖然外型差不多,但有明顯的風(fēng)格差異,有些圖標(biāo)的差異性非常大,要找出適合該平臺(tái)的設(shè)計(jì)的圖標(biāo),對(duì)于ios與android平臺(tái)優(yōu)化,而不是設(shè)計(jì)一個(gè)共用圖標(biāo)全部平臺(tái)通用。
比如:
這兩個(gè)差異很大的圖標(biāo),卻是分享,上面是android下面是ios
三. 保持一致性
通用性圖標(biāo)選擇有些要很注意,如果你選擇的圖標(biāo)在通用上常常代表兩種意思以上,那你在使用上要特別小心,這邊建議作法是保持一致性,例如愛心代表加入我的最愛,那整個(gè)平臺(tái)的愛心都是加入我的最愛。
幾個(gè)通用性高但卻代表很多意義圖標(biāo)如下
四. 用文字說明抽象的圖標(biāo)
如果空間允許,請(qǐng)你一定要使用文字說明;假設(shè)你今天要設(shè)計(jì)一個(gè)圖標(biāo)這個(gè)圖標(biāo)是很特殊的,例如群組、vip、天氣、快樂….etc;你所設(shè)計(jì)的這類型抽象的圖標(biāo),最好加上文字說明。
如果空間不允許,那怎么辦,那你應(yīng)該不要用圖標(biāo)而使用標(biāo)簽來代替圖標(biāo)。
空間真的不夠,改用標(biāo)簽
還有設(shè)計(jì)抽象類型的圖標(biāo),一定要在真實(shí)世界中找到相關(guān)聯(lián)性,盡量不要完全無關(guān);不然你的圖標(biāo)就算用文字說明,也很難讓人明白的意思或者快速記住這個(gè)圖標(biāo)的意思。
因?yàn)槌橄蟮臉?biāo)簽很復(fù)雜;你這個(gè)圖標(biāo)可以用許多的詞來表達(dá)它的意思,但往往使用者并不知道這個(gè)圖標(biāo)的意思。
例如:
圖標(biāo)加上標(biāo)簽
五. 清楚的特征外觀
你在設(shè)計(jì)圖標(biāo)的時(shí)候不論是抽象還是共用的;你不應(yīng)該花太多時(shí)間在細(xì)節(jié)上,因?yàn)樘〉膱D標(biāo)細(xì)節(jié)是很難被看出來,你應(yīng)該要花更多時(shí)間問自己,使用這類圖標(biāo)的意義在哪里。
所以在特征外型上要有真實(shí)的物理特征或者視覺效果。
例如下面這個(gè)圖標(biāo)就是用來表示測(cè)試手機(jī)網(wǎng)速的。
測(cè)試網(wǎng)速
經(jīng)典的抽象圖標(biāo):設(shè)置。
設(shè)置的圖標(biāo)
我想大家都看過,設(shè)置大部分會(huì)使用的圖標(biāo)都是齒輪來表示,那為什么呢?
傳統(tǒng)上,機(jī)械的操作調(diào)整就是利用用齒輪位置/類型/尺寸來決定,講白一點(diǎn)大家看過機(jī)械時(shí)鐘表嗎,那要怎么調(diào)整速度…etc,它是怎么跑的是不是要調(diào)整齒輪就可以了?
因此,使用齒輪進(jìn)行設(shè)置是一種隱喻,如果你想改變運(yùn)作方式,你需要改變系統(tǒng)的內(nèi)部運(yùn)作,這通常都是齒輪的圖標(biāo)。
全站高品質(zhì)素材免費(fèi)下載!