起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識以人為本，為顏色識別障礙者用戶設計
本篇文章，作者告訴我們“什么是顏色障礙（色盲）”“如何在設計時考慮顏色障礙者（色盲）”和“為顏色障礙者（色盲）設計的一些小技巧”。通過閱讀這篇文章，了解設計應如何考慮顏色障礙（色盲）用戶體驗。
為顏色障礙者（色盲）設計，其實就是遵循以人為本的設計原則。顏色障礙者（色盲）是一群特殊的群體，他們對某一種或多種顏色有視覺障礙，但很多設計中卻沒有考慮到顏色障礙者（色盲）的需求和困難。
色盲色弱測試圖
我們觀察顏色的方式是一樣的嗎？請看上面這張圖，如果你看到了數字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協議
- 目前還沒評論，等你發揮！
