編輯導語：適老化改造已經(jīng)提上日程，若想彌合老齡人群與產(chǎn)品使用之間的縫隙，研發(fā)團隊需要站在老齡人群的使用場景下進行設(shè)計改良，與此同時，讓適老化設(shè)計從行為層面出發(fā)，滿足更普遍的需求痛點。本篇文章里，作者就手機銀行的適老化設(shè)計做了總結(jié)，不妨來看一下。

國務(wù)院辦公廳在去年11月份印發(fā)了《關(guān)于切實解決老年人運用智能技術(shù)困難的實施方案》，發(fā)改委、衛(wèi)健委、工業(yè)信息化部、交通運輸部、中國人民銀行部委聯(lián)合出動，在國內(nèi)數(shù)字化服務(wù)行業(yè)掀起了一陣波瀾，這也讓我們對正在探索的手機銀行方案進行重新的審視。

一、“老年版”之困

我們相信未來產(chǎn)品的設(shè)計，一定是更加跨梯度、跨年齡兼容的，產(chǎn)品能為更多的用戶帶來便捷友好的使用體驗。我們正是以這樣的思路去理解和探索適老化設(shè)計，持續(xù)為用戶創(chuàng)造更加有溫度的手機銀行產(chǎn)品。

作為金融領(lǐng)域的“小學生”，在設(shè)計之初，我們仔細閱讀了工信部牽頭響應(yīng)國務(wù)院號召的第一封細則《互聯(lián)網(wǎng)應(yīng)用適老化及無障礙改造專項行動方案》（以下簡稱“行動方案”），文中提到產(chǎn)品設(shè)計中需要為老年人單獨定制一個“老年版”，通過例如：更大的字號、更高的對比度、語音讀屏、簡化交互操作等設(shè)計兼顧老人的使用習慣。

于是我們馬上遇到了第一個問題，一旦我們在系統(tǒng)層面提供了“老年版”的切換入口，就等于給老年人群貼上了“因為你行動不便、視力不好，所以我們提供了一個不同的版本”的標簽，這真的是老人想要的嗎？

針對該問題，我們的解法不難——在入口的文案上下功夫，例如避開“老年版”而采用“關(guān)懷版”“簡潔版”“大字版”這樣的文案。但很快，我們遇到了第二個問題。當再次仔細翻閱《行動方案》時，發(fā)現(xiàn)里面明確提出了老年版零廣告插件的要求。

從老年人對信息的辨別能力較弱，容易上當受騙的角度出發(fā)的，其出發(fā)點是好的，可這帶來了商業(yè)上的矛盾，如果所有用戶都切換到這個版本，如何兼顧產(chǎn)品的商業(yè)價值呢？如果我們把入口的層級適當藏深，提高一些門檻，保證不是所有用戶都切過去，又會導致對老年人來說，操作入口層級深，切換門檻高的問題。到底要怎么解決這個問題呢？

我們認為，目前相對合適的設(shè)計策略是，將適老的概念通用化。

二、每個人都有“老齡化時刻”

我們認為適老設(shè)計，是針對具有老齡化行為的所有人的設(shè)計。

馬里蘭大學的Gregg Vanderheiden是信息學院的交互設(shè)計教授，他在論文《產(chǎn)品制造商在阻礙、激勵消費所采用的通用設(shè)計實踐》(Barriers, Incentives and Facilitators for Universal Design Practices by Consumer Product Manufacturers)里提到了一個概念-“情境性障礙（Situational Limitation）”，是指我們?nèi)魏我粋€人，都會在某個場景下出現(xiàn)臨時性的行動障礙。

比如，你有沒有在開車時，想要使用手機找某首歌卻非常困難？在陽光刺眼的路上走著，卻需要用手機預約一個銀行網(wǎng)點？或疫情期間，帶著口罩費力地解鎖你的屏幕？

以上這些情況不僅是老人會遇到，是我們所有人都會遇到的問題，在開車找歌的5分鐘里，我們的眼睛會產(chǎn)生短暫的類似白內(nèi)障的視力效果，但這個障礙是短暫的，當我們脫離當前情境下，障礙會自然消失，我們遇到的問題是情境性短暫障礙。

與情境性障礙對應(yīng)的，是永久性障礙，這兩者的差異就如One Arm到New Parent，同樣都是一條胳膊無法行動，但New Parent的狀態(tài)很快就會結(jié)束。

用戶障礙狀態(tài)，來自Microsoft Inclusive Design在銀行服務(wù)場景中，以下場景都屬于情境性障礙：

• 在強光下預約手機銀行時，我們會出現(xiàn)短暫的視覺障礙；
• 抱著小孩子去ATM取錢，我們會出現(xiàn)短暫的肢體障礙；
• 對銀行部分業(yè)務(wù)流程不熟悉，我們會出現(xiàn)短暫的認知障礙。

其實我們在生活中很多時刻，都會因為外部環(huán)境的限制導致我們產(chǎn)生短暫性地“老齡化時刻”，那這對我們設(shè)計方案有什么啟發(fā)？

三、讓所有人受益的設(shè)計

我們相信：起初為行動障礙的老人或殘障人士的設(shè)計，最終有可能所有人都受益。

如谷歌無障礙設(shè)計專家夏冰瑩在她的《5 lessons I learned by designing for accessibility》中提到的經(jīng)典案例-Curb Cut Effect（人行道斜坡效應(yīng)），斜坡起初是為了給行動不便的老人或依賴輪椅的殘障人士設(shè)計的，但我們有拖行李箱經(jīng)驗的同學應(yīng)該都能感受到這項設(shè)計帶來的便利。

人行道斜坡實景圖

這種設(shè)計思路也被稱為“通用性設(shè)計”，類似的案例還有很多，例如：閉合字幕，閉合字幕的發(fā)明是為了讓聽力障礙的人，不用通過音效和背景音，也能夠更好地理解電影里的情節(jié)，但最終，我們很多人都能從中獲益。如果我們希望在嘈雜的環(huán)境下仍然可以觀看視頻，開啟閉合字幕可以幫我們更清楚地理解內(nèi)容。

閉合字幕頁面，來自Youtube

從這個案例我們得到的啟發(fā)是，優(yōu)秀的適老化設(shè)計并不一定要強調(diào)“老年”這個詞，而是通過滿足更加普適的場景痛點，來指導我們的方案設(shè)計。

四、情景性障礙下的設(shè)計考量

銀行服務(wù)作為日常生活中的必備服務(wù)，覆蓋的人群從大學生到老年人，跨度很大，所以在產(chǎn)品框架規(guī)劃初期，就應(yīng)當充分考慮到所有具有暫時性障礙的場景，設(shè)計并不按照年齡劃分，而是一種按照行為區(qū)分的設(shè)計思路。

情境性障礙主要分為以下幾類：視覺障礙、肢體障礙、聽覺障礙以及認知障礙。

1. 視覺情境性障礙

老年黃斑病變是一種常見的慢性疾病，會導致患者視力受損，患者的中央視野會出現(xiàn)模糊或者形成視覺盲點。雖然對周邊視覺影響不大，但中央視力受損會影響患者閱讀、駕車以及辨認臉孔的能力。下圖是我模擬視覺障礙的效果。

不同情境、身體狀態(tài)下所看到的頁面

在情境性視覺障礙的實際案例在前往銀行的路上，陽光明媚，小張想要打開手機來查看一下賬戶余額，讓辦理業(yè)務(wù)時心理有數(shù)，但卻因為強光的照射導致小張需要很費力地在屏幕上找到某個功能項。

1）這對我們有什么啟發(fā)？

仔細分析情境，用戶打開手機銀行經(jīng)常是臨時起意去查看賬戶余額，這使得打開手機銀行的外部環(huán)境豐富多樣，用戶可能是在走在去銀行的路上，也可能是在駕駛的途中，打開快，離開也快，這對信息架構(gòu)的清晰性有極高的要求。

然而，目前多數(shù)手機銀行的首頁架構(gòu)是寬而淺的，基本是Banner+金剛區(qū)的搭配，這是一種非常成熟的信息架構(gòu)，它能在短時間內(nèi)營造出功能豐富強大的感覺。

但這樣的架構(gòu)也有一個問題，那就是金剛區(qū)的結(jié)構(gòu)只能采用icon+banner的方式，這種結(jié)構(gòu)限制了我們能夠傳遞給用戶的信息量，用戶在進入應(yīng)用后，功能入口密度較大，需要一段時間的探索學習。

2）以用戶資產(chǎn)為中心組織首頁的設(shè)計

解決這個問題要回到如何保證信息架構(gòu)清晰性的問題上。我們面臨的問題是，銀行的業(yè)務(wù)復雜專業(yè)且全面，應(yīng)當如何去組織信息結(jié)構(gòu)？

業(yè)務(wù)現(xiàn)狀

如果將首頁的信息架構(gòu)進行抽象，有兩種主流的框架，寬而淺的散裝首頁是目前采用比較多的設(shè)計方式，我們認為這種方式的優(yōu)勢在于能在首頁承載更多業(yè)務(wù)，但對用戶來說，信息明確度上會有些模糊；另一種就是窄而深的線性架構(gòu)，首頁的功能的曝光量上會有所縮減，但能保證每一個功能的信息量足夠多。

首頁信息架構(gòu)差異

在元素層面，我們采用原子拼接的設(shè)計方式，將矩陣放大，保證每個原子能夠有更大的信息展示空間。

原先的賬戶管理以icon形式承載的入口，我們替換為343×256的賬戶信息卡，這樣放大的好處主要在于我們可以將藏在2、3甚至更深層級的信息淺層化，更加直觀地給到用戶，并且首頁框架我們按照優(yōu)先級排序，保證用戶想要的一定能最快看到。

一級頁面示意

這種架構(gòu)也可以靈活地根據(jù)客戶業(yè)務(wù)的不同階段、不同需求進行快速調(diào)整。靈活的組合方式可以使整個團隊更有節(jié)奏地提升產(chǎn)品質(zhì)量。

擴展性示意

2. 肢體情境性障礙

肢體障礙的情況差別會比較大，老年群體中比較普遍的頸椎病、長期服用藥物導致的周圍神經(jīng)壓迫疾病等，在產(chǎn)品使用過程中，會存在以下障礙：

• 手指顫抖導致靈活度受限：點擊一個按鈕所花費的時間較長，對同一個操作控件的可點擊區(qū)的面積要求更高；
• 手掌力度下降導致握持不穩(wěn)：老人傾向于大屏手機，但大屏手機的重量使得老人需要使用更大的力度持握，無法長時間連續(xù)使用手機。

1）體現(xiàn)在情境性肢體障礙的實際案例

在顛簸的大巴車，接到一個日歷通知，告知用戶需要向某銀行卡轉(zhuǎn)賬，于是需要在顛簸的環(huán)境下打開手機銀行進行轉(zhuǎn)賬操作。此時，劇烈晃動的屏幕會讓我們的手指靈活度短暫受限，無法精準快速地點擊按鈕，甚至會出現(xiàn)手機掉落的情況。

2）這對我們有什么啟發(fā)？

肢體障礙的情境下，需盡量保證按鈕簡單聚焦，對內(nèi)容進行一再精簡合并，讓出更多的面積保證操作。這里的精簡是用最簡單的語言精準地傳達內(nèi)容，而不是直接刪除內(nèi)容。

3）不跳出的高效轉(zhuǎn)賬流程設(shè)計

轉(zhuǎn)賬作為目前手機銀行使用頻率最高的操作，平均每個人用戶的常用轉(zhuǎn)賬人在2-3個，基于此，我們在流程上采用了輕量的設(shè)計方式，給用戶營造一種輕量快速的體驗。

在元素上，我們設(shè)計了上卡片+下信息的布局，將頁面內(nèi)容切割為兩部分，充分利用卡片元素承載更多轉(zhuǎn)賬對象的信息，從而讓用戶可以聚焦在輸入金額的操作上。

轉(zhuǎn)賬流程示意

同時，在新建銀行卡的流程，繼承了滑動操作，只需要滑動即可激活流程。同時在用戶輸入基本信息的同時，實時更新所輸入的信息，輔助用戶完成新建操作。

添加銀行卡操作示意后續(xù)我們將會增加信息穿梭，語音喚起的功能，期望在整個流程上能做到最簡化。

信息穿梭示意

3. 認知情境性障礙

老年人是阿茲海默癥、海馬區(qū)受損的高發(fā)人群，這類疾病會導致人對外界事物產(chǎn)生認知障礙，主要表現(xiàn)為記憶力下降、學習障礙等。認知障礙主要分為2個階段：

1. 輕度記憶力減退期，這個階段主要是應(yīng)變能力下降，對新事物表現(xiàn)出茫然的情緒，對所處位置定向困難；
2. 中度視空間能力下降，在這個階段，人處理問題，辨別事物的相似點和差異點方面有困難。

1）體現(xiàn)在情境性認知障礙的實際案例

小張開了一上午會，頭腦昏昏沉沉，但昨天預約了今天中午的大額取現(xiàn)，臨出門時總覺得似乎少帶了什么東西。這種短暫的認知障礙，是因為大腦長時間工作后，出現(xiàn)了暫時的記憶力減退的情況。

2）這對我們有什么啟發(fā)？

認知障礙對我們來說，更多的是當用戶辦理線上業(yè)務(wù)時，我們應(yīng)當將信息以更易懂的方式傳遞給用戶。

銀行的業(yè)務(wù)相對比較復雜，比如購買理財產(chǎn)品時，”開放式基金”、”結(jié)息”、”R2風險”等專業(yè)名詞的理解門檻較高，使得很多用戶在購買時難以辨別產(chǎn)品差異，從而把關(guān)注度只放在收益、投資期限這些參數(shù)上。

并且，很多政策性的波動其實最終體現(xiàn)在頁面上的只是某個名詞的變化，這讓很多用戶更加一頭霧水。

例如，2018年國家發(fā)布了大資產(chǎn)新規(guī)，以央行為首的所有銀行，要求理財產(chǎn)品必須是凈值型，不再出售保本理財產(chǎn)品。也就是說，投資者購買理財產(chǎn)品不再高枕無憂，需要自負盈虧。

這在很多理財產(chǎn)品介紹頁中，唯一明顯變化的就是加了“凈值型”三個字，至今仍有很多用戶還會有理財=穩(wěn)贏的認知。

3）同屏解說的設(shè)計

因為理財產(chǎn)品構(gòu)成的復雜性，需要很多專業(yè)名詞來解釋產(chǎn)品構(gòu)成、風險說明等。所以我們在詳情頁保持了理財產(chǎn)品的通用結(jié)構(gòu)，增加了同屏解說的入口，開啟該功能后，產(chǎn)品介紹中的主要價值將會被提煉出來置頂，同時復雜的詞匯會高亮展示，并對這些詞匯進行解釋，通過這種方式，降低用戶的理解門檻。

同屏解說方案示意

4）網(wǎng)點流程指引的設(shè)計

目前，各大銀行都在進行業(yè)務(wù)的線上遷移，但多數(shù)用戶仍然有去網(wǎng)點辦理業(yè)務(wù)的習慣。

用戶辦理渠道示意

在線下網(wǎng)點預約業(yè)務(wù)時，首先呈現(xiàn)給用戶的的是“您要選擇哪一項業(yè)務(wù)”，用戶選擇完自己所要辦理的業(yè)務(wù)后，如果該業(yè)務(wù)可以線上辦理，我們會推薦用戶線上辦理，如果只能線下辦理，我們再展示網(wǎng)點預約，在用戶完成預約后，提供詳細的操作指引，避免用戶去銀行時忘帶東西或因為流程不熟悉而手忙腳亂。

流程指引設(shè)計示意

五、拋開有色眼鏡的設(shè)計

1. 年齡歧視帶來的情緒挫敗（環(huán)境層面）

以年齡對人進行分類和劃分，會帶來傷害、困境和不公正待遇。WHO的數(shù)據(jù)表明，世界上有二分之一的人都存在年齡歧視的問題。

老年人在工作場所中普遍處于不利的地位，而且隨著年齡的增長，針對老年人的專門培訓和教育的機會也在顯著減少，這導致老年人在社會上普遍存在社會孤立、孤獨感加劇問題。

2020年康奈爾大學的一項研究顯示，在中國、美國、日本等國家，每年因年齡歧視導致的額外八項健康問題的支出超過630億美元，對于60歲以上的老人，每年用于處理這些健康問題的支出占其醫(yī)療支出的1/7。

歧視問題像蝴蝶效應(yīng)，帶來了很多問題需要通過設(shè)計解決。通過一些專業(yè)人士了解到，在去銀行網(wǎng)點辦理業(yè)務(wù)的老年人因為老年人受到的社會歧視，導致鈍感力較差，情緒敏感，很容易出現(xiàn)情緒挫敗的狀況。

2. 生理變化導致負面情緒修復能力差

進入60歲后，大腦皮層和皮下多種神經(jīng)細胞發(fā)生退行性變化，神經(jīng)纖維的再生能力下降，腦血流量和氧氣的攝取量減少，導致身體對負面情緒的修復能力較弱。

這導致了情緒差的惡性循環(huán)，所以我們在設(shè)計時應(yīng)該更加關(guān)注和關(guān)懷用戶的挫敗心理。

3. 設(shè)計時避開“老年”“特殊”等詞

在方案中，我們提供了同屏解說功能，希望通過這種設(shè)計能夠降低理財門檻。該功能的入口設(shè)計，我們修改了好幾版，從最初的加一個老年人的icon，到最終的講解文案，希望在產(chǎn)品設(shè)計中，減少一些特殊文案產(chǎn)生的貼標簽感知，讓方案能更加通用、平等。

六、參照已有標準找到平衡點

這里就重點介紹如何利用這些基礎(chǔ)，找到一個平衡點來指導設(shè)計，滿足普通用戶情境性障礙的問題。

1. 對比度——使用一些輔助工具檢查對比度是否合理

WCAG有AA和AAA《色彩無障礙設(shè)計》的對比度標準，我們認為通用的頁面上，例如一級tab，滿足AA的要求（4.5:1）即可。

一些在線工具可以幫助我們測試對比度是否滿足 WCAG的標準，給大家推薦四個：WebAIM`s Color Contrast Checker、Contrast-ratio、EightShapes Contrast Grid、Color Tool。

幾種常用校對工具

2. 字高——5.62mm左右

有一個叫“Visual Angle Calculator”的網(wǎng)站有個程序可以直接視線與屏幕間的距離得出最小字高。老人視覺能力下降，有研究表明,老人的最小可接受視角是0.75度，視距是43cm，換算之后相當于字高5.62mm。

3. 觸摸目標尺寸間距

在界面設(shè)計中，需要放大觸摸目標以提高老人點擊的準確率和速度。44*44 point是Apple HIG建議的最小點觸面積，44point換算成物理尺寸為0.27英寸（6.86mm）。有文章建議老齡化產(chǎn)品的點觸最小目標為10.5mm，同時減少相鄰互動元素之間的距離，至少相距2mm。

七、結(jié)語

目前已很多設(shè)計團隊都在嘗試以情境性障礙的思維做設(shè)計，像Google的Next Billion User計劃，就是在為來自不同地區(qū)的用戶做更多本地化設(shè)計，用戶可能因為網(wǎng)絡(luò)較差、或因為騎摩托車而導致行為情景障礙，Google也分別為以上兩種情況給出了自己的解決方案。

Google在情境性障礙的設(shè)計嘗試

另外還有Microsoft，他們提出了Inclusive Design（包容性設(shè)計），是與官方設(shè)計語言Fluent Design占同等比重的設(shè)計語言。并且提供了詳細的設(shè)計工具、Sketch插件供設(shè)計師使用。

本篇聚焦在框架場景層面與大家交流我們在手機銀行產(chǎn)品設(shè)計中對于適老化領(lǐng)域的探索。適老化這條路任重而道遠，希望能有更多同學留言討論，和我們一同探索前行。

作者：Nasa，來自騰訊云設(shè)計中心

推薦關(guān)注公眾號 “騰訊設(shè)計”（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設(shè)計方法論

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

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