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

前言

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

舉個栗子：

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

圖標(biāo)定義

廣義

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

狹義

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

圖標(biāo)變遷

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

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

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

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

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

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

2.沒有地域語言限制，針對國際通用圖標(biāo)。

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

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

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

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

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

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

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

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

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

如果圖標(biāo)不能言簡意賅的表達(dá)出寓意，并且存在爭議的請避免使用，如果非要使用請采用圖標(biāo)+文字的形式。比如appstore側(cè)邊導(dǎo)航第一個你覺得是什么？收藏？標(biāo)記？錯！他是探索，如果我不告訴你可能每個人猜的含義都不同。所以我們在設(shè)計圖標(biāo)的時候要勁量去避免多重含義的圖標(biāo)。

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

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

小結(jié)

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

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

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

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

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