淺談圖型菜單與文字菜單

2 評論 3917 瀏覽 87 收藏 6 分鐘

前言


寫這篇文章最初的想法是來自我看過的一篇關(guān)于漢字與英文閱讀習(xí)慣差異的文章,可惜現(xiàn)在想起來的時候已經(jīng)找不到那篇文章了(有知道的人請務(wù)必私信我)。

圖型菜單與文字菜單

2

在做瀏覽器測評的時候下載了firefox,一直都在用chrome的我第一眼就被主界面的圖形菜單給吸引住了,包括右鍵菜單也是讓我感覺耳目一新,但后來慢慢使用的過程中發(fā)現(xiàn)并沒有想象中的那么好用。

主要是因?yàn)槭褂眠^程中這些圖形菜單讓我感覺操作變慢了,需要看比較長的時間才能找到自己想要找的選項(xiàng),后來仔細(xì)分析對比了一下,我發(fā)現(xiàn)圖形跟文字主要是識別節(jié)奏有區(qū)別的,識別主要分三個階段:

第一階段:區(qū)域識別階段

1

這個階段主要是將頁面信息分區(qū)域,主要是受菜單里分隔線的引導(dǎo),菜單里的選項(xiàng)的具體圖形在腦海里還是比較模糊

第二階段:形狀識別階段

1

這個階段大腦會比較清晰看到菜單里面選項(xiàng)的形狀,但具體文字以及圖標(biāo)還是一個模糊的階段

文字菜單的識別工作在這個時候已經(jīng)完成了一大半,主要是由于我們從小到大就一直在訓(xùn)練文字識別能力

所以我們看到選項(xiàng)大概的長度以及其中的一兩個文字很快就可以聯(lián)想到選項(xiàng)的內(nèi)容,可以很快得找到自己想要的選項(xiàng),而不用每一個選項(xiàng)的文字都看完了才能理解透

而圖形菜單在這個階段,由于圖形更加突出,當(dāng)我們又沒辦法對于大小類似的十個圖標(biāo)很快地進(jìn)行具體識別,所以這個階段還是沒辦法識別出具體選項(xiàng)

第三階段:文字圖標(biāo)識別完成

1

圖形菜單在這個階段識別完成,而文字菜單在這個階段把最后的10%給完成掉。。

總結(jié)

文字相對于圖形來說,可以更快的通過選項(xiàng)以及第一個字的聯(lián)想來識別出選項(xiàng)。

而圖形菜單無法通過大概的形狀去區(qū)分開每一個選項(xiàng),并且軟件的很多操作都是抽象的,沒辦法用一個具象的圖標(biāo)去很好地表達(dá)出來,這就導(dǎo)致了圖形菜單選項(xiàng)識別速度會比較慢。

實(shí)際應(yīng)用


實(shí)際上前文的對比還是有一定局限性的,瀏覽器主界面菜單有這樣的特點(diǎn):

  1. 使用頻率不高
  2. 選項(xiàng)相對來說較多(10個或以上)
  3. 【圖形菜單】實(shí)際上剛剛說到的圖形菜單也還是有文字,只是圖形會占比較大一部分而已
  4. 【圖形菜單】純圖形無文字的菜單有些選項(xiàng)并不能及時地給予用戶足夠的反饋,例如復(fù)制,收藏一類的選項(xiàng),不結(jié)合其它操作是很難產(chǎn)生效果的

舉個反例大家很快就能理解了,安卓手機(jī)上的三大金剛鍵,選項(xiàng)少,操作頻率高,并且反饋及時充分,用圖形菜單選項(xiàng)就完全沒有問題了

1

以文字為主,圖形為輔的表現(xiàn)形式有時候反而會加強(qiáng)了文字選項(xiàng)的特征,達(dá)到更快識別的目的。例如各種解壓軟件在右鍵菜單里的選項(xiàng),一眼掃過去就可以找到解壓或者壓縮的選項(xiàng),當(dāng)然這里其實(shí)還包括了選項(xiàng)分類的思路在里面。

1

結(jié)束


大概就是這樣子啦。。

 

作者:kemchenj

來源:http://www.jianshu.com/p/b499173c7419

 

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感覺說明得還不夠充分

    來自北京 回復(fù)
  2. 很好

    來自河北 回復(fù)