按鈕設計:圖標還是文字?

9 評論 8928 瀏覽 22 收藏 11 分鐘

編輯導語:人類文明的進程,從圖像過渡到文字,現如今又存在符號代替文字的趨勢。圖標與文字,該作何選擇,值得深思。本文從這一條準則:“用戶是否容易理解”出發,分析多個層面的設計,一起來看看。

“為了更好的傳遞信息,是采用文字還是圖標作為按鈕呢?”

關于這一問題,無論是在知乎還是人人,所給出答案絕大部分都是偏向于選擇“圖標”,并且理由也十分的統一:生動、易理解、易傳播……

雖然,圖標在具體使用的過程中,確實有很多的優點,但因為圖標的這些優點,就將文字忽視,就顯得有些許的片面。

無論是文字還是圖標,其都有自身的特點。至于到底應該如何選擇,我們只需要遵循一條準則即可:“用戶是否容易理解”,而這一準則在具體應用時,需要我們從不同的層面進行更為全面的思考。

一、通過現象看本質——信息

從本質層來看,文字與圖標的本質是相同的,都是“信息”,而當我們對于“用戶是否容易理解”這一準則,進行本質性判斷時,所要關注的重點不在于具體表達方式的選擇,而是需要對于不同表達方式背后的“信息”做出判斷。

那么什么樣的信息,更容易被用戶所理解接受?

我們在判斷時,應該遵循什么樣的標準么?

1. 熟悉

人腦對于單個圖標、字詞的認知過程,是一個對比對照的過程。需要認知的信息是實驗組,而存儲在人腦長時記憶區中的已有信息則是對照組。通過試驗組與對照組的比較,大腦就會對于當前的信息作出判斷,一般判斷的結果會有三種:忽視、替代、補足。

2. 忽視

大腦在比較之后,發現長時記憶區中,沒有與之相匹配或相類似的信息。面對這種情況,大腦就會很自然的忽視掉該信息,自動選擇跳過。

3. 替代

大腦在比較之后,發現長時記憶區中有與之相同的信息。這時人腦就會直接將二者進行關聯替換,替換完畢后我們就有了對于該信息的認識。

4. 補足

大腦在對比后,發現該信息只是一種“類似”的信息,沒有辦法直接進行替換。

這時大腦就會啟用長時記憶區中已有的圖式,對于這一“類似”信息中模糊的地方進行補足。

根據人腦對于信息的處理過程,我們很容易看出信息的同步率越高,人腦所花費的認知精力就越少,信息也就越容易被理解。

所以,在設計按鈕時,為了可以讓用戶更容易的理解我們所想要傳達的信息,我們應該盡可能保證所要認知的信息與人腦中已有信息之間的高度匹配。

5. 準確、無歧義

在對于信息進行評判時,最基本的就是要保證信息傳遞的準確性,保證用戶在接收到該信息時,在認知上不會產生歧義。

如以下三個圖標:

三個圖標所想要傳達的信息,都為點擊之后回到主頁。前兩個圖標,可以讓用戶很容易get到所要傳達的信息點,而第三個圖標,雖然在表現樣式上很簡潔,但所傳達的信息不夠清晰準確。

用戶需要調用腦中已有的圖式,對該信息進行加工處理,而最終經過加工處理的信息,很可能與最初所要傳遞的信息不一樣,造成用戶理解上的歧義。

這個是“起點讀書”書庫頁的頂部菜單。如果只單純頂部菜單,沒有與之相對應的頁面。對于“膠囊”這一按鈕,大家是否能理解其所要傳達的信息點?那如果按鈕與對應頁面結合起來呢?

雖然說該頁面的主要功能,是短篇小說、短篇故事的展示,但是用“膠囊”這一概念來對短篇小說、故事進行抽象性概括。這已經超出了用戶對于“膠囊”這一概念的一般性認知,所以用戶需要花更多的精力,去調用腦中已有的圖式去補全“膠囊”與短篇故事、小說之間的關系,徒增了用戶的理解成本。

二、具體問題具體分析——圖標與文字

從現象層來看,圖標與信息就是信息的兩種不同表現方式。兩個表現方式都各自有各自的特點,所以在設計過程中,應根據具體的場景去選擇合適的表現方式。

1. 圖標

圖標作為現在使用較多的信息表現方式,具有以下幾個特點:

1)節約空間

同等空間下,圖標所傳遞的信息量會更大。而移動設備的屏幕大小,本身就存在著限制。所以同等空間下,為了信息傳遞的準確性,可以優先考慮圖標這種信息傳遞方式。

2)快速定位

圖標圖像更容易吸引用戶的目光,讓用戶可以在短時間內定位到圖標所在的位置。

3)易理解

大腦更容易處理圖像信息,更符合人的認知規律。

注意事項:

①是否有普遍的共識

圖標需要是用戶有普遍共識的圖標。不同國家、不同文化背景,用戶對于同樣的圖標的認知可能會有所不同,而通過對于用戶常年累月的使用習慣訓練,有些圖標已經在一定范圍內的用戶心中產生了共識。

如以下幾個圖標:

以上幾個圖標在文字輸入這一場景下,在用戶心中已經形成了共識,所以在設計的時候,就可以直接選擇對應的圖標進行使用,不用擔心用戶是否能夠理解。

②圖標清晰準確——防止信息缺失

在普遍共識的基礎上,還需要保證圖標所傳遞信息的準確性,防止因信息缺失造成的用戶理解歧義的產生。

③圖標簡潔——防止信息冗余

充斥大量信息的圖標,不一定就可以保證信息傳遞的準確性。冗余出來的信息,很可能導致用戶的過度理解,從而產生歧義。

單純的定位圖標其實已經可以傳達出“定位”這一含義,而徒增一個地點信息圖標,不僅不易于用戶理解,反而可能增加用戶的理解成本,讓用戶在理解過程中,進行多余的發揮。

2. 文字

1)準確性

文字相較于圖標,其最大的特點,就是信息傳遞的準確性高。

人腦在認知文字時,首先會將其轉化為腦中與之對應的圖案,然后再進行理解記憶。

雖然每個個體腦中的圖案可能存在差別,但這些圖案本身對于個體來說,卻是唯一的,這種唯一的確定性,就保證了文字信息傳遞的準確性。

2)缺少美感

文字相對于圖案來說,傳遞的信息量少。如果過多的使用文字,就會顯得相對比較死板,缺少一定的美感。

3)不具有普遍性

各個地方因文化的不同,文字也會有所不同。

不同文化背景的用戶,在短時間內并不能理解其他文化背景下的文字。

所以在做出海產品時,對于文字的使用要謹慎,需要做好本地化的迭代。

3. 文字+圖標

在設計按鈕時,最理想的狀態,就是使用單純的圖標或文字,就可以將信息清晰明了的傳遞給用戶,但在實際情況下,往往很難達到。

所以在實際的設計中,可以將圖標與文字進行結合。用圖標更生動的傳遞信息,用文字對于圖標進行解釋說明。

參考文獻:

  1. 如何強化圖標設計的細節?我總結了12個關鍵點!
  2. 我該使用圖標還是文字?
  3. 文字信息在界面設計中的運用

 

本文由 @珞小土 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 光是圖標不好用,光是文字不夠好看,如果能圖標加文字那就好了。

    來自中國 回復
    1. 這就是現在的一種折中的方法

      來自北京 回復
  2. 相對文字來說其實我更喜歡圖標,尤其是使用一些讓我很熟悉的圖標,更簡潔更容易上手

    來自廣東 回復
    1. 圖標是簡潔并且容易理解,但是需要注意圖標本身所傳達的信息,是否是用戶所熟悉的,會不會給用戶的理解到來困難

      來自北京 回復
  3. 圖標更清晰,但是文字更容易理解。圖標+文字,占地方,但更加容易理解

    來自江蘇 回復
    1. 主要的還是要看是否讓用戶容易理解

      來自北京 回復
    2. 12345

      來自廣東 回復
  4. 具體問題具體分析。圖標和文字各有優缺點,使用時需要結合實際情況

    來自廣西 回復
    1. 具體問題具體分析,這個確實。不過如果只是單純從“信息”的角度來看待,那應該怎么判斷呢?

      來自北京 回復