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

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

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

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

一、為何包容？

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

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

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

的確，你有恢復的時間，但盲人沒有。

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

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

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

二、怎樣包容？

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

文本描述：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最好不要做：

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

你可以做到：

1. 將圖標中的信息提煉為文本
2. 將信息不僅僅用顏色表達出來
3. 提供將多媒體內容轉換為文本的工具

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

三、深入了解

1. 不僅僅是一部分

讓我們進入一個場景：

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

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

以及另一個場景：

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

當然，你可能沒辦法體驗這種感受，但我們仔細一想，這種情況同樣會影響到我們。

在第一個場景里，我們會發(fā)現(xiàn)自己有時會因為操作不便（抱著嬰兒或者手拿刀具）而無法打開紅包，這同樣是一種障礙。

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

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

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

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

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

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

四、做出改變

首先，讓我們通過幾個簡單的要求讓你的產品擁有更多的包容性：

1）保證對比度

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

2）順序即秩序

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

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

讓我們尋找一些能幫助人們運用順序的方法：

讓用戶有能力跳過沒有必要的內容。

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

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

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

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

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

②為圖標，圖片，視頻等內容提供文字描述，清晰易懂還包含重要信息是重要的關注點。

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

六、即時反饋

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

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

七、易于接觸與理解

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

更多

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