起點學院課程

以人為本,為顏色識別障礙者用戶設計

0 評論 1798 瀏覽 4 收藏 13 分鐘
15天0基礎極速入門數據分析,掌握一套數據分析流程和方法,學完就能寫一份數據報告!了解一下>>

本篇文章,作者告訴我們“什么是顏色障礙(色盲)”“如何在設計時考慮顏色障礙者(色盲)”和“為顏色障礙者(色盲)設計的一些小技巧”。通過閱讀這篇文章,了解設計應如何考慮顏色障礙(色盲)用戶體驗。

為顏色障礙者(色盲)設計,其實就是遵循以人為本的設計原則。顏色障礙者(色盲)是一群特殊的群體,他們對某一種或多種顏色有視覺障礙,但很多設計中卻沒有考慮到顏色障礙者(色盲)的需求和困難。

色盲色弱測試圖

我們觀察顏色的方式是一樣的嗎?請看上面這張圖,如果你看到了數字21,或者沒看到任何數字,那么你可能有某種顏色識別障礙(色盲)(如果你有全彩視力,你應該看到數字“74”)。

據估計,每 12 名男性中有 1 名(8%)患有某種形式的色盲,而女性每 200 名中只有 1 名。在英國,這意味著有大約 270 萬人受影響,這是相當大的一部分人口,但我們在設計網站和用戶界面時經常遺忘他們。

在我們團隊(Si digital)所做的項目中,我們會考慮每個項目的用戶體驗和可訪問性。我們使用各種工具和技巧來幫助我們理解視覺障礙,并使用這些知識讓我們的網站更加實用,而且考慮色盲用戶的感受使其不會沮喪。

什么是顏色識別障礙(色盲)?

顏色識別障礙(色盲)的類型很多,嚴重程度各不相同。大眾普遍誤以為顏色識別障礙(色盲)的人只能看見黑色和白色。即使這可能是真的,單色性(也稱全色盲)是非常罕見的,預估每 3.3 萬人人中有1名受影響。這種嚴重的視覺障礙使人們看東西都呈灰色調。

要記住一個重要的因素,對于大多數顏色識別障礙(色盲)患者來說,區分不同顏色并不困難,真正會導致問題的是分辨出相似顏色的明暗程度之間的差異。

正常視力與單色盲、紅色盲、綠色盲

而更常見的情況是紅綠色識別障礙(色盲),分為兩組?;加?strong>紅色弱視(Protanomaly)的人對紅光的敏感度較低。紅色、橙色和黃色色調會趨向于綠色,并且看起來不那么飽和?;加?strong>綠色弱視(Deuteranomaly)的人對綠光的敏感度較低,并且很難區分藍色、黃色、紫色,以及紅色系、藍色系和綠色系。

長期以來,顏色識別障礙(色盲)所帶來的困難不僅在網站設計中被忽略,而且在電視、電影,特別是電子游戲中也常常被忽略了。有很多用戶無法玩游戲,或者因為患有顏色識別障礙(色盲)的人無法辨認重要的UI元素而導致游戲難以繼續。

以游戲《巫師3》為例:

當切換成紅綠色盲視角的時候,看看地面上的紅色標記幾乎看不見了

這款游戲的特點是能夠使用增強感官的功能來追蹤氣味、追蹤腳印和尋找線索。然而,游戲開發者選擇深紅色作為標記,所以有很多用戶抱怨他們看不清楚這些標記(或者根本看不到)。簡單的顏色更改或更改顏色的選項,可能會讓游戲變得更加容易上手。

由于視覺障礙人口比例很高,顏色識別障礙(色盲)用戶是一個需要認真對待的問題。如果您的網頁或應用程序沒有經過特別的優化,您可能會失去大量用戶。

例如,如果用戶由于色彩沖突和缺乏對比而不能區分一系列的圖標,用戶就會感到沮喪并找其他網頁或應用服務來取代您的網頁。如果這成為每一個患顏色識別障礙(色盲)的潛在客戶的經歷,您將會失去 8% 的潛在銷售額——對于擁有1千萬英鎊收入的公司而言,該公司會損失 80 萬英鎊的巨額銷售額。

如何在設計時考慮顏色識別障礙者(色盲)

即使顏色識別障礙(色盲)會給使用者造成很大的困擾,但其實很容易克服。如果你意識到了這個問題,那么你就成功了一半。

1. 使用對比色

對比色的應用即使是患有單色識別障礙(色盲)的人仍然擁有對比感——明暗之間的比例差異。為確保您的網站使有視覺障礙的人更有可讀性的,您必須確保您的內容和背景形成鮮明對比。

例如,白色背景上的黑色文本具有較高的對比度和可讀性,而白色背景上的黃色文本則對比度較低,即使是對有全彩視力的人來說也一樣幾乎不可讀!

2. 使用不同的明度而不是多種顏色

同一色彩不同明度的應用

單色配色方案(不要與全色盲、單色盲混淆)使用一種顏色的不同明度效果,好過使用多種不同顏色。這將有效地減少用戶與色相相關的挫敗感,也是在設計中體現色彩對比的好方法。單色配色方案不一定是黑色和白色,而是使用不同明度的藍色,我們在完成可讀性的前提下,也實現了視覺上的愉悅感。

3. 在設計中親身體驗色盲

使用設計軟件切換不同類型的色盲模式Adobe Photoshop 中的色盲模擬

很多免費工具可以模擬色盲的所處環境,讓您了解顏色識別障礙(色盲)的人將如何看待外部環境,以確保您的用戶界面按您的預期工作。

Photoshop 有自己的(稍微隱藏起來的)校驗設置功能,只需進入查看>校驗設置,并且您可以選擇紅色盲和綠色盲兩種情況。完成測試后,只需要切換回監測 RGB 即可。

不幸的是,Sketch 色彩測試沒有原生支持,但各種插件能也能讓您進行色彩校驗。我們推薦 Color Oracle,這是一個免費插件,可以實時顯示具有常見色覺障礙的人看到的事物。

Color Oracle,圖片來源:http://colororacle.org/index.html瀏覽器中的色盲模擬

我們用谷歌瀏覽器添加一個被稱為“I want to see like the colour blind”(我希望看到顏色識別障礙者(色盲)模式)的插件,這會讓您在實時網站或測試環境下模擬色盲。這對于色彩和對比度測試是一個便利的工具,因為它提供包含完整的多視覺模式,包括單顏色識別障礙者(色盲)等。

4. 仔細選擇色彩組合

不幸的是,作為設計師,我們在設計中使用的顏色并不總由我們自己決定,有時候我們受到品牌規范的限制。但在可能的情況下,明智的做法是在建立品牌之前選擇和測試你的主色和次色。

下面的圖表列出了您應該避免使用的色彩組合:

避免使用色彩組合圖如果有疑問,請避免使用這些配色,去選擇簡單的黑色/白色,強色彩對比的配色方案!

5. 用紋理代替顏色

在設計圖形和圖表等內容時,可以考慮使用紋理或視覺圖案來幫助區分兩種顏色。例如,下面的餅狀圖。紅色盲用戶很可能由于顏色相似而難以區分不同區域。

然而,如果我們添加一些簡單的紋理或圖案,圖表的可閱讀性會提高 100%。

添加紋理和圖案,可提高圖表閱讀性

6. 避免單獨使用顏色作為提示

在設計表單和復雜界面等元素時,不應僅使用顏色作為提示。以下面的圖表為例,左邊的圖表僅使用顏色作為提示導致錯誤操作。

全彩視力的人能看到郵箱字段已變成紅色,表示存在某種錯誤。而對于綠色識別障礙者(色盲)來說,正確字段的綠色和錯誤字段的紅色就無法區分。解決此問題的最好的方法是使用某種圖標、符號或標簽去提示錯誤,就如同下圖所示。

是否使用符號作為提示標志

結論

在這學到的最重要的一堂課是:除非你確保顏色識別障礙者(色盲)能夠區分你所選擇的顏色,否則你不應使用單獨的顏色提示表示重要的東西。如果可以,使用圖標、文本、形狀、紋理或者其他視覺提示以及強對比色來向用戶傳遞信息。

有許多方法可以測試可訪問性,然而這些工具并不總是完全準確——最終看設計是否適合的最佳方法是執行真正的用戶體驗測試。你可能知道某人是顏色識別障礙者(色盲),為什么不讓他們來檢查你的設計呢?

 

原文作者:Jack Innes

原文地址:https://sidigital.co/blog/designing-for-colour-blindness

編譯作者:小黃花呀,贛州畢業備考;評審指導:TCC委員團,胖魚、呵呵、彈跳;編輯整理:三分設運營編輯 皮皮

本文由 @三分設 翻譯發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
起點學院課程
評論
評論請登錄
  1. 目前還沒評論,等你發揮!