世界是多樣和公平的，在我們考慮大多數(shù)人和強(qiáng)者的利益時(shí)，弱勢(shì)群體一樣也需要被設(shè)計(jì)“庇護(hù)”到。本文作者將就此來談?wù)勅绾螢槿鮿?shì)群體做包容性設(shè)計(jì)之視力篇。

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

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

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

英國標(biāo)準(zhǔn)協(xié)會(huì)（2005）將包容設(shè)計(jì)定義為：

主流產(chǎn)品或服務(wù)的設(shè)計(jì)能為盡可能多的人群所方便使用，無需特別的適應(yīng)或特殊的設(shè)計(jì)。

是什么disable了我們？

從某種層面來講，其實(shí)并沒有所謂normal people和disablepeople的區(qū)分，只是我們每個(gè)人的各項(xiàng)能力（capability）有所差異而已。

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

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

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

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

下面以視力這種capability為例，分析視力可能出現(xiàn)的幾種問題，并結(jié)合一些國際通用的guidelines提出了一些設(shè)計(jì)的建議。

常見的視力問題來自于以下四個(gè)方面：

1. 視覺敏銳度：即人眼分辨物體細(xì)節(jié)的能力。近視、遠(yuǎn)視或白內(nèi)障會(huì)導(dǎo)致用戶視覺敏銳度下降。在視覺敏銳度較弱的用戶眼里，圖像細(xì)節(jié)變得模糊，只有較大的輪廓還能得以辨識(shí)，如下圖中a：
2. 對(duì)比靈敏度：即在前景色和背景色之間辨明亮度的能力。眼睛對(duì)比靈敏度較低的用戶看到的圖像像透過沙塵暴看到的樣子，蒙了一層灰色，如下圖中b：
3. 色彩感知度：即對(duì)色相的感知度，色弱或色盲是指辨色過程中有環(huán)節(jié)出了問題，人眼辨別顏色的能力發(fā)生障礙。色盲以紅綠色盲較為常見。在紅綠色盲的眼里見到的圖像如下圖中c：
4. 有效視野：視網(wǎng)膜病變導(dǎo)致用戶有效視野發(fā)生改變。視野消失可能發(fā)生在視野中部（如青光眼），也有可能發(fā)生在視野周邊（如糖尿病引起的視網(wǎng)膜病變），他們看到的圖像如下圖中d,e：

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

設(shè)計(jì)建議

基于以上四種視力上的問題，我們可以對(duì)癥下藥從以下幾方面檢驗(yàn)?zāi)阍O(shè)計(jì)的界面是否最大程度上包容了這些視覺上有問題的用戶。

增加視覺元素的可識(shí)別度：針對(duì)視覺敏銳度及對(duì)比靈敏度方面的問題

使用合適的文字大小、字間距和行距。WCAG(Web Content Accessibility Guidelines) 2.0 里關(guān)于文字可見性有具體的標(biāo)準(zhǔn)。將文字大小做成可調(diào)節(jié)是一種不錯(cuò)的方法，我們的手機(jī)以及一些閱讀類的App都會(huì)有設(shè)置字號(hào)大小的功能，同時(shí)支持多國語言的選擇，以便讓更多的人可以使用。

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

文字與背景的對(duì)比要足夠。背景過于復(fù)雜，前景的文字將變得難以辨識(shí)，可以通過加強(qiáng)二者對(duì)比的方式，比如在背景圖上加上一個(gè)半透明的蒙版。

將文字轉(zhuǎn)化為語音。包容性設(shè)計(jì)里一種十分常見的思維就是利用用戶較強(qiáng)的ability，揚(yáng)長(zhǎng)補(bǔ)短。比如用戶的視力可能不太好，我們可以將文字信號(hào)轉(zhuǎn)化為語音信號(hào)，讓用戶較強(qiáng)的聽力去接收信號(hào)。百度百科的H5頁面就有語音播報(bào)的功能。這一功能對(duì)視力正常的使用者來說也是有益的，因?yàn)樗梢赃吢犨呑鰟e的事情。

合理運(yùn)用顏色：針對(duì)色彩感知度方面的問題

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

避免只使用文字作為唯一的識(shí)別信號(hào)。我們?cè)谥谱鲌D表時(shí)，只用顏色來區(qū)分不同的組份，在色彩感知度弱的用戶眼里可能就完全分不清。但是如果我們給每個(gè)組份同時(shí)加上紋理這種識(shí)別信號(hào)，這些用戶就無需依賴顏色也能分辨。如下圖所示：

集中布局相關(guān)聯(lián)的內(nèi)容：針對(duì)有效視野上的問題

不久前，同事提出一個(gè)有意思的問題：為什么搜索引擎的搜索列表頁的有效區(qū)域只有那么窄的一點(diǎn)點(diǎn)？

具體如下圖，在大屏幕上更夸張，有效區(qū)域大約只占了四分之一。

寫到這里我想我有了答案：為了讓文字集中在用戶最有效的視野范圍內(nèi)。如果為了節(jié)省空間，設(shè)計(jì)設(shè)計(jì)師真的把內(nèi)容撐滿了整個(gè)屏幕，我們恐怕得不停地?cái)[頭才能看全一行文字吧？！

WCAG2.0里對(duì)于web端文本塊的視覺呈現(xiàn)，AAA級(jí)標(biāo)準(zhǔn)定義道：

寬度不超過80個(gè)字符或符號(hào)（如果是中日韓字體，不超過40個(gè)）；段落里的行間距（行隔）至少是1.5倍行距，段落間距至少比行間距大1.5倍。

將自己模擬成極端用戶

有心的設(shè)計(jì)師可以通過圖像處理軟件模擬這些特殊用戶看到的界面，來確保他們看到的界面仍然是可用的。PS里有專門的紅綠色盲模式，可見PS也是鼓勵(lì)設(shè)計(jì)師們?cè)趯⒁曈X稿交出去前自己做一些色彩的校驗(yàn)。

Inclusive design toolkit 官網(wǎng)有專門的模擬軟件。設(shè)計(jì)師可以通過該軟件模擬不能視力狀況下的用戶之所見，可以調(diào)節(jié)嚴(yán)重程度。還可以上傳自己的圖片進(jìn)行模擬。

結(jié)語

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

本文有自己對(duì)包容性設(shè)計(jì)的理解，也總結(jié)了當(dāng)包容性設(shè)計(jì)成為一種設(shè)計(jì)方法時(shí)是如何運(yùn)用的：從“視力”這種能力出發(fā)，枚舉常見的幾種視力問題，再從問題出發(fā)結(jié)合設(shè)計(jì)元素（文字，圖形，顏色等）給出了三方面的設(shè)計(jì)建議：增加可識(shí)別度、合理運(yùn)用顏色以及集中布局相關(guān)聯(lián)的內(nèi)容，從而達(dá)到讓界面更包容的目的。包容性設(shè)計(jì)是一個(gè)開放且有趣的課題，與它接觸從研一遇見我的導(dǎo)師董華教授開始，感謝董老師讓我在學(xué)校的三年過得充實(shí)且有趣。

想要了解更多關(guān)于包容性設(shè)計(jì)的同學(xué)請(qǐng)參看：http://www.inclusivedesigntoolkit.com。

本文由 @點(diǎn)融設(shè)計(jì)中心?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。