視覺信息在無障礙設計中的應用
視覺信息在無障礙設計中的應用-移動閱讀二維碼

失敗

無障礙設計(barrierfreedesign)這個概念名稱始見于1974年,是聯合國組織提出的設計新主張。其理想目標是“無障礙”。關注、重視殘疾人、老年人的特殊需求。人類是擁有視覺、聽覺、觸覺等諸多感知“通道”的整合體,其中,無障礙色彩設計是一個面向所有公眾的視覺設計系統,該系統的最終目標為創建無障礙可視環境,使信息盡可能準確地傳達給更多的公眾。在使用操作界面上清除那些讓使用者感到困惑、困難的“障礙”(barrier),為使用者提供最大可能的方便,這就是無障礙設計的基本思想。

本文便從視覺障礙人群的類別和色彩認知特點進行歸類分析,提出用無障礙色彩設計來創建視覺信息的無障礙環境。

顏色,在設計師日常設計工作中經常用來區分信息圖形上的數據類別、層級關系和不同維度,是數據可視化中最常用的視覺變量之一。面對如此龐大的特殊受眾,作為負責產品直面用戶“第一張面孔”的設計師理應關注他們的需求,無論是線上或是傳統線下設計皆是以向用戶傳遞正確有效的信息為目標,更加不能忽視了視覺障礙群體。

一. 視覺障礙

視覺障礙主要有兩種類型:一類是視力低下造成的障礙,依據其視覺障礙程度分為全盲和弱視;另一類是色覺識別障礙,我們通?;\統的稱這類人群為“色盲(Color Blindness)”(也稱為道爾頓癥、色覺缺失、色覺辨認障礙、色弱等)。

Artboard

全球約2億人患有色盲,普遍程度甚至高于AB血型的人群,他們在識別部分或者全部顏色時有困難。

本文謹以色盲人群為引,展開探索敘述。

色盲人群可以分為:紅色盲(P)、綠色盲(D)、藍色盲(T)和全色盲。其中紅色盲和綠色盲最為普遍,合稱為紅綠色盲。紅綠色盲人數占到了色盲總數的99%,我們需要真實地走進他們眼中的世界:

色盲實驗

色譜

有很多人認為色盲看不到任何顏色。但這個認知是誤導,超過99%的色盲人群都是可以看到顏色的。

正如你可以看到的,有兩種最常見類型的色盲人群(綠色盲和紅色盲),在他們看到顏色的方式上并沒有發生根本性的變化。從色譜上我們不難看出色盲人群對于色覺識別上的一些規律:

a. 紅綠色盲不能分辨紅、紫、青、綠各色,僅能識別整個光譜中的黃、藍兩色;

b. 藍色色盲不能分辨紫、青、綠、黃各色,僅能識別整個光譜中的藍、白、紅三色;

c. 色盲人群對色相的辨識能力較弱,但卻對明度、飽和度非常敏感;

d. 紅色在紅綠色盲眼中近似于深灰色,而藍色盲眼中的黃色近似于灰白色。

下表列出了紅綠色盲的一些最有問題的顏色以及各種色盲的顏色辨別差異:

色塊

122

在此為推薦2個有效的模擬色盲色覺的工具,方便設計師們設計和檢驗:

  1. Adobe自帶的校樣設置: Photoshop CS4和Illustrator CS4及以上版本提供了模擬紅色盲和綠色盲的校樣設置,選擇“視圖—校樣設置—紅色盲型/綠色盲型”,以此在日常設計工作中校驗配色。
  2. 色盲/色弱模擬器無標題?http://www.color-blindness.com/coblis-color-blindness-simulator

 

二. 設計解決方案

色盲在日常生活中,大多數人認為交通燈是一個最大的問題,每個人都患有色覺缺陷,但他們是錯誤的。交通燈的顏色是非常好的選擇,他們總是按一定的順序排列。所以這對于大多數彩色盲人來說不是一個問題,即使因為你是色盲,一些國家因此不允許你獲得駕駛執照。

但是,在日常生活中,色盲人群還是存在有一些真正的障礙:

  • 曬傷不能真正被看到,所見皮膚幾乎是在發光的。
  • 不能通過顏色來辨別肉是否煮熟。
  • 空白(綠色)和占用(紅色)的顏色沒有區別。
  • 花和果子不能是有時容易發現。
  • 不能知道水果或蔬菜是成熟還是不成熟。
  • 到目前為止,彩色地圖和圖形有時可能很難理解和看懂。

 

對于色覺障礙的人士來說,在生活中顏色雖然實實在在的存在一些障礙,可顏色依然是區分不同類數據的一種簡單快速的表現形式。而我們設計師需要做的便是如何提高視覺信息的識別性和易讀性,我們可以遵循以下幾個思路尋找解決方案:

(1)避免僅以彩色形式傳達重要信息的情況,同時使用多種視覺變量表達信息;

(2)采用有效的視覺障礙模擬,選擇安全的配色方案,慎用無彩色系的搭配;

(3)采用明度與飽和度兼具的配色,尤其使用紅色時要小心;(對于非色盲的人,紅色是明亮和鮮艷的顏色。但對于色盲,它像藍色或深綠色一樣深。特別是對于紅色盲,暗紅色幾乎顯示為黑色。因此,避免在黑色背景上使用紅色字符。)

(4)不完全通過顏色來區分視覺信息,同時使用文字和圖標來進行注解。

下面為了方便大家理解,我們來舉例說明這三點在實際設計當中的運用:

1.1高德地圖—色覺無障礙設計案例

紅綠色盲對于彩色地圖的視覺障礙引起了高德地圖的重視,高德地圖V7.7.8正式版中新增了色覺無障礙路設置用戶開啟該功能后路況便會采用色覺無障礙配色顯示,清晰明的向紅綠色盲人群標示了實時路況。

222222

 

高德地圖色覺無障礙配色完全參照了紅綠色盲人群的可視色譜來進行選取制作的,建立了方便特殊人群理解與看懂的獨特“配色邏輯”。切換了色覺無障礙模式后,色覺無障礙地圖在紅綠色盲模擬視圖中顯示與原始視圖并無差別,完美適配紅綠色盲人群的閱讀使用需求。

 

Artboard

當同一界面需要出現多種顏色時,要使配色能覆蓋到各種色覺辨認能力的人(包括色盲、色弱和色覺正常的人群)并不是一件容易的事,這讓設計師非常頭疼。針對色盲人士的較弱顏色識別能力,日本研究得出一組無障礙配色建議,與高德地圖的色覺無障礙地圖設計的配色有異曲同工之處。這組配色對色盲和非色盲人群都是易辨識的(例如它選擇了朱紅色代替紅色,藍綠色代替綠色,紫紅色代替紫色,有效減少了色盲人士的困擾),它對屏顯和印刷都適用,在此分享,供大家參考。

安全配色

1.2 iChat—通過圖形來幫助色盲用戶

對于色盲人群應該避免僅以彩色形式傳達重要信息的情況,不完全通過顏色來區分視覺信息,同時使用多種視覺變量表達信息(如形狀+顏色、尺寸+顏色、注釋+顏色),其中,形狀包括了這樣一些可使用的元素:圓形、三角形、矩形等;實線、虛線、點線等;字母、數字符號等。

在ichat的優化界面設計中,遵循的原則便是:使用盡可能少的顏色——結合使用不同形狀符號和少量鮮艷的顏色,效果遠好于只使用一種形狀和多種顏色。因此優化改進的界面可以傳送足夠的信息,即使沒有顏色。例如,當一個全色盲在瀏覽界面時,該界面也不會丟失任何信息。

3

圖形

1.3 色盲人群眼中的失敗案例

紅包是我們日常最常見的營銷手段,黃+紅也是最直接的配色,但在紅綠色盲的世界里,紅色近似于灰色和黃灰色,于是在設計此類頁面時應該拉開配色明度與對比色,重要的文字信息更應該避免出現 紅色+深灰色 的配色。

 

失敗

三. 最后結語

只有當設計師了解視覺障礙的種類以及色礙人群的認知障礙以后,才會知道怎樣的配色方案才能避免障礙的產生,怎樣的設計才能夠符合此類隱性用戶的需求。除卻對于界面配色的研究探索,我們甚至也可以為色盲人士提供單獨的色盲模式切換,這樣也可以兼顧視覺上的美觀,避免了太多信息的干擾。這種形式在游戲和軟件中也有先例,在APP設計中,高德地圖的色覺無障礙也屬于色盲模式切換的嘗新探索之舉。

作為UED工作者的我們應該拓寬自己的眼界和胸懷,站在更包容跟高遠的位置去思考看待我們的產品和設計,不僅僅是色覺障礙人群,我們應該挖掘出更多隱藏在身邊的障礙用戶,并探索出更多有效途徑與方法來提高他們與現代網絡世界的交互效率和舒適度。

 

原文地址:ued.ctrip

本文鏈接:http://www.casaleticia.com/color-blindness-color-design.html
本文標簽: , , , , ,