設(shè)計(jì)師必看 | 無障礙設(shè)計(jì)

無障礙設(shè)計(jì)作為一種設(shè)計(jì)理念，最早是聯(lián)合國組織在 1974 年提出。核心主張是為具有不同程度生理傷殘缺陷及正常活動能力衰退的人（殘疾人、老年人）設(shè)計(jì)滿足其使用需求的公共空間環(huán)境及建筑設(shè)施、設(shè)備，以營造一個(gè)充滿愛與關(guān)懷、切實(shí)保障人類安全、方便、舒適的現(xiàn)代生活環(huán)境。

除真實(shí)生活環(huán)境，電子設(shè)備及網(wǎng)絡(luò)也成為現(xiàn)代人生活中不可或缺的部分，今天更多強(qiáng)調(diào)的是“包容性設(shè)計(jì)”，每個(gè)正常人都可能在特定情況下遇到“障礙”，讓使用者感受到平等包容的設(shè)計(jì)。

我們就從較為常見的 4 種場景一起看一下優(yōu)秀的無障礙設(shè)計(jì)案例。

視覺無障礙

1. 色彩識別障礙-無法接收顏色信息

全世界大約有 8% 的男性和 0.5% 的女性患有某種形式的色盲，這意味著，每 100 個(gè)瀏覽你設(shè)計(jì)的產(chǎn)品界面的用戶里，可能有8個(gè)人感受到的畫面內(nèi)容和你的預(yù)期不同。因此，我們要進(jìn)行更友好的設(shè)計(jì)，可以嘗試以下方法：

提升對比度

在設(shè)計(jì)時(shí)可以利用「色彩對比工具」檢查主體和背景配色的可讀性，合適的對比度有利于提高閱讀和瀏覽體驗(yàn)。也可采用「W 3 C 對比度標(biāo)準(zhǔn)設(shè)計(jì)系統(tǒng)」，以明度及文字大小衡量圖文對比度，其中文本以及圖像至少要有 4.5:1 的對比度，大號文本以及大號文本圖像至少有 3:1 的對比度。

▲ 拉開對比度

增加顏色以外的視覺輔助

除了使用高對比的配色外，也可利用文字提示、改變形狀、添加紋理等幫助區(qū)分內(nèi)容，避免將顏色作為傳遞信息的唯一指標(biāo)。尤其在設(shè)計(jì)表單時(shí)，很多設(shè)計(jì)中輸入框輸入錯(cuò)誤的狀態(tài)會通過改變邊框顏色來提醒。但色彩障礙用戶是無法區(qū)分成功字段的綠色與錯(cuò)誤字段的紅色的。因此，解決此問題的最佳方法是加入文字或圖標(biāo)提示狀態(tài)改變。

▲ 設(shè)計(jì)細(xì)節(jié) - 圖形輔助

提供視覺障礙模塊

當(dāng)同一界面需要出現(xiàn)多種顏色時(shí)，要使配色能覆蓋到各種色覺辨認(rèn)能力的人是很困難的。東京大學(xué)分子細(xì)胞生物學(xué)研究所針對色盲、色弱、綠內(nèi)障和白內(nèi)障等疾病研究出視障安全色板，分為熒幕、印刷及涂裝色板。它的原理是以橙紅色代替紅色、藍(lán)綠色代替綠色，令紅綠色盲用戶更容易分辯顏色。

高德地圖參照紅綠色盲人群的可視色譜來進(jìn)行選取制作色障模式，切換視覺障礙模式后，可以清晰明了的向紅綠色盲人群顯示路況，在他們眼中地圖就會與原始視圖沒有差別。

▲ 高德地圖

2. 智能設(shè)備為視障人士提供不一樣的生活

手機(jī)變成另一雙眼

Be My Eyes App 這款應(yīng)用是丹麥軟件公司  Robocat 研發(fā)推出的。該應(yīng)用分為視障人士和志愿者兩個(gè)界面，當(dāng)視障人士需要幫助時(shí)，志愿者就能收到幫助的提示，志愿者就像是視障人士的雙眼一樣，幫助解決當(dāng)前問題。功能簡單、視障人士學(xué)習(xí)成本低，解決了視障人士當(dāng)下燃眉之急。在界面配色上，采用純度高的藍(lán)色和超大字體，便于視障人士點(diǎn)擊操作，站在用戶角度和場景去設(shè)計(jì)體驗(yàn)流程。

▲ Be My Eyes App

智能硬件的結(jié)合

對于視障群體，聲音無疑是他們世界中的一道光，Soundscape x Bose Frames 利用 3 D 立體聲，為視障人群描繪周圍真實(shí)的世界。它將太陽眼鏡的保護(hù)功能和無線耳機(jī)的音頻功能結(jié)合，并且它結(jié)合地圖功 能，不僅會告訴你面向的方向，同時(shí)還會告訴你附近可識別的位置距離你多遠(yuǎn)。用這樣的方式幫使用者在腦海中構(gòu)建一個(gè)立體的周圍世界輪廓。讓使用者可以自主去探索身邊的世界，在陌生環(huán)境中獲得確定性和安全感。

▲ Soundscape x Bose Frames 眼鏡

聽覺無障礙

大部分的網(wǎng)頁、App 對于聽力受損的人群是沒有障礙的，因?yàn)檫@些載體上的內(nèi)容都是以視覺的方式呈現(xiàn)給用戶。但是在使用 App 時(shí)會由于用戶的粗心大意，導(dǎo)致聽力受損。

1. 過高音量保護(hù)

有時(shí)候我們在公交上、地鐵里，因?yàn)榄h(huán)境嘈雜就會增大耳機(jī)的音量，從而確保可以繼續(xù)聽音樂、看視頻。但是這一舉動會對我們的聽力造成損害。當(dāng)你在嘈雜環(huán)境下看 Bilibili 時(shí)，無論是刻意增大音量還是無意間誤觸音量調(diào)節(jié)，Bilibili 都會彈窗提示用戶是否要繼續(xù)增大音量，并告知用戶音量增大后的危害。

▲ bilibili

2. 實(shí)時(shí)生成字幕

當(dāng)用戶由于各種原因?qū)е律硖幉环奖懵犅曇舻膱鼍皶r(shí)，Youtube 提供了實(shí)時(shí)生成字幕的功能。用戶可通過閱讀實(shí)時(shí)字幕來了解視頻內(nèi)容，字幕還支持實(shí)時(shí)翻譯成多種語言。

▲ Youtube

3. 健康 - 耳機(jī)音量監(jiān)測

用戶通常很難察覺到自己使用耳機(jī)的習(xí)慣。Apple 的健康應(yīng)用中，將耳機(jī)音量數(shù)據(jù)做了可視化，并提醒用戶是否在正常區(qū)間內(nèi)。同時(shí)如果用戶佩戴了 Apple Watch 的話，還會有環(huán)境音量級別的數(shù)據(jù)可視化，方便用戶發(fā)覺聽力出現(xiàn)障礙時(shí)，可以輕易的找到原因。

▲ apple 音量可視化

行為無障礙

1. iPhone 單手操作功能

為了更好的視覺體驗(yàn)和內(nèi)容展示，智能手機(jī)的尺寸也在逐年加大，很多用戶需要用兩只手才能完成操作。然而，日常生活中，還是不能避免單手使用手機(jī)。過大的屏幕尺寸可能會增加單手使用手機(jī)的負(fù)擔(dān)。因此，單手操作功能貼心的解決了這一問題，不論是屏幕頂部的按鈕，還是橫跨整個(gè)屏幕的鍵盤都可以通過開啟這一功能來一只手完成操作。在體驗(yàn)大屏視覺呈現(xiàn)的同時(shí)，依舊可以保證單手操作。

▲ iPhone 單手操作輸入鍵盤

2. 行駛中的 app 駕駛模式

開車的時(shí)候使用手機(jī)容易影響駕駛安全，所以在特定的場景下使用手機(jī)需要重點(diǎn)考慮駕駛中的操作安全，界面信息需要大、醒目，操作需要簡單、不易誤操作；如 QQ 音樂駕駛模式，使用較大的文字和按鈕，去除繁瑣的信息，輔助語音進(jìn)行操作，保障司機(jī)行駛中在1秒即可完成單次操作。

▲ QQ 音樂駕駛模式

認(rèn)知無障礙

1. 針對老年用戶

老年人的普遍共性是視力問題引起的信息閱讀能力弱、使用高新的電子設(shè)備學(xué)習(xí)成本高，但同時(shí)大多數(shù)老年人也渴望融入互聯(lián)網(wǎng)生活。在設(shè)計(jì)產(chǎn)品時(shí)，需考慮到信息有效簡潔、操作易上手、輔助工具、幫助/學(xué)習(xí)手冊等。

使用較大字號

增大系統(tǒng)字體，已經(jīng)成為行業(yè)共識。統(tǒng)一增大字號、圖標(biāo)、圖片、按鈕，結(jié)合簡單清晰的信息排版，為老年用戶打造出更為友好的界面環(huán)境。

▲ 餓了么

聽文字消息

比如微信中的“文本轉(zhuǎn)語音”，這一功能為老年用戶提供了很大的便捷性，解決了“看不清”的問題，高飽和度的模塊背景色應(yīng)用也讓信息閱讀變得更高效。

▲ 微信關(guān)懷模式

簡化信息

在適老設(shè)計(jì)中，還需要考慮到老年群體的核心需求，所以在設(shè)計(jì)中應(yīng)該減少不必要的信息，為老年群體提供核心界面功能，減少信息干擾。

▲ 平安 app

提供常用服務(wù)和學(xué)習(xí)

透出高頻操作選項(xiàng)，對比較難懂的任務(wù)提供幫助和學(xué)習(xí)。給老人帶來有效的便利，更好的融入互聯(lián)網(wǎng)。

▲ 微眾 app

2. 針對兒童用戶

簡化界面，減少文字、圖標(biāo)以及操作層級

兒童對形狀的辨別能力有限，記憶容量也相對較低，對于較復(fù)雜圖形的識別能力還有待提高，所以為了讓學(xué)齡前兒童更快地對游戲內(nèi)容和游戲方法進(jìn)行識別和操作，其界面的交互設(shè)計(jì)應(yīng)趨于簡潔。例如，對比 QQ 音樂與 Q 音寶貝（QQ 音樂的兒童版），界面上簡化了很多功能 icon，主行動點(diǎn)更大更清晰，這樣有利于減少兒童認(rèn)知負(fù)擔(dān)。

▲ Q 音寶貝和 QQ 音樂的播放器對比

使用鮮艷的顏色

在顏色審美上，學(xué)齡前兒童偏好高飽和度、高對比度的顏色。因此兒童 APP 對于畫面中的顏色搭配一般采用鮮艷的顏色，色彩搭配也較為單純，便于記憶，利于兒童熟悉界面內(nèi)容與操作過程。

▲ Q 音寶貝和嘰里呱啦

強(qiáng)故事感引導(dǎo)

兒童在熟悉的事物前更具有安全感和依賴性，所以通過營造其熟悉的事物，建立安全的情感連接。可以看到大部分 APP 都會設(shè)定一個(gè)可愛的卡通形象，來引導(dǎo)操作產(chǎn)生互動。例如寶寶巴士的奇奇和妙妙，小小優(yōu)酷的杰力豆 ZellyGo，EF 的 Roddy & his friends。

▲ 小小優(yōu)酷

使用生動的音效反饋

不僅要在畫面的具象物體設(shè)計(jì)上選擇兒童相對熟悉的事物和場景，也需要注重引導(dǎo)兒童的情緒變化，例如任務(wù)完成時(shí)使用有趣的音效來激起兒童的快樂情緒，通過兩方面的結(jié)合進(jìn)一步增加使用的沉浸感。除此之外，普通操作的交互反饋音效也可以引導(dǎo)兒童學(xué)習(xí) app 的使用，比如按鈕點(diǎn)擊、翻頁、切換視圖等。

結(jié)語

阿里早在 2013 年就開始推動互聯(lián)網(wǎng)產(chǎn)品的信息無障礙化，也受邀參與到國家無障礙標(biāo)準(zhǔn)規(guī)范制定。還作為聯(lián)合單位，參與了 W 3 C 的推薦標(biāo)準(zhǔn)《Web 內(nèi)容無障礙指南》（WCAG）2.1 版本的中文授權(quán)翻譯審閱工作，該指南于 2019 年正式公開發(fā)布，為建設(shè)更方便殘疾人士訪問的網(wǎng)站信息內(nèi)容提供了指導(dǎo)性原則。現(xiàn)在無障礙設(shè)計(jì)已經(jīng)慢慢滲透在我們?nèi)粘Ｉ畹姆椒矫婷妫桓鞣N網(wǎng)站、應(yīng)用程序也都有了類似無障礙瀏覽這樣的功能。