九種醒目圖標樣式（實心圖標與空心圖標的區別）

2023-05-31 14:35:18 3

有讀者說，面試的時候面試官提到了一個問題，但不知道怎麼回答。

這個問題是：實心圖標和空心圖標的區別是什麼？

這個問題網上的討論挺多的，國內外很多設計師都有針對這個問題給出一些自己的看法。

01.

最早是 2013 年，設計師 Aubrey Johnson 在 Medium 上吐槽了一段關於 iOS 7 標籤欄圖標的問題。說是 iOS 大範圍使用線性/空心圖標來讓用戶辨別產品功能，會讓用戶在認知理解上更為費力。

他給出了這樣一張圖，來說明人腦對於圖形的認知負荷主要來自於圖形的線性結構。我查了一下這位設計師的背景，看到他除了是設計師，同時還是一名開發者，而且有認知心理學的學習經歷。所以能承認這個論點是有一定道理的。

於是另一位設計師 Curt Arledge, 在 2014 年，專門為這個「假說」做了一次實驗。實驗的內容是將一組相同圖標，分為實心和空心，給用戶做測試。結論是相同一組圖標，用戶平均識別實心圖標的速度比識別空心圖標的速度要快上 0.1 秒，但是其中有個別空心圖標的識別速度比實心圖標更快一些。

我仔細翻閱了這個實驗的所有資料和參考文獻，並對這名設計師提出的很多參考做了閱讀，過程中，我發現這個實驗有一個細節問題。

就是，在給用戶做這組圖標測試之前，他會給這些用戶先熟悉一下這些圖標，以及圖標所代表的意思，然後隨機呈現讓他們做判斷。

這裡的問題是，如果這樣來分析，它的實驗條件就不僅僅是具備識別要求，還要具備記憶要求。

有些圖標比較具象，傳遞的意思很清晰，不需要記憶，一看就知道，哦，這是「鑰匙」；而有些圖標就沒那麼容易理解，在看到的那一瞬間是判定不出來是什麼的，所以要想一下，剛才記的圖標裡有什麼，然後才想起來，哦，它是「標籤」。

所以情況可能是，用戶在判斷過程中，因為忘了這個圖標所表達的意思，於是想了一下，那識別速度肯定就慢了，無論是實心還是空心。

所以這個實驗算不上很嚴謹。我有看到一些設計團隊跟自媒體設計師拿這個實驗結論來斷定說，實心圖標與空心圖標的識別是不存在差異的。這個說法也是不太可取的。

在這個問題上，可以說 Aubrey Johnson 通過設計原則以及認知心理得出的圖形識別理論，是更站得住腳的。也就是，空心圖標，在用戶的認知理解上需要調動更多神經元來進行識別。用人話說，就是識別起來比實心圖標費力。

畢竟連人家蘋果公司也認同了他的說法，現在的 iOS 系統自帶產品，也都把空心圖標改成了實心圖標了。

02.

我在梳理完這些資料後，在想，圖標除了讓用戶知道它是什麼之外，還有什麼作用呢？

於是延伸出了一個新的理解，就是，實心圖標比空心圖標更具定位與引導的作用。

上面提到，用戶對於圖標的認識在於識別，不是記憶。看到它像什麼，就判定是什麼；而不是看到它想起來應該叫什麼。

所以識別圖標除了知道它所表達的是什麼意思之外，還要知道它在引導著什麼。

比如，標籤欄圖標就那麼 2-5 個，用戶在使用 App 的過程中，不需要強行記憶或特地去識別，只是點擊的時候眼睛一掃而過，來判斷自己要進入哪個功能頁。這時候，它是給用戶做定位引導用的。

我相信現在在看文章的你，一下子也想不起來微信底部四個圖標的樣子吧？或者對於微信的「發現」頁，也不能理解為什麼要用那樣一個圖標來表示。

但是當你看到它，並知道它在底部第三個位置，點擊之後，還看到了裡面有朋友圈，就知道它代表的是什麼意思了。

所以用戶在這層理解上，不會真正去思考它為什麼是「發現」，而是直接通過以往對於它的理解，再通過識別位置來理解它裡面有哪些功能，比如裡面有「朋友圈」。

接著通過變化來提示用戶，比如從空心圖標變到實心圖標。所以在一些規範裡，它也只是告訴說，空心和實心圖標在標籤欄中的區別就是，空心是未選中狀態，而實心是選中狀態。因為實心圖標所示的色塊，更符合選中且定位於某個功能頁的一種說明提示。

再用顏色把選中的圖標凸顯出來，讓人在視覺上更聚焦，讓用戶知道自己目前選擇的是它。

在視覺領域裡有個說法是，色塊比形狀更容易抓人眼球。再是具有紋理的色塊，比純色塊更吸引眼球。

空心圖標就是形狀，實心圖標就是色塊。

所以用戶在看到圖標的時候，不僅僅可以知道它所表達的意思，還能知道自己目前所處的位置。那麼相比起來，色塊當然會比形狀更有優勢。

就好像在商場裡，突然尿急，看到這樣的廁所指示牌，你怎麼想？

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

所以第二個結論是，實心圖標比空心圖標更有引導性。

03. 或許有人會問，那空心圖標就沒用了麼？不是的。

其實上面有提到，空心圖標相比實心圖標更難識別，那麼人就需要調動更多神經來對空心圖標進行確認。所以它能豐富頁面的視覺效果，也就是裝飾感。

舉個例子：

上面兩組圖，能看出來第一組整體看起來會比較抓眼，因為圖標比較重；但是第二組看起來會清晰得多，因為用戶的視線會聚焦在內容上。

在這個例子中，圖標作為裝飾類信息，不應該搶了內容的風頭，它在這裡只是增加了排版基調與內容分層的作用。而設計師應該在這裡引導用戶去看內容本身，而不是去看圖標。

裝飾是給內容做裝飾，而不是給自己做裝飾，如果是給自己做裝飾，那就沒必要用線條來表現了。各位設計師應該懂我意思。

當然也有用實心圖標來填充列表信息的，這也跟頁面風格有關，比如你產品風格全是扁平塊狀內容的，突然有了一部分空心圖標，也會顯得很不搭。

我只是在這裡用這個例子來說明，空心圖標的引導性沒有實心圖標強，所以更多會被用來當做裝飾品。

而當空心圖標與實心圖標同時出現，並表達同一類信息時，它們就是一種信息的兩種狀態，比如選中與未選中。

所以我們現在能看到很多產品依然在標籤欄保留著空心圖標。

除了風格因素的影響外，它還能體現出被選中狀態的功能圖標，並讓其它圖標起到裝飾性的作用。

04.

從後面延伸的兩個點來說，圖標的作用還是很明顯的。我這裡只探討了兩類圖標的部分區別，並著重講解了實心圖標的作用。它們之間還是有很多其它內容可以深究的。

我想說的是，即使用戶對熟悉的圖標，無論是實心還是空心，在實驗環境下的識別速度上無差異，但是兩類圖標對信息所承載的意思確實是不同的。

於是，本篇文章的結論：

人的大腦在識別空心圖標時，會比實心圖標更顯吃力；

實心圖標的引導性要強於空心圖標；

空心圖標的裝飾性會更強；

實心圖標承載的信息相對更重，參考選中狀態。

這就是本篇文章的所有內容了，謝謝閱讀：）

Aubrey Johnson 論點：

https://medium.com/@aub/hollow-icons-a93647e5a44bCurt Arledge 實驗:

https://www.viget.com/articles/are-hollow-icons-really-harder-to-recognize-a-research-study/

如果覺得文章對你有所幫助，歡迎留言並且推薦給你的好友。

本文由UU呆理（ID:UDai_bl）發布，授權網際網路早讀課轉載。內容僅代表作者獨立觀點，不代表早讀課立場。如需轉載，請聯繫原作者。

排版：雜蕪

,