互聯網產品中的無障礙設計原則——色彩的應用思考
在用戶體驗設計領域工作了有些年,我們都被一個共同的問題困擾了多年,也就是究竟怎樣才算得上是做用戶體驗設計工作,在做平常需求當中,我們會經常被問道:為什么這樣設計?所以本篇文章也算是眾多回答其中的一種方式。
用戶體驗設計不是感性的藝術創作,而是理性的基礎上去考慮可用,易用,好用才是我們設計產品的基本原則。所以用戶體驗是把設計做“無”的。
一、什么是無障礙設計
無障礙設計是W3C(萬維網聯盟)其中的一個設計指南和建議,這些建議可使網站內容或互聯網產品更容易訪問。
可訪問性的4個基礎原則有:
1,可感知的信息和用戶界面
2,可操作的用戶界面和導航
3,可理解的信息和用戶界面
4,強大的內容和可靠的解釋
遵循這些原則能讓殘障人士(包括盲人和低視患者、聾人和重聽人、學習障礙、認知障礙、行動不便、言語殘疾、光過敏患者和這些病癥的復合患者)能訪問你的互聯網產品,也可讓普通人群更容易訪問您的產品。
二、為什么用無障礙設計原則
下面的內容全部都是圍繞無障礙設計在互聯網產品的設計中怎么去設計和規范化色彩體系!
當然,我們不是為殘障人士開發產品,也不確定會不會有視覺障礙的人群想要通過我們的產品去學習… …
不過我們要考慮到部分人群對顏色的敏感度弱群體,還有按照我們的使用場景去考慮,周邊有好多人都會用智能手機或者筆記本電腦辦公,這些人所處的環境都會收到周圍環境的影響,比如陽光強烈的戶外、黑暗的臥室里等等…
顏色是我們感知系統中人們知覺客觀事物的一個重要特性。
在產品的使用過程中我們首先感受到的就是顏色,我們在做產品設計的時候首先考慮的是信息的傳達,而人們對信息的接收程度跟自身的注意與感知有關。無障礙設計原則不僅僅是提高產品信息的可訪問性,也是對有效明確的傳達信息有幫助的!
所以有以下使用無障礙設計原則的理由:
1、在這個多樣化的世界上,并不是所有人都能毫無障礙、順利地使用各種產品。優秀的無障礙設計,不僅能讓殘疾人用戶正常地與產品交互;還會為普通人提供更好的使用體驗。
2、若能在考慮各種設計限制時,也同時考慮「無障礙設計規范」,會通過一些限定激發出新想法,促使設計師做出為所有人所用的更好產品。
3、我們要努力為所有人設計——包括盲人,色盲患者,視力低下患者;聽覺失聰或有聽覺障礙的人;有認知障礙的患者;為年長、年幼的人設計;為有明確目的的人、只是閑逛的人、單純只為享受好的用戶體驗的人而設計。
三、如何把無障礙設計導入到產品設計中
在視覺無障礙的層面主要針對文字和背景色的對比度上發力;
可訪問性的等級分為3個級別:
A - 必須滿足;
AA - 應遵循;
AAA - 可以滿足;
在主要內容和信息傳達上在達到AA基礎上盡量滿足AAA標準;
AA標準:
文本和文本圖像的視覺呈現至少4.5:1的對比度;
大文本:大號文本和大文本圖像至少有3:1對比度;
AAA標準:
文本和文本圖像的視覺呈現至少7:1的對比度;
大文本: 大號文本以及大文本圖像至少有 4.5:1的對比度。
在計算機的世界里“色即是空”:顏色在程序當中就是一連串的代碼和數學題,而我們做用戶體驗設計不是做藝術創新而在感性與理性中間尋找平衡。
WCAG和品牌色不會產生任何沖突,即便品牌色達不到標準,在PC或移動產品的設計用色上區分品牌色和界面UI顏色即可:
文字顏色、按鈕等為了滿足無障礙色彩對比要求,可以不直接使用品牌色,而是加深/變淺后再用;
未激活控件(如tab)文字顏色一般對比度 > 3;
黑/白色、深灰色、危險色,都盡量滿足對比度 > 4.5;
深色背景的對比度,比淺色背景的容易滿足一些。(即便如此,謹慎在產品中使用深色調,研究表明散光的人在黑色上閱讀白色文字比在白色黑色文字更難。在淺色背景上用黑色字符閱讀時,比在深色底閱讀淺色字的準確率高出26%;
最高對比度一般在 16-18 左右。(最高對比度是21,也就是 #000000 + #FFFFFF 。盡量別用這種對比,這會引起一些誦讀困難癥患者的不適,他們會感覺文字在旋轉、模糊);
下面我列出一些簡單的色彩制定步驟:
1、根據先定的主色得出16個主要顏色(CCS色彩體系),主要顏色是應用程序屏幕和組件中最常顯示的顏色;
2、根據16色找出邊緣色以供我們更好的執行無障礙設計顏色的選取使用:
基于主要顏色調制主色的深色和淺色;
我們根據主色上的明暗度和飽和度來調整自己想要的具體效果;
3、制訂出我們產品的用色規范:
其他:
1、我們也可以用一些工具查看自己的設計稿在視覺殘障人士眼中的效果:
2、也可以用其他的方式去尋找色彩邊緣,例如:
3、也可以用網上工具批量測算背景與文字對比度符不符合無障礙設計原則,例如: