信息無障礙研究與應用

2022-9-22    純純

信息無障礙,是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來越廣,對于身體有局限的群體而言,更加迫切通過互聯(lián)網(wǎng)獲取信息,而這就需要互聯(lián)網(wǎng)產(chǎn)品進行信息無障礙的優(yōu)化。在我國其受益人群至少包括:8500多萬殘障人士,2億多60歲以上的老年人,數(shù)量龐大。率先考慮信息無障礙能為產(chǎn)品增加優(yōu)勢而帶來更多用戶。


如今智能手機掀起了一場無障礙輔助工具的革命,而站在這個關(guān)鍵點的互聯(lián)網(wǎng)設計師,也要開始行動起來,先從以下這幾個容易實現(xiàn)的事情開始著手進行無障礙的優(yōu)化吧。




關(guān)于讀屏


對視障用戶來說,是用聽取讀屏語音來了解你設計的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛,它的原理是直接讀出界面里的文字,如果icon按鈕未加無障礙標簽讀屏會讀為"無法發(fā)音",那么視障者就無法獲取這些信息,自然也就無法使用你設計的功能。


解決的辦法是:


1.需要在產(chǎn)品代碼中添加無障礙標簽(Android :contentDescription ; iOS:accessibilityLabel在對應的開發(fā)者文檔里很容易找到,可以發(fā)給你合作的研發(fā)同學)。


2.裝飾性icon可隱藏標簽不讀,提升讀屏效率。不建議不做處理也不加標簽,那么用戶聽到的就是“無標簽”,這樣會讓用戶以為這里有什么重要信息讀不到而感到不安。


3.標簽語義簡短準確,盡可能使用動詞。


4.必要時需要走查焦點順序,確保不會被錯誤的焦點順序誤導頁面含義。 



并且最好由設計師進行語義的標注,因為設計師才是對頁面里圖形應用最了解的人。避免出現(xiàn)“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。 





關(guān)于色彩


顏色可以用來區(qū)分信息數(shù)據(jù)的類別和維度,也可以幫助傳達情緒等重要信息。然而,世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通常籠統(tǒng)的稱這類人群為“色盲”,他們是典型的識別顏色有問題的群體。


"色彩"的目標是"易于感知",指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對任何人來說,都應該擁有足夠高的辨識度和舒適度,我從以下4個方向進行介紹。 

 

1.更安全的配色


a.色盲人群:


設計師在進行設計配色時應時刻自測,避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色,因為這樣的配色勢必會造成色盲用戶的可讀性問題。并且,紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深,而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強調(diào)字,從而遺漏關(guān)鍵信息(設計時,可利用此插件模擬色盲眼中的顏色:Color Oracle) 。




b.文化差異:


因為色彩在不同國家文化中代表不同含義,所以對于國際用戶來說也是存在障礙的。在西方文化里,紅色通常用于表示消極趨勢,而綠色則表示積極趨勢,但在東方文化中卻正相反。


c.特殊群體:


臨床醫(yī)學研究表明對于部分自閉癥患者來說,高飽和高對比度的顏色,甚至只是黃色都會讓他們感到不舒服和不安,因此在自閉癥康復中心是不會出現(xiàn)過于對比刺激的顏色的。


另外,老年群體隨著年齡的增長,晶狀體變黃變渾濁,會選擇性的吸收藍光,從而導致老年人對藍色的鑒別能力下降明顯,如果你的主流用戶是老年人,請盡量避免將藍色運用到重要的按鍵中去。



2.更強的文本對比度


文本對比度與可讀性息息相關(guān),它測量的文本顏色和背景色之間的明度差。WCAG AA對于文本對比度的規(guī)范是:4.5:1,若字號夠大(>18pt,或粗體>14pt)時,標準可降到3:1。如果滿足4.5:1這個標準會讓你的頁面視覺看起來不那么優(yōu)雅,可以嘗試局部加強可視性的方法:



關(guān)于可讀性其他需要注意的點:盡量不要在圖片上疊加文字,除非你能保證圖片背景顏色單一且對比度足夠高。



Material Design設計規(guī)范建議,需要淡淡的遮罩確保上層文字的可讀性;并且不建議極高對比度的文本,因為這樣會使一部分視障者看到的字旋轉(zhuǎn)模糊。


 

3.更多樣的視覺變量 


顏色是數(shù)據(jù)可視化中最常用的視覺變量之一。但是對于無法辨別顏色的用戶,如果顏色作為的唯一的提示信息,他們可能將無法理解你傳達的信息。那么有什么改善的方法呢?


a. 不讓顏色成為唯一的視覺變量:除顏色外,我們可以追加圖標、紋理或者文字來加以標注。



b.色盲模式:Trello作為一款工具產(chǎn)品,在標注信息時,提供色盲模式可打開和關(guān)閉,并用不同紋理加以區(qū)別,色盲友好模式是一個很好的范例,它可以有效幫助色盲,又不會妨礙非色盲用戶。


c.以明度飽和度為度量:雖然色盲人士對色相的辨識能力較弱,但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息??催@個例子:傳統(tǒng)熱力圖習慣用暖色代表熱力高冷色代表熱力低,Google Analaytics的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段,簡單有效。




關(guān)于控件


控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的HTML元素。控件太小或彼此太靠近可能會給用戶帶來糟糕的體驗問題。


比如對于無法用指尖精確定位的用戶(有顫抖疾病的用戶),或因年齡而導致靈活性降低的老年用戶,都會難以點擊過小控件。


為了給用戶足夠的間距來準確選擇控件,Material Design建議至少48×48dp,iOS設計系統(tǒng)將目標熱區(qū)尺寸最小值定為44 x 44pt,而WCAG對WEB的規(guī)范則建議至少44×44px。一個控件可以在視覺上是24 x 24px,但是在所有邊上都會有一個額外的填充使它達到44×44px。并且太靠近的控件可能會因誤點擊而帶來挫敗感,所以同時還建議控件之間的空間足夠遠以減少誤觸。Microsoft給pc的建議是至少有8px的間距,而Material Design推薦的控件至少間隔8dp。我們可根據(jù)以上規(guī)范來審視自己設計的控件。




關(guān)于文字


1.文字大小:


有視覺障礙的用戶可能會把字號調(diào)得很大。你需要保證你的設計在大字號的情況下內(nèi)容不會溢出或排版錯亂。做設計的時候,可以使用2倍以上的字體測試你的設計。


在互聯(lián)網(wǎng)早期,設計了字號在9-14px之間的網(wǎng)頁,如今已與20年前不同,瀏覽器已經(jīng)可以在任何尺寸設備上使用,小到智能手表大到4K熒幕,我們不能再使用固定的字號來設計產(chǎn)品了。字號應該與設計本身一樣具有響應性。例如可以允許用戶自定義字號、行高或字間距等以達到舒適的閱讀水平。


 

2.文字樣式:


文字作為傳達信息的重要載體,對于許多用戶來說,裝飾字體或草書字體都是比較難閱讀的。且用過細的、過小的、斜體和全大寫文本,也會降低識別度。




關(guān)于動效


有效的動畫可以給頁面帶來生命感,但如果濫用動效不僅會分散用戶注意力,嚴重的話對某些用戶來說來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激)。


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都具有關(guān)閉動效的功能。


為了避免給特殊人群造成困擾,設計師在開始做動效之前,應該看看以下四條是否滿足:


1.動效每秒閃動不超過3次,發(fā)生的閃光區(qū)域不超過超過25%否則,光敏癲癇患者會有發(fā)病的風險。


2.避免過于夸張的視差和運動效果,因為大腦前庭失調(diào)者會引發(fā)眩暈。


3.避免有多個元素通過不斷移動、閃爍而分散注意力,因為這可能會讓注意力缺陷者產(chǎn)生困擾 。


4.如果有上述情況,需提供一些控件或選項來暫停、隱藏或者更改任何動畫或效果的頻率。


結(jié)語


作為體驗設計師,研究無障礙會讓我們收獲良多。當然,目前所做的改進并非一勞永逸,而是我們與更廣范圍的用戶保持持續(xù)對話的開端。不斷改進產(chǎn)品的無障礙體驗,讓產(chǎn)品更友善,讓美妙的互聯(lián)網(wǎng)的世界變得更平等,我們希望能不斷向這一目標前進。




作者:百度MEUX    來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔