空心圖標真的比實心圖標更難識別嗎？

 

　　編者按：自從IOS 7發布後，不知道同學們發現了木有，很多APP(QQ、微信、微博等)都跟著換上了空心圖標，但空心圖標會不會給用戶帶來認知疲勞，一直木有定論，現在有同學特意編寫了一個APP，做了1260個圖標識別測試，得出了精准的結論，結論是啥，來學習咯!

　　去年夏天，設計師Aubrey Johnson在Medium 上發表了一篇批判ios7的文章。Jonhson指出蘋果的新空心圖標比實心圖標在視覺上更加復雜，給用戶帶來認知疲勞，這樣會讓用戶對這樣的界面產生視覺疲勞而厭倦使用。這篇文章很快就被廣泛的分享、討論，一些設計師認為這是明智的建議，但也有一些評判它誇大了事實，太過於簡單並且缺乏有效的證據

　　以下在ios7 選項卡上面的實心和空心圖標為例子。被選中的圖標用了實心圖標。沒有被選中的圖標用了空心圖標。

　　作為一個在Viget 中從事人機和用戶體驗的實習生，我看到了一個有趣的機會來用於證實和測試 Johson的闡述。為了找到空心圖標是否為用戶帶來更多認知負擔這個問題的答案，我開發了一個用來度量用戶對不同視覺風格圖標選擇的速度和准確性的 Web app。從研究一千多個測試參與者的資料中，我發現空心圖標不一定比實心圖標的少用。然而結果還是有些復雜。

　　圖標

　　首先，這個討論是聚焦在一個特定類型的圖標：眾所周知的選項卡或 簡易導航的扁平化單色圖標，你通常會在手機 app屏幕底部看到一行四五個這種圖標，因為底部欄的圖標一般作為導航應用程序的部分，用加亮的方式指出哪個部分是當前活躍的在某種程度上來說是很重要的。隨著ios7的推出，蘋果開始用兩種互補的圖標風格來展示這些狀態：一個實心的圖標用來展示活躍或被選中的狀態而空心圖標來展示不活躍或沒有被選中的狀態。據我所知，蘋果是目前唯一用著兩種風格的基本圖標的軟件開發者。

　　被用來測試的20 個圖標是從ios，安卓和 Windows Phone網上可用的圖標集中借過來用的。

　　Speech Bubble圖標是直接從 Johnson的文章中借過來的。

　　測試

　　在Viget 中Nate Hunzaker 的技術指導下，我編寫了一個 app來進行測試。你自己進行測試會比我講解更容易理解，我盡量簡單的描述下。

　　我承認實心和空心風格之間的區別的定義是不明確和松散的。一個圖標可以同時有實心和空心兩種風格。為此，我挑選了一個系列圖標來進行研究，研究顯示實心和空心版本之間存在相當明確的區別。每一個圖標也代表了一個具體的對象並且使用文字標簽，這樣可以避免參加測試的人有過於大量的認知負擔，他們只需要用它的圖標去匹配名字。

　　結果

　　超過10 天對數據的收集，完成了 1260個圖標識別測試，超過 25000個圖標識別實驗，年齡偏向 18-40的蘋果用戶。這說明選擇的時間幾乎就只有三秒，標准偏差為 1.5秒。

　　平均20個圖標，空心圖標的選擇比實心圖標慢 0.1秒，這似乎支持了 Johnson對空心圖標比實心圖標需要更多的認知負擔。

　　我至今還沒有提過，其實我的研究中圖標風格還包含另外一種審美：圖標顏色。每一個實驗實際上是圖標用四種不同類型的顏色風格組合體現：

　　實心黑在白底上

　　空心黑在白底上

　　實心白在黑底上

　　空心白在黑底上

　　在實驗中用來四種顏色合並(黑色圓圈在本文中用於演示。由於實驗，白在黑上的圖標在一個連續的黑背景上顯示)

　　把數據分成四個小組(我將它稱之為雙向方差分析統計技術)對圖標選擇速度進行更深入分析。用這個技術我發現更多微妙的結果：白在黑上的圖標比其他三種顏色風格合並的慢了大概 1.7秒。換句話說，對黑在白上的圖標。是否圖標用實心或空心對選擇速度沒有顯著的影響。

　　同樣的，對於實心圖標，是否用黑在白上顏色沒有影響。然而，當一個空心風格結合白在黑上顏色方案，選擇的次數會多一些。

　　每一種顏色風格的選擇次數的平均值的不同。只有空心白在黑底上的圖標顯示出差異(眼睛圖標代表 20種圖標的平均值)。

　　這只有相當小的影響，但是從超過 1000個用戶的數據中顯示著確實存在。一個合理的猜測就是：如果我們認為黑色圖標是一種默認的審美，加上層次化風格在使用上就有一種被激活的感覺。這看起來相當直觀。

　　但有還有一些對這個結論表示不服的。為了從數據中得到更多細節，我自己對每 20個圖標進行風格和顏色影響進行研究。我發現其中的矛盾是與上面結果展示的不一樣的。幾乎一半的圖標( 9個)顯示圖標的風格一點都沒有影響，意味著實心和空心圖標是和空心圖標識別是一樣快。在其他十一個圖標中確實顯示出風格的影響，實際上三個空心圖標表現得更好。事實上， Speech Bubble圖標從整體和平均上顯示一個完全相反的影響：實心黑色版本比其他所有版本的選擇慢。但你考慮大部分我們碰到 speech bubble圖標是要麼用白色要麼用輪廓風格(或者都是)展示時這很容易解釋的。一個實心的 black speech圖標沒有幫助快速識別的典型特征。

　　值得一提的是，圖標的樣式和顏色對參與者的正確選擇提示圖標的能力沒有太大的影響，除了一個圖標——鎖，當鎖用黑間白展示可能會稍微有點識別不出來。我不確定為什麼會這樣，但是鎖的圖標在多個數據指標上都有異常，它是最容易被認錯的圖標和選擇最慢的圖標。

　　約翰遜的警告在用戶界面中不應該使用空心圖標並沒有真實用戶支持的證據。首先，一個圖標的風格並不孤立存在，它與顏色的搭配也有關系。在任何情況下，小的差異並不會影響識別速度又或者是造成視覺疲勞。多數設計師可能會根據空心/實心的理論設計圖標，但是設計出來的圖標在視覺上是一種復雜的運動，不適合簡單的二元規則。

　　事實上，仔細看看蘋果人機界面指南：https://developer.apple.coml，裡面有實心/空心圖標的設計建議，當然也有一些圖標不適用這些建議，同學們可以學習一下。