首先捫心自問(wèn)下是否清楚在設(shè)計(jì)中什么時(shí)候用圖標(biāo)？ 什么時(shí)候用文字？什么時(shí)候用圖標(biāo)+文字？你是否能清晰的分辨他們分別在什么場(chǎng)景下使用呢？

前言

之所以要寫一篇這樣的文章是因?yàn)樽罱泻芏嗟脑O(shè)計(jì)小伙伴反復(fù)在爭(zhēng)論一個(gè)觀點(diǎn) 圖標(biāo)配上文字是否有必要？

舉個(gè)栗子：

如下圖一位設(shè)計(jì)同學(xué)覺(jué)得右上角紅圈里面只需要圖標(biāo)就好了不需要文字的存在，并且節(jié)省屏幕空間，可是公司的開發(fā)和測(cè)試同學(xué)一臉懵，這個(gè)操作覺(jué)得不夠清晰，識(shí)別性較差嚴(yán)重影響用戶體驗(yàn)，當(dāng)前視覺(jué)層面和功能層面產(chǎn)生了強(qiáng)烈的撞擊。帶著這個(gè)問(wèn)題我們從圖標(biāo)的定義，圖標(biāo)變遷史，圖標(biāo)的優(yōu)劣勢(shì)來(lái)講述今天的文章，相信文末你會(huì)有自己的答案。

圖標(biāo)定義

廣義

圖標(biāo)是指代意義的圖形符號(hào)，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。應(yīng)用范圍很廣，軟硬件網(wǎng)頁(yè)社交場(chǎng)所公共場(chǎng)合無(wú)所不在，例如：男女廁所標(biāo)志和各種交通標(biāo)志等。

狹義

應(yīng)用于計(jì)算機(jī)軟件方面，包括：程序標(biāo)識(shí)、數(shù)據(jù)標(biāo)識(shí)、命令選擇、模式信號(hào)或切換開關(guān)、狀態(tài)指示等。

圖標(biāo)變遷

圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形，它不僅是一種圖形，更是一種標(biāo)識(shí)，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。它不僅歷史久遠(yuǎn)，從上古時(shí)代的圖騰，到20、21世紀(jì)具有更多含義和功能的各種圖標(biāo)，而且應(yīng)用范圍極為廣泛，可以說(shuō)它無(wú)所不在。一個(gè)國(guó)家的圖標(biāo)就是國(guó)旗；一件商品的圖標(biāo)是注冊(cè)商標(biāo)；軍隊(duì)的圖標(biāo)是軍旗；學(xué)校的圖標(biāo)是?；?。

我們通過(guò)圖標(biāo)看到的不僅僅是圖標(biāo)本身，而是它所代表的內(nèi)在含義。

而在計(jì)算設(shè)備上，圖標(biāo)隨著時(shí)代的發(fā)展而迅速流行。從最早的計(jì)算機(jī)GUI(施樂(lè)之星Xerox Star)再到之后的喬布斯Apple lisa，Windows1.0，Amiga Workbench，從最初的黑白到隨著顯示技術(shù)在分辨率和色域上的提高出現(xiàn)的彩色圖標(biāo)，設(shè)計(jì)師漸漸的有了更大的發(fā)揮空間。

圖標(biāo)的優(yōu)勢(shì)

1.節(jié)省屏幕空間

圖標(biāo)可以替代文字，相對(duì)于長(zhǎng)文字來(lái)說(shuō)只需要占用一個(gè)圖標(biāo)的位置如：worktile移動(dòng)端新建聊天操作四個(gè)文字如果用圖標(biāo)來(lái)代替的話只需要占用一個(gè)文字的文字，并且把干巴巴的文字變?yōu)閳D形符號(hào)，用戶對(duì)于圖形的識(shí)別速度對(duì)于文字來(lái)說(shuō)更快。

2.沒(méi)有地域語(yǔ)言限制，針對(duì)國(guó)際通用圖標(biāo)。

國(guó)際上通用的圖標(biāo)對(duì)于每個(gè)人來(lái)說(shuō)都能很快的識(shí)別處理，比如同樣一個(gè)“放大鏡”圖標(biāo)經(jīng)過(guò)長(zhǎng)期許多不同的網(wǎng)站、應(yīng)用程序和操作系統(tǒng)的用戶培養(yǎng)，讓放大鏡圖標(biāo)作為搜索的操作代表符號(hào)變得越來(lái)越流行，不論任何國(guó)家任務(wù)種族，用戶很清楚這是搜索操作，相對(duì)于文字來(lái)說(shuō)圖形識(shí)別大大減少的用戶識(shí)別的時(shí)間，用戶也可以花更多的時(shí)間去做他真正要去做的事情，從而提升工作效率

3.圖標(biāo)可以提供視覺(jué)引導(dǎo)，迅速識(shí)別減少用戶思考時(shí)間

人腦處理圖形圖像的速度是處理文字的60萬(wàn)倍，人會(huì)記住80%看過(guò)的東西，20%閱讀過(guò)的東西，和10%聽到過(guò)的東西，所以在我們發(fā)朋友圈或者寫文章的時(shí)候避免干巴巴的文字描述，勁量配上相關(guān)圖片，提升整體的圖版率，俗話說(shuō)看圖說(shuō)話不是沒(méi)有道理。

4.提升整體視覺(jué)體驗(yàn)

好的一套圖標(biāo)能夠從圖標(biāo)的獨(dú)特性、象征性、記憶性、應(yīng)用性、組合性、變化性上打動(dòng)人心，激發(fā)人們的點(diǎn)擊欲望。這樣才能使圖標(biāo)設(shè)計(jì)達(dá)到上乘水準(zhǔn)，從而提升整體的視覺(jué)水準(zhǔn)

圖標(biāo)不適用場(chǎng)景

1.表達(dá)含義復(fù)雜，難以揣測(cè)

圖標(biāo)的目的就是快速識(shí)別并引導(dǎo)用戶，用戶如果無(wú)法快速識(shí)別通常會(huì)下意識(shí)的回避掉無(wú)法識(shí)別的界面元素，這是人類的天性，反而logo的設(shè)計(jì)更加適合深層次的寓意。之前喬布斯做的一個(gè)實(shí)驗(yàn)，他拿著蘋果設(shè)備到一個(gè)智障兒童福利院讓兒童們把玩，每個(gè)小朋友都認(rèn)識(shí)那些圖標(biāo)的含義，當(dāng)時(shí)的寫實(shí)圖標(biāo)都是來(lái)源于生活，對(duì)于來(lái)源于生活而設(shè)計(jì)的圖標(biāo)對(duì)于孩子們來(lái)說(shuō)識(shí)別效率更高花費(fèi)的識(shí)別成本更低。

2.圖標(biāo)存在多重含義

如果圖標(biāo)不能言簡(jiǎn)意賅的表達(dá)出寓意，并且存在爭(zhēng)議的請(qǐng)避免使用，如果非要使用請(qǐng)采用圖標(biāo)+文字的形式。比如appstore側(cè)邊導(dǎo)航第一個(gè)你覺(jué)得是什么？收藏？標(biāo)記？錯(cuò)！他是探索，如果我不告訴你可能每個(gè)人猜的含義都不同。所以我們?cè)谠O(shè)計(jì)圖標(biāo)的時(shí)候要?jiǎng)帕咳ケ苊舛嘀睾x的圖標(biāo)。

3.專業(yè)性過(guò)強(qiáng)很難作為通用圖標(biāo)

圖標(biāo)如果專業(yè)性過(guò)強(qiáng)，而沒(méi)有辦法簡(jiǎn)化為一個(gè)很直觀通用符號(hào)時(shí)，二八原則我們只能考慮80%的人，而20%的人需要付出學(xué)習(xí)成本，，比如下面的這個(gè)圖標(biāo)，如果用它來(lái)代表“研發(fā)”，我相信會(huì)有很大一部分人沒(méi)法識(shí)別代表什么意思。但是對(duì)于開發(fā)人員就是一個(gè)很通用的圖標(biāo)，在這種情況下，只能是允許20%人員付出學(xué)習(xí)成本來(lái)解決這個(gè)問(wèn)題，除非你配上文字。

小結(jié)

1.為了提升產(chǎn)品視覺(jué)體驗(yàn)，圖標(biāo)設(shè)計(jì)一定要極簡(jiǎn)，如果使用圖標(biāo)能夠百分百表達(dá)其含義時(shí)，請(qǐng)優(yōu)先使用

2.針對(duì)國(guó)際上面通用的有大眾認(rèn)知的如：搜索、wifi、設(shè)置、藍(lán)牙等圖標(biāo)無(wú)需配上文字，除非做視覺(jué)引導(dǎo)為了保持一致而統(tǒng)一添加文字的列表

3.禁止使用多意圖標(biāo)（不讓用戶思考，如果用戶不能在5s內(nèi)很快識(shí)別出圖標(biāo)的意思，那這個(gè)圖標(biāo)的設(shè)計(jì)是失敗的）

4.針對(duì)專業(yè)性很強(qiáng)的并且局限于空間的采用文字形式，或者二八原則只要考慮80%的人員無(wú)識(shí)別壓力，而20%的人付出學(xué)習(xí)成本。

5.我們不討厭圖標(biāo)加文字的形式，前提為圖標(biāo)要足夠簡(jiǎn)化表達(dá)其含義（如文章開始的案例，圖標(biāo)簡(jiǎn)化為加號(hào)并且加文字放到商品2做一個(gè)通欄操作就好了，這樣更加符合用戶操作的視線流，這樣做的還有釘釘?shù)膱?bào)銷審批界面）