空心圖標(biāo)真的比實心圖標(biāo)更難識別嗎？

編者按：自從IOS 7發(fā)布后，不知道同學(xué)們發(fā)現(xiàn)了木有，很多APP（QQ、微信、微博等）都跟著換上了空心圖標(biāo)，但空心圖標(biāo)會不會給用戶帶來認(rèn)知疲勞，一直木有定論，現(xiàn)在有同學(xué)特意編寫了一個APP，做了1260個圖標(biāo)識別測試，得出了精準(zhǔn)的結(jié)論，結(jié)論是啥，來學(xué)習(xí)咯！ 去年夏天，設(shè)計師Aubrey Johnson在Medium 上發(fā)表了一篇批判ios7的文章。Jonhson指出蘋果的新空心圖標(biāo)比實心圖標(biāo)在視覺上更加復(fù)雜，給用戶帶來認(rèn)知疲勞，這樣會讓用戶對這樣的界面產(chǎn)生視覺疲勞而厭倦使用。這篇文章很快就被廣泛的分享、討論，一些設(shè)計師認(rèn)為這是明智的建議，但也有一些評判它夸大了事實，太過于簡單并且缺乏有效的證據(jù) 以下在ios7 選項卡上面的實心和空心圖標(biāo)為例子。被選中的圖標(biāo)用了實心圖標(biāo)。沒有被選中的圖標(biāo)用了空心圖標(biāo)。
作為一個在Viget 中從事人機(jī)和用戶體驗的實習(xí)生，我看到了一個有趣的機(jī)會來用于證實和測試 Johson的闡述。為了找到空心圖標(biāo)是否為用戶帶來更多認(rèn)知負(fù)擔(dān)這個問題的答案，我開發(fā)了一個用來度量用戶對不同視覺風(fēng)格圖標(biāo)選擇的速度和準(zhǔn)確性的 Web app。從研究一千多個測試參與者的資料中，我發(fā)現(xiàn)空心圖標(biāo)不一定比實心圖標(biāo)的少用。然而結(jié)果還是有些復(fù)雜。

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

被用來測試的20 個圖標(biāo)是從ios，安卓和 Windows Phone網(wǎng)上可用的圖標(biāo)集中借過來用的。 Speech Bubble圖標(biāo)是直接從 Johnson的文章中借過來的。

測試 在Viget 中Nate Hunzaker 的技術(shù)指導(dǎo)下，我編寫了一個 app來進(jìn)行測試。你自己進(jìn)行測試會比我講解更容易理解，我盡量簡單的描述下。 我承認(rèn)實心和空心風(fēng)格之間的區(qū)別的定義是不明確和松散的。一個圖標(biāo)可以同時有實心和空心兩種風(fēng)格。為此，我挑選了一個系列圖標(biāo)來進(jìn)行研究，研究顯示實心和空心版本之間存在相當(dāng)明確的區(qū)別。每一個圖標(biāo)也代表了一個具體的對象并且使用文字標(biāo)簽，這樣可以避免參加測試的人有過于大量的認(rèn)知負(fù)擔(dān)，他們只需要用它的圖標(biāo)去匹配名字。

結(jié)果 超過10 天對數(shù)據(jù)的收集，完成了 1260個圖標(biāo)識別測試，超過 25000個圖標(biāo)識別實驗，年齡偏向 18-40的蘋果用戶。這說明選擇的時間幾乎就只有三秒，標(biāo)準(zhǔn)偏差為 1.5秒。 平均20個圖標(biāo)，空心圖標(biāo)的選擇比實心圖標(biāo)慢 0.1秒，這似乎支持了 Johnson對空心圖標(biāo)比實心圖標(biāo)需要更多的認(rèn)知負(fù)擔(dān)。 我至今還沒有提過，其實我的研究中圖標(biāo)風(fēng)格還包含另外一種審美：圖標(biāo)顏色。每一個實驗實際上是圖標(biāo)用四種不同類型的顏色風(fēng)格組合體現(xiàn)：

1. 實心黑在白底上
2. 空心黑在白底上
3. 實心白在黑底上
4. 空心白在黑底上

在實驗中用來四種顏色合并（黑色圓圈在本文中用于演示。由于實驗，白在黑上的圖標(biāo)在一個連續(xù)的黑背景上顯示） 把數(shù)據(jù)分成四個小組（我將它稱之為雙向方差分析統(tǒng)計技術(shù)）對圖標(biāo)選擇速度進(jìn)行更深入分析。用這個技術(shù)我發(fā)現(xiàn)更多微妙的結(jié)果：白在黑上的圖標(biāo)比其他三種顏色風(fēng)格合并的慢了大概 1.7秒。換句話說，對黑在白上的圖標(biāo)。是否圖標(biāo)用實心或空心對選擇速度沒有顯著的影響。 同樣的，對于實心圖標(biāo)，是否用黑在白上顏色沒有影響。然而，當(dāng)一個空心風(fēng)格結(jié)合白在黑上顏色方案，選擇的次數(shù)會多一些。
每一種顏色風(fēng)格的選擇次數(shù)的平均值的不同。只有空心白在黑底上的圖標(biāo)顯示出差異（眼睛圖標(biāo)代表 20種圖標(biāo)的平均值）。 這只有相當(dāng)小的影響，但是從超過 1000個用戶的數(shù)據(jù)中顯示著確實存在。一個合理的猜測就是：如果我們認(rèn)為黑色圖標(biāo)是一種默認(rèn)的審美，加上層次化風(fēng)格在使用上就有一種被激活的感覺。這看起來相當(dāng)直觀。 但有還有一些對這個結(jié)論表示不服的。為了從數(shù)據(jù)中得到更多細(xì)節(jié)，我自己對每 20個圖標(biāo)進(jìn)行風(fēng)格和顏色影響進(jìn)行研究。我發(fā)現(xiàn)其中的矛盾是與上面結(jié)果展示的不一樣的。幾乎一半的圖標(biāo)（ 9個）顯示圖標(biāo)的風(fēng)格一點都沒有影響，意味著實心和空心圖標(biāo)是和空心圖標(biāo)識別是一樣快。在其他十一個圖標(biāo)中確實顯示出風(fēng)格的影響，實際上三個空心圖標(biāo)表現(xiàn)得更好。事實上， Speech Bubble圖標(biāo)從整體和平均上顯示一個完全相反的影響：實心黑色版本比其他所有版本的選擇慢。但你考慮大部分我們碰到 speech bubble圖標(biāo)是要么用白色要么用輪廓風(fēng)格（或者都是）展示時這很容易解釋的。一個實心的 black speech圖標(biāo)沒有幫助快速識別的典型特征。 值得一提的是，圖標(biāo)的樣式和顏色對參與者的正確選擇提示圖標(biāo)的能力沒有太大的影響，除了一個圖標(biāo)——鎖，當(dāng)鎖用黑間白展示可能會稍微有點識別不出來。我不確定為什么會這樣，但是鎖的圖標(biāo)在多個數(shù)據(jù)指標(biāo)上都有異常，它是最容易被認(rèn)錯的圖標(biāo)和選擇最慢的圖標(biāo)。 約翰遜的警告在用戶界面中不應(yīng)該使用空心圖標(biāo)并沒有真實用戶支持的證據(jù)。首先，一個圖標(biāo)的風(fēng)格并不孤立存在，它與顏色的搭配也有關(guān)系。在任何情況下，小的差異并不會影響識別速度又或者是造成視覺疲勞。多數(shù)設(shè)計師可能會根據(jù)空心/實心的理論設(shè)計圖標(biāo)，但是設(shè)計出來的圖標(biāo)在視覺上是一種復(fù)雜的運動，不適合簡單的二元規(guī)則。