網路城邦
上一篇 回創作列表 下一篇  字體:
我和你有點不一樣:針對色盲者的體貼設計(轉引)
2012/08/31 09:25:40瀏覽556|回應0|推薦1
我和你有點不一樣:針對色盲者的體貼設計

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

on 八月 27, 12 • by Desiring Clicks •

世界上大約有 8% 的男性人口擁有某種形式的色盲,女性約 0.5%。以這比例去推算,臺灣的色盲者將近 116 ...

Home » 介面/互動/網頁設計, 友善設計 » 我和你有點不一樣:針對色盲者的體貼設計

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

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

有些色盲者所看的的世界和我們不太一樣,UI/UX/設計部落格 Desiring Clicks 認為設計應該要體貼、細心的照顧這些和我們不太一樣的朋友 : )

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

uni_signal2

色盲者眼中所見的世界

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

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

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

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

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

剪貼簿-3

Deuteranopia (Common):綠色色盲(常見)。

Protanopia (Rare):紅色色盲(稀有)。

Tritanopia (Very Rare):藍色色盲(非常稀有)。

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

1. 色彩的選用

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

colorreacle02

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

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

2. 從造型輔助著手

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

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

colorreacle03

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

colorreacle10

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

colorreacle08

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

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

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

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

colorreacle06

參考文獻:

Wiki百科:色盲條目

We Are Color Blind

Designing For, and As, a Color-Blind Person

出處http://www.mydesy.com/friendly-design-with-blind-people

延伸閱讀:《先選擇對的顏色,而不是喜歡的顏色》

 

( 在地生活大台北 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=triangle409&aid=6791812