空心圖標是否比實心圖標難以識別？

12-06

Curt Arledge 的博文: Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study

Curt Arledge 的論文: Filled-in vs. Outline icons: The Impact of Icon Style on Usability [PDF]

Aubrey Johnson 參與的討論: Hollow Icon: Why hollow icons are more work for your users and ultimately create cognitive fatigue

在 UI 設計中，空心圖標和實心圖標應該在什麼場景下使用？有人說，空心圖標在視覺上比實心圖標看起來更複雜，實心圖標比空心圖標識別度更高。

對此，設計師們各抒己見，一部分人表示贊同，認為空心圖標使用線形描繪，相對實心圖標更難識別，但能給人輕鬆、精緻的感覺。而另一種觀點認為，圖標識別度的高低並不取決於實心空心，而是取決於圖形、顏色等其他因素。

一、圖標的功能

首先，這次討論聚焦在一種特定類型的圖標：功能性圖標。我們先來回顧一下這類圖標的基本功能。

功能性圖標在生活中很常見，通常出現在機場、車站、酒店、商場等大型公共場所，給人們提供嚮導，如下圖：

（圖片來源於網路）

UI設計中，圖標是最常見的設計元素之一，圖標的使用起源於Macintosh 1.0，甚至在更早的Xerox圖形界面開始就有了。它們往往被賦予可操作，提示說明等作用。

（圖片來源於網路）

從智能手機系統發布至今，圖形界面的風格完成了擬物到扁平的演變。隨著IOS7推出，幾乎所有APP中的圖標都變得越來越扁平和纖細，其背後的原因，主要是避免因圖標過分醒目降低內容的可讀性。

總的來說，圖標最基本的功能是迅速傳達信息。

在現今的設計工作中，圖標與文字的搭配已經到了走火入魔的地步。一些比較抽象的概念，用文字足以表達清楚，仍然要在文字旁設計一個圖標，如果單看圖標的話絲毫無法讓人與其賦予的功能產生聯繫。

即便如此，圖標依然很重要。因為圖標不僅僅是在沒有文字表達的時候「讓用戶一眼看出含義」，除此之外，圖標還能快速定位，區分內容層次，增加界面的韻律。

拿一款音樂產品舉例，只看圖標不看文字的情況下，很難直接看出含義，但它們的作用遠不在此。列表中的圖標使用了空心圖標，看起來輕鬆且精緻，圖標與文字放在一起形成了一個整體，起到了對齊的作用；如果去掉了圖標，列表中的信息就會區分不開，視覺上有些混亂，用戶更難聚焦到某一行的選項上了。

另外圖標還能強化品牌形象，與本答案的討論無關，不做贅述。

二、實心圖標比空心圖標識別度高？

假設你在逛街的時候突然內急，衝進大商場找洗手間，實心和空心兩種圖標，那種能更快識別出洗手間的標誌？

如果單純從視覺吸引來講，實心圖標確實比空心圖標更快被用戶識別。下圖展示的是對人眼構成吸引的要素作用大小（從左到右排序）：

空心圖標通過形狀吸引眼球，實心圖標通過色塊吸引眼球，所以空心圖標的辨識程度比實心圖標低了一等。

對於實心圖標是否比空心圖標識別度更高的問題，早在IOS7系統推出之時，就已經有過一些討論。一名從Viget畢業的體驗設計師Curt Arledge特意寫了一個APP，針對實心和空心圖標做了1260個識別測試[1]，來看測試結果：

結果發現，用戶識別這兩類圖標的速度僅僅相差0.1秒。

其中第一組，實心圖標取勝。這些圖標源於生活，圖標延續了其原本的含義，識別速度取決於色彩和形狀對視覺的吸引程度，實心圖標更容易辨認。

值得注意的是第二組的三個圖標，空心圖標識別度更高。

這三個圖標的形態是對生活中事物的抽象化表現，其中speech bubble在現實生活中並不存在，人們在圖形界面中創造了這個圖形並賦予了含義；而垃圾桶和鑰匙在現實生活中的形態過多，代表這兩個事物的圖標屬於對生活中物體形態的抽象總結。在這種情況下，圖形的形狀更能夠讓用戶快速識別出圖標的含義，色塊反而成為了干擾識別的因素。

所以，如果是延續了物體原本含義的圖標，使用實心更容易識別；被人們賦予了含義的圖標，空心更容易識別。

三、什麼情況下適合用實心圖標，什麼情況用空心的呢？

1、運用實心圖標和空心圖標區分不同的狀態

iOS7發布之後，蘋果規範了圖標的使用原則，將兩種互補的圖標風格用來表示兩種狀態：當圖標不是當前選中狀態時，它完全是空心的；而一旦這個圖標被點擊，或處於激活狀態時，它便會被填充，這能幫助用戶區分當前處在哪個功能頁面中。

由於今天大部分UI中的圖標使用都會遵循這個原則，因此，如果你錯誤地使用了圖標的狀態，將會讓用戶感到非常迷惑。

2、運用實心圖標用於分割層次，區分信息的重要程度

實心圖標往往用於分割層次，區分信息的重要程度；空心圖標由線性組成，能夠給人輕鬆，精緻的感覺，對信息方向有一定的引導作用。來看看它們的特徵：

舉個例子，在一排空心圖標中插入一個實心的，和一排實心圖標中放置一個空心的，對比之下就會發現，實心的圖標相比較空心的而言，視覺注意力更有力度，讓用戶更容易抓到重點。

（實心圖標往往用於分割層次，區分信息的重要程度）

3、運用空心圖標引導信息方向

空心圖標由線性組成，能夠給人輕鬆，精緻的感覺，對信息方向有一定的引導作用。

在實際的設計中，實心和空心圖標往往是結伴出現的，我們若能處理好它們之間的相互關係，將會使信息傳達事半功倍。

（圖片來源於網路）

上圖案例中，左圖採用實心和空心圖標結合的設計，豐富了視覺內容層次，效果要比右圖好。

四、最後

「不管實心標還是空心標，用戶喜歡的就是好標。」

好圖標的性格是內斂的，它能在用戶需要的時候召之即來，及時、準確地傳達信息，絲毫不干擾用戶的視線。無論空心還是實心，一個能夠令人一目了然，並且記憶深刻的圖標就是用戶真正喜歡的圖標。

[1]《Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study》CURT ARLEDGE

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

—— 來自騰訊遊戲，lance

麻將里的白板就是空心的，近距離沒問題，超過三米就比其他牌難辨認了，所以賭場不提供麻將賭局

是的，如果單純從視覺吸引來講。
對人眼構成吸引的要素作用大小如圖：

空心圖標通過形狀吸引眼球，實心圖標首先通過色塊吸引眼球，所以空心圖標的辨識程度比實心圖標低了一等。但是Curt Arledge博文中的測試忽略了一個重要因素：用戶對圖標形狀的熟悉程度
這一點在測試中無法量化，自然會對測試結果產生影響。

來看Curt Arledge的測試結果：

這些圖標的形狀源自生活，在智能手機出現之前人們已經熟識，在智能手機上仍然延續其原本的含義，所以取決於色彩和形狀對視覺的吸引程度。實心圖標更容易辨認。

拿talking bubble來說，現實生活中並不存在，人們創造了這個圖形並賦予一定的含義，所以識別圖標主要是去找形狀，此時反而要擺脫色彩的干擾，所以空心圖標比實心更容易識別。垃圾桶和鑰匙雖然現實生活中存在，但形態過多，不同地區不同時代的垃圾桶和鑰匙長的都不一樣，此圖形也是作為垃圾桶的一個代表出現。

結論就是，當吸引視覺的要素和人們對圖標的熟悉程度同時發揮作用時，延續本來含義的圖標使用實心更容易識別，被賦予含義和作為代表性的圖標，空心更容易識別。

在具體應用中的啟示：以信息為主的app中，盡量使用空心圖標，不會因為出現色塊而干擾對文字的識別。而在遊戲等畫面色彩濃郁的應用中，使用實心圖標是更好的選擇。

實心的是色塊，空心的是線條。色塊天然就比線條辨識度高，沒有人會認為圖像比文字更難識別。但同樣面積的圖案，線條可以承載的信息量更多。

不完全是，只能說iOS 7 下的空心圖標用了更大比例的鏤空和細線繪製，這才大幅提升了識別難度。測試一個設計的識別度最好的方法就是拿遠點看，或者眯起眼看。試過之後你會發現繪製線條的粗細比是否空心本身更影響識別度

實心空心也就是所謂的正負形圖標，從功能上他們分別承擔了不同的角色，首先,一個圖標的風格並不孤立存在,但與其他的屬性,例如顏色來創建複合對可用性的影響，可適當的運用到設計當中。

沒有絕對，得從整體風格和對比來看，看哪種更適合。

識別的幾個條件，按權重高到低：形狀，顏色，質感。
隱含條件，熟悉程度。
所以和實心與否並不衝突，所有條件綜合起來看才可以。

空心圖標有一種特別的壓抑感，就好像走進了雜草叢，一點火就能燃燒的感覺。

非常贊同。線性（空心）的圖標傳達的內容比實心的圖標傳達的內容更多，加大信息處理的負擔。

從美團和百度外賣的UI上來看我覺得就是這樣，後者用了太多看起來「清爽」的元素，但是實際上給人的感覺很雜亂。