icon圖標設計與篩選的技巧

自從扁平化還有極簡設計開始流行之后,圖標的設計越來越重要,經(jīng)常有設計師問,到底軟件程序里面的這個圖標怎么設計?

另外網(wǎng)頁設計的設計師也會問,我們這平臺有vip會員,那vip會員的圖標要怎么設計?

還有一個app的設計,這聊天里面的群組圖標,要怎么設計?

圖標的設計,我認為是對于ui/ux設計師來說;是最難的工作之一。

 

圖標的用意是什么

我們會使用圖標就是用它來在使用者界面上傳達有意義的東西;而這個有意義的東西,有可能是你的對象、想法、動作,然后設計師把這些有意義東西視覺化。

圖標的優(yōu)點

1. 它是一個全世界共通的語言,不會受到你文化與語言的影響,舉個例子,大家都知道手機對吧,手機的樣式很多種,但是看下這個圖標你是不是馬上就可理解到這個是手機的圖標?

icon design 10

手機圖標

 

2. 可以快速讓使用者識別,尤其是在快速移動的時候,你可以馬上輕易的找到你要的功能與東西。

icon design 6

手機在移動的中圖標的形象會是這樣子,比起文字,更容易在移動的時候識別

 

3. 增加設計的美感。

4. 節(jié)省空間,尤其對于喜歡極簡設計或者扁化的設計。

5. 圖標是一個非常好的點擊目標。

以上說了那么多的優(yōu)點,但是這個優(yōu)點有個前提,那就是你的圖標要設計得非常好,并且可以讓使用者馬上看的出來你要表達的意思,如果不是,那么你會讓使用者產(chǎn)生困惑,導致使用者想要完成某項任務或者事情,使用者會操作失敗或者錯誤點擊。

比如:

看下一下gmail,我紅色圈起來的部分

icon design 1

gmail信件內(nèi)的圖標

你可以只看圖標就知道這個是什么意思嗎?

 

設計師通常犯的錯誤

說了那么多來看很多設計師曾經(jīng)犯的那些錯,導致使用者抱怨最多,并且造成使用者困擾。

1.經(jīng)常發(fā)明圖標,導致使用者對于圖標不是很了解導致使用者常常錯誤點擊。

2.常常抱怨只要一改版就不知道哪一個功能跑到哪里去了。

3.圖標畫得太細節(jié),太會發(fā)揮創(chuàng)意導致使用者與內(nèi)容搞混,說白點就是圖標搶了內(nèi)容的風采,讓使用者注意的點放在圖標上不是內(nèi)容上,然后在小尺寸上那么細節(jié)的圖標根本沒有必要;使用者大多也看不是很清楚。

4.使用一些通用圖標但是沒有考慮到多平臺的問題,實際上同樣是垃圾桶,ios與android本身就有很大的不同。

5.使用意義不是很明確的東西卻要用圖標表達,自己太會發(fā)揮創(chuàng)意導致使用者認知上的困難,例如app的里面的特殊圖標要怎么畫,結果往往是自己在爽,沒有考慮使用者能否領會。

6.為了省下空間而省下空間,沒有考慮使用者對于學習新圖標的學習成本。

 

設計與選擇圖標遵循的五個原則

所以你應該這樣子做:

一. 能不能在五秒內(nèi)判斷出你的圖標的意義

如果不行請重新設計。

二. 選擇通用性高的圖標

例如下面這些,你一看就知道什么意思

icon design 7

如果你是自己定義這些圖標,ios與android的雖然外型差不多,但有明顯的風格差異,有些圖標的差異性非常大,要找出適合該平臺的設計的圖標,對于ios與android平臺優(yōu)化,而不是設計一個共用圖標全部平臺通用。

比如:

icon design 3

這兩個差異很大的圖標,卻是分享,上面是android下面是ios

三. 保持一致性

通用性圖標選擇有些要很注意,如果你選擇的圖標在通用上常常代表兩種意思以上,那你在使用上要特別小心,這邊建議作法是保持一致性,例如愛心代表加入我的最愛,那整個平臺的愛心都是加入我的最愛。

幾個通用性高但卻代表很多意義圖標如下

icon design 5

四. 用文字說明抽象的圖標

如果空間允許,請你一定要使用文字說明;假設你今天要設計一個圖標這個圖標是很特殊的,例如群組、vip、天氣、快樂….etc;你所設計的這類型抽象的圖標,最好加上文字說明。

如果空間不允許,那怎么辦,那你應該不要用圖標而使用標簽來代替圖標。

icon design 8

空間真的不夠,改用標簽

還有設計抽象類型的圖標,一定要在真實世界中找到相關聯(lián)性,盡量不要完全無關;不然你的圖標就算用文字說明,也很難讓人明白的意思或者快速記住這個圖標的意思。

因為抽象的標簽很復雜;你這個圖標可以用許多的詞來表達它的意思,但往往使用者并不知道這個圖標的意思。

例如:

icon design 9

圖標加上標簽

五. 清楚的特征外觀

你在設計圖標的時候不論是抽象還是共用的;你不應該花太多時間在細節(jié)上,因為太小的圖標細節(jié)是很難被看出來,你應該要花更多時間問自己,使用這類圖標的意義在哪里。

所以在特征外型上要有真實的物理特征或者視覺效果。

例如下面這個圖標就是用來表示測試手機網(wǎng)速的。

icon design 2

測試網(wǎng)速

經(jīng)典的抽象圖標:設置。

icon design 4

設置的圖標

我想大家都看過,設置大部分會使用的圖標都是齒輪來表示,那為什么呢?

傳統(tǒng)上,機械的操作調(diào)整就是利用用齒輪位置/類型/尺寸來決定,講白一點大家看過機械時鐘表嗎,那要怎么調(diào)整速度…etc,它是怎么跑的是不是要調(diào)整齒輪就可以了?

因此,使用齒輪進行設置是一種隱喻,如果你想改變運作方式,你需要改變系統(tǒng)的內(nèi)部運作,這通常都是齒輪的圖標。

每天更新,
全站高品質(zhì)素材免費下載!