徵才資訊
Header 940*120
追蹤橘報:

【Desiring Clicks 專欄】你知道怎麼設計功能圖示嗎?

[ 爆橘 ]
於 2013-01-17 18:26:34 發布
收藏本文:
我要收藏 什麼是收藏

comminitable-icon

在圖形化使用者介面中,常常可以看到許多各種不同的圖示。即使是我們平常每天瀏覽的網頁中,除了文字、圖片以外,最常見的就是各種標示功能與美觀效果的圖示了。

圖示的功能很多,有的是表示啟動一個程式,或界面上的一個功能;有時候是代表按鈕上的功能,或只是為了單純美觀好看。

2011 年 10 月 Gmail 網頁系統的一次改版,將頁面的按鈕做了很大的變動,一個很顯著的差別就是,原本以「文字」為主的功能列表,改變成以圖示為主的按鈕列表:

為了保留辨識性,使用者只要將滑鼠游標移到按鈕上面,就會顯示該按鈕的功能說明。但 Gmail 依然在設定裡,保留了讓使用者自行切換成「文字按鈕」的設定選項:

雖然「刪除」總用「垃圾桶」圖形表示,已經快要變成共通標準,但事實上還是有很多功能,很難找到能夠適當代表它的圖示。例如「更多」(More)在 Gmail 就依然保留文字按鈕;截至目前為止,其實也很難為「更多」找出一個容易讓大家辨識出來的圖示。

反過來說,也有很多讓人看很久、還是看不懂代表什麼意思的圖示,像這個符號「」是什麼意思呢?

其實這個圖示就是上面 Gmail 的「表示該信件為垃圾信」的圖示。說真的,當這個圖示單獨出現的時候,還真難辨識出它到底代表什麼。

  • 圖示設計,最重要的就是功能的辨識度

就跟頁面上的任何一個元件一樣,圖示做為一個傳遞訊息的存在,最重要的還是得清楚傳達它所代表的意思

丹麥設計師 Peter Steen Høgenhaug 曾在 2011 年進行一個測試,他準備了一些網頁介面上常用的圖示給受測者看,讓受測者辨別該圖示的意思。在這之前他必須先整理出大部份的設計是否具有共通性,像是網路上常見的代表「超連結」(hyperlink)的圖示,大多是使用鏈條的圖案,只有臉書使用了便條紙與圖釘的圖案來表示:

最後的結果,即使是最普遍的「鏈條」圖示,也只有 35% 的使用者理解該圖示的意思。

  • 使用圖示的優點:跨語系、簡單易學、人類對於圖示具有學習性

既然使用圖示有些問題存在,那為什麼我們要使用圖示呢?

因為,圖示依然有著純文字無法取代的優點。

1. 跨越語系,不需要為每種功能設計多國語言版本

如果一套圖示就可以代表功能列表上的功能,那麼就不用再特地去設計各種版本的語言介面了。

就算是必須以文字為輔的狀況下,一套四海皆準的圖示,依然有它的優點在。例如國際通用的禁止符號就是紅色的圓形加上負 45 度的斜線,在你無論走到哪個國家,看到這個符號裡面放著一根菸,馬上就可以認出這個地方是禁止吸菸的區域。

2. 簡單易學、降低學習成本

介面上的離開按鈕,大多數都是寫一個「 X 」,明確又容易瞭解;當你在教阿嬤怎麼跳出程式時,你只需要簡單地跟她說:「按下那個 X 就可以了。」

3. 人類對於圖示具有學習性

當我們多次使用某圖示代表的功能後,我們會學習它所代表的意義,而人類理解圖形意義的速度,遠高於閱讀文字的速度,因此,善用圖示將會有效提高日後使用該功能的效率

  • 設計圖示,先講求使用性再要求美觀

如果可以的話,儘量與文字一起使用, 就如同以上 Gmail 的例子,單獨使用圖示即使會較美觀,但是卻有著使用者無法辨識的風險。

即使想將文字完全移出畫面,亦可以善用互動介面的優點,在滑鼠移到上方之後再顯示,但是這個方法並不適用於觸控界面設計。

而且,圖示設計不宜過度統一。

有時候視覺設計師為了美觀,或是被要求必須跟形象設計配合之類的理由,而把圖示通通做了統一化處理,例如一律加上圓型外框,甚至做過頭,反而影響圖示辨識度--最後的結果是,圖示難以辨識、失去原本圖示存在的意義。

圖示是很方便的視覺元素。在某方面來看,它甚至是一種世界共通性的語言。

但,圖示也像是一把雙面刃,好好使用,可以提高使用者的工作效率、提升界面美觀度,反之卻也有可能讓使用者面對你安排的圖示,卻不知所措;為了避免這種事情發生,視覺與介面設計師在安排版面的時候,不仿多多思考版面上的圖示與文字的安排。

  • 延伸閱讀:

設計美觀和效率兼顧的圖示

按鈕要多大?費茲定律告訴你

幫 UI 分類,我們是如何記憶的?

  • 參考資料:

Usability in Icons

The Problem With Icons

Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。

(圖片來源:aditza121, CC Licensed)

關於文章與訂閱

Desiring Clicks(http://dclick.cc)是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。我們相信任何設計、工程都必須由人的角度出發,更貼近人性與心靈,讓世界更美好!
本文作者:
本文標籤:
收藏本文:
我要收藏

My Orange是什麼

My Orange 提供你個人化的閱讀體驗,你可以在閱讀TO文章的過程中,一邊蒐集你關注的議題與作者。讓你輕鬆追蹤關注議題、掌握作者。每次當你進到My Orange,就能看見你所追蹤的作者與議題最新文章內容。
每當看到經典文章想要珍藏?或是看到重要文章想稍後再讀 ?My Orange 幫你全部收藏,打造個人專屬精華區,馬上回味精采好文。
關於某些議題、品牌,你總是特別感興趣!對於某些領域、國家,你總是比較好奇?只要輕輕打個勾,每次登入My Orange 就可以馬上看見你所關注議題的最新文章。
你特別喜歡某些作者對世界的觀察、說故事的方式。他們能激發你、加深你對世界的了解。用 My Orange 訂閱你所喜愛的作者,隨時接收他們最新發佈的訊息。

使用條款

  • 追蹤標籤

    • 追蹤作者

      • 我的收藏

      Loading...