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

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

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

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

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

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

1. 實(shí)心黑在白底上
2. 空心黑在白底上
3. 實(shí)心白在黑底上
4. 空心白在黑底上

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