莫b

有讀者說,面試的時候面試官提到了一個問題,但不知道怎么回答。這個問題是:實心圖標和空心圖標的區別是什么?這個問題網上的討論挺多的,國內外很多設計師都有針對這個問題給出一些自己的看法,針對這個問題我們一起來探討下。

01.

最早是 2013 年,設計師 Aubrey Johnson 在 Medium 上吐槽了一段關于 iOS 7 標簽欄圖標的問題。說是 iOS 大范圍使用線性/空心圖標來讓用戶辨別產品功能,會讓用戶在認知理解上更為費力。

他給出了這樣一張圖,來說明人腦對于圖形的認知負荷主要來自于圖形的線性結構。我查了一下這位設計師的背景,看到他除了是設計師,同時還是一名開發者,而且有認知心理學的學習經歷。所以能承認這個論點是有一定道理的。

于是另一位設計師 Curt Arledge, 在 2014 年,專門為這個「假說」做了一次實驗。實驗的內容是將一組相同圖標,分為實心和空心,給用戶做測試。結論是相同一組圖標,用戶平均識別實心圖標的速度比識別空心圖標的速度要快上 0.1 秒,但是其中有個別空心圖標的識別速度比實心圖標更快一些。

我仔細翻閱了這個實驗的所有資料和參考文獻,并對這名設計師提出的很多參考做了閱讀,過程中,我發現這個實驗有一個細節問題。

就是,在給用戶做這組圖標測試之前,他會給這些用戶先熟悉一下這些圖標,以及圖標所代表的意思,然后隨機呈現讓他們做判斷。

這里的問題是,如果這樣來分析,它的實驗條件就不僅僅是具備識別要求,還要具備記憶要求。

有些圖標比較具象,傳遞的意思很清晰,不需要記憶,一看就知道,哦,這是「鑰匙」;而有些圖標就沒那么容易理解,在看到的那一瞬間是判定不出來是什么的,所以要想一下,剛才記的圖標里有什么,然后才想起來,哦,它是「標簽」。

所以情況可能是,用戶在判斷過程中,因為忘了這個圖標所表達的意思,于是想了一下,那識別速度肯定就慢了,無論是實心還是空心。

所以這個實驗算不上很嚴謹。我有看到一些設計團隊跟自媒體設計師拿這個實驗結論來斷定說,實心圖標與空心圖標的識別是不存在差異的。這個說法也是不太可取的。

在這個問題上,可以說 Aubrey Johnson 通過設計原則以及認知心理得出的圖形識別理論,是更站得住腳的。也就是,空心圖標,在用戶的認知理解上需要調動更多神經元來進行識別。用人話說,就是識別起來比實心圖標費力。

畢竟連人家蘋果公司也認同了他的說法,現在的 iOS 系統自帶產品,也都把空心圖標改成了實心圖標了。

 

02.

我在梳理完這些資料后,在想,圖標除了讓用戶知道它是什么之外,還有什么作用呢?

于是延伸出了一個新的理解,就是,實心圖標比空心圖標更具定位與引導的作用。

上面提到,用戶對于圖標的認識在于識別,不是記憶。看到它像什么,就判定是什么;而不是看到它想起來應該叫什么。

所以識別圖標除了知道它所表達的是什么意思之外,還要知道它在引導著什么。

比如,標簽欄圖標就那么 2-5 個,用戶在使用 App 的過程中,不需要強行記憶或特地去識別,只是點擊的時候眼睛一掃而過,來判斷自己要進入哪個功能頁。這時候,它是給用戶做定位引導用的。

我相信現在在看文章的你,一下子也想不起來微信底部四個圖標的樣子吧?或者對于微信的「發現」頁,也不能理解為什么要用那樣一個圖標來表示。

但是當你看到它,并知道它在底部第三個位置,點擊之后,還看到了里面有朋友圈,就知道它代表的是什么意思了。

所以用戶在這層理解上,不會真正去思考它為什么是「發現」,而是直接通過以往對于它的理解,再通過識別位置來理解它里面有哪些功能,比如里面有「朋友圈」。

接著通過變化來提示用戶,比如從空心圖標變到實心圖標。所以在一些規范里,它也只是告訴說,空心和實心圖標在標簽欄中的區別就是,空心是未選中狀態,而實心是選中狀態。因為實心圖標所示的色塊,更符合選中且定位于某個功能頁的一種說明提示。

再用顏色把選中的圖標凸顯出來,讓人在視覺上更聚焦,讓用戶知道自己目前選擇的是它。

在視覺領域里有個說法是,色塊比形狀更容易抓人眼球。再是具有紋理的色塊,比純色塊更吸引眼球。

空心圖標就是形狀,實心圖標就是色塊。

所以用戶在看到圖標的時候,不僅僅可以知道它所表達的意思,還能知道自己目前所處的位置。那么相比起來,色塊當然會比形狀更有優勢。

就好像在商場里,突然尿急,看到這樣的廁所指示牌,你怎么想?

我相信不管是男生還是女生,第一反應都是往右走吧?

所以第二個結論是,實心圖標比空心圖標更有引導性。

 

03.

或許有人會問,那空心圖標就沒用了么?不是的。

其實上面有提到,空心圖標相比實心圖標更難識別,那么人就需要調動更多神經來對空心圖標進行確認。所以它能豐富頁面的視覺效果,也就是裝飾感。

舉個例子:

上面兩組圖,能看出來第一組整體看起來會比較抓眼,因為圖標比較重;但是第二組看起來會清晰得多,因為用戶的視線會聚焦在內容上。

在這個例子中,圖標作為裝飾類信息,不應該搶了內容的風頭,它在這里只是增加了排版基調與內容分層的作用。而設計師應該在這里引導用戶去看內容本身,而不是去看圖標。

裝飾是給內容做裝飾,而不是給自己做裝飾,如果是給自己做裝飾,那就沒必要用線條來表現了。各位設計師應該懂我意思。

當然也有用實心圖標來填充列表信息的,這也跟頁面風格有關,比如你產品風格全是扁平塊狀內容的,突然有了一部分空心圖標,也會顯得很不搭。

我只是在這里用這個例子來說明,空心圖標的引導性沒有實心圖標強,所以更多會被用來當做裝飾品。

而當空心圖標與實心圖標同時出現,并表達同一類信息時,它們就是一種信息的兩種狀態,比如選中與未選中。

所以我們現在能看到很多產品依然在標簽欄保留著空心圖標。

除了風格因素的影響外,它還能體現出被選中狀態的功能圖標,并讓其它圖標起到裝飾性的作用。

 

04.

從后面延伸的兩個點來說,圖標的作用還是很明顯的。我這里只探討了兩類圖標的部分區別,并著重講解了實心圖標的作用。它們之間還是有很多其它內容可以深究的。

我想說的是,即使用戶對熟悉的圖標,無論是實心還是空心,在實驗環境下的識別速度上無差異,但是兩類圖標對信息所承載的意思確實是不同的。

于是,本篇文章的結論:

  1. 人的大腦在識別空心圖標時,會比實心圖標更顯吃力;
  2. 實心圖標的引導性要強于空心圖標;
  3. 空心圖標的裝飾性會更強;
  4. 實心圖標承載的信息相對更重,參考選中狀態。

這就是本篇文章的所有內容了,謝謝閱讀:)

Aubrey Johnson 論點:https://medium.com/@aub/hollow-icons-a93647e5a44b

Curt Arledge 實驗:https://www.viget.com/articles/are-hollow-icons-really-harder-to-recognize-a-research-study/

 

原文地址:?呆呆U理(公眾號)

作者:?呆呆本人

轉載請注明:學UI網 » 實心圖標與空心圖標的區別?

登錄收藏
 
你可能喜歡的:
設計沉思錄|這一次,我們嘗試設計了儀式感設計沉思錄|這一次,我們嘗試設計了儀式感
ICON設計法則-菱形法則ICON設計法則-菱形法則
系統圖標 - 圖標分解 Material 規范系統圖標 – 圖標分解 Material 規范
請看IBM設計系統如何定義圖標?請看IBM設計系統如何定義圖標?
系統圖標 - 基礎認知 Material 規范系統圖標 – 基礎認知 Material 規范
關于標簽欄,這里一定有你沒掌握的——細節系列第 02 篇關于標簽欄,這里一定有你沒掌握的——細節系列第 02 篇
有討厭自己畫不好圖標嗎?我有有討厭自己畫不好圖標嗎?我有
四步搞定底部導航動效(下篇)四步搞定底部導航動效(下篇)
新手設計師為什么要對斷點圖標Say No新手設計師為什么要對斷點圖標Say No
四步搞定底部導航動效(上篇)四步搞定底部導航動效(上篇)
?
陕西快乐10分 文学创作赚钱吗 利赢彩票网址 彩77彩票苹果 送的卡片升级什么赚钱 梦幻秒号赚钱 古风圈歌手怎么赚钱 卖药煲赚钱 美女捕鱼游戏中鱼等级 山西天星麻将安卓版 有没有转发小说赚钱的软件 彩票计划公式能赚钱是真的 街机电玩捕鱼游戏开发公司 迅雷赚钱宝多绑号如何使用 打开微信麻将来了下载 在股市怎么才能赚钱 手机吃鸡游戏大全视频