SystematizeDesign包容性設計指南class="aligncentersize-fullwp-image-5726499"src="/wp-files/2023/01/d9vw4r2CR2rcfEC2zSMu.png"alt=""width="900"height="420"/>

在浩大的互聯網世界里，我們有很多用戶的存在，在這其中，有很多微小的團體，他們或許理解力量不強，視聽力量受限。我們有理由，也有使命去給他們供應更好的體驗。

我們正在逐步鉆研，融合各行各業供應的閱歷和實際生活中行動受限人士的反饋，完成一份「SystematizeDesign包涵性設計指南」，這份指南能讓你設計出可使更多人流暢使用的互聯網產品。

讓我們從現在開頭，分散力氣和閱歷，構建一個更美妙的將來。

一、為何包涵？

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

優秀的包涵性設計，不僅讓殘疾人用戶正常地與產品交互，還會為一般人供應更好的使用體驗。

讓我們設想一個場景：假設有一天，你的雙眼臨時無法正常使用。這個時候，你如何保證和外界的溝通？依靠手機？在你未學習如何使用無障礙功能前，你甚至不知道如何啟動他們。就算你早有預備，或者你的親友關心你開啟了這些功能，還是有很多應用的無障礙功能完全不行用，這些應用甚至可能是所謂的「國民級應用」，他們讓你的互聯網生活極大的受阻。

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

讓我們設想另一個場景：或許又有一天，你的雙耳突然失聰。看著視頻里張口閉口的人，觀察現實里張口閉口的人，而你什么也聽不見。你又如何去“聽”他們在說什么呢？

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

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

二、怎樣包涵？

讓我們先從視障人士的部分使用路徑開頭，了解他們是如何接觸互聯網的。

文本描述：

1）一般人是怎么完成操作的？

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

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

利用視覺查找到所要進行的操作直接依據視覺指示做出操作做出操作：依靠視覺感知得來的信息做出操作。

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

利用視覺查找到所要進行的操作直接依據視覺指示做出操作2）視障人士是怎么完成操作的？

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

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

利用屏幕閱讀器查找到所要進行的操作依據屏幕閱讀器所供應的信息利用其它工具做出操作做出操作：依照聽覺感知得來的信息做出操作。

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

利用屏幕閱讀器查找到所要進行的操作依據屏幕閱讀器所供應的信息做出操作依此，我們可以得出一個結論：在視障人士的操作過程中，可聽的文本信息是非常重要的。向他們所供應的信息需要做到「簡潔」、「關鍵」、「清楚」。

現在，讓我們對比聽障人士與一般人獵取信息的方法，了解他們是如何接觸互聯網的。

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

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

最好不要做：

將信息過度精煉，使其難以發覺癡迷于「懸浮」之類的交互方式癡迷于用顏色和圖標表達一切信息讓過多無用文本充斥于頁面你可以做到：

將圖標中的信息提煉為文本將信息不僅僅用顏色表達出來供應將多媒體內容轉換為文本的工具這是最基礎的對于包涵性設計的原則，接下來，讓我們了解對于更多人也有效的包涵性設計措施。

三、深化了解

1.不僅僅是一部分

讓我們進入一個場景：

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

——引用自鋅財經《科技平權：殘障者在互聯網世界里，換了種活法》

以及另一個場景：

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

當然，你可能沒方法體驗這種感受，但我們認真一想，這種狀況同樣會影響到我們。

在第一個場景里，我們會發覺自己有時會由于操作不便（抱著嬰兒或者手拿刀具）而無法打開紅包，這同樣是一種障礙。

在其次個場景里，我們會發覺即使自己「智力正常」，也會遇上對圖標等操作元素的理解不完全的狀況，同樣會讓你陷入困難的境地。

從這，我們便可以發覺：全部人都在某些時候是殘疾人，無障礙的產品對全部用戶都是更好用的產品。

讓我們看看谷歌安卓無障礙團隊與他們的DesignLead做出了什么優秀的包涵性設計：

之前也提到了，每個人在某些時候都有殘疾。在做無障礙工作的同時，我了解到了許多能夠關心到全部人的無障礙工具。

LiveTranscribe（我負責的產品，用語音識別關心聾人聽寫對話）：我在開會時會用它來記筆記，也會用來和英語不是那么流利的同事溝通。SoundAmplifier（另一個我負責的產品，關心聽障人士的語音擴大器）：我會協作藍牙耳機使用，這樣在另一個房間里也能聽清電視的聲音。我關心過視力下降的人（比猶如事的老年家屬）找到相關的視力設定，像是大號字體、大號圖標，還有放大鏡功能。許多人喜愛黑暗模式，但是許多app還沒有支持黑暗模式。其實在安卓的進階無障礙設定里，可以強制全部app使用自動黑暗模式（這是關心畏光癥的功能），我關心過許多人找到它。沒錯，這些都算是包含性設計，或者說無障礙設計。它不僅對部分人群有關心，對我們大多人也有關心。

四、做出轉變

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

1）保證對比度

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

2）挨次即秩序

文字和段落以不轉變內容含義的次序呈現。——語出WC3WCAG（Web內容無障礙指南）2.1

在完成設計時，一般會根據自上到下的挨次排列操作挨次，在需要時，可以根據內容重要性排列操作挨次，不過請務必記住：這是建立在人們能理解的挨次之上的。

讓我們查找一些能關心人們運用挨次的方法：

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

假如你盼望利用鍵盤和屏幕閱讀器來掃瞄網頁，卻發覺你需要一個個手動跳過網頁頂欄的按鈕才能查看內容，這肯定不是一個好體驗，試著為用戶使用Tab導航時供應一個「跳轉到主內容」的按鈕。

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

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

①狀態與很多其他的反饋不應止步于顏色和圖標。

顏色并不是作為傳達信息、表明動作、提示響應或區分視覺元素的唯一視覺手段。——語出WC3WCAG（Web內容無障礙指南）2.1

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

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

六、即時反饋

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

供應一些微小的反饋，聲音，震驚都是好方法，但不要把他們當作主要反饋方法。不要讓顏色成為唯一的提示。的確，顏色是一種很好的提示方式，但假如只有顏色能供應反饋提示就太單一了。這對某些留意力渙散的人群和色盲人群并不友好，可以適當輔以其他的手段來做出反饋七、易于接觸與理解

避開過小的字體，圖標，組件，與沒必要的裝飾，他們會讓理解和