按鈕圖示:按鈕設計:圖示還是文字?-PPT教程免费ppt模版下载-道格办公

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

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

「為了更好的傳遞訊息,是採用文字還是圖示作為按鈕呢?」

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

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

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

一、透過現像看本質-訊息

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

那麼什麼樣的訊息,就更容易被使用者所理解接受?

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

1. 熟悉

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

2. 忽視

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

3. 替代

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

4. 補足

大腦在對比後,發現該訊息只是一種「類似」的訊息,沒有辦法直接進行替換。

這時大腦就會啟用長時記憶區中已有的圖式,對於這「類似」訊息中模糊的地方進行補足。

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

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

5. 準確、無歧義

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

如以下三個圖示:

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

使用者需要呼叫腦中已有的圖式,對該訊息進行加工處理,而最終經過加工處理的訊息,很可能與原先傳遞的訊息不一樣,造成使用者理解上的歧義。

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

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

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

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

1. 圖標

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

1)節約空間

在同等空間下,圖示傳遞的資訊量會更大。而行動裝置的螢幕大小,本身就存在著限制。所以同等空間下,為了訊息傳遞的準確性,可以優先考慮圖標這種訊息傳遞方式。

2)快速定位

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

3)易理解

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

注意事項:

①是否有普遍的共識

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

如以下幾個圖標:

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

②圖示清晰準確-防止資訊缺失

在普遍共識的基礎上,也需要確保圖示所傳遞訊息的準確性,防止因資訊缺失造成的使用者理解歧義的產生。

③圖標簡潔-防止資訊冗餘

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

單純的定位圖標其實已經可以傳達出「定位」這個意義,而徒增一個地點資訊圖標,不僅不易於用戶理解,反而可能增加用戶的理解成本,讓用戶在理解過程中,進行多餘的發揮。

2. 字

1)準確度

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

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

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

2)缺少美感

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

3)不具普遍性

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

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

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

3. 字+圖示

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

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

參考文獻:

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

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

題圖來自Unsplash,基於 CC0 協議

文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/an-niu-she-ji-tu-biao-hai-shi-wen-zi.html

(810)
打賞 支付宝扫一扫 支付宝扫一扫
single-end

相關推薦