如何為顏色障礙用戶做設計?

  • A+
所屬分類:經驗思維

本文來源: 小黃花呀翻譯, 共 2846 字

為顏色障礙者(色盲)設計,其實就是遵循以人為本的設計原則。顏色障礙者(色盲)是一群特殊的群體,他們對某一種或多種顏色有視覺障礙,但很多設計中卻沒有考慮到顏色障礙者(色盲)的需求和困難。本篇文章,作者告訴我們“什么是顏色障礙(色盲)”“如何在設計時考慮顏色障礙者(色盲)”和“為顏色障礙者(色盲)設計的一些小技巧”。

通過閱讀這篇文章,了解設計應如何考慮顏色障礙(色盲)用戶體驗

如何為顏色障礙用戶做設計?

色盲色弱測試圖

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

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

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

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

顏色識別障礙(色盲)的類型很多,嚴重程度各不相同。大眾普遍誤以為顏色識別障礙(色盲)的人只能看見黑色和白色。即使這可能是真的,單色性(也稱全色盲)是非常罕見的,預估每 3.3 萬人人中有1名受影響。這種嚴重的視覺障礙使人們看東西都呈灰色調。要記住一個重要的因素,對于大多數顏色識別障礙(色盲)患者來說,區分不同顏色并不困難,真正會導致問題的是分辨出相似顏色的明暗程度之間的差異。

如何為顏色障礙用戶做設計?

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

野外的顏色

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

如何為顏色障礙用戶做設計?

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

由于視覺障礙人口比例很高,顏色識別障礙(色盲)用戶是一個需要認真對待的問題。如果您的網頁或應用程序沒有經過特別的優化,您可能會失去大量用戶。例如,如果用戶由于色彩沖突和缺乏對比而不能區分一系列的圖標,用戶就會感到沮喪并找其他網頁或應用服務來取代您的網頁。如果這成為每一個患顏色識別障礙(色盲)的潛在客戶的經歷,您將會失去 8% 的潛在銷售額——對于擁有1千萬英鎊收入的公司而言,該公司會損失 80 萬英鎊的巨額銷售額。

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

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

1、使用對比色

如何為顏色障礙用戶做設計?

對比色的應用

即使是患有單色識別障礙(色盲)的人仍然擁有對比感——明暗之間的比例差異。為確保您的網站使有視覺障礙的人更有可讀性的,您必須確保您的內容和背景形成鮮明對比。例如,白色背景上的黑色文本具有較高的對比度和可讀性,而白色背景上的黃色文本則對比度較低,即使是對有全彩視力的人來說也一樣幾乎不可讀!

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

如何為顏色障礙用戶做設計?

?同一色彩不同明度的應用

單色配色方案(不要與全色盲、單色盲混淆)使用一種顏色的不同明度效果,好過使用多種不同顏色。這將有效地減少用戶與色相相關的挫敗感,也是在設計中體現色彩對比的好方法。

單色配色方案不一定是黑色和白色,而是使用不同明度的藍色,我們在完成可讀性的前提下,也實現了視覺上的愉悅感。

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

如何為顏色障礙用戶做設計?

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

Adobe Photoshop 中的色盲模擬

很多免費工具可以模擬色盲的所處環境,讓您了解顏色識別障礙(色盲)的人將如何看待外部環境,以確保您的用戶界面按您的預期工作。Photoshop 有自己的(稍微隱藏起來的)校驗設置功能,只需進入查看>校驗設置,并且您可以選擇紅色盲和綠色盲兩種情況。完成測試后,只需要切換回監測 RGB 即可。

Sketch 中的顏色識別障礙者(色盲)模擬

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

如何為顏色障礙用戶做設計?

Color Oracle

瀏覽器中的色盲模擬

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

4、仔細選擇色彩組合

不幸的是,作為設計師,我們在設計中使用的顏色并不總由我們自己決定,有時候我們受到品牌規范的限制。

但在可能的情況下,明智的做法是在建立品牌之前選擇和測試你的主色和次色。下面的圖表列出了您應該避免使用的色彩組合。

如何為顏色障礙用戶做設計?

避免使用色彩組合圖

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

5、用紋理代替顏色

在設計圖形和圖表等內容時,可以考慮使用紋理或視覺圖案來幫助區分兩種顏色。

例如,下面的餅狀圖。紅色盲用戶很可能由于顏色相似而難以區分不同區域。然而,如果我們添加一些簡單的紋理或圖案,圖表的可閱讀性會提高 100%。

如何為顏色障礙用戶做設計?

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

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

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

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

如何為顏色障礙用戶做設計?

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

結論

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

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

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: