產(chǎn)品經(jīng)理信息無障礙研究與應用「視覺篇」

1、編輯導語：隨著互聯(lián)網(wǎng)的發(fā)展，更多人會使用電子產(chǎn)品獲取信息；很多產(chǎn)品開始沒有意識障礙群體龐大的用戶量，往往到了使用環(huán)節(jié)才出現(xiàn)問題，所以信息無障礙功能已經(jīng)成為了產(chǎn)品必要的考慮環(huán)節(jié)；本文作者分享了關于信息無障礙的研究與應用，我們一起來看一下。信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來越廣，對于身體有局限的群體而言，更加迫切通過互聯(lián)網(wǎng)獲取信息，而這就需要互聯(lián)網(wǎng)產(chǎn)品進行信息無障礙的優(yōu)化。在我國其受益人群至少包括：8500多萬殘障人士，2 億多 60歲以上的老年人，數(shù)量龐大；率先考慮信息無障礙能為產(chǎn)品增加優(yōu)勢而帶來更多用戶。如今智能手機掀起了一場無

2、障礙輔助工具的革命，而站在這個關鍵點的互聯(lián)網(wǎng)設計師，也要開始行動起來，先從以下這幾個容易實現(xiàn)的事情開始著手進行無障礙的優(yōu)化吧。對視障用戶來說，是用聽取讀屏語音來了解你設計的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛，它的原理是直接讀出界面里的文字，如果icon 按鈕未加無障礙標簽讀屏會讀為 “無法發(fā)音” ，那么視障者就無法獲取這些信息，自然也就無法使用你設計的功能。解決的辦法是:并且最好由設計師進行語義的標注，因為設計師才是對頁面里圖形應用最了解的人。避免出現(xiàn) 搜索”被寫成 放大鏡”、或者是“searchBtn_12交類的情 況。顏色可以用來區(qū)分信息數(shù)據(jù)的類別和維度，也可以幫助傳達情緒等

3、重要信息；然而，世界上有超過8%的男性和 0.4%的女性都被色覺障礙的問題困擾；我們通常籠統(tǒng)的稱這類人群為 “色盲” ，他們是典型的識別顏色有問題的群體。“色彩 ”的目標是 “易于感知 ”，指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對任何人來說，都應該擁有足夠高的辨識度和舒適度，我從以下 4 個方向進行介紹。色盲人群設計師在進行設計配色時應時刻自測，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因為這樣的配色勢必會造成色盲用戶的可讀性問題；并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色；因此色盲人士很難分辨出文章內(nèi)的深紅色的強調(diào)字，從而遺漏關鍵

4、信息（設計時，可利用此插件模擬色盲眼中的顏色：Color Oracle）。文化差異因為色彩在不同國家文化中代表不同含義，所以對于國際用戶來說也是存在障礙的；在西方文化里，紅色通常用于表示消極趨勢，而綠色則表示積極趨勢，但在東方文化中卻正相反。特殊群體臨床醫(yī)學研究表明對于部分自閉癥患者來說，高飽和高對比度的顏色，甚至只是黃色都會讓他們感到不舒服和不安，因此在自閉癥康復中心是不會出現(xiàn)過于對比刺激的顏色的。另外，老年群體隨著年齡的增長，晶狀體變黃變渾濁，會選擇性的吸收藍光，從而導致老年人對藍色的鑒別能力下降明顯；如果你的主流用戶是老年 人，請盡量避免將藍色運用到重要的按鍵中去。文本對比度與可讀性息息

5、相關，它測量的文本顏色和背景色之間的明度差。WCAG AA對于文本對比度的規(guī)范是：4.5:1,若字號夠大（18pt,或粗 體14pt）時，標準可降到3:1;如果滿足4.5:1這個標準會讓你的頁面視覺看起 來不那么優(yōu)雅，可以嘗試局部加強可視性的方法：關于可讀性其他需要注意的點：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對比度足夠高。Material Design設計規(guī)范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對比度的文本，因為這樣會使一部分視障者看到的字旋轉模 糊。顏色是數(shù)據(jù)可視化中最常用的視覺變量之一；但是對于無法辨別顏色的用戶，如果顏色作為的唯一的提示信息，他們

6、可能將無法理解你傳達的信息。那么有什么改善的方法呢 ?不讓顏色成為唯一的視覺變量除顏色外，我們可以追加圖標、紋理或者文字來加以標注。色盲模式Trello 作為一款工具產(chǎn)品，在標注信息時，提供色盲模式可打開和關閉，并用不同紋理加以區(qū)別，色盲友好模式是一個很好的范例，它可以有效幫助色 盲，又不會妨礙非色盲用戶。以明度飽和度為度量雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息?？催@個例子：傳統(tǒng)熱力圖習慣用暖色代表熱力高冷色代表熱力低， Google Analaytics 的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段，簡單有效。控件可以是按

7、鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的 HTML 元素，控 件太小或彼此太靠近可能會給用戶帶來糟糕的體驗問題。比如對于無法用指尖精確定位的用戶（有顫抖疾病的用戶），或因年齡而導致靈活性降低的老年用戶，都會難以點擊過小控件。為了給用戶足夠的間距來準確選擇控件，Material Design建議至少48 M8dp, iOS設計系統(tǒng)將目標熱區(qū)尺寸最小值定為44 x 44pt,而WCAG對WEB的規(guī)范則建議至少44M4px。一個控件可以在視覺上是24 x 24px,但是在所有邊上都會有一個額外的填 充使它達到44必4px;并且太靠近的控件可能會因誤點擊而帶來挫敗感，所以 同時還建議控件之間的空間足夠遠

8、以減少誤觸。Microsoft給pc的建議是至少有 8Px的間距，而 Material Design推薦的控件 至少間隔8dp。我們可根據(jù)以上規(guī)范來審視自己設計的控件。有視覺障礙的用戶可能會把字號調(diào)得很大，你需要保證你的設計在大字號的情況下內(nèi)容不會溢出或排版錯亂，做設計的時候，可以使用 2 倍以上的字體測試你的設計。在互聯(lián)網(wǎng)早期，設計了字號在 9-14px之間的網(wǎng)頁，如今已與20年前不同，瀏覽器已經(jīng)可以在任何尺寸設備上使用，小到智能手表大到 4K 熒幕，我們不能再使用固定的字號來設計產(chǎn)品了；字號應該與設計本身一樣具有響應性，例如可以允許用戶自定義字號、行高或字間距等以達到舒適的閱讀水平。文字作

9、為傳達信息的重要載體，對于許多用戶來說，裝飾字體或草書字體都是比較難閱讀的；且用過細的、過小的、斜體和全大寫文本，也會降低識別度。有效的動畫可以給頁面帶來生命感，但如果濫用動效不僅會分散用戶注意力，嚴重的話對某些用戶來說來說可能是致命的（光敏性癲癇的臨床誘因之一就是閃光圖像的刺激）。1997年的一天，日本電視臺正在播放精靈寶可夢第38集 “電腦戰(zhàn)士 3D龍 ”，但就在這天晚上發(fā)生了 600 多名兒童昏倒在家中集體送醫(yī)事件，轟動了動畫界，任天堂的股價也隨之大跌。原來，為了達到震撼效果， 3D 龍的背景運用了“藍-紅-藍”的快速閃爍來表現(xiàn)爆炸，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛，導致他們集體患上了急性光敏癥；也因為這件事日本開始著手對動畫片的制作制定規(guī)范； Twitter 在2019年為了保護對閃爍圖像敏感的人員安全，也采取了禁用 APNG 動圖格式的措施。另外 WCAG 2.3.3 官方說明，一些用戶會因滾動頁面的動效（例如緩動和視差滾動）而觸發(fā)大腦前庭疾病從而產(chǎn)生頭暈的癥狀，所以 iOS、 Mac、Windows 10都具有關閉動效的功能。