在龐大的互聯(lián)網(wǎng)世界里，有許多用戶的存在，其中有一小部分人，可能理解能力不強(qiáng)，或者視聽能力受限，我們在設(shè)計(jì)產(chǎn)品時(shí)應(yīng)當(dāng)盡量去給他們提供更好的體驗(yàn)。本文作者融合行業(yè)經(jīng)驗(yàn)和實(shí)際反饋，完成了這份「Systematize Design 包容性設(shè)計(jì)指南」，一起來看一下吧。

在龐大的互聯(lián)網(wǎng)世界里，我們有許多用戶的存在，在這其中，有許多微小的團(tuán)體，他們或許理解能力不強(qiáng)，視聽能力受限。我們有理由，也有使命去給他們提供更好的體驗(yàn)。

我們正在逐步鉆研，融合各行各業(yè)提供的經(jīng)驗(yàn)和實(shí)際生活中行動(dòng)受限人士的反饋，完成一份「Systematize Design 包容性設(shè)計(jì)指南」，這份指南能讓你設(shè)計(jì)出可使更多人流暢使用的互聯(lián)網(wǎng)產(chǎn)品。

讓我們從現(xiàn)在開始，凝聚力量和經(jīng)驗(yàn)，構(gòu)建一個(gè)更美好的未來。

一、為何包容？

在這個(gè)多樣化的世界上，并不是所有人都能毫無障礙地使用各種產(chǎn)品。

優(yōu)秀的包容性設(shè)計(jì)，不僅讓殘疾人用戶正常地與產(chǎn)品交互，還會為普通人提供更好的使用體驗(yàn)。

讓我們設(shè)想一個(gè)場景：假設(shè)有一天，你的雙眼暫時(shí)無法正常使用。這個(gè)時(shí)候，你如何保證和外界的交流？依靠手機(jī)？在你未學(xué)習(xí)如何使用無障礙功能前，你甚至不知道如何啟動(dòng)他們。就算你早有準(zhǔn)備，或者你的親友幫助你開啟了這些功能，還是有許多應(yīng)用的無障礙功能完全不可用，這些應(yīng)用甚至可能是所謂的「國民級應(yīng)用」，他們讓你的互聯(lián)網(wǎng)生活極大的受阻。

的確，你有恢復(fù)的時(shí)間，但盲人沒有。

讓我們設(shè)想另一個(gè)場景：也許又有一天，你的雙耳突然失聰?？粗曨l里張口閉口的人，看見現(xiàn)實(shí)里張口閉口的人，而你什么也聽不見。你又如何去“聽”他們在說什么呢？

聽障人士的世界與普通人同樣是截然不同的。他們只能看，而不能聽。當(dāng)有人隨音樂而舞蹈時(shí)，他沒法理解他們在干什么；當(dāng)他在看視頻的時(shí)候，他也無法理解視頻里的人在說什么。

在這種情況下，能夠讓盲人和聽障人士甚至于部分感受器官無法使用的「正常人」與現(xiàn)代社會接軌的設(shè)計(jì)，就是包容性設(shè)計(jì)。

二、怎樣包容？

讓我們先從視障人士的部分使用路徑開始，了解他們是如何接觸互聯(lián)網(wǎng)的。

文本描述：

1）普通人是怎么完成操作的？

輸入信息：依靠視覺感知得來的信息做出操作。

可以直接輸入文本，觀察到文案，顏色等反饋信息的變化，依照視覺做出操作：

1. 利用視覺查找到所要進(jìn)行的操作
2. 直接根據(jù)視覺指示做出操作

做出操作：依靠視覺感知得來的信息做出操作。

可以直接輸入文本，觀察到文案，顏色等反饋信息的變化，依照視覺做出操作：

1. 利用視覺查找到所要進(jìn)行的操作
2. 直接根據(jù)視覺指示做出操作

2）視障人士是怎么完成操作的？

輸入信息：依靠聽覺感知得來的信息做出操作。

需要使用屏幕閱讀器與語音輸入軟件（通常伴隨極大誤差），且無法感知能被朗讀出來的文本除讀音外的變化。

1. 利用屏幕閱讀器查找到所要進(jìn)行的操作
2. 根據(jù)屏幕閱讀器所提供的信息利用其它工具做出操作

做出操作：依照聽覺感知得來的信息做出操作。

需要使用屏幕閱讀器與語音輸入軟件（通常伴隨極大誤差），且無法感知能被朗讀出來的文本除讀音外的變化。

1. 利用屏幕閱讀器查找到所要進(jìn)行的操作
2. 根據(jù)屏幕閱讀器所提供的信息做出操作

依此，我們可以得出一個(gè)結(jié)論： 在視障人士的操作過程中，可聽的文本信息是十分重要的。向他們所提供的信息需要做到「簡單」、「關(guān)鍵」、「清晰」。

現(xiàn)在，讓我們對比聽障人士與普通人獲取信息的方法，了解他們是如何接觸互聯(lián)網(wǎng)的。

依此，我們可以得出一個(gè)結(jié)論： 在聽障人士的操作過程中，可視的文本信息是十分重要的。向他們所提供的信息同樣需要做到「簡單」、「關(guān)鍵」、「清晰」。

在逐步的總結(jié)中，我們可以得出下面的結(jié)論：

最好不要做：

1. 將信息過度精煉，使其難以發(fā)現(xiàn)
2. 癡迷于「懸浮」之類的交互方式
3. 癡迷于用顏色和圖標(biāo)表達(dá)一切信息
4. 讓過多無用文本充斥于頁面

你可以做到：

1. 將圖標(biāo)中的信息提煉為文本
2. 將信息不僅僅用顏色表達(dá)出來
3. 提供將多媒體內(nèi)容轉(zhuǎn)換為文本的工具

這是最基礎(chǔ)的對于包容性設(shè)計(jì)的原則，接下來，讓我們了解對于更多人也有效的包容性設(shè)計(jì)措施。

三、深入了解

1. 不僅僅是一部分

讓我們進(jìn)入一個(gè)場景：

如今許多深受視障者喜愛的應(yīng)用軟件，也曾制造過麻煩。鄭銳清楚地記得，“微信紅包”正式推出的那年春節(jié)，引起了搶紅包的熱潮，他能聽到紅包提示音此起彼伏地響起，但是打開拆紅包的頁面后，按鈕沒有被讀出，紅包無法被點(diǎn)開，“每一次打開紅包都有一種失落感，就覺得被微信拋棄了，只能看著紅包干著急?！彼杏X自己被關(guān)進(jìn)了小黑屋，屋子外面是別人的鞭炮聲。

——引用自 鋅財(cái)經(jīng)《科技平權(quán)：殘障者在互聯(lián)網(wǎng)世界里，換了種活法》

以及另一個(gè)場景：

你面對著一個(gè)「極為精簡」的界面，卻完全無法理解其中高度抽象的圖標(biāo)的含義，這使得你無法做出操作，更可怕的是，這些圖標(biāo)完全沒有任何提示，你試圖用做出各種操作：懸浮，滑動(dòng)，尋找展開描述的按鈕，然而都沒有效果，你依舊無法了解這些圖標(biāo)的含義?，F(xiàn)在，你就被困在一個(gè)頁面上了，迷茫無助。

當(dāng)然，你可能沒辦法體驗(yàn)這種感受，但我們仔細(xì)一想，這種情況同樣會影響到我們。

在第一個(gè)場景里，我們會發(fā)現(xiàn)自己有時(shí)會因?yàn)椴僮鞑槐悖ūе鴭雰夯蛘呤帜玫毒撸┒鵁o法打開紅包，這同樣是一種障礙。

在第二個(gè)場景里，我們會發(fā)現(xiàn)即使自己「智力正?！梗矔錾蠈D標(biāo)等操作元素的理解不完全的情況，同樣會讓你陷入困難的境地。

從這，我們便可以發(fā)現(xiàn)：所有人都在某些時(shí)候是殘疾人，無障礙的產(chǎn)品對所有用戶都是更好用的產(chǎn)品。

讓我們看看谷歌安卓無障礙團(tuán)隊(duì)與他們的 Design Lead 做出了什么優(yōu)秀的包容性設(shè)計(jì)：

之前也提到了，每個(gè)人在某些時(shí)候都有殘疾。在做無障礙工作的同時(shí)，我了解到了很多能夠幫助到所有人的無障礙工具。

• Live Transcribe （我負(fù)責(zé)的產(chǎn)品，用語音識別幫助聾人聽寫對話）：我在開會時(shí)會用它來記筆記，也會用來和英語不是那么流利的同事交流。
• Sound Amplifier（另一個(gè)我負(fù)責(zé)的產(chǎn)品，幫助聽障人士的語音擴(kuò)大器）：我會配合藍(lán)牙耳機(jī)使用，這樣在另一個(gè)房間里也能聽清電視的聲音。
• 我?guī)椭^視力下降的人（比如同事的老年家屬）找到相關(guān)的視力設(shè)定，像是大號字體、大號圖標(biāo)，還有放大鏡功能。
• 很多人喜歡黑暗模式，但是很多app還沒有支持黑暗模式。其實(shí)在安卓的進(jìn)階無障礙設(shè)定里，可以強(qiáng)制所有app使用自動(dòng)黑暗模式（這是幫助畏光癥的功能），我?guī)椭^很多人找到它。

沒錯(cuò)，這些都算是包含性設(shè)計(jì)，或者說無障礙設(shè)計(jì)。它不僅對部分人群有幫助，對我們大多人也有幫助。

四、做出改變

首先，讓我們通過幾個(gè)簡單的要求讓你的產(chǎn)品擁有更多的包容性：

1）保證對比度

這里的對比度不僅指的是「顏色對比度」，也指的是擁有不同含義的組件間的「對比度」，例如：代表含義一致的圖標(biāo)采用的設(shè)計(jì)方案不同，會讓用戶感到迷茫；又比如：表達(dá)不同含義的圖標(biāo)設(shè)計(jì)方案趨同，也會讓用戶感到迷茫。

2）順序即秩序

文字和段落以不改變內(nèi)容含義的次序呈現(xiàn)?！Z出 WC3 WCAG（Web 內(nèi)容無障礙指南）2.1

在完成設(shè)計(jì)時(shí)，一般會按照自上到下的順序排列操作順序，在需要時(shí)，可以按照內(nèi)容重要性排列操作順序，不過請務(wù)必記?。哼@是建立在人們能理解的順序之上的。

讓我們尋找一些能幫助人們運(yùn)用順序的方法：

讓用戶有能力跳過沒有必要的內(nèi)容。

如果你希望利用鍵盤和屏幕閱讀器來瀏覽網(wǎng)頁，卻發(fā)現(xiàn)你需要一個(gè)個(gè)手動(dòng)跳過網(wǎng)頁頂欄的按鈕才能查看內(nèi)容，這絕對不是一個(gè)好體驗(yàn)，試著為用戶使用 Tab 導(dǎo)航時(shí)提供一個(gè)「跳轉(zhuǎn)到主內(nèi)容」的按鈕。

五、文字是表述的最佳方案

圖片，圖標(biāo)，視頻內(nèi)容都是視障人士無法觸及的內(nèi)容，抽象且需要一定時(shí)間了解。如果有能力的話，做到以下幾點(diǎn)不僅可以幫助到視障人士，還可以讓更多人輕松的使用你的產(chǎn)品：

①狀態(tài)與許多其他的反饋不應(yīng)止步于顏色和圖標(biāo)。

顏色并不是作為傳達(dá)信息、表明動(dòng)作、提示響應(yīng)或區(qū)分視覺元素的唯一視覺手段?！Z出 WC3 WCAG（Web 內(nèi)容無障礙指南）2.1

②為圖標(biāo)，圖片，視頻等內(nèi)容提供文字描述，清晰易懂還包含重要信息是重要的關(guān)注點(diǎn)。

千萬注意！可不要癡迷于提供過多的信息，你肯定不希望讓屏幕閱讀器播報(bào)一個(gè)圖標(biāo)的含義后，再閱讀一遍這個(gè)圖標(biāo)旁邊的描述文字吧？

六、即時(shí)反饋

反饋用戶的操作是十分重要的，現(xiàn)在試試看使用Tab鍵來選擇組件，這些組件大多會有相應(yīng)的反饋，無論是顏色變化還是邊框加粗，都有助于你注意重點(diǎn)，你可以試試看注意以下幾點(diǎn)：

1. 提供一些細(xì)微的反饋，聲音，震動(dòng)都是好辦法，但不要把他們當(dāng)作主要反饋方法。
2. 不要讓顏色成為唯一的提示。的確，顏色是一種很好的提示方式，但如果只有顏色能提供反饋提示就太單一了。這對某些注意力渙散的人群和色盲人群并不友好，可以適當(dāng)輔以其他的手段來做出反饋

七、易于接觸與理解

1. 避免過小的字體，圖標(biāo)，組件，與沒必要的裝飾，他們會讓理解和接觸內(nèi)容變得困難；
2. 如果有需要特定手勢才能觸發(fā)的操作，請確保有其他常見的交互方式來觸發(fā)它；
3. 組件的可點(diǎn)擊區(qū)域足夠大、間距足夠遠(yuǎn)，不要讓它們變成「小巧玲瓏」而無用的東西。

更多

本文來自 Cladonia Design Studios 和 Systematize Design 社區(qū)成員的貢獻(xiàn)，遵循 CC0 協(xié)議，這代表您可以復(fù)制、修改、發(fā)行和表演本作品，甚至可用于商業(yè)性目的，都無需要求同意。