银行金融APP的适老化设计指南

银行金融APP的适老化设计指南
引言
据调查，中国人口老龄化程度在全球已处于中上水平。

2022年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。

应对人口老龄化已上升为国家战略。

其实早在2020年11月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。

2021年4月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。

该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。

目前很多头部大厂都已经按照要求完成了应用的适老化改造，并且分享了很多改造经验。

可以说，适老化是今后应用发展的一个大趋势。

笔者最近的工作也涉及到了相关改造设计，所以针对这个主题，做了一些学习探索。

看了各类文章，结合N家银行APP的适老化设计场景体验和自己项目实践的思考，在这里与大家分享。

希望可以给到大家一些启发。

一、什么是适老化设计
1、适老化设计的定义
百度百科上是这么定义的，适老化设计是指在住宅中，或在商场、医院、学校等公共建筑中充分考虑到老年人的身体机能及行动特点做出相应的设计，包括实现无障碍设计，引入急救系统等，以满足已经进入老年生活或以后将进入老年生活的人群的生活及出行需求。

互联网时代，我们的应用在设计的过程中，同样也需要考虑老年用户的特征与需求。

移动互联网的发展给我们带来了巨大的便利，特别是在疫情时期，很多事情实现了线上办理。

但与此同时，也暴露出了很多问题，很多老年人被丰富的互联网世界拒之门外，比如不会使用健康码出行受阻、不会线上转账仍需跑银行办理业务、不会线上挂号只能线下排队等等。

大家可以想想，自己身边的长辈是不是经常会出现上述类似的问题。

我们在“嘲笑”他们落伍的时候，更应当反思，这个社会有没有为他们考虑。

作为设计师，能够为他们做些什么？
2、无障碍设计
无障碍设计常与适老化设计一起出现，无障碍设计不止适老化设计，是针对所有人的设计，要包容所有人。

可以说是一种通用性、包容性设计。

通用性设计：强调设计所有的系统和产品，使每个人都能使用，无论他们的年龄或能力。

包容性设计：好的设计应该满足尽可能多的使用者的需求。

例如：苹果系统的设计，他贴心的考虑到了行动、视力、听力和认知障碍人士的各类需求，并为其设计，让他们也能轻松的使用苹果的产品。

在研究适老化设计的过程中，我发现一些适老化设计的规则和无障碍设计有着互通点。

可以说适老化其实是信息无障碍的一部分，而信息无障碍的一些设计手法可以解决适老化中的部分问题。

所以在此简单的聊一聊两者的关系，以更好的辅助大家对后文的理解。

二、为什么要进行适老化设计
1、用户群体
人口老龄化已成为全球普遍现象，但中国人口老龄化规模大、程度深、速度快。

据局部抽查统计概算，全国45岁人口比例已达到38%，如果按此比例计算，全国45岁以上人口数量已达5.09亿。

另外，根据中国互联网络信息中心（cnnic）在京发布第49次《中国互联网络发展状况统计报告》显示，截至2021年12月，我国60岁及以上老年网民规模达1.19亿，互联网普及率达43.2%。

个人认为，互联网的适老化设计除了对60岁及以上老年网民友好，对于50岁左右的银发人群也同样有益。

所以在这里，我将用户群体拓宽到了50岁及以上的银发人群。

小说明：根据观察身边的年长用户，50出头其实就已经存在看不清、搞不懂、不敢用、不会用等问题了，而且他们非常喜欢适老版本，也会主动要求帮忙把各类app调整成适老版本。

所以在这里将用户群体进行了拓宽。

根据QuestMobile数据显示，2022年8月，银发用户月活跃用户规模达2.97亿，同比增长12.5%，月人均使用时长121.6小时，同比增长8.6%，增速明显高于全网平均水平。

而且，国家在不断地向老年群体普及互联网，对于金融产品，银发人群具有很大的消费潜力，具有“有钱有闲”的市场优势。

那么面对如此庞大且不断增长的用户群体，我们的设计势必要为其考虑，才能更通用。

2、人文关怀
老年人等弱势群体，从生活到日常娱乐，他们对于产品的体验会和我们存在一定的差异。

随着年龄的增长，老年用户会出现视力、听力、触觉、认知理解等能力的下降。

且在心理上会对新鲜事物有一定的恐惧和抗拒，容易出现情绪挫败。

一旦使用受阻，便会感到无助和沮丧，不愿意继续使用。

另外，互联网信息的繁杂、经常出现的网络诈骗案例，也给老年用户带来了不安全感。

他们会因为担心，不小心点了不该点击的链接，造成自己的资金损失。

在工业和信息化部办公厅发布的适老化标准中也指出在适老化界面中需要保证产品的安全性，限制广告插件及诱导类按键。

为了给老年用户带去更好、更安全的产品体验，让他们跟上时代的步伐，我们的设计应当为其考虑。

为他们，也是为未来的我们。

3、不止为老年人
虽说适老化设计，只是无障碍设计的一部分，但是我们的设计，最终有可能所有人都会受益。

在某些特定的情况下，所有人都可能是“老年人”或“残疾人”
提到“老年人”或“残疾人”，我们会想到以下几种场景：
视觉障碍：看不清、失明
听觉障碍：听不清、耳聋
行动障碍：坐着轮椅
认知障碍：不理解内容的含义
对于以上几种场景，是只有“老年人”或“残疾人”才会碰到吗？当然不是。

在某些情况下，我们也会碰到。

这里就要提到一个概念：“情境性障碍（Situational Limitation）”，是指我们任何一个人，都会在某个场景下出现临时性的障碍。

比如在一些银行服务中，情境性障碍的场景案例有：
•视觉障碍：在户外场景，我们使用手机银行，可能会出现文字看不清的情况；•听觉障碍：在嘈杂环境中，我们会听不清一些语音播报；
•行动障碍：手上提着东西，想使用手机银行进行线下付款，可能会误点到别的功能上去；
•认知障碍：银行新上线了一个功能，我们之前从来没有碰到过，会出现短暂的认知障碍。

也许我们设计的初衷是为老年人进行无障碍设计，但其实在很多时候，因为外部环境，我们也会出现短暂的情境性障碍，所以为他们设计，也是为我们自己设计。

4、银行用户需求
网上银行app行业近年来收获了大量的用户增长，于此同时，也出现了各类声音，这些声音反应了用户的各类需求。

据统计网上银行APP，41岁及以上用户仅占比12.8%。

对于年长网银APP用户对保险服务的需求更高，同时也更为偏好风险较高的股票交易。

虽然现阶段他们在银行金融业的渗透率较低，但是随着更多的老年用户接触互联网金融，预计活跃渗透率将会进一步提升。

对于这群如此有消费潜力的用户，现实中，有很大一部分老年用户对网上银行服务存在不了解、不敢用、不会用等痛点。

场景小故事：以下案例来自身边长辈
1）银行卡办理与认证
场景：银行很多业务已实现半自动化，需要手机配合操作完成业务。

问题：辛辛苦苦跑一趟银行，但因手机使用不熟练，不知道怎么操作，银行员工又忙没能详细指导(代劳)，导致业务无法顺利办理，只能第二天再跑一趟。

2）线上转账
场景：从柜面转账到ATM机转账，再到现在的手机转账，完全不同的转账方式，接受起来很慢，操作不熟练，不敢放心使用。

问题：年长用户，对于网络陌生，内心保持不信任。

宁愿跑银行也不敢、不会在手机银行进行转账操作，或者就让子女代劳，完全没有享受到互联网带来的便捷。

根据网易UEDC调研，老年群体手机银行操作体验痛点和对手机银行的期望如下：
如何将这群用户服务好，是当下很多网上银行app需要思考的问题。

另外，在很多行业中，中老年人因为拥有丰富的经验在岗位上会更具优势，对于企业银行用户来讲，处于关键角色的用户例如财务，工作年限长、经验足是优势。

那么企业银行面向企业的设计，如何提升中老年用户的使用体验也同样值得考虑。

三、老年用户的特征与需求
想要更好地为老年用户做设计，我们就需要详细了解老年用户的特征与需求。

从前文的使用现状中，我们可以将老年用户的需求分为生理需求和服务需求。

生理需求：看不清、难操作、怕出错(容易挫败）、不理解、听不清
服务需求：不了解、找不到、不会用、不敢用
这两类需求的来源还要从老年用户的特征入手去解析。

1、老年用户之困——视觉障碍
随着年龄的增长，老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。

而且老年用户患有眼部疾病的概率会有所增加。

60岁以上的老年人中，视觉器官老化导致视力减退者为47.9%，其中绝大多数是远视。

常见的问题有：字小看不清、感觉字的颜色淡看不清、难以识别蓝紫色为代表的冷色调颜色、动态视觉感知弱等。

2、老年用户之困——听觉障碍
根据听力学的研究，男性约从45岁以后开始出现听力衰退，女性稍晚，随着人类寿命的延长，老龄人口的增多，老年人耳聋的发病率也有所增加。

常见的问题有：听不到、听不清、觉得语速过快等。

3、老年用户之困——行动障碍
老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。

而且老年人的手指会偏大，细胞水分减少，皮肤皱纹加深，会使得触屏灵敏度大大降低。

动作精准度的下降使得老年人无法准确的完成手势操作。

常见的问题有：不会复杂的手势操作、容易误触、点击困难、无法长时间连续操作等。

4、老年用户之困——认知障碍
人的认知能力也会随着年龄的增长而下降。

老年人会出现反应慢、判断力下降、学习能力退化的情况。

在这种情况下，老年用户接触互联网的心理障碍就更加剧了。

常见的问题有：难接受新应用、难分辨信息真伪、不理解图标/图片的意思、容易挫败更容易接受熟悉的东西等。

四、银行金融产品适老化设计应当如何入手
《规范》适用范围为：各企业在提供适老化服务时的内嵌适老版界面、单独的适老版APP。

主要包括5大点技术要求：可感知性、可操作性、可理解性、兼容性以及安全性。

四、银行金融产品适老化设计应当如何入手
《规范》适用范围为：各企业在提供适老化服务时的内嵌适老版界面、单独的适老版APP。

主要包括5大点技术要求：可感知性、可操作性、可理解性、兼容性以及安全性。

1、适老版入口设计
1.1 内嵌适老版界面
企业将适老版界面内嵌在原先的APP中，提供入口供用户切换。

这种方案目前市面上使用较多，入口通常放置在设置中。

对于银行金融产品，经调研，不少都遵循all in mobile的设计理念，要求根据不同的场景可以快速随时切换，所以除了设置中，还会在其他位置放置切换入口，方便用户切换。

常见切换入口名称
工商银行：幸福生活版；中国银行：岁月长情版；光大银行：简爱版；甘肃银行：颐年版；支付宝：长辈模式；招商银行/网商银行：长辈版；中国农业银行/平安口袋银行：大字版；宁波银行/云闪付：关爱版等等
对于切换入口的名称，每款应用都有自己的特色，整体来看，大字、长辈版是使用频次最高的，通俗易懂，其他类型的名称虽然有特色，但是与其他应用不同，不符合用户通用认知，在一定程度上会给年长用户造成理解障碍。

常见切换入口位置
对于内嵌版本的切换入口通常有以下三种：
1、一级页面顶部的“版本切换”按钮
2、一级页面下拉加号内的“版本切换”
3、我的页面-设置-“版本切换”
这三种形式根据应用的功能层级，开启适老模式需要进行1～3次点击，常见点击路径如下：
【首页】—版本切换图标—【适老版】
【首页】—版本切换图标—【版本选择】—点击选中—【适老版】
【首页】—加下拉—版本切换图标—【适老版】
【首页】—加下拉—版本切换图标—【版本选择】—点击选中—【适老版】【个人中心】—设置按钮—【设置】—版本切换—【适老版】
【个人中心】—设置按钮—【设置】—版本切换—【介绍页】—开启确认—【适老版】
【个人中心】—设置按钮—【设置】—版本切换—【版本选择】—点击选中—【适老版】
特色切换过渡页面设计
中国农业银行：设置页面直接外置各种版本，直观且丰富了设置页面工商银行：在版本切换页面详细介绍了各个版本的特色
支付宝：独立页面介绍适老版
对于开启适老模式，是否需要设置过渡页面，个人认为需要，因为具有图文介绍的过渡页面，虽然在一定程度增长了用户切换路径，但是给了用户切换的心里预期。

而且对于模式的切换一般是低频操作，适当给用户一些“阻力”可以避免误操作。

1.2 单独的适老版APP
企业也可以根据自身情况选择开发单独的适老版APP，目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版APP。

用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。

（目前暂无银行金融产品上线单独适老版的APP）
经体验，一般开发了单独的适老版APP，在普通版本APP中便不会设置大字版切换模式，仅提供字号设置功能和下载适老版APP引导页。

2、可感知性
该技术要求主要解决老年用户的视觉障碍、听觉障碍及认知障碍。

规范如下：
2.1 字型大小调整
文字的类型
根据调研，同样文字大小的情况下，非衬线体比衬线体结构更加清晰。

所以《规范》中建议使用非衬线体，以减少不必要的视觉干扰，保证易读性。

另外采用可以提高字重方法，使文本轮廓更加清晰。

中文字体例如思源黑体、微软雅黑等都是比较厚重的，不建议使用宋体、楷体等衬线体。

英文字体，特别是对于数据的展示，为了让数据更醒目直观，可以选择非衬线类厚重的字体。

例如：我们部门为了在设计中更好的展示数据信息，提取常用字符设计了非衬线类的“兆日金融体”。

文字的大小
《规范》中建议适老版界面及单独的适老版APP中的主要文字信息不小于18 dp/pt。

Ant Design设计语言中讲到关于计算最小字体的方法，基于年长用户阅读距离（43 cm）以及最佳阅读角度（0.75）计算并换算得到建议最小字号为16dp/pt。

那么我们到底按照哪个规范来呢？笔者觉得，这两个规范没有对错，大家根据自己页面设计或适配的情况来确定就可以了。

对于年长用户来讲，不同的人视觉感官度也不一样，我们在设计允许、布局整洁的限度下，字体肯定是越大越好。

例如下图是我在做适老版过程中制定的缩放系数规范，为了保证部分复杂页面布局不错乱，将主要文字最小字号定义为16dp/pt。

当然以上的规范不一定可以适合所有人，毕竟随着用户的年龄增长，视觉障碍会加深。

我们还可以更加人性化一点，比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。

例如：iOS系统中在辅助功能里可以设置更大字体、粗体文本（《规范》建议应用字型大小可随系统设置调整，或内部具备字体大小设置选项）；微信可以开启听文字消息。

文字的适配规则
•针对文字放大后，极值情况下的适配，主要有省略和换行两种方式，需避免文本、元素被剪裁。

•界面元素及容器需要跟随文字放大而等比例系数放大
•同一容器内的元素横向间距保持固定，纵向间距可按照比例系数适配
2.2 行间距
《规范》建议段落内文字的行距至少为1.3倍，且段落间距至少比行距大1.3倍，同时兼顾移动应用适用场景和显示效果。

根据调研测试：标题行间距为1.3倍，文字行间距为1.5-1.8倍，视觉效果最舒适。

数值仅供参考，具体大家还要融合自己的设计去确定。

2.3 对比度
为了解决年长用户因为文字、图像颜色淡而看不清的问题，在设计的过程中我们需要使用强对比度的颜色。

《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为4.5：1（字号大于18 dp/pt时文本及文本图像对比度至少为3：1）。

这一标准源自WCAG 标准，其中的颜色对比度的无障碍标准包括比度最低标准（AA 级）和对比度增强标准（AAA 级）。

•对比度(AA级)：文本的视觉呈现以及文本图像至少7:1的对比度；大号文本（字重为Bold时大于18px，字重为Regular时大于24px）以及大文本图像至少有4.5:1的对比度。

•对比度(AAA级)：文本的视觉呈现以及文本图像至少要有4.5:1的对比度；
大号文本（字重为Bold时大于18px，字重为Regular时大于24px）以及大文本图像至少有3:1的对比度。

小贴士：
Web Content Accessibility Guideline（Web 内容无障碍指南）是业界公认的指导标准，简称WCAG 标准。

其目标是为满足国际个人、组织和政府需求的Web 内容可访问性提供单一共享标准。

2018 年6 月发布了2.1 版本，并成为W3C 推荐标准。

WCAG 2.2 草案于2022 年9 月完成。

简单来说，就是要求我们在设计适老化界面的过程中，文本颜色需要按照标准加深，与背景色拉开差距以保证年长用户可以清晰识别。

为了保证达到这一标准，我们可以使用色彩对比工具去进行测试：
2.4颜色用途
颜色是界面设计最重要的元素之一，设计师经常通过不同颜色表达去传达一些信息，例如成功、失败等等。

但是在无障碍设计中，颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。

因为随着年龄的增长，我们对颜色识别感知会变弱，所以使用颜色代表特定意义的时候，需要有另外一种区分方案。

例如：
•使用下划线表示链接，或使用粗体突出显示文本
•图标和文本结合使用传达成功或失败的信息
•使用线条粗细、纹理或图案区分图标样式
•使用不同的图案传达信息等等
对于颜色的使用，我们还需要注意以下几点：
•颜色多样：页面中应使用区别较大的丰富色彩，可借鉴真实存在的物体，保持认知一致。

•可适当加深颜色以提高颜色的对比度
•重要元素避免使用蓝色和紫色：由于老年人的晶状体变黄、变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。

对于这一点，还是要看各个品牌的主题调性，如果无法避免使用蓝色和紫色，那么就提高饱和度以加强识别性。

2.5验证码
对于移动应用中的非文本验证码（例如拼图类、选图类、旋转类等验证方式），年长用户容易产生认知障碍，不理解验证的方式；也可能会产生行动障碍，无法准确对齐验证码。

所以对于验证码我们应当做如下处理：
•图片文本类验证码应当清晰易懂，并提供放大查看的操作；
•非文本类验证码应当简单易操作，或者提供可被不同类型感官(视觉、听觉等)接受的替代或引导表现形式。

2.6图标设计
对于页面中的图标，在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。

除了单纯的放大，在项目允许定制化设计的时候，我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。

另外建议搭配文字描述，方便用户更清晰更快速理解。

例如平安口袋银行的大字版，图标都一定程度上进行了拟物化处理，并且都配有通俗易懂的文字解释“电话”“去这里”，能够让年长用户轻松领会含义。

3、可操作性
3.1 组件焦点(热区)大小
由于年长用户细胞水分减少，手指偏大，在使用触屏的过程中灵敏度较低。

所以对于常规组件的焦点，他们操作起来可能会很难完成操作目标。

所以我们在放大文字、图标等控件的同时，对于可点击的组件焦点(热区)也需要同步放大。

《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于60 × 60dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于44 × 44dp/pt；单独的适老版APP中首页主要组件可点击焦点区域尺寸不小于48 × 48dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于44 × 44dp/pt。

对于规范中的内容，具体我们可以这样做：
1）在需要点击操作的元素(<44pt)周围添加12pt的反馈热区；
2）大于等于44pt的元素，且有清晰边界的元素，热区保持与元素大小一致即可；
3）如果多个元素指向同一个操作结果，可使用组合连接在一起的热区；
4）当元素处于某个组件容器内，最大热区不要超过容器本身；
5）如果整个容器指向同一个结果，应当以整个容器作为按压区域，而不是某个图标或文字；
6）元素较多的情况下，操作热区应平分元素间的间距。

「有明显边框元素」和「没有明显边界元」素拥挤时，优先保证「没有明显边界元素」的热区；7）特殊的小尺寸元素，可以考虑拓展热区，甚至覆盖其他元素，以保证最少44*44pt热区；
小贴士：
菲兹定律：任意一点移动到目标中心位置所需要的时间，与目标距离正相关、与目标大小负相关。

所以根据菲兹定律，为了提高年长用户的操作效率，界面中放大需要用户操作的元素，可便于用户快速精准触达。

3.2 手势操作
触摸屏时代，有着各种各样创新的手势操作和交互；但是对于年长用户由于行动和认知障碍，这些创新比较难学习理解并流畅操作。

所以在移动应用中，应对用户进行手势导航或者操作的结果提供反馈提示；避免需3个或以上手指才能完成的复杂手势操作。

对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。

这四种交互，操作比较简单；且对应到界面上的屏幕空间，用户更容易理解。

现在很多应用中创新，有长按侧滑进入左侧空间、长按下拉进入二楼等交互；这类交互对于年长用户来讲其实非常不容易理解且不便操作。

笔者之前教过家里长辈这类操作，想告诉他们这类“便捷创新”的功能，但是发现他们重复。