SPARKFUL

Blog

Insights from the SPARKFUL teams

我和你有點不一樣:針對色盲使用者的體貼設計

Decill Changuser-interface-design
name

世界上大約有 8% 的男性人口擁有某種形式的色盲,女性約 0.5%。以這比例去推算,臺灣的色盲者將近 116 萬人。可以說是一個相當龐大的族群。

這些人不只在網路上、光是在日常生活上就常遭到不公平的待遇;就拿考取駕照來說好了,色盲者通常都是不被允許駕車上路的,雖然是基於交通安全的考量,但這卻是是相當不公平的待遇。其實,真正的原因在於我們日常生活中的設計缺乏同理心,未曾貼近這個族群的角度去思考與看待事情。

有些色盲者所看的的世界和我們不太一樣,設計應該要體貼、細心的照顧這些和我們不太一樣的朋友 :)

為了輔助色盲所設計的交通信號燈(來源):

色盲者眼中所見的世界

色盲者可分為:紅色盲、綠色盲、藍色盲以及多色色盲等其他色盲者,其中以紅綠色色盲最為普遍(參考 Wiki-色盲),我們來看看色盲者的眼中的世界有什麼不一樣:

如何檢查自己的圖形在色盲者眼中的模樣

對於設計師來說,在 Photoshop 跟 Illustrator 中使用校樣設定是最快速直覺的方式了。

使用[檢視]>[校樣設定]即可模擬色盲族群所看到的色彩:

在其他狀況下,使用 Color Oracle 這個軟體,就可以輕鬆的在目前的螢幕顯示中預覽色盲族群所看到的狀況:

  • Deuteranopia (Common):綠色色盲(常見)。
  • Protanopia (Rare):紅色色盲(稀有)。
  • Tritanopia (Very Rare):藍色色盲(非常稀有)。

針對色盲者的設計解決方案

色彩的選用:

以最常見的紅色與綠色色盲者所看見的光譜如下:

我們可以發現色盲者對於顏色的辨識度不高,但是對於明度的表現則相對敏感,因此在設計主要資訊的選擇上,最好是選用明度對比高的色彩組合來顯示重要資訊:例如黑色跟白色。根據研究,白底黑字的辨識度最高,而黑底白字較為不傷眼。因此重要的文字訊息都應該使用黑白兩色來標示,並且可以透過字體的大小、粗體、斜體等來區分訊息的重要程度。

當如果真的有使用色彩的必要時,請使用藍色、黃色或其混合色(綠色),但是要注意對於藍色色盲者反而會誤判這兩種顏色。

從造型輔助著手:

對於色彩相當講究的圖形設計師而言,即使是最小化的色彩選用限制也會令他們頭痛不已,因此在這種狀況下我們可以選擇適當的配合方案來解決問題:

A. 避免只使用色彩作為資訊的辨別依據。例如上面舉例的紅綠燈設計,紅綠燈的設計加上了造型的區別,讓色盲者也可以輕易的分辨出其不同之處

B. 圖表、線條圖使用不同的線條造型,提高色盲者的辨識度

C. 為色塊加上材質:遇到使用到色塊的圖形資訊顯示時,除了顏色以外,為色塊加上材質並且加上適當的線框,也可以有效的提高資訊的辨識度:

幾個好的與不好的設計範例

We Are Color Blind 這個網站中除了闡述了色盲者的處境、也收集了一些關於色盲者的設計範例:

iChat:這個 Mac 系統內建的聊天軟體提供了 User shapes to indicate status 選項,將三種不同線上狀況的燈號加上圖形造型區別 ,以三角形代表黃色的暫離、正方型代表了紅色的離開。

Wordfeud:這個手持裝置上的遊戲在遊戲物件的配色上使用了無障礙配色以外,也加上了字母 來加強辨識度,

Dots & Co:這款仰賴色彩來進行的消除遊戲也加上了色盲模式來加強幫助色盲者識別


參考文獻:

  1. Wiki 百科:色盲條目, http://zh.wikipedia.org/wiki/%E8%89%B2%E7%9B%B2
  2. We Are Color Blind, http://wearecolorblind.com
  3. Designing For, and As, a Color-Blind Person, http://webdesign.tutsplus.com/articles/design-theory/designing-for-and-as-a-color-blind-person/
Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

讓設計跟著指尖走:觸控設備上的互動效果

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Active 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按...Read more