起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識空心圖標真的沒有實心圖標那么好辨認嗎？
去年夏天，軟件設計師奧布里·約翰遜（Aubrey Johnson）在Medium上發表了一篇關于蘋果公司的移動操作系統iOS7中存在的明顯缺點的文章。約翰遜說蘋果的空心圖標，看上去比實心圖標更復雜，容易讓用戶產生認知疲勞，這將直接導致用戶討厭這種界面并停止使用這樣的系統。小范圍的轉發引來了大批的討論者，有些設計者認為這篇文章是中肯的建議，也有些人批評作者過分放大問題，而且表述太簡單，缺乏證據。
作為一名從Viget畢業的人機交互助理以及用戶體驗設計師助理，我發現了一個有趣的方法，讓用戶的真實體驗作為證據來檢測約翰遜的論點。為了尋找到“空心圖標是否需要用戶更多的認知精力”的確定答案，我用不同的視覺樣式制作了一個網頁應用，來檢測用戶選擇圖標的速度和準確性。參與人員超過了1000名，通過測試，與對應的實心圖標相比，空心圖標并沒有想象中的那么不好用。但結果確實是有一點復雜
圖標
首先要聲明的是作為測試的圖標都是比較特殊的圖標：就如標簽欄的圖標一樣，是平面的，單色的，簡單的。就像你平時在手機應用的底部見到那一排4個或者5個的圖標一樣。因為標簽欄的圖標是作為進入應用程序其他區域的導航按鈕，所以用高亮圖標來表示當前激活的區域是很重要的。隨著iOS7系統的發布，蘋果采用了兩種互補的圖標樣式：一種實心的版本表示激活/被選中的狀態，一種空心的版本表示未激活/未被選中的狀態。據我所知，當今也就只有蘋果一家軟件制造商為基礎圖標使用兩種樣式。
就這一刻來說，我承認實心和空心兩者之間真沒有什么界限。每個圖標都有實心和空心兩種特征。因此，我為測驗精選了一些兩者很容易區分的圖標。每種圖標都代表一種具體的事物，并且配上了文字標簽，這就限制了認知測驗者將圖標和名字配對的范圍。
測驗
在Nate Hunzaker不可或缺的幫助下，我開發了一個管理圖標認知測試的網頁應用程序。雖然做一下測試比我說來得方便得多，但我還是要簡短地說明一下：測試開始之前，被測試者需要先熟悉下這20組帶文字標簽的圖標。然后，參與者需要從24組測試數據中選出剛才所看到的20組圖標的名稱，并且盡可能快速準確地將名稱與環形陣中正確的圖標配對。每個測驗以20組圖標為測試數據，最初的四組數據作為熱身測驗，不計入數據分析中。應用程序隨機決定圖標在陣中出現的順序和位置，是實心的或者是空心的。測試時間為5分鐘。
來icon-test.net親自測試一下更能體會它是如何工作的。就像我說的那樣十分有趣。
結果
經過10天的時間，1260名參與者總共完成了超過25000次認知測試。統計數據偏向于年輕懂科技的蘋果用戶（18-40歲），參與者作出選擇的平均時間是3秒，上下偏差1.5秒。
取20組圖標測驗的平均成績，空心圖標要比實心圖標多耗費0.1秒的時間，這看上去符合約翰遜的“空心圖標比實心圖標需要更多的認知精力”的論點（如果只在一個小范圍內的話）。但圖片的測驗卻不是這樣的。
我忘了說我的測驗還包括另外一個圖標樣式的變化：圖標顏色。每個測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標。（邊注：白色和黑色這個問題的靈感來自Viget的設計師在聊天室的激烈爭論。）
將數據分成四組有利于讓我使用一種非常酷的統計技術，叫做雙向方差分析，選擇速度一目了然。我發現一個細微的差別：在相同的統計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒。換句話說，白底黑色的圖標，無論是空心還是實心的對選擇速度都沒有提升效果。同樣的，對于實心圖標，無論在白底還是黑底上顯示都是一樣的效果。但黑底白色的空心圖標，在選擇時間上有一個微弱的增加。
這的確是沒什么大的影響，但從超過1000名的用戶中顯示這是確實存在的。如果我們將黑色實心作為默認的圖標，添加一些樣式樣式增加圖標的可用性也是可取的，看上去也很自然。
這個結論還是有一個奇怪的地方。為了得到更細致的數據，我仔細觀察了20組圖標的樣式和顏色。我發現了與前面的結果不一致的地方。近一半圖標（20個中有9個）的樣式不影響判斷，意思是空心和實心都能快速識別。剩下的11個圖標是有影響的，其中有3個，空心更好識別。事實上，消息氣泡展示了跟普遍現象相反的結果：實心圖標比空心圖標更難識別。這也就解釋了大多數消息氣泡都是白底或者是一個輪廓（或者兩者的成分都有）。黑色實心的消息氣泡還不具有增加識別力的特性。
最后，值得一提的是圖標的樣式和顏色對參與者正確選擇圖標的能力沒有影響。除了一個，鎖的圖標，在白底黑色的時候最容易被選錯。我也不知道這是為什么，但鎖的圖標有幾個不同的地方：最容易被選錯，而且在大邊距的情況下，選擇速度最慢。
總結
約翰遜的論點明顯得不到真實用戶的體驗支持。第一，一個圖標的樣式并不是孤立存在的，還有顏色等屬性有聯系。第二，在我搜集的20組圖標中，僅有不到一半的圖標顯示實心比空心的更容易識別。當然不同的圖標集會有不同的結論。
任何情況下，細微的選擇速度差距并不會造成用戶的認知疲勞。研究發現用戶會將圖標代表的意思和它們在界面所在位置聯系起來，也就不需要每次使用的時候去想這個圖標代表了什么。用兩種接近的樣式比僅僅是更換顏色來表達圖標所處的狀態更具有可行性，因為它能給色盲額外的視覺反饋。當然，開篇使用的圖片中，蘋果公司結合樣式，顏色和標簽的圖標也是可行的。
我最后的結論，也是大多數設計者在空心/實心的爭論中遇到過的：設計圖標是清晰的語義和視覺吸引結合的復雜過程，不是適應簡單的二進制規則。事實上，在蘋果的人機界面指南中有更詳細的關于實心/空心圖標的設計建議，也介紹了有些圖標兩種樣式都是不合適的。
最后，我希望這次研究能夠讓大家重視用事實來支持UI設計的理論。所有類型的設計者都需要批判性地去思考最好的解決方式，用事實研究來支撐他們的理論
所有的測試問卷都在這里。再次感謝Nate Hunzaker的支持。感謝Alla Kholmatova在圖標設計上發表的關于這方面的研究文章。
來源：ui中國
贊