有讀者說(shuō)，面試的時(shí)候面試官提到了一個(gè)問(wèn)題，但不知道怎么回答。

這個(gè)問(wèn)題是：實(shí)心圖標(biāo)和空心圖標(biāo)的區(qū)別是什么？

這個(gè)問(wèn)題網(wǎng)上的討論挺多的，國(guó)內(nèi)外很多設(shè)計(jì)師都有針對(duì)這個(gè)問(wèn)題給出一些自己的看法。

01.

最早是 2013 年，設(shè)計(jì)師 Aubrey Johnson 在 Medium 上吐槽了一段關(guān)于 iOS 7 標(biāo)簽欄圖標(biāo)的問(wèn)題。說(shuō)是 iOS 大范圍使用線性/空心圖標(biāo)來(lái)讓用戶(hù)辨別產(chǎn)品功能，會(huì)讓用戶(hù)在認(rèn)知理解上更為費(fèi)力。

他給出了這樣一張圖，來(lái)說(shuō)明人腦對(duì)于圖形的認(rèn)知負(fù)荷主要來(lái)自于圖形的線性結(jié)構(gòu)。我查了一下這位設(shè)計(jì)師的背景，看到他除了是設(shè)計(jì)師，同時(shí)還是一名開(kāi)發(fā)者，而且有認(rèn)知心理學(xué)的學(xué)習(xí)經(jīng)歷。所以能承認(rèn)這個(gè)論點(diǎn)是有一定道理的。

于是另一位設(shè)計(jì)師 Curt Arledge, 在 2014 年，專(zhuān)門(mén)為這個(gè)「假說(shuō)」做了一次實(shí)驗(yàn)。實(shí)驗(yàn)的內(nèi)容是將一組相同圖標(biāo)，分為實(shí)心和空心，給用戶(hù)做測(cè)試。結(jié)論是相同一組圖標(biāo)，用戶(hù)識(shí)別實(shí)心圖標(biāo)的速度比識(shí)別空心圖標(biāo)的速度要快上 0.1 秒，其中有個(gè)別空心圖標(biāo)的識(shí)別速度甚至比實(shí)心圖標(biāo)還快。

我仔細(xì)翻閱了這個(gè)實(shí)驗(yàn)的所有資料和參考文獻(xiàn)，并對(duì)這名設(shè)計(jì)師提出的很多參考做了閱讀，過(guò)程中，我發(fā)現(xiàn)這個(gè)實(shí)驗(yàn)有一個(gè)細(xì)節(jié)問(wèn)題。

就是，在給用戶(hù)做這組圖標(biāo)測(cè)試之前，他會(huì)給這些用戶(hù)先熟悉一下這些圖標(biāo)，以及圖標(biāo)所代表的意思，然后隨機(jī)呈現(xiàn)讓他們做判斷。

這里的問(wèn)題是，如果這樣來(lái)分析，它的實(shí)驗(yàn)條件就不僅僅是具備識(shí)別要求，還要具備記憶要求。

有些圖標(biāo)比較具象，傳遞的意思很清晰，不需要記憶，一看就知道，哦，這是「鑰匙」；而有些圖標(biāo)就沒(méi)那么容易理解，在看到的那一瞬間是判定不出來(lái)是什么的，所以要想一下，剛才記的圖標(biāo)里有什么，然后才想起來(lái)，哦，它是「標(biāo)簽」。

所以情況可能是，用戶(hù)在判斷過(guò)程中，因?yàn)橥诉@個(gè)圖標(biāo)所表達(dá)的意思，于是想了一下，那識(shí)別速度肯定就慢了，無(wú)論是實(shí)心還是空心。

所以這個(gè)實(shí)驗(yàn)算不上很?chē)?yán)謹(jǐn)。我有看到一些設(shè)計(jì)團(tuán)隊(duì)跟自媒體設(shè)計(jì)師拿這個(gè)實(shí)驗(yàn)結(jié)論來(lái)斷定說(shuō)，實(shí)心圖標(biāo)與空心圖標(biāo)的識(shí)別是不存在差異的。這個(gè)說(shuō)法也是不太可取的。

在這個(gè)問(wèn)題上，可以說(shuō) Aubrey Johnson 通過(guò)設(shè)計(jì)原則以及認(rèn)知心理得出的圖形識(shí)別理論，是更站得住腳的。也就是，空心圖標(biāo)，在用戶(hù)的認(rèn)知理解上需要調(diào)動(dòng)更多神經(jīng)元來(lái)進(jìn)行識(shí)別。用人話說(shuō)，就是識(shí)別起來(lái)比實(shí)心圖標(biāo)費(fèi)力。

畢竟連人家蘋(píng)果公司也認(rèn)同了他的說(shuō)法，現(xiàn)在的 iOS 系統(tǒng)自帶產(chǎn)品，也都把空心圖標(biāo)改成了實(shí)心圖標(biāo)了。

02.

我在梳理完這些資料后，在想，圖標(biāo)除了讓用戶(hù)知道它是什么之外，還有什么作用呢？

于是延伸出了一個(gè)新的理解，就是，實(shí)心圖標(biāo)比空心圖標(biāo)更具定位與引導(dǎo)的作用。

上面提到，用戶(hù)對(duì)于圖標(biāo)的認(rèn)識(shí)在于識(shí)別，不是記憶。看到它像什么，就判定是什么；而不是看到它想起來(lái)應(yīng)該叫什么。

所以識(shí)別圖標(biāo)除了知道它所表達(dá)的是什么意思之外，還要知道它在引導(dǎo)著什么。

比如，標(biāo)簽欄圖標(biāo)就那么 2-5 個(gè)，用戶(hù)在使用 App 的過(guò)程中，不需要強(qiáng)行記憶或特地去識(shí)別，只是點(diǎn)擊的時(shí)候眼睛一掃而過(guò)，來(lái)判斷自己要進(jìn)入哪個(gè)功能頁(yè)。這時(shí)候，它是給用戶(hù)做定位引導(dǎo)用的。

我相信現(xiàn)在在看文章的你，一下子也想不起來(lái)微信底部四個(gè)圖標(biāo)的樣子吧？或者對(duì)于微信的「發(fā)現(xiàn)」頁(yè)，也不能理解為什么要用那樣一個(gè)圖標(biāo)來(lái)表示。

但是當(dāng)你看到它，并知道它在底部第三個(gè)位置，點(diǎn)擊之后，還看到了里面有朋友圈，就知道它代表的是什么意思了。

所以用戶(hù)在這層理解上，不會(huì)真正去思考它為什么是「發(fā)現(xiàn)」，而是直接通過(guò)以往對(duì)于它的理解，通過(guò)識(shí)別位置來(lái)理解它里面有哪些功能，比如里面有「朋友圈」。

再通過(guò)變化來(lái)提示用戶(hù)，比如從空心圖標(biāo)變到實(shí)心圖標(biāo)。所以在一些規(guī)范里，它也只是告訴說(shuō)，空心和實(shí)心圖標(biāo)在標(biāo)簽欄中的區(qū)別就是，空心是未選中狀態(tài)，而實(shí)心是選中狀態(tài)。因?yàn)閷?shí)心圖標(biāo)所示的色塊，更符合選中且定位于某個(gè)功能頁(yè)的一種說(shuō)明提示。

再用顏色把選中的圖標(biāo)凸顯出來(lái)，讓人在視覺(jué)上更聚焦，讓用戶(hù)知道自己目前選擇的是它。

在視覺(jué)領(lǐng)域里有個(gè)說(shuō)法是，色塊比形狀更容易抓人眼球。再是具有紋理的色塊，比純色快更吸引眼球。

空心圖標(biāo)就是形狀，實(shí)心圖標(biāo)就是色塊。

所以用戶(hù)在看到圖標(biāo)的時(shí)候，不僅僅可以知道它所表達(dá)的意思，還能知道自己目前所處的位置。那么相比起來(lái)，色塊當(dāng)然會(huì)比形狀更有優(yōu)勢(shì)。

就好像在商場(chǎng)里，突然尿急，看到這樣的廁所指示牌，你怎么想？

我相信不管是男生還是女生，第一反應(yīng)都是往右走吧？

所以第二個(gè)結(jié)論是，實(shí)心圖標(biāo)比空心圖標(biāo)更有引導(dǎo)性。

03.

或許有人會(huì)問(wèn)，那空心圖標(biāo)就沒(méi)用了么？不是的。

其實(shí)上面有提到，空心圖標(biāo)相比實(shí)心圖標(biāo)更難識(shí)別，那么人就需要調(diào)動(dòng)更多神經(jīng)來(lái)對(duì)空心圖標(biāo)進(jìn)行確認(rèn)。所以它能豐富頁(yè)面的視覺(jué)效果，也就是裝飾感。

舉個(gè)例子：

上面兩組圖，能看出來(lái)第一組整體看起來(lái)會(huì)比較抓眼，因?yàn)閳D標(biāo)比較重；但是第二組看起來(lái)會(huì)清晰得多，因?yàn)橛脩?hù)的視線會(huì)聚焦在內(nèi)容上。

在這個(gè)例子中，圖標(biāo)作為裝飾類(lèi)信息，不應(yīng)該搶了內(nèi)容的風(fēng)頭，它在這里只是增加了排版基調(diào)與內(nèi)容分層的作用。而設(shè)計(jì)師應(yīng)該在這里引導(dǎo)用戶(hù)去看內(nèi)容本身，而不是去看圖標(biāo)。

裝飾是給內(nèi)容做裝飾，而不是給自己做裝飾，如果是給自己做裝飾，那就沒(méi)必要用線條來(lái)表現(xiàn)了。各位設(shè)計(jì)師應(yīng)該懂我意思。

當(dāng)然也有用實(shí)心圖標(biāo)來(lái)填充列表信息的，這也跟頁(yè)面風(fēng)格有關(guān)，比如你產(chǎn)品風(fēng)格全是扁平塊狀內(nèi)容的，突然有了一部分空心圖標(biāo)，也會(huì)顯得很不搭。

我只是在這里用這個(gè)例子來(lái)說(shuō)明，空心圖標(biāo)的引導(dǎo)性沒(méi)有實(shí)心圖標(biāo)強(qiáng)，所以更多會(huì)被用來(lái)當(dāng)做裝飾品。

而當(dāng)空心圖標(biāo)與實(shí)心圖標(biāo)同時(shí)出現(xiàn)，并表達(dá)同一類(lèi)信息時(shí)，它們就是一種信息的兩種狀態(tài)，比如選中與未選中。

所以我們現(xiàn)在能看到很多產(chǎn)品依然在標(biāo)簽欄保留著空心圖標(biāo)。

除了風(fēng)格因素的影響外，它還能體現(xiàn)出被選中狀態(tài)的功能圖標(biāo)，并讓其它圖標(biāo)起到裝飾性的作用。

04.

從后面延伸的兩個(gè)點(diǎn)來(lái)說(shuō)，圖標(biāo)的作用還是很明顯的。我這里只探討了兩類(lèi)圖標(biāo)的部分區(qū)別，并著重講解了實(shí)心圖標(biāo)的作用。它們之間還是有很多其它內(nèi)容可以深究的。

我想說(shuō)的是，即使用戶(hù)對(duì)熟悉的圖標(biāo)，無(wú)論是實(shí)心還是空心，在實(shí)驗(yàn)環(huán)境下的識(shí)別速度上無(wú)差異，但是兩類(lèi)圖標(biāo)對(duì)信息所承載的意思確實(shí)是不同的。

于是，本篇文章的結(jié)論：

• 人的大腦在識(shí)別空心圖標(biāo)時(shí)，會(huì)比實(shí)心圖標(biāo)更顯吃力；
• 實(shí)心圖標(biāo)的引導(dǎo)性要強(qiáng)于空心圖標(biāo)；
• 空心圖標(biāo)的裝飾性會(huì)更強(qiáng)；
• 實(shí)心圖標(biāo)承載的信息相對(duì)更重，參考選中狀態(tài)。

轉(zhuǎn)自