作為設計師，我們總說：我要讓我的設計更漂亮和高大上，要完成老板的業務目標，要讓多數用戶的體驗順暢。我們總是優先考慮大多數人和強者的利益，然而世界是多樣和公平的，除了這些我們眼中的“目標用戶”和“大多數人”，還有一群被我們忽略的弱勢群體一樣需要被設計“庇護”到，所以今天，我想說說包容性設計。

歡迎關注點融設計中心DDC微信公眾號：「微信ID：DR_DDC」

等等，不要以為我要站在宇宙中心呼喚愛，包容性設計并不等同于專門為弱勢群體所做的設計。

• 之于弱勢群體——包容性設計是溫暖的，他們不會感覺自己是被拋棄或者被特殊對待。
• 之于企業——包容性設計是商業的，根據長尾效應，如果我們做設計的時候考慮到了極端的情況，長尾部分的用戶也蘊藏著巨大的商機，如圖。
• 之于設計師——包容性設計是一種有用的設計方法，類似于運動員在腳上綁沙包跑步這種訓練方式，將自己置身于最難的境地，如果連最難的case都解決了，一般的情況是不是易如反掌？

英國標準協會（2005）將包容設計定義為：“主流產品或服務的設計能為盡可能多的人群所方便使用，無需特別的適應或特殊的設計。”

是什么disable了我們？

從某種層面來講，其實并沒有所謂normal people和disablepeople的區分，只是我們每個人的各項能力（capability）有所差異而已。

舉個例子，《穿普拉達的女王》里有這么一個片段：新入職的安迪雙手拎滿了大包小包，同時捧著四杯滾燙的星巴克，需要拉開辦公室的門，可以想象她做起來有多艱難。

單看安迪，她就是我們眼中的normal people，然而，此情此景下我們可以理解為她就是“disable”的，她的雙手被完全地占用了。所以disable這個標簽不應該打在一個人的身上，它描述的是在特定場景下，用戶的某項能力低于正常水平的一種狀況。在經典的包容性設計研究體系里，以下各項能力是經常會被大家考慮的：

我們來試著用包容性設計的思維方式來思考之前提到的例子：如果在設計門的時候，設計師考慮到了輪椅用戶（Reach& Stretch這種能力低于正常水平的用戶）的需求，會議室的門被設計成了感應的，安迪是不是可以輕松從容地走進辦公室。感應的門不僅照顧了輪椅用戶的需求，也讓正常用戶可以更方便地使用。

作為用戶體驗設計者、界面設計師，如何將包容性設計運用到實際工作中來，讓我們的界面更包容？首先問自己：人們使用了哪些能力（capability）在哪些情況下去跟界面交互？這些能力的缺失或不足會導致什么樣的問題？

下面以視力這種capability為例，分析視力可能出現的幾種問題，并結合一些國際通用的guidelines提出了一些設計的建議。

常見的視力問題來自于以下四個方面：視覺敏銳度、對比靈敏度、色彩感知度及有效視野。

• 視覺敏銳度

視覺敏銳度是人眼分辨物體細節的能力。近視、遠視或白內障會導致用戶視覺敏銳度下降。在視覺敏銳度較弱的用戶眼里，圖像細節變得模糊，只有較大的輪廓還能得以辨識，如下圖中a：

• 對比靈敏度

對比靈敏度是在前景色和背景色之間辨明亮度的能力。眼睛對比靈敏度較低的用戶看到的圖像像透過沙塵暴看到的樣子，蒙了一層灰色，如下圖中b：

• 色彩感知度

色彩感知度，即對色相的感知度，色弱或色盲是指辨色過程中有環節出了問題，人眼辨別顏色的能力發生障礙。色盲以紅綠色盲較為常見。在紅綠色盲的眼里見到的圖像如下圖中c：

• 有效視野

視網膜病變導致用戶有效視野發生改變。視野消失可能發生在視野中部（如青光眼），也有可能發生在視野周邊（如糖尿病引起的視網膜病變），他們看到的圖像如下圖中d,e：

除了眼睛本身帶來的視力問題，用戶在何種情況下與界面交互呢？強光下，屏幕亮度必須加強才能看清；動態的界面（火車站的火車出發到站滾動顯示屏）更不容易看清細節；分辨率比較低的頁面載體（如電視機的屏幕）可能和你在自己電腦屏幕上的視覺稿大不相同。

設計建議

基于以上四種視力上的問題，我們可以對癥下藥從以下幾方面檢驗你設計的界面是否最大程度上包容了這些視覺上有問題的用戶。

增加視覺元素的可識別度——針對視覺敏銳度及對比靈敏度方面的問題

使用合適的文字大小、字間距和行距。WCAG(Web Content Accessibility Guidelines) 2.0 里關于文字可見性有具體的標準。將文字大小做成可調節是一種不錯的方法，我們的手機以及一些閱讀類的App都會有設置字號大小的功能，同時支持多國語言的選擇，以便讓更多的人可以使用。

避免使用下劃線、斜體以及裝飾字體。從下圖能看出無襯線的正體字的可識別性是最強的，在同等模糊的條件下仍然能夠得以辨識

文字與背景的對比要足夠。背景過于復雜，前景的文字將變得難以辨識，可以通過加強二者對比的方式，比如在背景圖上加上一個半透明的蒙版。

將文字轉化為語音。包容性設計里一種十分常見的思維就是利用用戶較強的ability，揚長補短。比如用戶的視力可能不太好，我們可以將文字信號轉化為語音信號，讓用戶較強的聽力去接收信號。百度百科的H5頁面就有語音播報的功能。這一功能對視力正常的使用者來說也是有益的，因為他可以邊聽邊做別的事情。

合理運用顏色——針對色彩感知度方面的問題

紅綠顏色使用時要格外小心。由下圖可見，在綠色背景上放置紅色前景，紅綠色盲用戶基本無法辨識，反之亦然。

避免只使用文字作為唯一的識別信號。我們在制作圖表時，只用顏色來區分不同的組份，在色彩感知度弱的用戶眼里可能就完全分不清。但是如果我們給每個組份同時加上紋理這種識別信號，這些用戶就無需依賴顏色也能分辨。如下圖所示：

集中布局相關聯的內容——針對有效視野上的問題

不久前，同事提出一個有意思的問題：為什么搜索引擎的搜索列表頁的有效區域只有那么窄的一點點？具體如下圖，在大屏幕上更夸張，有效區域大約只占了四分之一。寫到這里我想我有了答案：為了讓文字集中在用戶最有效的視野范圍內。如果為了節省空間，設計設計師真的把內容撐滿了整個屏幕，我們恐怕得不停地擺頭才能看全一行文字吧。WCAG2.0里對于web端文本塊的視覺呈現，AAA級標準定義道：寬度不超過80個字符或符號（如果是中日韓字體，不超過40個）；段落里的行間距（行隔）至少是1.5倍行距，段落間距至少比行間距大1.5倍。

將自己模擬成極端用戶

有心的設計師可以通過圖像處理軟件模擬這些特殊用戶看到的界面，來確保他們看到的界面仍然是可用的。PS里有專門的紅綠色盲模式，可見PS也是鼓勵設計師們在將視覺稿交出去前自己做一些色彩的校驗。

Inclusive design toolkit 官網有專門的模擬軟件。設計師可以通過該軟件模擬不能視力狀況下的用戶之所見，可以調節嚴重程度。還可以上傳自己的圖片進行模擬。

結語

如果把好的UI比喻成一個優秀的人，他聰明能干（可用性），美麗大方（美觀性），但還有非常重要的一個品質不容忽視，那就是他需要正直善良，一個正直善良的產品應該是包容的。包容的界面不僅讓弱勢群體能夠很好的使用，讓主流用戶用起來也更加地驚喜，何樂而不為。

本文有自己對包容性設計的理解，也總結了當包容性設計成為一種設計方法時是如何運用的：從“視力”這種能力出發，枚舉常見的幾種視力問題，再從問題出發結合設計元素（文字，圖形，顏色等）給出了三方面的設計建議：增加可識別度、合理運用顏色以及集中布局相關聯的內容，從而達到讓界面更包容的目的。包容性設計是一個開放且有趣的課題，與它接觸從研一遇見我的導師董華教授開始，感謝董老師讓我在學校的三年過得充實且有趣。想要了解更多關于包容性設計的同學請參看：http://www.inclusivedesigntoolkit.com。

歡迎關注點融設計中心DDC微信公眾號：「微信ID：DR_DDC」

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com