編輯導(dǎo)語：什么是包容性設(shè)計(jì)呢？即“主流產(chǎn)品或服務(wù)的設(shè)計(jì)能盡可能多的為人群所方便使用，無需特別的適應(yīng)或特殊的設(shè)計(jì)?！蹦敲?，金融B端產(chǎn)品應(yīng)該如何進(jìn)行包容性設(shè)計(jì)呢？本文筆者帶領(lǐng)大家一起對(duì)包容性設(shè)計(jì)進(jìn)行了探索與實(shí)踐。

包容性設(shè)計(jì)（inclusive design）是近期產(chǎn)品設(shè)計(jì)界關(guān)注度很高的一個(gè)話題。

特別是在移動(dòng)端APP領(lǐng)域，由于中國(guó)互聯(lián)網(wǎng)民已突破8億，在這8億人中，不同的群體對(duì)產(chǎn)品體驗(yàn)的要求不同，現(xiàn)有的產(chǎn)品設(shè)計(jì)方案已經(jīng)無法滿足多樣化用戶的需求。

2021年，工業(yè)和信息化部副部長(zhǎng)劉烈宏宣布，工信部將于今年1月起進(jìn)行為期一年的“互聯(lián)網(wǎng)應(yīng)用適老化及無障礙改造專項(xiàng)行動(dòng)”。

那么，對(duì)于筆者深耕的金融B端產(chǎn)品領(lǐng)域來說，探索包容性設(shè)計(jì)刻不容緩。本篇文章筆者將帶領(lǐng)大家熟悉包容性設(shè)計(jì)，以及在金融B端產(chǎn)品領(lǐng)域我們對(duì)包容性設(shè)計(jì)的探索與實(shí)踐。

一、包容性設(shè)計(jì)的定義

英國(guó)標(biāo)準(zhǔn)協(xié)會(huì)（2005）將包容性設(shè)計(jì)定義為：“主流產(chǎn)品或服務(wù)的設(shè)計(jì)能盡可能多的為人群所方便使用，無需特別的適應(yīng)或特殊的設(shè)計(jì)?！?/p>

微軟對(duì)包容性設(shè)計(jì)的解釋為：“我們的使命，是讓地球上的每個(gè)人獲得更多。設(shè)計(jì)的包容性開啟了用戶體驗(yàn)，反應(yīng)了人們?nèi)绾芜m應(yīng)周圍的環(huán)境?！?/p>

谷歌Material design如是解釋包容性設(shè)計(jì)：“一款設(shè)計(jì)良好的產(chǎn)品可供所有能力的用戶使用，包括視力低下、失明、聽力障礙、認(rèn)知障礙或運(yùn)動(dòng)障礙的用戶。改進(jìn)產(chǎn)品的無障礙功能可以增強(qiáng)所有用戶的可用性，這是非常值得做的事情?！?/p>

從英國(guó)標(biāo)準(zhǔn)協(xié)會(huì)、微軟、谷歌對(duì)包容性設(shè)計(jì)的定義中我們可以很清晰地知曉什么是包容性設(shè)計(jì)。同時(shí)，筆者根據(jù)自身經(jīng)驗(yàn)，總結(jié)了包容性設(shè)計(jì)的兩個(gè)特征：第一是多維度，第二是自定義。

圖1-1包容性設(shè)計(jì)特征

1. 多維度

多維度的意思是指設(shè)計(jì)方案不可單一，不能只解決通用維度的需求，而要清楚使用群體的特征，考慮更多可能性的設(shè)計(jì)方案，滿足不同群體的需求。

例如：從視覺層面來說（如圖1-2所示），終身看不見的盲人屬于視覺永久障礙群體；眼睛由于某些原因暫時(shí)看不清楚物體的人群屬于暫時(shí)障礙群體；開車時(shí)候不方便看手機(jī)屏幕的人群屬于情景障礙群體。

我們?cè)谠O(shè)計(jì)產(chǎn)品時(shí)候，需適當(dāng)考慮這些群體的特殊情況，多維度地去設(shè)計(jì)產(chǎn)品的功能與體驗(yàn)。

圖1-2視覺障礙分類

2. 自定義

自定義的意思是指允許用戶自主來選擇何種體驗(yàn)方式，從而協(xié)助自己完成常用場(chǎng)景下，或特殊場(chǎng)景下的某些功能。

例如通常用戶眼睛距離電腦屏幕45厘米左右，屏幕字號(hào)12px就可以保證用戶有效閱讀，但當(dāng)用戶眼睛距離屏幕超過45厘米，甚至更遠(yuǎn)時(shí)，12px的字號(hào)就會(huì)令用戶看起來略顯吃力，對(duì)于視力不佳的人來說更甚（如圖1-3所示）。

因此，在產(chǎn)品設(shè)計(jì)上，我們要考慮加入用戶可以自主改變字體大小的功能。現(xiàn)在有很多產(chǎn)品已經(jīng)做到了，例如excel、今日頭條等。

圖1-3用戶眼睛距離屏幕遠(yuǎn)近與字體大小

二、包容性設(shè)計(jì)與無障礙設(shè)計(jì)

無障礙設(shè)計(jì)大家聽得應(yīng)該也不少，包容性設(shè)計(jì)和無障礙設(shè)計(jì)概念較為相近，在日常生活中，我們會(huì)互相取用。但實(shí)際上，兩者之間還是有些許差別的。

1. 包容性設(shè)計(jì)的重點(diǎn)

在設(shè)計(jì)方案的過程中，除了要考慮滿足80%的用戶群體需求，還需在此基礎(chǔ)上去思考更多的可能性，從而滿足一些永久障礙、情境障礙、臨時(shí)障礙用戶群體的需求，輸出友善的設(shè)計(jì)方案，去包容更廣泛、更合理的真實(shí)情況。

2. 無障礙設(shè)計(jì)的重點(diǎn)

在設(shè)計(jì)的全鏈路中，針對(duì)殘障群體（重視殘疾人、聾啞人等），聚焦輸出合適某類特殊群體需求的方案。

包容性設(shè)計(jì)和無障礙設(shè)計(jì)的相似之處在于并不強(qiáng)調(diào)只有單一的方案，而是針對(duì)不同的用戶群體有不同的解決方案，從而滿足多元化需求。它們的不同之處在于，無障礙設(shè)計(jì)直接、優(yōu)先考慮到某類殘障群體，再做設(shè)計(jì)。

例如：Un Lavobos陶瓷洗手盆，設(shè)計(jì)師優(yōu)先考慮殘疾人洗手時(shí)的需求，在洗手盆底部做了一個(gè)切面，保證產(chǎn)品的靈活性可以為殘障人士服務(wù)，如圖2-1所示。

圖2-1無障礙設(shè)計(jì)案例

三、建立金融B端產(chǎn)品包容性設(shè)計(jì)的背景

根據(jù)國(guó)家統(tǒng)計(jì)局?jǐn)?shù)據(jù)顯示，2018年全國(guó)共有金融（證券、保險(xiǎn)、私募、期貨、銀行等）從業(yè)人數(shù)約800萬人。從2003年以來，一直處于穩(wěn)步上升趨勢(shì)，如圖3-1所示。

圖3-1金融從業(yè)人數(shù)

同時(shí)，金融從業(yè)者的平均年齡大約在30-40之間，這些人員大多數(shù)為客戶經(jīng)理、投研人員等，高管的年齡普遍在50-60歲之間，如圖3-2所示。

圖3-2金融從業(yè)者年齡分布

對(duì)于這30-60歲年齡段的金融從業(yè)者來說，他們?cè)谏砗托睦矸矫娑紩?huì)存在差異。同時(shí)對(duì)于單個(gè)金融從業(yè)者自身的生命周期而言，也會(huì)存在差異，例如生病、懷孕等。

筆者這里再舉兩個(gè)例子，來給大家說說包容性設(shè)計(jì)在金融B端產(chǎn)品中的重要性。

1. 色盲

色盲是指在辨別某幾種顏色方面存在缺陷，而由于辨別顏色的基因大多在X染色體上，因此色盲在男性中的發(fā)病率高于女性，大約8%的男性和0.5%的女性為色盲。由此我們可以感知到，在800萬金融從業(yè)者中，色盲也是存在的。

2. 老年人的視覺特征

視網(wǎng)膜是人類視覺感知中最重要的一部分。隨著年領(lǐng)增長(zhǎng)，視網(wǎng)膜變薄，視覺功能開始下降。人到30歲開始，感光方面就會(huì)下降，到了60歲，視覺感光只有20歲的二分之一左右。

綜上所述，金融B端產(chǎn)品引入包容性設(shè)計(jì)刻不容緩。

四、包容性設(shè)計(jì)原則在金融B端產(chǎn)品中的使用

那么在面對(duì)金融B端產(chǎn)品時(shí)，我們?cè)O(shè)計(jì)者如何做，才算是考慮到了包容性設(shè)計(jì)呢？筆者認(rèn)為：

1. 建立意識(shí)，明確包容性設(shè)計(jì)的重要性；
2. 付諸行動(dòng)，在產(chǎn)品設(shè)計(jì)中融入包容性設(shè)計(jì)。

筆者根據(jù)這些年的實(shí)際經(jīng)驗(yàn)，給大家輸出8條包容性設(shè)計(jì)原則，同時(shí)給出在金融B端產(chǎn)品中的探索（有些已落地，有些正在落地中）。

1. 采用安全感

使用金融B端產(chǎn)品的用戶，除了年輕的還有年長(zhǎng)的，因此他們?cè)谝恍┱J(rèn)知上，多少會(huì)有些差別。例如年長(zhǎng)用戶通常會(huì)覺得支付寶免密支付不安全，而年輕用戶并不會(huì)這么認(rèn)為。

因此在金融B端產(chǎn)品設(shè)計(jì)上，我們要給予用戶安全的感覺。在表格常駐編輯模式的情況下，修改過的內(nèi)容我們會(huì)給予提示（比如表格編輯框底色變?yōu)樗{(lán)色），避免年長(zhǎng)的操作者產(chǎn)生不安全感，不知道自己是否修改過了內(nèi)容，如圖4-1所示。

圖4-1表格常駐編輯模式

2. 采用高對(duì)比度的顏色模式

隨著年齡增長(zhǎng)，人的視覺感知會(huì)越來越差，同時(shí)由于硬件的問題，人們對(duì)顏色的感知也是不同的，多維度的原因，會(huì)讓金融B端產(chǎn)品在顏色的使用上需要慎重。

我們可以遵守W3C的無障礙設(shè)計(jì)原則，保證常規(guī)尺寸文本、圖標(biāo)等與背景的對(duì)比度大于4.5：1。金融B端產(chǎn)品大量為表單，我們將表單字段和內(nèi)容的顏色均設(shè)置成了#333（如圖4-2所示），大大提高了用戶獲取信息的效率。

圖4-2表單文本與背景對(duì)比度

3. 提供音效方式的設(shè)計(jì)

金融從業(yè)者通常非常繁忙，系統(tǒng)有重要信息過來的時(shí)候，如果僅僅只有文字提示，很多人會(huì)注意不到，從而錯(cuò)過了重要的需要處理的信息。因此在金融B端產(chǎn)品中，我們可以加入音效消息提示的方式，讓用戶準(zhǔn)確且快速接收消息。

4. 少依賴顏色區(qū)分重要信息

紅綠色盲為不能區(qū)分紅色和綠色，藍(lán)黃色盲為不能分辨藍(lán)色和黃色，因此在金融B端產(chǎn)品中，重要的信息不要完全使用顏色來區(qū)分，而需要加入文字信息，如圖4-3所示。

圖4-3加上文字的錯(cuò)誤信息提示

5. 多考慮容錯(cuò)機(jī)制

對(duì)于誤操作的事件，大家都會(huì)感到反悔，而對(duì)于老年人來說，這種誤操作的頻率會(huì)增大。因此在金融B端產(chǎn)品設(shè)計(jì)中，我們非常注意這個(gè)問題，在一些刪除類功能上，都會(huì)再次提醒用戶是否真的需要?jiǎng)h除，如圖4-4所示。

圖4-4刪除提示

6. 確?？牲c(diǎn)擊區(qū)域足夠大

在移動(dòng)端產(chǎn)品中，為了防止用戶手指很難準(zhǔn)確點(diǎn)擊按鈕的情況，對(duì)可點(diǎn)擊區(qū)域需足夠大的要求，被頻繁提出，而在B端產(chǎn)品中卻很少被提及。

不過筆者近期發(fā)現(xiàn)，一些金融管理者人士提出，現(xiàn)在的按鈕觸發(fā)區(qū)太小了，如果鼠標(biāo)沒有精準(zhǔn)移到圖標(biāo)上，根本無法觸發(fā)功能。因此筆者建議，除了目標(biāo)物本身的尺寸外，我們盡量加大目標(biāo)物的可觸控區(qū)，如圖4-5所示。

圖4-5加大觸控區(qū)

7. 給予用戶自定義空間

在一些已經(jīng)形成業(yè)內(nèi)標(biāo)準(zhǔn)的場(chǎng)景下，我們金融B端產(chǎn)品設(shè)計(jì)時(shí)也不要落下，應(yīng)提供給用戶自定義空間，自定義可以滿足用戶不同場(chǎng)景下的需求。

例如想看更多信息，頁(yè)面間距可以變窄；喜歡滾屏看信息，頁(yè)面間距可以變大，如圖4-6所示。讓用戶自主調(diào)整頁(yè)面布局，可以讓他們感受到產(chǎn)品的包容性。

圖4-6自主調(diào)整頁(yè)面

8. 給圖標(biāo)和圖片添加文本內(nèi)容

由于金融從業(yè)者的年齡跨度較大，因此在相同信息的認(rèn)知上會(huì)出現(xiàn)差別。例如對(duì)于“編輯”圖標(biāo)，我們業(yè)內(nèi)人士很熟悉，但是對(duì)于年長(zhǎng)者來說，并不熟悉，此時(shí)我們?cè)O(shè)計(jì)者可以放上文本提示，如圖4-7所示。

圖4-7 hover圖標(biāo)加文本提示

五、總結(jié)

不論是金融B端產(chǎn)品的設(shè)計(jì)者，還是其他產(chǎn)品的設(shè)計(jì)人員，我們能提前將包容性設(shè)計(jì)考慮進(jìn)去，那么產(chǎn)品整體都會(huì)更上一層。試想一下，如果有一天我們老了，或者我們發(fā)生了暫時(shí)性障礙，假如我們的身邊充滿了包容性設(shè)計(jì)，那我們的生活將會(huì)多么的美好。

筆者會(huì)持續(xù)探索金融B端產(chǎn)品的包容性設(shè)計(jì)，大家有任何想法或好的點(diǎn)子都可以隨時(shí)留言與我聯(lián)系喲，我們一起為產(chǎn)品的包容性貢獻(xiàn)自己的綿薄之力。

作者：知果；公眾號(hào)：果有料

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。