2022-5-17 ui設(shè)計(jì)分享達(dá)人
老齡化社會(huì)已經(jīng)到來(lái)，如何讓中老年群體更好地使用互聯(lián)網(wǎng)產(chǎn)品是當(dāng)今的熱門(mén)話題。貓眼演出設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)的一個(gè) B 端項(xiàng)目的使用人群需覆蓋到中老年用戶，也屬于適老化的涵蓋范疇。
在前期調(diào)研和設(shè)計(jì)環(huán)節(jié)中，我們收集了一些相關(guān)的文獻(xiàn)及案例，并且結(jié)合項(xiàng)目實(shí)踐有所思考和沉淀，在這里與大家分享。
世界衛(wèi)生組織根據(jù)現(xiàn)代人生命狀況，提出了人生階段年齡的新劃分。45~59 歲為中年人；60~74 歲為年輕老年人；75~89 歲為老年人；90 歲以上為長(zhǎng)壽老人。[1]
隨著年齡的增長(zhǎng)，人們的身體機(jī)能、心理狀態(tài)、認(rèn)知能力等都會(huì)出現(xiàn)衰退的情況。
適老化設(shè)計(jì)是無(wú)障礙設(shè)計(jì)中的一種。無(wú)障礙設(shè)計(jì)于 1974 年由聯(lián)合國(guó)組織提出，設(shè)計(jì)中需要充分考慮具有不同程度生理傷殘缺陷者和正?；顒?dòng)能力衰退者（如殘疾人、老年人）的使用需求。[2]
目前互聯(lián)網(wǎng)產(chǎn)品中大多數(shù)的適老化設(shè)計(jì)，主要是集中在 C 端。針對(duì)不同障礙（視覺(jué)、肢體、聽(tīng)覺(jué)、認(rèn)知障礙）[3]，目前普適的適老化設(shè)計(jì)原則有：
1. “強(qiáng)烈“好于“柔和”
針對(duì)視覺(jué)障礙，常見(jiàn)做法有增大字體大小，使用非襯線體字體，提高顏色對(duì)比度等。
相比原版的 App，百度大字版 App 和支付寶長(zhǎng)輩模式修改了 UI 界面，每個(gè)功能模塊都用了明亮的大色塊、加大字體的設(shè)計(jì)。
2. 善用“輔助”和“替代”
針對(duì)聽(tīng)覺(jué)障礙，常見(jiàn)的做法有通過(guò)視覺(jué)輔助，將聲音轉(zhuǎn)化成文字、擴(kuò)大音量、降低語(yǔ)速等。
Google 安卓系統(tǒng)推出了 Live Caption 功能，可自動(dòng)將手機(jī)上播放的內(nèi)容轉(zhuǎn)換成字幕。Live Transcribe-「Sound Notification 聲音通知」功能，可識(shí)別特定聲音（比如煙霧警報(bào)器、嬰兒啼哭、敲門(mén)聲等），并轉(zhuǎn)化成文字及視覺(jué)符號(hào)推送至手機(jī)，方便聽(tīng)障用戶辨別生活當(dāng)中一些重要的聲音信號(hào)。
3. “點(diǎn)擊”好于“滑動(dòng)”
針對(duì)肢體障礙，減少頁(yè)面信息的密度，避免使用過(guò)小的按鈕以及復(fù)雜的交互手勢(shì)。
有研究表明，老年群體在操作時(shí)難以瞄準(zhǔn)物體，在瀏覽圖片時(shí)，由于視力衰退導(dǎo)致無(wú)法對(duì)焦，他們會(huì)不斷地用兩只手指放大/縮小并反復(fù)點(diǎn)擊屏幕。[4]
平安銀行 App 關(guān)懷模式采用卡片拼接的設(shè)計(jì)方式，將間距放大，保證每個(gè)信息有更大的展示空間，同時(shí)也放大按鈕點(diǎn)擊熱區(qū)，提高操作的準(zhǔn)確率。
4. “具象”好于“抽象”
針對(duì)認(rèn)知障礙，避免使用不易識(shí)別的圖標(biāo)，盡可能配有圖標(biāo)或圖片，簡(jiǎn)化信息內(nèi)容。
有研究表明，文字+圖標(biāo)為主的設(shè)計(jì)有助于提升老年新手用戶對(duì)新 ATM 使用的學(xué)習(xí)效率和記憶。[5]
滴滴 App 關(guān)懷模式針對(duì)老年人進(jìn)行功能精簡(jiǎn)，滿足高優(yōu)先級(jí)核心訴求，首頁(yè)只放「一鍵打車(chē)」，操作簡(jiǎn)單，大字、無(wú)廣告。
在很多行業(yè)中，中老年人因?yàn)閾碛胸S富的經(jīng)驗(yàn)在崗位上更具競(jìng)爭(zhēng)優(yōu)勢(shì)，譬如教師、醫(yī)生、律師、會(huì)計(jì)等職業(yè)，工作年限長(zhǎng)、經(jīng)驗(yàn)足是優(yōu)勢(shì)，可以提供更好的服務(wù)。他們既會(huì)使用 C 端產(chǎn)品，也有使用 B 端產(chǎn)品的場(chǎng)景。
隨著時(shí)代變遷，2015 年世界衛(wèi)生組織提出了“健康老齡化”理念[6]，倡導(dǎo)改變過(guò)去“老了就要退出社會(huì)生活”的消極認(rèn)識(shí)。
從“老有所依”到“老有所為”，很多的 B 端場(chǎng)景都覆蓋了中老年用戶，如何提升中老年用戶的辦公用戶體驗(yàn)是重要課題。
另外我們看下 C 端與 B 端的主要差別：
C 端 App 中時(shí)常將簡(jiǎn)單作為適老設(shè)計(jì)宣傳點(diǎn)。追求簡(jiǎn)單有一部分原因是，C 端用戶是在自己的場(chǎng)域操作且?guī)缀鯚o(wú)時(shí)間壓力。而 B 端產(chǎn)品卻相反，業(yè)務(wù)邏輯復(fù)雜，用戶要長(zhǎng)時(shí)間使用而且要求效率。B 端面向企業(yè)定制化，針對(duì)特定人群、情景，使得在適老化設(shè)計(jì)中要解決的問(wèn)題更清晰。
留意生活中的零售行業(yè)，如餐廳、商場(chǎng)、藥局、便利店的服務(wù)人員，往往能看到中老年人的身影。
POS 系統(tǒng)是 B 端場(chǎng)景中使用率最高的產(chǎn)品之一，POS 系統(tǒng)的英文全名為 Point of Sale，中文名為銷(xiāo)售時(shí)點(diǎn)信息系統(tǒng)。[7]它由硬件與軟件組成，根據(jù)產(chǎn)業(yè)和店面類(lèi)型的不同，會(huì)有功能上的差異。
最近團(tuán)隊(duì)參與了一個(gè)改造 POS 系統(tǒng)的項(xiàng)目，使用人群覆蓋到了中老年用戶，提升他們的辦公用戶體驗(yàn)是其中一個(gè)產(chǎn)品目標(biāo)。
本次項(xiàng)目主要是 POS 界面的更新，完整的 POS 體驗(yàn)不僅有軟件本身，有更大的部分在于實(shí)體環(huán)境與設(shè)備，例如：結(jié)賬區(qū)的控件、店面的擺設(shè)、掃描槍?zhuān)x卡器等，而 POS 界面是連結(jié)上述元素的節(jié)點(diǎn)。
在對(duì) POS 系統(tǒng)進(jìn)行改造時(shí)，我們是按照以下設(shè)計(jì)思路進(jìn)行的：
第 1 步:沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)
B 端系統(tǒng)背后往往由成熟的業(yè)務(wù)場(chǎng)景和復(fù)雜的業(yè)務(wù)邏輯構(gòu)成。B 端系統(tǒng)往往不是一個(gè)從 0-1 全新的系統(tǒng)，而是存在一個(gè)被使用了很多年的系統(tǒng)。
在這種情況下，企業(yè)服務(wù)的每個(gè)用戶都是趨向于規(guī)避風(fēng)險(xiǎn)的。人們可能已經(jīng)習(xí)慣了原有的解決方案（盡管不好用，但是大家都會(huì)用了），但新的方案如果不好用，他們的生產(chǎn)力反而會(huì)因?yàn)椴恢廊绾问褂眯路桨付档汀?
這就意味著在做 B 端設(shè)計(jì)時(shí)，現(xiàn)行的方案會(huì)產(chǎn)生很大的習(xí)慣引力。
當(dāng)設(shè)計(jì)師要引入一個(gè)新方案時(shí)，取消或改變某些功能及操作行為將有難度，不能霸道性更改，取代需要合理性。
設(shè)計(jì)思路：
第 2 步：理清主要用戶與使用場(chǎng)景
想要了解使用者的真實(shí)痛點(diǎn)，需從場(chǎng)景出發(fā)。
第 3 步:用適老化設(shè)計(jì)原則去解決場(chǎng)景中的問(wèn)題
POS 使用場(chǎng)景有很多，這里列舉 3 個(gè)常見(jiàn)的使用情境：
可能存在的障礙：無(wú)法聚焦信息內(nèi)容，難做到邊看屏幕邊與顧客交流。
設(shè)計(jì)目標(biāo)：確保信息在復(fù)雜的環(huán)境中，信息內(nèi)容清晰可讀。
設(shè)計(jì)思路：
1. 放大信息內(nèi)容
服務(wù)至上，POS 使用者在工作時(shí)需保持端莊熱情的姿態(tài)，不能只專(zhuān)注看 POS 屏幕信息而不顧顧客。
內(nèi)容大小的確立由設(shè)備分辨率、環(huán)境燈光、字體、視距等因素決定，在復(fù)雜的現(xiàn)場(chǎng)環(huán)境中，信息內(nèi)容要清晰易讀。
2. 色彩對(duì)比度符合 WCAG 標(biāo)準(zhǔn)
參照 WCAG 有 AA 和 AAA 的對(duì)比度標(biāo)準(zhǔn)，界面中的信息與其背景間的關(guān)系對(duì)比度至少在 4.5:1 之上，保證信息易讀性。
WCAG 全稱是 Web Content Accessibility Guidlines(網(wǎng)頁(yè)內(nèi)容無(wú)障礙指南)。這是一套由無(wú)障礙功能專(zhuān)家編輯的指南，有若干國(guó)家在其網(wǎng)絡(luò)無(wú)障礙功能法律要求中明令必須使用這些指南。[8]
一些設(shè)計(jì)插件可以幫助我們檢驗(yàn)色彩對(duì)比度是否符合 WCAG 標(biāo)準(zhǔn)，給大家推薦 2 款：Sketch 插件 Cluse，F(xiàn)igma 插件 A11y-Color Contast Checker。
3. 設(shè)計(jì)有意義的動(dòng)畫(huà)
通過(guò)動(dòng)效來(lái)表達(dá)靜態(tài)視覺(jué)效果無(wú)法準(zhǔn)確傳達(dá)的信息，如反饋、引導(dǎo)下一步、狀態(tài)表達(dá)等。好的動(dòng)效與視覺(jué)設(shè)計(jì)是互補(bǔ)而成系統(tǒng)的。
比如用動(dòng)畫(huà)來(lái)展示商品被加進(jìn)購(gòu)物車(chē)的狀態(tài)，引導(dǎo)下一步操作。
4. 加大點(diǎn)擊熱區(qū)
提高使用者點(diǎn)擊操作的準(zhǔn)確率和速度。
5. 一屏策略
在這次的項(xiàng)目中存在一個(gè)場(chǎng)景，除了銷(xiāo)售端服務(wù)員看到的屏幕，顧客也會(huì)有一個(gè)客顯屏，即服務(wù)人員看到的界面，顧客也會(huì)看到。
對(duì)于頁(yè)面信息框架以及布局盡量“一屏”展示，確保雙方的視線和注意力一致，便于溝通交流。但這時(shí)會(huì)有挑戰(zhàn)：字放大、按鈕放大，信息和功能在一屏上怎么放得下？
解決思路：
可能存在的障礙：在顧客的“催促”下，使用者也會(huì)著急，對(duì)事物表現(xiàn)出茫然的情緒，定位當(dāng)前位置困難。
設(shè)計(jì)目標(biāo)：追求信息的有效表達(dá)和操作的直覺(jué)性與效率。
設(shè)計(jì)思路：
1. 避免使用不易識(shí)別的圖標(biāo)
B 端系統(tǒng)中會(huì)有些功能很難用一個(gè)圖標(biāo)去表達(dá)其含義，此時(shí)文字+圖標(biāo)按鈕優(yōu)于純圖標(biāo)按鈕，能幫助 POS 使用者更好地理解語(yǔ)意并做出操作。
2. 信息的呈現(xiàn)符合用戶眼動(dòng)規(guī)律，操作軌跡越短越好
可運(yùn)用古騰堡圖表法 Diagonal Balance，它由 14 世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。他發(fā)現(xiàn)人們視覺(jué)閱讀規(guī)律，左上角是視覺(jué)第一落點(diǎn)區(qū)，右下角是視覺(jué)最終落點(diǎn)區(qū)，右上角和左下角都是一個(gè)視覺(jué)落盲點(diǎn)，大多數(shù)情況容易被忽略。
在進(jìn)行信息排布時(shí)，可根據(jù)用戶習(xí)慣性的眼動(dòng)規(guī)律，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個(gè)視覺(jué)落點(diǎn)可以展示重要操作。
可能存在的障礙：百忙之中，應(yīng)變能力下降，容易發(fā)生誤操作的情況。
設(shè)計(jì)目標(biāo)：預(yù)防不當(dāng)行為，提升容錯(cuò)率，反饋要及時(shí)有效且清晰。
設(shè)計(jì)思路：
1. 通過(guò)二次確認(rèn)避免誤操作
在產(chǎn)品設(shè)計(jì)時(shí)，要把各種可能性考慮進(jìn)去，通過(guò)模態(tài)對(duì)話框讓用戶二次確認(rèn)來(lái)避免誤操作行為。
當(dāng)有重要操作時(shí)需告知用戶處理結(jié)果，狀態(tài)反饋信息采用的顏色需要遵守用戶對(duì)色彩的基本認(rèn)知，如紅色代表警示，黃色代表警告、綠色代表成功等。
上述舉例的設(shè)計(jì)原則是啟發(fā)但不是限制，每個(gè)設(shè)計(jì)提案最后都要經(jīng)過(guò)用戶調(diào)研，看是否符合使用者的使用習(xí)慣，是否真能解決業(yè)務(wù)與工作中的痛點(diǎn)。
附上總結(jié)圖：
其實(shí)設(shè)計(jì)到后面會(huì)發(fā)現(xiàn)，起初為了方便中老年用戶使用 POS 運(yùn)用的設(shè)計(jì)原則，最終都能給多數(shù)人帶來(lái)很大便利。
這是因?yàn)槲覀兠總€(gè)人在某些時(shí)候都會(huì)遇到各種臨時(shí)的無(wú)障礙需求。
適老化設(shè)計(jì)，不僅僅只是為中老年群體做設(shè)計(jì)，更是一種新的設(shè)計(jì)思維方式，去挖掘更多普適的場(chǎng)景痛點(diǎn)，來(lái)指導(dǎo)我們做方案設(shè)計(jì)。
市面上很多適老化設(shè)計(jì)方法為 B 端產(chǎn)品提供了借鑒，但 B 端產(chǎn)品不能為了適老而適老，理清相關(guān)工作情境和要解決的問(wèn)題很重要；不能霸道性更改，取代需要合理性，因?yàn)?B 端產(chǎn)品現(xiàn)行的方案會(huì)產(chǎn)生很大的習(xí)慣引力。
以上是近期對(duì) B 端引入適老化設(shè)計(jì)的一些思考和沉淀，是開(kāi)始，也將繼續(xù)，適老化設(shè)計(jì)還有很多值得深究和驗(yàn)證的內(nèi)容。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn