UI設計中空心圖標和實心圖標的運用

2022-06-29 分類：網站建設

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

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

一. 圖標的功能

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

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

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

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

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

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

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

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

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

二. 實心圖標比空心圖標識別度高

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

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

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

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

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

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

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

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

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