作为一枚产品汪，需求分析是一项非常重要的工作，而做好需求分析的第一步，莫过于搜集分析用户的问题并提出解决方案了。恰好最近也在温习三节课的产品课，分享所思所想，共同交流讨论~那么如何去收集问题呢？——那自然是要从用户的行为、操作、评论上搜集了。

作为一枚产品汪，需求分析是一项非常重要的工作，而做好 需求分析 的第一步，莫过于搜集分析用户的问题并提出解决方案了。恰好最近也在温习三节课的产品课，分享所思所想，共同交流讨论~

那么如何去收集问题呢？

——那自然是要从用户的行为、操作、评论上搜集了。

一种时间较快、成本较低、资料较多的方法就是通过用户反馈发现问题，用户反馈往往都是网络上现成的，当我们知道从哪些渠道可以找到，不同的渠道该如何去处理，就可以很快地得出一些有价值的现有问题。

用户反馈，不仅可以得到产品自身的问题，在很多时候，还可以获取到竞品的问题，以及从中发现自身产品未来的机会点。

接下来我们就一起来看看怎么做吧~

更多用户调研方法：

如何设计高质量B端调研问卷？高手总结了8个步骤（附模板下载） 编者按：B端设计的调研问卷该如何设计？

阅读文章 >

一、可以从哪些渠道搜集用户反馈？ 总体来看，可以分为三大类渠道：网络公开渠道，半公开渠道，产品内部渠道。

网络公开渠道：APP Store、豌豆荚、小米、华为等手机应用商店；百度、google 等公开搜索引擎；微博、百度贴吧、小红书等公开交流平台；

半公开渠道：微信、微信朋友圈、用户评价等有好友关联的半公开性质渠道；

产品内部渠道：用户投诉、客服咨询、电话录音，一般可以从客服或者运营团队得到；

那么针对不同类别的收集渠道，要想尽可能地获得有效信息，我们需要使用不同的处理策略。

二、如何处理不同类别渠道的反馈？ 网络公开渠道，最关键的是要勤搜索，定期到公开渠道上去搜索用户评论。第二可以借助一些工具，比如关键词订阅、使用监控工具等。

网络公开渠道的第一大类是主流的应用商店与常用工具，这个类别和产品和用户特性无关，适用于任何产品。需要注意一点，在不同的系统中，明确有哪些不同的应用商店。下面列出比较主流的应用商店。

iOS 系统：APP store。

Android 系统：豌豆荚、百度手机助手、360 手机助手、小米应用商店、华为应用商店等。

常用监控工具：AppAnnie、应用雷达、CQASO 等。

那么花了这么多心思监控应用商店，我们需要关注什么？建议关注以下四个关键点：

重点看低分差评，可以锁定 1-3 分的低分，在有限的时间内获取最大的信息； 重点看有实际描述的低分，这些评论用户是描述了实际问题的，比如一天卡了好多次，定位我的位置不准等实际描述的评论，可以忽略比如不好、垃圾、差评等无实际描述的差评，因为提供不了有效的信息； 监控异常行为，关注是否有水军刷榜、恶意评价等； 监控竞品变化，俗话说知己知彼百战不殆，关注竞争对手的最新情况，也是提升产品的一个关键点。 第二大类则是微博、百度贴吧等公开交流平台，主流的社交平台有微博、百度贴吧、知乎、小红书这些比较知名的公开交流平台，都可以到这些平台上，通过关键字搜索用户评论。

需要注意的是，根据我们自身产品的特性和用户群的细分，需要适当定向选择不同的平台。比如是基金股票相关的产品，那么还要到雪球、天天基金等知名的相关公开网站上，去寻找用户反馈。

对于半公开渠道，分析用户点评基本同公开渠道，同样的，我们要重点看低分差评、有实际描述的差评、异常行为。

通过这些真实的用户反馈，从而可以更进一步地去分析当前遇到的问题，是产品质量的问题？还是服务质量的问题？或者是功能不能用不好用的问题？能够真正去发现问题，找到问题，解决问题。

对于内部渠道，一般通过客服后台、意见反馈、电话、邮件等方式得到，作为 PM，我们要清楚公司内部的用户反馈渠道有哪些，第二要到一线去，定期与一线客服交流，以此获得用户反馈。

如何收集产品问题，最基本最常用的方法之一就是用户反馈，知道从哪些渠道可以获得，并且不同的渠道如何处理，是一个合格 PM 的基本功哦~！

欢迎关注作者微信公众号：「书灵的织梦国度」

UX/UI 设计师在日常工作中是否遇到以下疑问：1.方案由上游主导，设计师没有发挥空间怎么办？2.如何从设计视角出发梳理体验优化建议？3.如何向各方证明你的优化建议是有价值的？

UX/UI 设计师在日常工作中是否遇到以下疑问：

1.方案由上游主导， 设计师 没有发挥空间怎么办？

2.如何从设计视角出发梳理体验优化建议？

3.如何向各方证明你的优化建议是有价值的？

要回答以上问题，首先得理解设计价值究竟为何。

设计价值 相关模型：

如何清晰量化设计价值？试试这个超实用的GSSM模型！ 编者按：本文通过实战案例，帮你掌握一个能量化设计价值的GSSM模型。

阅读文章 >

一、如何理解设计价值 设计≠艺术，设计从诞生之初就是为“解决问题”而存在。

在体验设计场景，如果业务方是“需求提出者”，那产品经理和设计师就是从不同视角切入的“问题解决者”，而用户既是“需求源头”，又是“方案验证者”和最终“价值创造者”。

下面我们详细解读「设计价值」与「业务/用户/产品」三方的关系：

1. 设计价值源于业务目标，产于业务价值变现

商业设计本质上服务于业务，因此判断设计价值的关键是：是否真正地帮助业务解决问题，助力业务目标达成。换言之，设计价值就是设计师通过设计思维/策略/方法，直接或间接帮助业务创造的那部分价值。

设计不能脱离业务自嗨，不能“为了强调设计的存在而设计”。 有效设计在于对业务诉求的精准满足。我们构思设计方案时，脑海中始终要回答：

实现了哪些业务目标 解决了哪些业务问题 创造了哪些业务价值 2. 通过对用户需求的洞察和满足，为业务创造价值

业务价值最直接的来源是用户价值的变现，因此，想要实现业务价值 ≈ 要服务好用户，这为设计价值的实现提供了有效抓手：设计师可以通过洞察用户需求，完善产品功能、优化操作体验的方式助力业务目标达成。

P.S. 用户价值 = 产品给目标用户带来的核心价值，即：帮助用户解决了什么问题，满足了什么需求，提供了什么服务。

3. 产品 PRD 是“第二参考视角”

对于资深设计师来说，产品 PRD 不一定是最优解，它更像是提供了解决问题的第二参考视角，产品侧在理解业务目标的基础之上，从实现角度产出了初步解决方案，为设计师打开思路。

不同阶段设计师在面对同一份 PRD 时，有如下处理方式：

初级：不知其然，表象复刻——直接按照PRD方案输出相应设计； 中级：知其然，表象优化——对PRD方案进行查漏补缺，提出体验层面优化建议； 高级：知其所以然，透过表象看本质——综合业务/产品目标，挖掘用户原始需求，提出当下最优解。

二、3维推导设计目标 当设计师拿到 BRD & PRD 后，如何综合多维视角制定设计目标和策略？下面列举了笔者在日常工作中重点关注的维度。

1. 业务视角：明确定位

业务会从商业角度提供清晰定义产品边界和价值变现模型，从 BRD 中可以提取以下重点信息：

产品/需求的目标用户类型和特定场景范围； 给用户带来的核心价值（帮助用户解决了什么问题/满足了什么诉求）； 用户价值变现模型和策略（如何通过满足诉求进而实现用户价值变现）； 业务价值可量化指标 我们需要注意以下两点：

关注北极星指标，比如某些场景侧重“留存”，有些侧重“转化”，这会影响设计侧重； 在产品发展初期，了解业务线未来的布局和规划，可以帮助我们把握设阶段性计节奏。 2. 用户视角：匹配 & 完善需求

用户是一切需求的源头，仅从业务视角出发定义需求是无本之木。因此当设计师碰到业务需求不明确，或者对产品方案存疑时，最好的办法就是回归用户视角。用户需求挖掘一方面可以丰富和完善业务目标，另一方面也帮助我们审视当前业务需求是否与用户诉求吻合。通过用户分析我们可以得到：

目标用户特征； 典型场景下核心诉求、任务和关键行为； 关键行为对应的可量化指标 P.S.为了挖掘多维度用户诉求，我们可以根据具体场景将用户细分，如：

角色：如 B 端/C 端； 熟悉程度：小白/普通/专家； 客户价值：高价值/一般价值； 目标强弱：强目标/半目标/无目标； 兴趣/偏好：价格敏感/小众人群； 阶段：获取-激活-留存-收益-推荐； 流程：开始前/进行中/结束后... 3. 产品视角：产品策略 & 实现约束

在业务主导的场景下，产品经理往往是需求的“第一经手人”，我们需要在 PRD 中捕捉到产品对业务需求的理解和转化策略。另外，产品视角也阐释了在落地实现层面的约束限制，特别是前台与中/后台的依赖关系。从 PRD 中可以获取以下重点信息：

产品目标和策略； 功能范围和核心流程； 前中后台能力支持； 实现成本和风险点 在消化 PRD 过程中我们需要注意：

①  从产品系统视角审视需求：

多数情况下，我们接到的需求是点状的，可能是某个子模块的子流程/功能，此时我们可以用更系统的视角向上追溯，定位模块所属能力矩阵，找到模块与模块之间的联系，这有利于精准把握需求，保证链路场景闭环，为后续由点到面驱动更大层面体验优化作准备；

② 不要忽略实现层面的限制

很多功能不是“不该做”，而是当下“做不了”或“性价比低”，一些优化方案提出前，我们需要从产品角度考虑现有中后台能力支持、研发可行性、运营人力成本等，避免设计“空中楼阁”。

综合以上业务、用户和产品三个维度，我们更加精准推导设计目标。需要注意的是，设计不是万能的，大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现，我们只需关注可以通过设计手段参与、干预和落实的部分即可。一个设计目标的完整表述 = 通过「XX 设计策略」帮助目标用户「实现 XX 价值/满足 XX 需求/解决 XX 问题」，以助力「XX 业务目标/变现方式」达成。（在实际表达中可以适当精简）

三、方案推导 & 价值量化 确立明确的设计目标和策略后，下面进入设计实施和验证阶段，这里推荐两个基础的推导模型。

1. SKS 模型：从策略到方案

SKS 模型，即策略(Strategy) → 影响因子(Key factor) → 解决方案(Solution)。设计目标中的策略是一切方案推导的源头，我们需要找到影响策略实现程度和效果的关键因素，将其视为可控变量，并以这些变量为切入点进行方案尝试，最终衍生多种解法。

比如：我们把提升 Banner 的点击率作为策略，那影响 banner 点击的影响因素可能是：形式是否新颖、配色是否亮眼、是否有动效引导、利益点是否突出、行动按钮是否吸引人点击等等，每一个影响因子都可以衍生出多种设计方案。

2. GAM 模型：从目标到指标

上文提到，设计手段通常是以间接方式助力用户价值实现，进而赋能业务目标达成。那如何量化设计价值呢？我们可以使用“GAM 模型”，即设计目标(Goal) → 高价值行为(Action) → 衡量指标(Metric)。具体方法如下：

① 设计目标反推高价值行为

一个设计目标实现，一定是由链路中一个/多个高价值行为促成。比如用户在真正“下单”前，会访问商品详情页，浏览商品详情页信息，加购物车等。

② 用行为指标度量设计价值

用数据刻画和度量高价值行为的指标变化，进而度量设计方案的价值。 我们可以尽量多维度拆解高价值行为和相应度量指标，维度越多，关联性越高，判断误差越小。

四、小结 事有轻重缓急，不是所有的需求都需要走上述方法进行设计分析，要学会辨别重点的、有发展潜力的需求投入更多设计精力深入研究。后续笔者将通过具体的设计项目，详细阐述如何运用业务×产品×用户三重视角，推导改版目标和设计策略，敬请期待《设计师如何提升专业价值-实战篇》。

参考文献：

《五步推导，让你成为体验设计专家》 《谷歌 HEART 用户体验模型》 《如何理解「设计价值」？又该怎样体现？》 《互联网产品经理应该具备的 3 种视角》 欢迎关注「JellyDesign」的小程序：

引言任月月：据调查，中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。

引言

任月月：据调查，中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。

其实早在 2020 年 11 月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。2021 年 4 月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。

目前很多头部大厂都已经按照要求完成了应用的适老化改造，并且分享了很多改造经验。可以说，适老化是今后应用发展的一个大趋势。笔者最近的工作也涉及到了相关改造设计，所以针对这个主题，做了一些学习探索。看了各类文章，结合 N 家银行 APP 的 适老化设计 场景体验和自己项目实践的思考，在这里与大家分享。希望可以给到大家一些启发。

最新的银发族研究报告：

如何做好适老化设计？来看阿里出品的研究报告！ 阿里云、零点有数与上海交通大学设计学院三方联合在 U Design Week 中发布了《银发族数字化产品适老化研究蓝皮书》（以下简称“蓝皮书”）。

阅读文章 >

一、什么是适老化设计 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 用户对保险服务的需求更高，同时也更为偏好风险较高的股票交易。虽然现阶段他们在银行金融业的渗透率较低，但是随着更多的老年用户接触互联网金融，预计活跃渗透率将会进一步提升。

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

场景小故事：以下案例来自身边长辈

① 银行卡办理与认证

场景：银行很多业务已实现半自动化，需要手机配合操作完成业务。

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

② 线上转账

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

问题：年长用户，对于网络陌生，内心保持不信任。宁愿跑银行也不敢、不会在手机银行进行转账操作，或者就让子女代劳，完全没有享受到互联网带来的便捷。

根据网易 UEDC 调研，老年群体手机银行操作体验痛点和对手机银行的期望如下：

如何将这群用户服务好，是当下很多网上银行 app 需要思考的问题。

另外，在很多行业中，中老年人因为拥有丰富的经验在岗位上会更具优势，对于企业银行用户来讲，处于关键角色的用户例如财务，工作年限长、经验足是优势。那么企业银行面向企业的设计，如何提升中老年用户的使用体验也同样值得考虑。

三、老年用户的特征与需求 想要更好地为老年用户做设计，我们就需要详细了解老年用户的特征与需求。从前文的使用现状中，我们可以将老年用户的需求分为生理需求和服务需求。

生理需求：看不清、难操作、怕出错(容易挫败）、不理解、听不清

服务需求：不了解、找不到、不会用、不敢用

这两类需求的来源还要从老年用户的特征入手去解析。

1. 老年用户之困——视觉障碍

随着年龄的增长，老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。而且老年用户患有眼部疾病的概率会有所增加。60 岁以上的老年人中，视觉器官老化导致视力减退者为 47.9%，其中绝大多数是远视。

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

2. 老年用户之困——听觉障碍

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

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

3. 老年用户之困——行动障碍

老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。而且老年人的手指会偏大，细胞水分减少，皮肤皱纹加深，会使得触屏灵敏度大大降低。动作精准度的下降使得老年人无法准确的完成手势操作。

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

4. 老年用户之困——认知障碍

人的认知能力也会随着年龄的增长而下降。老年人会出现反应慢、判断力下降、学习能力退化的情况。在这种情况下，老年用户接触互联网的心理障碍就更加剧了。

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

四、银行金融产品适老化设计应当如何入手 针对以上老年用户的需求，银行金融产品的适老化设计应当如何入手。接下来我们结合《移动互联网应用（APP）适老化通用设计规范》中的内容（以下简称《规范》）和现有的各类产品适老化设计现状一起学习下如何进行适老化设计。

《规范》适用范围为：各企业在提供适老化服务时的内嵌适老版界面、单独的适老版 APP。

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

1. 适老版入口设计 ① 内嵌适老版界面

企业将适老版界面内嵌在原先的 APP 中，提供入口供用户切换。这种方案目前市面上使用较多，入口通常放置在设置中。对于银行金融产品，经调研，不少都遵循 all in mobile 的设计理念，要求根据不同的场景可以快速随时切换，所以除了设置中，还会在其他位置放置切换入口，方便用户切换。

常见切换入口名称

工商银行：幸福生活版；中国银行：岁月长情版；光大银行：简爱版；甘肃银行：颐年版；支付宝：长辈模式；招商银行/网商银行：长辈版；中国农业银行/平安口袋银行：大字版；宁波银行/云闪付：关爱版等等

对于切换入口的名称，每款应用都有自己的特色，整体来看，大字、长辈版是使用频次最高的，通俗易懂，其他类型的名称虽然有特色，但是与其他应用不同，不符合用户通用认知，在一定程度上会给年长用户造成理解障碍。

常见切换入口位置

对于内嵌版本的切换入口通常有以下三种：

一级页面顶部的“版本切换”按钮 一级页面下拉加号内的“版本切换” 我的页面-设置-“版本切换”

这三种形式根据应用的功能层级，开启适老模式需要进行 1～3 次点击，常见点击路径如下：

「首页」—版本切换图标—「适老版」 「首页」—版本切换图标—「版本选择」—点击选中—「适老版」 「首页」—加下拉—版本切换图标—「适老版」 「首页」—加下拉—版本切换图标—「版本选择」—点击选中—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「介绍页」—开启确认—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「版本选择」—点击选中—「适老版」 特色切换过渡页面设计

中国农业银行：设置页面直接外置各种版本，直观且丰富了设置页面

工商银行：在版本切换页面详细介绍了各个版本的特色

支付宝：独立页面介绍适老版

对于开启适老模式，是否需要设置过渡页面，个人认为需要，因为具有图文介绍的过渡页面，虽然在一定程度增长了用户切换路径，但是给了用户切换的心里预期。而且对于模式的切换一般是低频操作，适当给用户一些“阻力”可以避免误操作。

② 单独的适老版 APP

企业也可以根据自身情况选择开发单独的适老版 APP，目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版 APP。用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。（目前暂无银行金融产品上线单独适老版的 APP）

经体验，一般开发了单独的适老版 APP，在普通版本 APP 中便不会设置大字版切换模式，仅提供字号设置功能和下载适老版 APP 引导页。

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

① 字型大小调整

文字的类型

根据调研，同样文字大小的情况下，非衬线体比衬线体结构更加清晰。所以《规范》中建议使用非衬线体，以减少不必要的视觉干扰，保证易读性。另外采用可以提高字重方法，使文本轮廓更加清晰。

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

英文字体，特别是对于数据的展示，为了让数据更醒目直观，可以选择非衬线类厚重的字体。例如：我们部门为了在设计中更好的展示数据信息，提取常用字符设计了非衬线类的“兆日金融体”。

文字的大小

《规范》中建议适老版界面及单独的适老版 APP 中的主要文字信息不小于 18 dp/pt。Ant Design 设计语言中讲到关于计算最小字体的方法，基于年长用户阅读距离（43 cm）以及最佳阅读角度（0.75）计算并换算得到建议最小字号为 16dp/pt。那么我们到底按照哪个规范来呢？

笔者觉得，这两个规范没有对错，大家根据自己页面设计或适配的情况来确定就可以了。对于年长用户来讲，不同的人视觉感官度也不一样，我们在设计允许、布局整洁的限度下，字体肯定是越大越好。例如下图是我在做适老版过程中制定的缩放系数规范，为了保证部分复杂页面布局不错乱，将主要文字最小字号定义为 16dp/pt。

当然以上的规范不一定可以适合所有人，毕竟随着用户的年龄增长，视觉障碍会加深。我们还可以更加人性化一点，比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。例如：iOS 系统中在辅助功能里可以设置更大字体、粗体文本（《规范》建议应用字型大小可随系统设置调整，或内部具备字体大小设置选项）；微信可以开启听文字消息。

文字的适配规则

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

界面元素及容器需要跟随文字放大而等比例系数放大

同一容器内的元素横向间距保持固定，纵向间距可按照比例系数适配

② 行间距

《规范》建议段落内文字的行距至少为 1.3 倍，且段落间距至少比行距大 1.3 倍，同时兼顾移动应用适用场景和显示效果。

根据调研测试：标题行间距为 1.3 倍，文字行间距为 1.5-1.8 倍，视觉效果最舒适。数值仅供参考，具体大家还要融合自己的设计去确定。

③ 对比度

为了解决年长用户因为文字、图像颜色淡而看不清的问题，在设计的过程中我们需要使用强对比度的颜色。《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为 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 月完成。

简单来说，就是要求我们在设计适老化界面的过程中，文本颜色需要按照标准加深，与背景色拉开差距以保证年长用户可以清晰识别。为了保证达到这一标准，我们可以使用色彩对比工具去进行测试：

工具一： https://webaim.org/resources/contrastchecker/

工具二： https://www.wenjiangs.com/wp-content/uploads/2017/06/contrast-ratio/

工具三： https://m2.material.io/resources/color/

工具四： https://contrast-grid.eightshapes.com

④ 颜色用途

颜色是界面设计最重要的元素之一，设计师经常通过不同颜色表达去传达一些信息，例如成功、失败等等。但是在无障碍设计中，颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。因为随着年龄的增长，我们对颜色识别感知会变弱，所以使用颜色代表特定意义的时候，需要有另外一种区分方案。例如：

使用下划线表示链接，或使用粗体突出显示文本 图标和文本结合使用传达成功或失败的信息 使用线条粗细、纹理或图案区分图标样式 使用不同的图案传达信息等等

对于颜色的使用，我们还需要注意以下几点：

颜色多样：页面中应使用区别较大的丰富色彩，可借鉴真实存在的物体，保持认知一致。

可适当加深颜色以提高颜色的对比度

重要元素避免使用蓝色和紫色：由于老年人的晶状体变黄、变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。对于这一点，还是要看各个品牌的主题调性，如果无法避免使用蓝色和紫色，那么就提高饱和度以加强识别性。

⑤ 验证码

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

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

⑥ 图标设计

对于页面中的图标，在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。除了单纯的放大，在项目允许定制化设计的时候，我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。另外建议搭配文字描述，方便用户更清晰更快速理解。

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

3. 可操作性 ① 组件焦点(热区)大小

由于年长用户细胞水分减少，手指偏大，在使用触屏的过程中灵敏度较低。所以对于常规组件的焦点，他们操作起来可能会很难完成操作目标。所以我们在放大文字、图标等控件的同时，对于可点击的组件焦点(热区)也需要同步放大。

《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于 60 × 60dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt；单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48 × 48dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt。对于规范中的内容，具体我们可以这样做：

在需要点击操作的元素(<44pt)周围添加 12pt 的反馈热区； 大于等于 44pt 的元素，且有清晰边界的元素，热区保持与元素大小一致即可； 如果多个元素指向同一个操作结果，可使用组合连接在一起的热区； 当元素处于某个组件容器内，最大热区不要超过容器本身； 如果整个容器指向同一个结果，应当以整个容器作为按压区域，而不是某个图标或文字； 元素较多的情况下，操作热区应平分元素间的间距。「有明显边框元素」和「没有明显边界元」素拥挤时，优先保证「没有明显边界元素」的热区； 特殊的小尺寸元素，可以考虑拓展热区，甚至覆盖其他元素，以保证最少 44*44pt 热区；

小贴士： 菲兹定律：任意一点移动到目标中心位置所需要的时间，与目标距离正相关、与目标大小负相关。 所以根据菲兹定律，为了提高年长用户的操作效率，界面中放大需要用户操作的元素，可便于用户快速精准触达。

用一篇超全面的文章，帮你读懂经典的费茨定律 费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

阅读文章 >

② 手势操作

触摸屏时代，有着各种各样创新的手势操作和交互；但是对于年长用户由于行动和认知障碍，这些创新比较难学习理解并流畅操作。所以在移动应用中，应对用户进行手势导航或者操作的结果提供反馈提示；避免需 3 个或以上手指才能完成的复杂手势操作。对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。

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

现在很多应用中创新，有长按侧滑进入左侧空间、长按下拉进入二楼等交互；这类交互对于年长用户来讲其实非常不容易理解且不便操作。笔者之前教过家里长辈这类操作，想告诉他们这类“便捷创新”的功能，但是发现他们重复三四次才能完成操作，且过一段时间就会忘掉，依旧会选择一步一步点击到达目标页面。

综上，对于适老化版本的手势操作我们需要注意以下几点：

使用简单的手势操作：单指优于多指、单击优于双击(多次点击)、单一的手势优于组合手势； 不要加入需要力道触发的手势，例如长按下拉，年长用户把控不好力度很容易把这个手势变成了单击； 有一定学习成本的手势，应当给出引导教学； 给手势操作及时反馈，避免用户觉得没有触发到而多次点击。 ③ 充足操作/反馈时间

在移动应用中，如果限时不是活动的必要部分或关键要素，且不会导致用户发生法律承诺或财务交易，则应为用户的操作留下充足时间，在用户操作完毕前界面不发生变化。

年长用户对于一些动态信息的感知度比较低，所以如果页面中出现一些提示信息，我们可以采用以下方案让提示更友好：

适当延长时间，避免用户还没读清内容就消失了，例如 toast 显示持续时间可以由 3s 延长到 5s； 采用其他类型的提示给用户足够的阅读时间，将短暂停留的内容，调整为常显内容，由用户自行操作确认关闭，例如将 toast 改成弹窗； 利用震动等其他感官提醒优化提示，例如消息推送的震动及消息提示音、警告场景下的长震动；

我们在拉长交互时间的同时，还需要注意避免跨屏任务，因为年长用户在进行多个输入或操作的任务上会表现出明显的障碍。在任务的过程中，我们需要给出足够的解释说明，引导帮助年长用户完成多任务操作。

④ 浮窗

在移动应用中，若内容产生新窗口（包含但不限于弹窗），应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部，且最小点击响应区域不能小于 44×44dp/pt。

对于这条《规范》，我们可以拆分成以下几点来理解落地：

超出 7 秒长时间停留的页面（弹窗），需要提供关闭机制； 关闭机制可以是关闭按钮、返回按钮、跳过按钮或者功能文字操作按钮等一切可以立即退出当前页面的操作； 对于这些关闭机制的点击热区不能小于 44×44dp/pt。

⑤ 提供更便捷的录入方式

年长用户对于表单录入类的操作，总是有很大的心理/操作负担，碰到这类页面常常是不愿意操作，让别人代劳。例如银行的转账页面，大部分都需要录入付款信息、收款信息、转账金额等一系列内容。如果让用户每一项都手动输入，不但效率低而且很容易出错。我们可以做些什么，去减轻用户录入负担呢？

提供有限的选项和默认项 

在页面中我们需要适当精简页面以减轻用户心理负担，只提供需要的选项，或者在需要的时候出现对应选项。 另外在有限的选项中，还可以提供高频选项作为默认选项，减少用户操作

简单理解，提供的选项越少，用户越容易选择，提供默认选项>提供有限选项>提供多种选项。

选择代替输入

选择类的交互方式比输入类更便捷，可以避免繁琐的打字过程，很多年长用户打字都不是很顺畅，甚至是使用手写录入文字。所以对于一些固定项的内容，使用选择类的交互可以很大程度提升操作效率。

识别录入代替输入

对于一些比较大段，需要仔细核对的内容，使用拍照扫描、复制粘贴识别、二维码识别录入等方式更不易出错；例如付方账号的录入。

自动数据带入

具有前后逻辑关联的表单数据，可以提供填写某个数据自动带入其他内容的联动交互，减少用户输入/选择操作；例如录入收款卡号后、自动识别带入收款银行；

常用项历史记录

提供历史记录功能，记录近期操作过的选项，方便用户快速复用再次操作；例如常用收款人的记录，点击后自动带入收款人信息，无需重复操作录入。

⑥ 缩短操作路径

年长用户经常会出现“我在哪”“我要怎么做”“接下来我要做什么”等困扰；面对这样的困扰，我们可以做如下交互优化：

精简功能，缩短重点功能操作路径，避免信息层级过深，要让用户快速触达；

拆分任务步骤，防止信息过载，减少每屏信息密度；对于跨屏的长任务，提供操作进度引导，告知用户所处位置进度，做到流程明确。

减少非必要操作，或允许跳过不必要的步骤；

4. 可理解性 ① 提示引导机制

《规范》建议在用户安装移动应用时，应为适老化设置、老年人常用功能提供显著的引导提示。也就是我们常说的功能引导机制。

对于内嵌的适老版界面，前文中也有提到常见入口位置，市面上大多数的适老版切换位置都比较隐蔽，且未按照规范给予显著切换提示，还有很大的优化空间。

经调研分析多个 app 产品，适老化设置我们可以从以下几点着手优化设计：

初次下载 app 或适老版上线的时候，提供功能开启引导或功能上新提示，告知用户有该功能、功能的入口、如何操作开启；

开启前提前告知用户，适老版是什么，开启后界面会有怎样的变化，给用户心理预期；

进入适老版本后引导提示用户如何回到标准版本，避免用户不想使用适老版而找不到出口；

退出适老版需要二次确认关闭，防止长着用户误触。例如云闪付为简单的弹窗提示，招商银行使用了半弹窗，还告诉用户如何重新开启长辈版，既起到了二次确认的作用也做了提示引导；

在“设置”中提供“适老版”入口，且用户可以通过搜索“长辈版”、“亲情版”、“关爱版”、“关怀版”等关键词直达功能；

常用功能的提示引导我们可以从以下几点着手优化设计：

提供功能指示引导或说明 设置帮助中心，提供纯文字教程、图文教程或视频教程，方便用户查找。还可以将教程以浮窗的形式展示在具体功能页面中，让用户可以边看边操作。 设置客服中心（智能客服、电话客服），运营/客服人员专项跟进，随时为年长用户提供帮助。 界面设计中，对于需要点击操作的设置行为指引，引导用户完成点击。例如在按钮文案中加入行为动作，结果导向的内容；还可以对于一些卡片式的点击区域加上按钮引导。

② 语音功能

在适老版中融入语音功能可以很好的辅助年长用户进行一些录入操作和信息获取，因为很多年长用户文化程度不高，不会使用输入法，大多选择手写输入的方式。但是手写输入效率比较低，而且如果写的字不清晰会识别错误。我们可以从以下几个角度融入语音功能：

使用 AI 技术，提供语音输入功能，目前市面上不少银行应用都设置了语音操作的功能，而且将这个作为重点易触达的功能展示在了关键位置。例如工商银行的语音操作；

功能操作过程中，提供实时智能语音助手或人工客服；也可以结合语音导读功能进行同屏解说引导用户操作；

提供结果状态下语音播报或声音反馈提示，在操作正确或错误时给予对应的正向、警示提示音；

融入智能读屏功能。

融入语音功能的时候，考虑到年长用户的听觉障碍，我们还需要注意以下几点

适当增大音量：老年人听觉平均感知音量在 67.5～75.3 分贝之间； 降低语速，提供慢速、正常、快速等语速供用户自己选择，更清晰有效的获取语音信息； 优化收音机制，去除杂音，提升录入识别成功率； 支持方言，可智能识别方言或有一定纠错机制。 ③ 通俗易懂的文字

由于年长用户触网时间短，受教育程度不同，可能对互联网常用的一些词汇存在认知障碍。所以我们在设计的时候需要对一些互联网词汇进行口语化表达，采用用户易理解的文案。

同时对于一些提示性的文案，需要表达清晰，在文案上要具有一定的引导性，例如，用户输入账号缺少 1 位的时候，应当提示：请输入 xx 位账号，而不是仅仅提示，输入错误，让用户自己去找哪里错了。

④ I 模型-精简的布局

目前市面上大多数首页都承载了很多内容，但是这种布局对于年长用户来讲不利于集中视线聚焦功能。所以在适老版建议采用 I 模型的布局模式，聚焦内容，减少用户视线主焦点的转化，这样更便于年长用户阅读与理解。一般来讲，我们需要控制用户的视觉主焦点转化不超过 2 次。

⑤ 使用具体的内容、真实形象

在制作活动 banner 场景中，采用具象的图片会比插画类型的图形更容易向年长用户传达信息，而且会给年长用户传递出真实感从而提升对产品的信任度。例如中国银行在适老版的设计中采用了大量的真人场景配图，非常的直观易理解。

5. 兼容性 辅助技术

移动应用程序不应禁止或限制终端厂商已适配好的辅助设备（如读屏软件等）的接入与使用。在辅助工具开启时，移动应用内容中所有功能性组件均能正常工作：按钮可正常访问；输入框能正常进行输入；多媒体能正常播放；在页面局部更新后，移动应用内容中新增的功能性组件也应能正常工作。

这一点更多的是从开发技术角度制定的规范，要求软件开发的过程中做好适配，保证适老版使用各类辅助技术的时候能够正常运行。我们设计师能做的就是在设计验收的过程中，考虑到这个层面，并将一些辅助功能的接入与使用纳入设计验收。

6. 安全性 ① 拒绝引导性内容

现在很多应用有着各种各样的广告、推销、诱导下载链接等，而年长用户容易受骗，所以在适老版中严禁出现推销广告等内容。《规范》中限制如下：

广告插件及诱导类按键限制 禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件，也不能随机出现广告或临时性的广告弹窗。 禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。 对于银行金融产品来讲，涉及到资金安全，筛选重要功能、安全的产品提供给年长用户就显得尤为重要。例如工行适老版的投资理财和专属存款，仅放了适合年长用户的产品。

② 给用户信任感，保障老年用户个人信息安全

移动应用程序进行个人信息处理时应遵循最小必要原则，即处理个人信息应当有明确、合理的目的，并应当限于实现处理目的的最小范围，不得进行与处理目的无关的个人信息处理，以保障老年用户个人信息安全。

同时我们在设计呈现的时候，可以加入一些安全、保障类的表达来提升产品整体的可信度，增强年长用户对产品的信任感，从而敢用。例如：

加入安全中心、安全保障、信任背书等元素，打消年长用户疑虑； 对关键信息进行脱敏展示，降低年长用户对数据泄露的担心； 在各个环节增加安全信息提示，加强安全认证，多重保障让年长用户安心； 增加防骗、反欺诈模块，增强年长用户防骗意识

章节小结

以上，我们结合《规范》里逐条规则和实际案例拆分讲解了如何去实际落地适老化设计。在这里借用阿里对适老化设计建议的关键词提炼，总结本章重点内容：

字号≥18dp/pt——清晰的字型、足够大的文字、舒适的行间距 强烈好于柔和——符合无障碍标准的对比度、可识别的颜色 具象好于抽象——优先使用写实图片 行动好于描述——使用表示行为的“动词短语”会更容易理解 熟悉好于新鲜——使用符合认知的设计和流程、易理解的图标、通俗易懂的文案 色彩好于图形——使用丰富的色彩，加强年长用户记忆与理解 点击好于滑动——简单的手势操作、容易点击的热区 点击好于输入——提供更便捷的录入方式 多模态好于单模态——语音功能的融入 接下来我们一起看一下目前市面上的一些银行金融产品适老化版本的体验测评分析。

五、银行金融产品适老化案例分析 1. 工商银行

名称：幸福生活版

slogan：超大字体，设计极简；语音助手，交互升级；专属理财，乐享收益；亲情账户，传递关爱。

入口：五个一级页面下拉加号内的版本切换；我的页面-设置-切换长辈版(幸福生活版)

出口：一级页面拉加号内的版本切换；我的页面-设置-切换标准版。

体验分析：

入口和出口位置及交互一致，贴合用户心智，符合操作习惯； 一级页面布局精简，层级清晰，重点功能突出。语音操作放在了最重要的位置，方便年长用户操作 页面内的功能都经过了筛选，只放出了年长用户常用功能。对于网点服务还有专门的适老网点推荐 功能子页面也做了适老化的定制，从视觉到交互，都适配了年长用户需求。 除了个别不是很重要的标签文字比较小，工行整体的适老化都做的不错 推荐指数：☆☆☆☆☆

2. 招商银行

名称：长辈版

入口：我的页面-设置-长辈版

出口：首页-下拉到底部-回标准版

体验分析：

入口较隐蔽，开启无提示直接开启 首页是常用功能、点击客服直接进入“小招客服”，页面精简，重点突出； 功能子页面仅做了简单的文字、控件放大； 点击“回标准版”出现的半弹窗提示，防止误操作，起到二次确认的作用，同时告知用户重新开启的入口 推荐指数：☆☆☆

3. 中国银行

名称：岁悦长情版

slogan：风格简约，大字展示，为年长客户甄选产品和服务

入口：首页-版本；我的-设置-版本切换

出口：我的-切换标准版

体验分析：

入口的设计视觉效果很好，非常直观。 出口太过明显，且没有二次确认，对于年长用户如果误触了回到标准版，可能找不到入口 首次切换至岁悦长情版，有功能引导 一级页面功能和布局做了精简，但是二三级子页面未做适配。 整体设计风格符合年长用户审美，给用户温馨的感觉。 推荐指数：☆☆☆

4. 中国农业银行

名称：大字版

slogan：超大字体，功能精简；语音助手，一键客服

入口：首页-版本；乡村振兴-版本；我的-更多下拉-版本；设置-版本切换

出口：首页-版本；我的-更多下拉-版本；设置-版本切换

体验分析：

多个入口，且入口的设计样式很有特色；出口与入口的路径相同。 布局清晰，功能做了筛选精简，一级页面仅保留常用功能。 重点功能子页面进行了布局和交互的适老化适配。 整体的视觉还原和谐度很好，大字版的用色也针对年长用户的生理特征进行了加深处理。 推荐指数：☆☆☆☆☆

5. 宁波银行

名称：关爱版

slogan：超大字体，精简功能；贴心服务，便捷易用

入口：首页-加号下拉-版本切换；我的-版本切换；

出口：首页-加号下拉-版本切换；

体验分析：

页面极简，取消了底部的 tab 栏，首页视觉表达符合年长用户需求； 语音功能使用了悬浮的按钮，且伴随收起交互，这点对年长用户不是很友好，不容易点击使用； 重点功能子页面仅做了少量适配，大部分控件与普通版一样； 推荐指数：☆☆☆

6. 平安口袋银行

名称：大字版

slogan：平安在手，儿女无忧；字体更大，简洁易懂

入口：首页-加号下拉-版本切换；我的-版本切换；

出口：首页-版本切换；我的-版本切换；我的-设置-版本切换

体验分析：

页面结构清晰，重点功能突出，精选的功能都是与年长用户相关的，比如防骗宝典、平安老人意外险等等； 图标设计更具象，更易读懂理解； 二三级子页面均做了视觉适配，适配呈现效果体验感很好； 各类业务场景都做到了告知、引导和反馈。 推荐指数：☆☆☆☆☆

7. 云闪付

名称：关爱版

slogan：字体大，图标大，使用更简单

入口：首页-版本切换；我的-设置-切换至关爱版

出口：首页-版本切换

体验分析

布局和功能都做了精简； 退出关爱版有二次确认，避免了误操作； 各功能的子页面未做大字适配。 推荐指数：☆☆☆

8. 江苏银行

名称：融享幸福版

slogan：字体更大 简洁清晰 一键帮助 安全无忧

入口：首页-版本切换；

出口：首页-版本切换；

体验分析

入口与出口一致，标识明显； 页面布局精简，功能内容贴合年长用户的需求，特别是一键帮模块里的内容都是实际解决年长用户需求的功能； 语音介绍功能，是其他产品没有的，开启后可以点击进行语音播报讲解，很大程度解决了年长用户看不懂、不会用的痛点； “反欺诈指南”、“日历模式”都贴合年长用户需求，暖心且有特色； 推荐指数：☆☆☆☆☆

总结 这篇文章很长，感谢大家耐心读到了最后。其实刚开始准备这篇文章的时候，只是想基于自己的工作内容做一个复盘。但是在书写总结的过程中，我查找阅读了大量的资料，感受到了无障碍、适老化设计的暖心人文关怀，就觉得很有必要仔细的写一写。特别是这句话“手机字体越来越大，音量越来越大，子女的陪伴却越来越少。子女知识想用一部手机联系到老人，却没有想过，他们也想用手机，去联系今天的世界。”狠狠的触动了我。

所以如果能让更多的设计师关注到这个群体、能够向更多的设计师传达适老化设计的一些知识点，这篇文章就发挥了它的价值。

其实整体来看，目前整个互联网的产品适老化才刚刚开始并不是很完善，企业也可能因为成本、资源等问题无法实际落地推动适老化设计。但是随着时间的推移，一定会有更多的产品关注并落地实施适老化（在我写这篇文章的过程中，有好几家银行产品对适老化的版本做了多次迭代优化，最终编辑排版的时候，又更新了一些案例。所以说适老化是大趋势，头部产品都已经开始注重这部分人群的体验了）希望通过这篇文章给设计师们一点启发。就算大家目前所做的产品，没有适老化设计的需求，里面的一些知识点融入基础产品的设计，也是适用的，能给用户带去更好的用户体验。

再次感谢大家的阅读，希望通过设计的力量，帮助年长用户更好的融入并享受数字化生活。

参考文章：

为了帮助大家更好的理解本文，以下为书写过程中阅读参考的一些文章和报告，可供进一步深入学习。

《QuestMobile2022 银发经济洞察报告》 《中国互联网络发展状况统计报告》  《QuestMobile 银发人群洞察报告》   《QuestMobile 金融支付报告》   《工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》 《腾讯出品！手机银行适老化设计探索（附超多干货）》 《如何做好产品的适老化和无障碍设计？来看腾讯的实战案例！》   《小程序适老化设计指南》   《超全面！「无障碍设计」指南》   《适老化设计——让产品充满温度》   《百度大字版精细系统的适老化设计研究实践》   《一篇就够！实际场景落地适老化设计》   《色彩无障碍指南: 如何让色盲用户获取色彩信息》   《银发族数字化产品适老化研究蓝皮书》   《优设 9 图-如何做好适老化设计》  

卡片设计在 UI 中有非常多的优势，相关的文章我已经写过几篇了，结合往期文章可以更系统地学习卡片设计规范：新人设计师来收！卡片式设计基础入门指南（附超多案例）很多人对 APP 中的卡片设计习以为常，但对于卡片设计流行的原因、优点，以及如何做好卡片设计却可能不甚了解。阅读文章 > 做好这4个细节，帮你快速提升...

卡片设计在 UI 中有非常多的优势，相关的文章我已经写过几篇了，结合往期文章可以更系统地学习卡片设计规范：

新人设计师来收！卡片式设计基础入门指南（附超多案例） 很多人对 APP 中的卡片设计习以为常，但对于卡片设计流行的原因、优点，以及如何做好卡片设计却可能不甚了解。

阅读文章 >

做好这4个细节，帮你快速提升卡片设计效果！ Hi，我是彩云。

阅读文章 >

在做卡片设计时什么才是最重要的？这篇文章中我将会分享 8 个最关键的细节。在这之前，我们一起来对 UI 中的卡片设计基础做一个梳理，总结下一般在哪些场景适合用卡片设计。

卡片是 UI 中的一个组件元素，能够创建清晰的视觉单元，让信息更具逻辑性。它通常包含：标题、描述、图片、按钮或者链接。

基础卡片

一、一般在哪些场景使用卡片设计？ 产品目录页面：大型电商网站诸如亚马逊、阿里、沃尔玛和 eBay 都使用了卡片设计做产品呈现。通常，一个产品卡片构成包括产品图片、标题、价格、折扣和行动按钮，可以通过点击这个行动按钮查看商品详情页面。

Amazon (top) and Alibaba (bottom)

eBay (top) and Walmart (bottom)

内容网站：新闻文章、社交媒体平台会使用卡片组件这种比较聚焦的设计去呈现每个内容，这样用户可以快速扫描，阅读内容。

Behance (top) and Dribbble (bottom)

CNN (top) and BBC (bottom)

仪表盘界面：仪表盘是一个非常好的例子，在其中能够很容易体现卡片设计的优势，它能把相关的信息在界面上组织到一起，帮助用户更容易的比较和分析数据信息。

Mixpanel (top) and Dribbble (bottom)

收集网站：浏览和探索大量的设计作品是一种有趣和吸引人的体验，就像 Pinterest，Unsplash 基于卡片布局，用大图封面的形式能够抓住用户的眼睛。这就是为什么在网页和手机体验中使用卡片浏览变得如此流行的原因。

Pinterest (top) and Unsplash (bottom)

协作工具：卡片是很灵活的组件，它可以将不同类型的信息和子元素组合在一起。例如，Figma、Miro、Framer 都用了卡片形式展示项目和文件。卡片设计干净、易于互动、实用，可以很容易地进行文件相关操作。

Figma and Miro

二、最佳实践 讲卡片设计的文章相信已经很多了，但我想在这篇文章中着重讲一些容易被忽略的 设计细节 。我希望这些点可以帮你进一步优化卡片设计。

1. 注意在卡片和背景之间设计合适的对比度

为了从背景中更好的区分卡片，你可以给卡片增加一个外描边或者加一个浅浅的投影。

彩云注：这里原作者放的例子我觉得没有特别好，但是她提到的这个细节确实是需要注意的，背景和卡片之间的颜色对比不要太小，不管是改颜色还是加描边或者投影，都是为了加大这种对比。

比如下面彩云随便找的一个很优秀的卡片设计，就是用的多彩色加大了卡片与背景的对比，使得信息清晰可见。

2. 努力维护好字体大小，避免使用太小的字号

内容可读性由所选字体和字体大小决定。下面的例子中可以看出，两个卡片设计在样式上都差不多，但因为字体大小选的对，整个卡片在视觉上变得更平衡，对人眼来说更好，所以右边的卡片更容易识别。

关于字号选择有一些经验可以分享给你，帮助你优化视觉层次。（彩云注：这里提到的尺寸应该多指 PC 端）

标题，使用的字号会在 20px-96px 或者更大，取决于卡片的尺寸和具体内容 副标题，字号会使用小于主标题 2px-10px，这样可以比较容易区分 正文，字号最少 16px。在某些情况下，如果你使用某些本身字符就比较大的字体，则可以适当减少字号。例如，在谷歌规范（ https://material.io/design/typography/the-type-system.html#applying-the-type-scale ）中，两个正文文本的大小分别定义为 14px 和 16px 按钮，它的字号不可以比正文的字号小。当需要展示多个选项时，对于主要按钮需要用到更突出的字体样式（加粗 Semi-bold/Bold），次级按钮使用略弱的字体样式（一般 Regular/Medium） 尝试限制字体大小的数量，可以使用字体缩放插件，Figma 中的插件 Type scale（ https://www.figma.com/community/plugin/739825414752646970/Typescales ）或 Web tool for defining a type scale（ https://type-scale.com ） 3. 对留白创建一个间距体系

留白是 UI 各元素之间的空白区域，它们将创建视觉组，保持视觉层级。如果你想避免设计混乱，需要确保做好一致性，你需要定义好间距体系，这对开发来说也会非常有效，减少代码量，还原的更好。

关于间距系统我也有一些经验

选择一个基础单位，并用它来作为 UI 元素间距的倍数值。一般来说，基础单位是 4px（0.25rem）。不建议使用奇数比如 5px，这是因为设备中会有 1.5x 的 DPI，这个留白的缩放值会变成 7.5px 会导致像素模糊 通过使用基础单位作为增量或乘法来定义间距值，减少间距值的数量，会让 UI 更简洁，例如它用来定义 Tailwind（ https://tailwindcss.com/docs/customizing-spacing ）这个产品留白规范 Figma 进阶用法，修改“大移动”（具体设置方法见官方帮助文档 https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values ），从默认的 10px 改到 8px，这将会让你每次移动元素可以保持 8px 的数值（这是基础单位的 2x），只需要按住 shift+方向键即可。这会非常省时间 4. 尽可能设计与内容布局相似的加载状态

加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态。下面的例子，你可以在右边看一个正确加载效果的设计，会更加符合用户的心理预期。

一组加载状态的效果对比

Figma and Vimeo

5. 定义一个卡片的固定高度

在实际项目中，你需要设计一个卡片元素，假定一个卡片是一行内容，另一个卡片是有 4 行文本内容。最好的解决方案是设计一个固定高度的卡片，在内容较少的卡片上使用留白，而在内容较多的卡片上使用文字截断。（彩云注：这样卡片在效果上更加一致。）

6. 使用网格作为卡片设计的基础规范

网格作为卡片的布局基础，有助于统一地安排内容，这就是为什么当涉及到卡片设计时它们是如此有用。当你需要时，可以使用网格将卡片的宽度扩展到需要的网格列数量，通常这样做，你可以找到一个合适的卡片宽度。当设计一个响应式布局时，应该为每个断点设计一个网格，设计相应的卡片大小。

（彩云注：可能有些人不大理解断点的意思，它指的是从 PC 切换到平板，然后再切换手机，屏幕大小在变化，布局也会做相应的改变）

(1) PC (2) 平板(3) 手机

你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.

当你在设计基于卡片，响应式布局时，你需要问自己几个问题：

卡片内容在所有断点之间看起来一致吗?（台式机、平板电脑、手机） 间距值是否一致？ 交互合理吗?它们会影响卡片的大小和卡片之间的间距吗? 长标题有考虑吗?它们会如何影响卡片的内容? 一些 Figma 设计卡片布局的建议：

为卡片定义约束 constraints（ https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ），以确定当你调整它们的大小时，布局中的卡片应该如何响应 为卡片应用 auto-layout（ https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout ），使它自动调整大小根据里面的项目。在 Figma 上有教程（ https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ） 创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小 7. 创建不同内容的卡片设计

如果你事先知道卡片可能有不同长度的内容，请确保在设计中涵盖这种情况。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原，避免破坏内容对齐。

8. 为更好的用户体验定义卡片交互

UI 交互是用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的操作，状态是在特定用户的交互中出现的视觉反馈。

与许多其他 UI 元素(按钮、文本字段、下拉菜单等)一样，卡片的状态应该取决于使用上下文和定义的交互。对于特定的交互，卡片应该根据状态设置样式。最常见的卡片状态列表:

默认：卡片处于正常状态，无任何用户交互 悬停：当用户将鼠标光标(指针)放在卡片上时 激活：如果卡片是可点击的，用户按下鼠标主按钮点击它，卡片的样式应该改变，以显示组件是激活的。这与按钮被按下的状态相同 聚焦：当使用键盘或语音等输入法时，卡片会高亮显示。通常在网页上这种状态是用蓝色的，但你可以选择你自己的品牌色，只要确保颜色与背景颜色至少 3:1 的对比度 选择：卡片被选择时的状态拖动:用户拖拽卡片时的状态 总结 卡片是 UI 中的常见组件，你可以在大多数网站和移动应用中找到它，它实在是太流行且实用了，所以一定要掌握好卡片设计并进行大量的练习。通过这些知识点的学习，我们可以使它们在视觉上更有吸引力，更有效，更容易访问。

欢迎关注作者的微信公众号：「彩云译设计」

大家好，这是 12 月的第 1 波设计干货合集！这次的干货合集应该相当符合视觉和平面设计师的需求，有每日更新灵感素材的设计师干货日报，有两款各有特色的配色工具，有免费的3D字体小样，也有开源免费的高品质图标，有风格现代简约但是质感十足的免费背景素材，还有新的人工智能绘图工具。当然，在此之前记得看看往期干货中有没有...

大家好，这是 12 月的第 1 波设计干货合集！这次的 干货合集 应该相当符合视觉和平面设计师的需求，有每日更新灵感素材的设计师干货日报，有两款各有特色的 配色工具 ，有免费的3D字体小样，也有开源免费的高品质图标，有风格现代简约但是质感十足的免费背景素材，还有新的人工智能绘图工具。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第五波！2022年11月精选实用设计干货合集 大家好，这是 11 月的第 5 波设计干货合集！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费高素质简约现代弥散背景 https://vackground.com/product/liquid-wave-modern-mesh-backgrounds

高素质的背景素材能够极大地提成整个页面的格调，而这套免费的背景素材就可以做到这一点，整体的风格非常现代，而且带有弥散渐变的光影，视觉效果拉满。这组免费背景总体有 40 张，包含有 ai 和 jpg 两种格式，有需要的同学赶紧下载。

2、为品牌精心适配的配色工具 https://draftss.com/color-palette-for-branding

这个名为 Colorss 2 的配色工具和其他配色工具略有不同，它会根据情绪、感知和氛围来制定配色方案，这些情绪具体有什么特征，适合什么定位的品牌使用，会给人什么样的感受，都会搭配相应的说明，方便设计师使用。而且 Colorss 还会制定配色方案的延伸和变种，方便在复杂的使用场合灵活使用，可以说相当良心了。

3、图案快速预览配色工具 https://more.graphics/variants

某个配色方案确定之后，整体的效果到底好不好？最简单的方法，就是找个图案直接套用看看效果。这个服务就是专门干这个事儿的，内置了3个图案专门用来查看各种配色的实际对比度和视觉效果，你也可以自己上传图案来测试效果，并且也可以自定义配色方案来查看效果。

4、超帅的立体 3D 字体 Font Z https://fontz.design/

FontZ 提供的 3D 字体几乎适用于所有的设计项目，这些预先设计好样式的字体可以非常轻松地使用，而且支持的软件类型也相当丰富，从 PS Sketch 到 Figma Blender，虽然整套字体是收费的，但是提供免费的 Demo。

5、每日更新的设计师干货日报 https://designerdailyreport.com/

这个名为设计师日报的浏览器插件，会提供每日精选内容，从精选的图片、免费的字体、品牌设计、优秀设计师作品集到令人惊叹的网站、作品以及 Instagram 灵感等，不一而足，想让灵感和素材触手可及的同学可以装上这个插件获取灵感吧。

6 、免费开源的高素质图标 https://circumicons.com/

这是一个面向设计师和开发者的开源图标库，这套图标库总计有 285 个不同但是足够日常使用的图标，这些图标特别适合使用 React、Vue、Svelte 等现代开发框架的地方，无论你是设计师还是开发者，都可以轻松驾驭和使用这些图标。

7、人工智能绘图平台 AISEO ART https://art.aiseo.ai/

AISEO Art 同样是一个基于人工智能的文字转图片的服务，它的人工智能算法按照分类进行过细致的训练，你可以在输入文本描述之前，先选择你要生成的图片的分类，它生成的结果会更贴合需求。此外，AISEO Art 还新上线了模板功能，喜欢尝试的同学可以上手看看。

今年以来，京东购物小程序围绕“一键发现 万物好店”的产品心智，从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。1.0 致力于打造更契合微信域的用户体验；2.0 尝试以一种有趣的姿态留住偶发闲逛用户。2.0 近期已陆续上线，借此机会和大家分享一下整个改版过程及思路。

今年以来，京东购物小程序围绕“一键发现 万物好店”的产品心智，从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。1.0 致力于打造更契合微信域的用户体验；2.0 尝试以一种有趣的姿态留住偶发闲逛用户。2.0 近期已陆续上线，借此机会和大家分享一下整个改版过程及思路。

往期改版：

让购物简单快乐！京东 APP 11.0 深度解读：视觉篇 在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个场景是如何外化以辅助达成改版目标的。

阅读文章 >

一、变化与契机 过去，京购小程序更多是京东 APP 在微信域的分身，在货品、产品设计及营销层面与京东 APP 没有任何差别。现在，小程序已由散点式孤岛向全域营销转变，成为京东在微信域流量及交易的主阵地。与此同时，我们面向的用户也更加多元偶发，他们购物需求模糊，以闲逛、消磨时间为主，偏好居家日用、⻝品生鲜等高频高耗商品。在微信域差异化货品及算法的加持下，前端设计急需打破现状，进行体验差异化升级，塑造微信域专属心智。

二、改版思路 基于人货场差异化洞察，改版思路围绕“知心省心开心”的用户需求体系，从被动支持、到主动引领、再到互动交流，阶梯式构建用户对京购小程序的结构化认知。

1. 知心 打造契合微信域的用户体验

首页作为小程序的门面担当，即是用户心智承接的核心阵地，也是内容分发的主要场景。故 1.0 为用户打造“知心”的消费体验，我们先从首页切入。在此过程中我们也面临着渠道、人群、品牌等多重挑战。

基于数据/用户/竞品等专业洞察，以结构化思维解构分析，由里及表从框架、内容、动线、品牌 4 个方向升级应对以上挑战。

框架承载能力升级

针对框架的升级，将从广度和深度来个维度来进行拆解，为每一个闲逛场景，重塑更具包容性体验框架。

广度上，面向不断扩展的多元化电商内容结合设计趋势跟随及偶发用户特性，将旧版楼层堆叠严重的货架型框架，通过内容精简使 feeds 移入首屏让用户快速进入逛的状态。

深度上，将旧版单一扁平框架拓展成一个更具探索性的立体框架，以应对日益增多的渠道特色需求。通过摇一摇融入社交心智高效分发内容、向左打造私域化阵地、向右建设专属活动日历、下拉则用娱乐化承接偶发用户，让用户更好的发现内容。

feeds 内容表达能力升级

双列流设计弱化了推荐 feeds 不同内容的个性表达，基于前期大量的设计探索，我们从「触达表现心智」3 个层面系统化构建更具精细化的内容表达模型，提升内容触达效率的同时丰富内容形式。

动线多元化升级

在浏览前中后场景下深挖偶发用户痛点，结合用户行为及心理进行多元化营销动线设计，吸引持续浏览和点击。

品牌心智升级

在完成首页整体体验架构设计后，我们也围绕着京东品牌继承、差异化货品调性打造、大促特色营销氛围改造 3 个维度进行了京购小程序品牌心智升级。

① 京东品牌继承与重塑

微信生态环境下，京购小程序在继承京东品牌调性的基础上，通过兼顾场域特色，打造更聚焦、包容、多元的品牌记忆点，重塑京东微信域专属视觉体系。提炼高效、丰富、亲和的设计关键词，并定义品质简洁、亲和舒适、轻透明快的视觉基调，从色彩、 图形 、质感、动效 4 个维度进行设计映射。

匹配微信域五大机会品类货品特性

挖掘微信域 5 大机会品类特性，从色彩精细化传达、情绪性语义意向来布控场域类目主色调，塑造微信域差异化类目专属心智。

有渠道特色的大促营销场建设

在京东大促主题背景下，微信域将协同主站的节奏爆点、核心玩法、权益结算、尖货爆品内容。在此基础上，制定预热期抢跑营销节点，实现对大促整体节奏上的补位增长，在场景期通过限时营销部署对抗品类期的销售疲软的差异化营销策略。结合微信域用户动机及特点，我们进行了有渠道特色的差异化营销场设计。

为统一大促期间用户感知，我们在品牌、颜色及风格调性上，同步了主站的大促营销心智，打造递进式大促首页基调。并基于小程序日常“低价”的营销策略，预热期采用颜色降噪设计让用户更聚焦信息为大促造势。品类专场期配合微信红点通知，在开⻔红及 bigday 同步 app 视觉氛围，唤醒承接微信的京东老用户。

与此同时，为了更好的承接微信域用户，围绕“承接场效、优惠透传、视觉减负、营销感知”等设计策略，打造具有微信域特色的大促营销场设计，并不断尝试和校验试跑出最适合小程序的体验设计方案，激发用户“逛”的兴趣。

最后为助力业务提升用户行为转化，针对微信域组件&动效等前端设计模块，持续进行 ABtest 测试，并基于数据反馈沉淀高转化设计策略。

2. 省心 ① 为用户带来“省心又省钱”的购物体验

我们的用户是典型省钱不省生活的一群人，不管是消费体验还是货品供应，我们都希望做到省心又省钱。

消费链路升级：购物全流程用户需求识别与满足

过去京购小程序侧重“搜索转化”的单一路径。为了给用户带去省心的消费体验，新版以购前明确购物需求、购中快速决策转化、购后获取专属服务的体验定位进行消费链路升级。

购前：向消费链路上游延伸

购前针对用户的模糊需求，在完善搜索功能的同时利用热点话题、微信域尖货榜单、延展推荐等内容升级搜索流程，向消费链路上游延伸，承接用户闲逛探索需求。

购中：快速决策转化

购中基于信息减负、路径缩短、社交辅助等设计策略，构建短商详、购物车分享、短链结算等新型产品形态来提升用户决策转化效率。

购后：打造更具专属感的服务体验

购后以用户分层，围绕不同场景、不同用户身份的内容&权益渗透设计，打造更具专属感的服务体验。

微信域特色频道：一段从认知到相知的旅程

京购小程序通过重运营、强干预的方式试验跑出微信域的心智单品和类目，从“单品、品类、品牌”维度孵化“10 元店、单单返、大牌微力”等特色营销 IP。在此背景下，设计侧围绕从认知到相知的过程，进一步助推差异化货品占领用户心智。

认知：记住我的样子

为快速穿透用户心智形成记忆认知的目的，设计上围绕“频道定位、品质凸显、微信专属”等关键词，着重刻画逛购动线中“无需计算的直降、邀友享低价的特权”，并通过品类调性，联动头图、商卡打造沉浸式的品类营销动线，匹配用户类目心智，立足于为用户带来“有品质最省钱”的购物体验。

除日常运营外，频道每月定期联动品类和品牌打造营销 Bigday，以 “超 V 单品日、超级返、大牌 V 力”进行全新升级。为进一步穿透用户心智，团队内部头脑风暴反复推敲，以“心智连贯性、设计延展性”为原则，选取“V”作为微信域系列 IP 的超级符号，并根据应用场景特征设定符号延展原则，在首页、频道、黄流等购物全链路布局有效发声点，形成统一的、多方位的营销声浪。

相知：记住我的好

受微信去中心化特色影响，用户在微信的购物行为更加偶发、快捷，为加速用户行为转化，基于“短链”的设计思维，结合“爱达法则+上瘾模型”，搭建了积木式的 “IDA 后链路互动增长策略”提升流量 ROI。即从资源入口进入，通过区分不同生命周期的用户设计覆盖首页、频道、黄流等全链路权益营销动线，让对的人，在对的地点，获得最适合 TA 的权益，将“省心”贯彻到底。

用“精准权益、互动裂变、私域沉淀”三位一体的积木式短链互动模型，赋能京东微信域广告后链路，充分串联及发挥公众号、视频号等微信域非中心化的业务能力，并最终沉淀到京东购物小程序做整体交易，拉长及放大用户价值。

与此同时，为加速用户行为转化，融合心理学认知偏差等定律，对模型进行“复刻”和“升级”。在微信域特色频道和营销玩法中孵化“复访、裂变、转化”等短链玩法，助力业务增长。

3. 开心 更精准的匹配用户泛娱乐、泛社交兴趣

随着用户消费场景的多元化，内容对整个消费行为产生了多维影响，作为传统电商平台如何从单一的理性货架导购到丰富的感性内容引导，从单一的满足商品刚需到增加情感因素和人文关怀？1.0 通过差异化体验升级拉近与微信消费者的距离，2.0 我们依然选择从用户视角出发，将小程序二楼作为创新试验田，尝试用更内容化娱乐化的方式与用户建立联系；我们想要京东不再那么“一本正经”，而是以一种有趣的姿态让用户在娱乐中完成购物初体验。

依托于微信小程序二楼开放能力，区别于常规浏览动线，我们以逆向思维在页面顶部开拓一个能与用户深度交流的二楼娱乐阵地。通过首页娱乐任意门引发用户好奇心自发下拉，进入我们精心设计的神秘好玩世界；再以视频化&游戏化&社交化等好玩有趣的内容，并搭配微信即时打款，锁定用户进入后的黄金 5 秒注意力，循序渐进的通过传统电商权益牵引用户进入电商流程，从而链接小程序新消费场景。

触达：传递娱乐属性，强化好玩有趣心智

在霸屏下拉入口的设计中，秉承意向性及情绪化表达的设计原则，基于泛娱乐化关键词映射，打破京购小程序平稳的主流色系，用高饱和反差对比色形成视觉冲击；以轻拟物风深入构建元素细节呈现，尽可能塑造元素中的空间、体积、光源等复杂的物理表现，增加界面的质感厚度和纵深感，整体炫彩动感，使二楼好玩基调拉满，给用户焕然一新的直观感受。

吸引：突破认知壁垒，贴近用户真实生活

契合内容表达的设计风格探索

小程序二楼如何突破认知壁垒吸引用户停留，我们进行了前瞻性的泛娱乐化内容探索。在内容呈现上，短视频以更加轻松直观的表达和更广泛的用户接受度来吸引用户持续停留；小游戏以反套路低门槛易上手的魔性玩法来获得用户投入精力增加粘性；社交互动以抓住目标用户正能量相亲相爱的特质来刺激用户病毒式传播。

1.0 我们建立起的审美是一种对秩序、精致美的追求，2.0 需要更多元化的审美打乱设计的秩序，以一种更为感性的设计方式来传递调性，贴近偶发用户真实生活；我们根据内容特色尝试利用“新丑风”、土味暴力美学风、美女封面老头乐等设计风格让视觉表现陷入“百家争鸣”的局面。

激励设计呼应现实场景，激发用户体验爽感

激励机制作为吸引用户的有效手段，尝试用虚拟设计映射实体的手法来与现实场景呼应，拉满体验爽感从而建立与用户的情感共鸣，让小程序二楼走出一条“别样花路”。

把生活中的记忆通过夸张的动效方式加入到激励设计的体验链路中，通过动效设计来引导用户情绪，强化喜悦感知；最终经过反复调试，现金设计复刻了 Money 扑面而来的惊喜动效。

有了现金动效的打样，红包的动效设计也就顺利很多。

转化：牵引用户软着陆电商环境

当用户被吸引后，在此阶段使用简单直接的传统电商权益逐步牵引用户进入电商流程；至此通过整套动线，让这些偶发闲逛用户发现好玩有趣不一样的京东。

写在最后 在微信生态环境下京购小程序汇聚了形形色色的用户，他们可能是忙忙碌碌的打工人、有钱有闲的小镇青年、岁月静好的大爷大妈…；他们带着独特的生活气息来到这，很有幸为他们呈现不一样的京东；希望每一个来到京购小程序的用户都可以感受到知心、省心和开心。

欢迎关注「JellyDesign」的小程序：

卡片设计在 UI 中有非常多的优势，相关的文章我已经写过几篇了，结合往期文章可以更系统地学习卡片设计规范：新人设计师来收！卡片式设计基础入门指南（附超多案例）很多人对 APP 中的卡片设计习以为常，但对于卡片设计流行的原因、优点，以及如何做好卡片设计却可能不甚了解。阅读文章 > 做好这4个细节，帮你快速提升...

卡片设计在 UI 中有非常多的优势，相关的文章我已经写过几篇了，结合往期文章可以更系统地学习卡片设计规范：

新人设计师来收！卡片式设计基础入门指南（附超多案例） 很多人对 APP 中的卡片设计习以为常，但对于卡片设计流行的原因、优点，以及如何做好卡片设计却可能不甚了解。

阅读文章 >

做好这4个细节，帮你快速提升卡片设计效果！ Hi，我是彩云。

阅读文章 >

在做卡片设计时什么才是最重要的？这篇文章中我将会分享 8 个最关键的细节。在这之前，我们一起来对 UI 中的卡片设计基础做一个梳理，总结下一般在哪些场景适合用卡片设计。

卡片是 UI 中的一个组件元素，能够创建清晰的视觉单元，让信息更具逻辑性。它通常包含：标题、描述、图片、按钮或者链接。

基础卡片

一、一般在哪些场景使用卡片设计？ 产品目录页面：大型电商网站诸如亚马逊、阿里、沃尔玛和 eBay 都使用了卡片设计做产品呈现。通常，一个产品卡片构成包括产品图片、标题、价格、折扣和行动按钮，可以通过点击这个行动按钮查看商品详情页面。

Amazon (top) and Alibaba (bottom)

eBay (top) and Walmart (bottom)

内容网站：新闻文章、社交媒体平台会使用卡片组件这种比较聚焦的设计去呈现每个内容，这样用户可以快速扫描，阅读内容。

Behance (top) and Dribbble (bottom)

CNN (top) and BBC (bottom)

仪表盘界面：仪表盘是一个非常好的例子，在其中能够很容易体现卡片设计的优势，它能把相关的信息在界面上组织到一起，帮助用户更容易的比较和分析数据信息。

Mixpanel (top) and Dribbble (bottom)

收集网站：浏览和探索大量的设计作品是一种有趣和吸引人的体验，就像 Pinterest，Unsplash 基于卡片布局，用大图封面的形式能够抓住用户的眼睛。这就是为什么在网页和手机体验中使用卡片浏览变得如此流行的原因。

Pinterest (top) and Unsplash (bottom)

协作工具：卡片是很灵活的组件，它可以将不同类型的信息和子元素组合在一起。例如，Figma、Miro、Framer 都用了卡片形式展示项目和文件。卡片设计干净、易于互动、实用，可以很容易地进行文件相关操作。

Figma and Miro

二、最佳实践 讲卡片设计的文章相信已经很多了，但我想在这篇文章中着重讲一些容易被忽略的 设计细节 。我希望这些点可以帮你进一步优化卡片设计。

1. 注意在卡片和背景之间设计合适的对比度

为了从背景中更好的区分卡片，你可以给卡片增加一个外描边或者加一个浅浅的投影。

彩云注：这里原作者放的例子我觉得没有特别好，但是她提到的这个细节确实是需要注意的，背景和卡片之间的颜色对比不要太小，不管是改颜色还是加描边或者投影，都是为了加大这种对比。

比如下面彩云随便找的一个很优秀的卡片设计，就是用的多彩色加大了卡片与背景的对比，使得信息清晰可见。

2. 努力维护好字体大小，避免使用太小的字号

内容可读性由所选字体和字体大小决定。下面的例子中可以看出，两个卡片设计在样式上都差不多，但因为字体大小选的对，整个卡片在视觉上变得更平衡，对人眼来说更好，所以右边的卡片更容易识别。

关于字号选择有一些经验可以分享给你，帮助你优化视觉层次。（彩云注：这里提到的尺寸应该多指 PC 端）

标题，使用的字号会在 20px-96px 或者更大，取决于卡片的尺寸和具体内容 副标题，字号会使用小于主标题 2px-10px，这样可以比较容易区分 正文，字号最少 16px。在某些情况下，如果你使用某些本身字符就比较大的字体，则可以适当减少字号。例如，在谷歌规范（ https://material.io/design/typography/the-type-system.html#applying-the-type-scale ）中，两个正文文本的大小分别定义为 14px 和 16px 按钮，它的字号不可以比正文的字号小。当需要展示多个选项时，对于主要按钮需要用到更突出的字体样式（加粗 Semi-bold/Bold），次级按钮使用略弱的字体样式（一般 Regular/Medium） 尝试限制字体大小的数量，可以使用字体缩放插件，Figma 中的插件 Type scale（ https://www.figma.com/community/plugin/739825414752646970/Typescales ）或 Web tool for defining a type scale（ https://type-scale.com ） 3. 对留白创建一个间距体系

留白是 UI 各元素之间的空白区域，它们将创建视觉组，保持视觉层级。如果你想避免设计混乱，需要确保做好一致性，你需要定义好间距体系，这对开发来说也会非常有效，减少代码量，还原的更好。

关于间距系统我也有一些经验

选择一个基础单位，并用它来作为 UI 元素间距的倍数值。一般来说，基础单位是 4px（0.25rem）。不建议使用奇数比如 5px，这是因为设备中会有 1.5x 的 DPI，这个留白的缩放值会变成 7.5px 会导致像素模糊 通过使用基础单位作为增量或乘法来定义间距值，减少间距值的数量，会让 UI 更简洁，例如它用来定义 Tailwind（ https://tailwindcss.com/docs/customizing-spacing ）这个产品留白规范 Figma 进阶用法，修改“大移动”（具体设置方法见官方帮助文档 https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values ），从默认的 10px 改到 8px，这将会让你每次移动元素可以保持 8px 的数值（这是基础单位的 2x），只需要按住 shift+方向键即可。这会非常省时间 4. 尽可能设计与内容布局相似的加载状态

加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态。下面的例子，你可以在右边看一个正确加载效果的设计，会更加符合用户的心理预期。

一组加载状态的效果对比

Figma and Vimeo

5. 定义一个卡片的固定高度

在实际项目中，你需要设计一个卡片元素，假定一个卡片是一行内容，另一个卡片是有 4 行文本内容。最好的解决方案是设计一个固定高度的卡片，在内容较少的卡片上使用留白，而在内容较多的卡片上使用文字截断。（彩云注：这样卡片在效果上更加一致。）

6. 使用网格作为卡片设计的基础规范

网格作为卡片的布局基础，有助于统一地安排内容，这就是为什么当涉及到卡片设计时它们是如此有用。当你需要时，可以使用网格将卡片的宽度扩展到需要的网格列数量，通常这样做，你可以找到一个合适的卡片宽度。当设计一个响应式布局时，应该为每个断点设计一个网格，设计相应的卡片大小。

（彩云注：可能有些人不大理解断点的意思，它指的是从 PC 切换到平板，然后再切换手机，屏幕大小在变化，布局也会做相应的改变）

(1) PC (2) 平板(3) 手机

你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.

当你在设计基于卡片，响应式布局时，你需要问自己几个问题：

卡片内容在所有断点之间看起来一致吗?（台式机、平板电脑、手机） 间距值是否一致？ 交互合理吗?它们会影响卡片的大小和卡片之间的间距吗? 长标题有考虑吗?它们会如何影响卡片的内容? 一些 Figma 设计卡片布局的建议：

为卡片定义约束 constraints（ https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ），以确定当你调整它们的大小时，布局中的卡片应该如何响应 为卡片应用 auto-layout（ https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout ），使它自动调整大小根据里面的项目。在 Figma 上有教程（ https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ） 创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小 7. 创建不同内容的卡片设计

如果你事先知道卡片可能有不同长度的内容，请确保在设计中涵盖这种情况。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原，避免破坏内容对齐。

8. 为更好的用户体验定义卡片交互

UI 交互是用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的操作，状态是在特定用户的交互中出现的视觉反馈。

与许多其他 UI 元素(按钮、文本字段、下拉菜单等)一样，卡片的状态应该取决于使用上下文和定义的交互。对于特定的交互，卡片应该根据状态设置样式。最常见的卡片状态列表:

默认：卡片处于正常状态，无任何用户交互 悬停：当用户将鼠标光标(指针)放在卡片上时 激活：如果卡片是可点击的，用户按下鼠标主按钮点击它，卡片的样式应该改变，以显示组件是激活的。这与按钮被按下的状态相同 聚焦：当使用键盘或语音等输入法时，卡片会高亮显示。通常在网页上这种状态是用蓝色的，但你可以选择你自己的品牌色，只要确保颜色与背景颜色至少 3:1 的对比度 选择：卡片被选择时的状态拖动:用户拖拽卡片时的状态 总结 卡片是 UI 中的常见组件，你可以在大多数网站和移动应用中找到它，它实在是太流行且实用了，所以一定要掌握好卡片设计并进行大量的练习。通过这些知识点的学习，我们可以使它们在视觉上更有吸引力，更有效，更容易访问。

欢迎关注作者的微信公众号：「彩云译设计」

大家好，这是 12 月的第 1 波设计干货合集！这次的干货合集应该相当符合视觉和平面设计师的需求，有每日更新灵感素材的设计师干货日报，有两款各有特色的配色工具，有免费的3D字体小样，也有开源免费的高品质图标，有风格现代简约但是质感十足的免费背景素材，还有新的人工智能绘图工具。当然，在此之前记得看看往期干货中有没有...

大家好，这是 12 月的第 1 波设计干货合集！这次的 干货合集 应该相当符合视觉和平面设计师的需求，有每日更新灵感素材的设计师干货日报，有两款各有特色的 配色工具 ，有免费的3D字体小样，也有开源免费的高品质图标，有风格现代简约但是质感十足的免费背景素材，还有新的人工智能绘图工具。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第五波！2022年11月精选实用设计干货合集 大家好，这是 11 月的第 5 波设计干货合集！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费高素质简约现代弥散背景 https://vackground.com/product/liquid-wave-modern-mesh-backgrounds

高素质的背景素材能够极大地提成整个页面的格调，而这套免费的背景素材就可以做到这一点，整体的风格非常现代，而且带有弥散渐变的光影，视觉效果拉满。这组免费背景总体有 40 张，包含有 ai 和 jpg 两种格式，有需要的同学赶紧下载。

2、为品牌精心适配的配色工具 https://draftss.com/color-palette-for-branding

这个名为 Colorss 2 的配色工具和其他配色工具略有不同，它会根据情绪、感知和氛围来制定配色方案，这些情绪具体有什么特征，适合什么定位的品牌使用，会给人什么样的感受，都会搭配相应的说明，方便设计师使用。而且 Colorss 还会制定配色方案的延伸和变种，方便在复杂的使用场合灵活使用，可以说相当良心了。

3、图案快速预览配色工具 https://more.graphics/variants

某个配色方案确定之后，整体的效果到底好不好？最简单的方法，就是找个图案直接套用看看效果。这个服务就是专门干这个事儿的，内置了3个图案专门用来查看各种配色的实际对比度和视觉效果，你也可以自己上传图案来测试效果，并且也可以自定义配色方案来查看效果。

4、超帅的立体 3D 字体 Font Z https://fontz.design/

FontZ 提供的 3D 字体几乎适用于所有的设计项目，这些预先设计好样式的字体可以非常轻松地使用，而且支持的软件类型也相当丰富，从 PS Sketch 到 Figma Blender，虽然整套字体是收费的，但是提供免费的 Demo。

5、每日更新的设计师干货日报 https://designerdailyreport.com/

这个名为设计师日报的浏览器插件，会提供每日精选内容，从精选的图片、免费的字体、品牌设计、优秀设计师作品集到令人惊叹的网站、作品以及 Instagram 灵感等，不一而足，想让灵感和素材触手可及的同学可以装上这个插件获取灵感吧。

6 、免费开源的高素质图标 https://circumicons.com/

这是一个面向设计师和开发者的开源图标库，这套图标库总计有 285 个不同但是足够日常使用的图标，这些图标特别适合使用 React、Vue、Svelte 等现代开发框架的地方，无论你是设计师还是开发者，都可以轻松驾驭和使用这些图标。

7、人工智能绘图平台 AISEO ART https://art.aiseo.ai/

AISEO Art 同样是一个基于人工智能的文字转图片的服务，它的人工智能算法按照分类进行过细致的训练，你可以在输入文本描述之前，先选择你要生成的图片的分类，它生成的结果会更贴合需求。此外，AISEO Art 还新上线了模板功能，喜欢尝试的同学可以上手看看。

引言任月月：据调查，中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。

引言

任月月：据调查，中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。

其实早在 2020 年 11 月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。2021 年 4 月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。

目前很多头部大厂都已经按照要求完成了应用的适老化改造，并且分享了很多改造经验。可以说，适老化是今后应用发展的一个大趋势。笔者最近的工作也涉及到了相关改造设计，所以针对这个主题，做了一些学习探索。看了各类文章，结合 N 家银行 APP 的 适老化设计 场景体验和自己项目实践的思考，在这里与大家分享。希望可以给到大家一些启发。

最新的银发族研究报告：

如何做好适老化设计？来看阿里出品的研究报告！ 阿里云、零点有数与上海交通大学设计学院三方联合在 U Design Week 中发布了《银发族数字化产品适老化研究蓝皮书》（以下简称“蓝皮书”）。

阅读文章 >

一、什么是适老化设计 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 用户对保险服务的需求更高，同时也更为偏好风险较高的股票交易。虽然现阶段他们在银行金融业的渗透率较低，但是随着更多的老年用户接触互联网金融，预计活跃渗透率将会进一步提升。

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

场景小故事：以下案例来自身边长辈

① 银行卡办理与认证

场景：银行很多业务已实现半自动化，需要手机配合操作完成业务。

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

② 线上转账

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

问题：年长用户，对于网络陌生，内心保持不信任。宁愿跑银行也不敢、不会在手机银行进行转账操作，或者就让子女代劳，完全没有享受到互联网带来的便捷。

根据网易 UEDC 调研，老年群体手机银行操作体验痛点和对手机银行的期望如下：

如何将这群用户服务好，是当下很多网上银行 app 需要思考的问题。

另外，在很多行业中，中老年人因为拥有丰富的经验在岗位上会更具优势，对于企业银行用户来讲，处于关键角色的用户例如财务，工作年限长、经验足是优势。那么企业银行面向企业的设计，如何提升中老年用户的使用体验也同样值得考虑。

三、老年用户的特征与需求 想要更好地为老年用户做设计，我们就需要详细了解老年用户的特征与需求。从前文的使用现状中，我们可以将老年用户的需求分为生理需求和服务需求。

生理需求：看不清、难操作、怕出错(容易挫败）、不理解、听不清

服务需求：不了解、找不到、不会用、不敢用

这两类需求的来源还要从老年用户的特征入手去解析。

1. 老年用户之困——视觉障碍

随着年龄的增长，老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。而且老年用户患有眼部疾病的概率会有所增加。60 岁以上的老年人中，视觉器官老化导致视力减退者为 47.9%，其中绝大多数是远视。

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

2. 老年用户之困——听觉障碍

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

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

3. 老年用户之困——行动障碍

老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。而且老年人的手指会偏大，细胞水分减少，皮肤皱纹加深，会使得触屏灵敏度大大降低。动作精准度的下降使得老年人无法准确的完成手势操作。

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

4. 老年用户之困——认知障碍

人的认知能力也会随着年龄的增长而下降。老年人会出现反应慢、判断力下降、学习能力退化的情况。在这种情况下，老年用户接触互联网的心理障碍就更加剧了。

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

四、银行金融产品适老化设计应当如何入手 针对以上老年用户的需求，银行金融产品的适老化设计应当如何入手。接下来我们结合《移动互联网应用（APP）适老化通用设计规范》中的内容（以下简称《规范》）和现有的各类产品适老化设计现状一起学习下如何进行适老化设计。

《规范》适用范围为：各企业在提供适老化服务时的内嵌适老版界面、单独的适老版 APP。

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

1. 适老版入口设计 ① 内嵌适老版界面

企业将适老版界面内嵌在原先的 APP 中，提供入口供用户切换。这种方案目前市面上使用较多，入口通常放置在设置中。对于银行金融产品，经调研，不少都遵循 all in mobile 的设计理念，要求根据不同的场景可以快速随时切换，所以除了设置中，还会在其他位置放置切换入口，方便用户切换。

常见切换入口名称

工商银行：幸福生活版；中国银行：岁月长情版；光大银行：简爱版；甘肃银行：颐年版；支付宝：长辈模式；招商银行/网商银行：长辈版；中国农业银行/平安口袋银行：大字版；宁波银行/云闪付：关爱版等等

对于切换入口的名称，每款应用都有自己的特色，整体来看，大字、长辈版是使用频次最高的，通俗易懂，其他类型的名称虽然有特色，但是与其他应用不同，不符合用户通用认知，在一定程度上会给年长用户造成理解障碍。

常见切换入口位置

对于内嵌版本的切换入口通常有以下三种：

一级页面顶部的“版本切换”按钮 一级页面下拉加号内的“版本切换” 我的页面-设置-“版本切换”

这三种形式根据应用的功能层级，开启适老模式需要进行 1～3 次点击，常见点击路径如下：

「首页」—版本切换图标—「适老版」 「首页」—版本切换图标—「版本选择」—点击选中—「适老版」 「首页」—加下拉—版本切换图标—「适老版」 「首页」—加下拉—版本切换图标—「版本选择」—点击选中—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「介绍页」—开启确认—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「版本选择」—点击选中—「适老版」 特色切换过渡页面设计

中国农业银行：设置页面直接外置各种版本，直观且丰富了设置页面

工商银行：在版本切换页面详细介绍了各个版本的特色

支付宝：独立页面介绍适老版

对于开启适老模式，是否需要设置过渡页面，个人认为需要，因为具有图文介绍的过渡页面，虽然在一定程度增长了用户切换路径，但是给了用户切换的心里预期。而且对于模式的切换一般是低频操作，适当给用户一些“阻力”可以避免误操作。

② 单独的适老版 APP

企业也可以根据自身情况选择开发单独的适老版 APP，目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版 APP。用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。（目前暂无银行金融产品上线单独适老版的 APP）

经体验，一般开发了单独的适老版 APP，在普通版本 APP 中便不会设置大字版切换模式，仅提供字号设置功能和下载适老版 APP 引导页。

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

① 字型大小调整

文字的类型

根据调研，同样文字大小的情况下，非衬线体比衬线体结构更加清晰。所以《规范》中建议使用非衬线体，以减少不必要的视觉干扰，保证易读性。另外采用可以提高字重方法，使文本轮廓更加清晰。

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

英文字体，特别是对于数据的展示，为了让数据更醒目直观，可以选择非衬线类厚重的字体。例如：我们部门为了在设计中更好的展示数据信息，提取常用字符设计了非衬线类的“兆日金融体”。

文字的大小

《规范》中建议适老版界面及单独的适老版 APP 中的主要文字信息不小于 18 dp/pt。Ant Design 设计语言中讲到关于计算最小字体的方法，基于年长用户阅读距离（43 cm）以及最佳阅读角度（0.75）计算并换算得到建议最小字号为 16dp/pt。那么我们到底按照哪个规范来呢？

笔者觉得，这两个规范没有对错，大家根据自己页面设计或适配的情况来确定就可以了。对于年长用户来讲，不同的人视觉感官度也不一样，我们在设计允许、布局整洁的限度下，字体肯定是越大越好。例如下图是我在做适老版过程中制定的缩放系数规范，为了保证部分复杂页面布局不错乱，将主要文字最小字号定义为 16dp/pt。

当然以上的规范不一定可以适合所有人，毕竟随着用户的年龄增长，视觉障碍会加深。我们还可以更加人性化一点，比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。例如：iOS 系统中在辅助功能里可以设置更大字体、粗体文本（《规范》建议应用字型大小可随系统设置调整，或内部具备字体大小设置选项）；微信可以开启听文字消息。

文字的适配规则

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

界面元素及容器需要跟随文字放大而等比例系数放大

同一容器内的元素横向间距保持固定，纵向间距可按照比例系数适配

② 行间距

《规范》建议段落内文字的行距至少为 1.3 倍，且段落间距至少比行距大 1.3 倍，同时兼顾移动应用适用场景和显示效果。

根据调研测试：标题行间距为 1.3 倍，文字行间距为 1.5-1.8 倍，视觉效果最舒适。数值仅供参考，具体大家还要融合自己的设计去确定。

③ 对比度

为了解决年长用户因为文字、图像颜色淡而看不清的问题，在设计的过程中我们需要使用强对比度的颜色。《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为 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 月完成。

简单来说，就是要求我们在设计适老化界面的过程中，文本颜色需要按照标准加深，与背景色拉开差距以保证年长用户可以清晰识别。为了保证达到这一标准，我们可以使用色彩对比工具去进行测试：

工具一： https://webaim.org/resources/contrastchecker/

工具二： https://www.wenjiangs.com/wp-content/uploads/2017/06/contrast-ratio/

工具三： https://m2.material.io/resources/color/

工具四： https://contrast-grid.eightshapes.com

④ 颜色用途

颜色是界面设计最重要的元素之一，设计师经常通过不同颜色表达去传达一些信息，例如成功、失败等等。但是在无障碍设计中，颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。因为随着年龄的增长，我们对颜色识别感知会变弱，所以使用颜色代表特定意义的时候，需要有另外一种区分方案。例如：

使用下划线表示链接，或使用粗体突出显示文本 图标和文本结合使用传达成功或失败的信息 使用线条粗细、纹理或图案区分图标样式 使用不同的图案传达信息等等

对于颜色的使用，我们还需要注意以下几点：

颜色多样：页面中应使用区别较大的丰富色彩，可借鉴真实存在的物体，保持认知一致。

可适当加深颜色以提高颜色的对比度

重要元素避免使用蓝色和紫色：由于老年人的晶状体变黄、变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。对于这一点，还是要看各个品牌的主题调性，如果无法避免使用蓝色和紫色，那么就提高饱和度以加强识别性。

⑤ 验证码

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

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

⑥ 图标设计

对于页面中的图标，在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。除了单纯的放大，在项目允许定制化设计的时候，我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。另外建议搭配文字描述，方便用户更清晰更快速理解。

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

3. 可操作性 ① 组件焦点(热区)大小

由于年长用户细胞水分减少，手指偏大，在使用触屏的过程中灵敏度较低。所以对于常规组件的焦点，他们操作起来可能会很难完成操作目标。所以我们在放大文字、图标等控件的同时，对于可点击的组件焦点(热区)也需要同步放大。

《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于 60 × 60dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt；单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48 × 48dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt。对于规范中的内容，具体我们可以这样做：

在需要点击操作的元素(<44pt)周围添加 12pt 的反馈热区； 大于等于 44pt 的元素，且有清晰边界的元素，热区保持与元素大小一致即可； 如果多个元素指向同一个操作结果，可使用组合连接在一起的热区； 当元素处于某个组件容器内，最大热区不要超过容器本身； 如果整个容器指向同一个结果，应当以整个容器作为按压区域，而不是某个图标或文字； 元素较多的情况下，操作热区应平分元素间的间距。「有明显边框元素」和「没有明显边界元」素拥挤时，优先保证「没有明显边界元素」的热区； 特殊的小尺寸元素，可以考虑拓展热区，甚至覆盖其他元素，以保证最少 44*44pt 热区；

小贴士： 菲兹定律：任意一点移动到目标中心位置所需要的时间，与目标距离正相关、与目标大小负相关。 所以根据菲兹定律，为了提高年长用户的操作效率，界面中放大需要用户操作的元素，可便于用户快速精准触达。

用一篇超全面的文章，帮你读懂经典的费茨定律 费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

阅读文章 >

② 手势操作

触摸屏时代，有着各种各样创新的手势操作和交互；但是对于年长用户由于行动和认知障碍，这些创新比较难学习理解并流畅操作。所以在移动应用中，应对用户进行手势导航或者操作的结果提供反馈提示；避免需 3 个或以上手指才能完成的复杂手势操作。对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。

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

现在很多应用中创新，有长按侧滑进入左侧空间、长按下拉进入二楼等交互；这类交互对于年长用户来讲其实非常不容易理解且不便操作。笔者之前教过家里长辈这类操作，想告诉他们这类“便捷创新”的功能，但是发现他们重复三四次才能完成操作，且过一段时间就会忘掉，依旧会选择一步一步点击到达目标页面。

综上，对于适老化版本的手势操作我们需要注意以下几点：

使用简单的手势操作：单指优于多指、单击优于双击(多次点击)、单一的手势优于组合手势； 不要加入需要力道触发的手势，例如长按下拉，年长用户把控不好力度很容易把这个手势变成了单击； 有一定学习成本的手势，应当给出引导教学； 给手势操作及时反馈，避免用户觉得没有触发到而多次点击。 ③ 充足操作/反馈时间

在移动应用中，如果限时不是活动的必要部分或关键要素，且不会导致用户发生法律承诺或财务交易，则应为用户的操作留下充足时间，在用户操作完毕前界面不发生变化。

年长用户对于一些动态信息的感知度比较低，所以如果页面中出现一些提示信息，我们可以采用以下方案让提示更友好：

适当延长时间，避免用户还没读清内容就消失了，例如 toast 显示持续时间可以由 3s 延长到 5s； 采用其他类型的提示给用户足够的阅读时间，将短暂停留的内容，调整为常显内容，由用户自行操作确认关闭，例如将 toast 改成弹窗； 利用震动等其他感官提醒优化提示，例如消息推送的震动及消息提示音、警告场景下的长震动；

我们在拉长交互时间的同时，还需要注意避免跨屏任务，因为年长用户在进行多个输入或操作的任务上会表现出明显的障碍。在任务的过程中，我们需要给出足够的解释说明，引导帮助年长用户完成多任务操作。

④ 浮窗

在移动应用中，若内容产生新窗口（包含但不限于弹窗），应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部，且最小点击响应区域不能小于 44×44dp/pt。

对于这条《规范》，我们可以拆分成以下几点来理解落地：

超出 7 秒长时间停留的页面（弹窗），需要提供关闭机制； 关闭机制可以是关闭按钮、返回按钮、跳过按钮或者功能文字操作按钮等一切可以立即退出当前页面的操作； 对于这些关闭机制的点击热区不能小于 44×44dp/pt。

⑤ 提供更便捷的录入方式

年长用户对于表单录入类的操作，总是有很大的心理/操作负担，碰到这类页面常常是不愿意操作，让别人代劳。例如银行的转账页面，大部分都需要录入付款信息、收款信息、转账金额等一系列内容。如果让用户每一项都手动输入，不但效率低而且很容易出错。我们可以做些什么，去减轻用户录入负担呢？

提供有限的选项和默认项 

在页面中我们需要适当精简页面以减轻用户心理负担，只提供需要的选项，或者在需要的时候出现对应选项。 另外在有限的选项中，还可以提供高频选项作为默认选项，减少用户操作

简单理解，提供的选项越少，用户越容易选择，提供默认选项>提供有限选项>提供多种选项。

选择代替输入

选择类的交互方式比输入类更便捷，可以避免繁琐的打字过程，很多年长用户打字都不是很顺畅，甚至是使用手写录入文字。所以对于一些固定项的内容，使用选择类的交互可以很大程度提升操作效率。

识别录入代替输入

对于一些比较大段，需要仔细核对的内容，使用拍照扫描、复制粘贴识别、二维码识别录入等方式更不易出错；例如付方账号的录入。

自动数据带入

具有前后逻辑关联的表单数据，可以提供填写某个数据自动带入其他内容的联动交互，减少用户输入/选择操作；例如录入收款卡号后、自动识别带入收款银行；

常用项历史记录

提供历史记录功能，记录近期操作过的选项，方便用户快速复用再次操作；例如常用收款人的记录，点击后自动带入收款人信息，无需重复操作录入。

⑥ 缩短操作路径

年长用户经常会出现“我在哪”“我要怎么做”“接下来我要做什么”等困扰；面对这样的困扰，我们可以做如下交互优化：

精简功能，缩短重点功能操作路径，避免信息层级过深，要让用户快速触达；

拆分任务步骤，防止信息过载，减少每屏信息密度；对于跨屏的长任务，提供操作进度引导，告知用户所处位置进度，做到流程明确。

减少非必要操作，或允许跳过不必要的步骤；

4. 可理解性 ① 提示引导机制

《规范》建议在用户安装移动应用时，应为适老化设置、老年人常用功能提供显著的引导提示。也就是我们常说的功能引导机制。

对于内嵌的适老版界面，前文中也有提到常见入口位置，市面上大多数的适老版切换位置都比较隐蔽，且未按照规范给予显著切换提示，还有很大的优化空间。

经调研分析多个 app 产品，适老化设置我们可以从以下几点着手优化设计：

初次下载 app 或适老版上线的时候，提供功能开启引导或功能上新提示，告知用户有该功能、功能的入口、如何操作开启；

开启前提前告知用户，适老版是什么，开启后界面会有怎样的变化，给用户心理预期；

进入适老版本后引导提示用户如何回到标准版本，避免用户不想使用适老版而找不到出口；

退出适老版需要二次确认关闭，防止长着用户误触。例如云闪付为简单的弹窗提示，招商银行使用了半弹窗，还告诉用户如何重新开启长辈版，既起到了二次确认的作用也做了提示引导；

在“设置”中提供“适老版”入口，且用户可以通过搜索“长辈版”、“亲情版”、“关爱版”、“关怀版”等关键词直达功能；

常用功能的提示引导我们可以从以下几点着手优化设计：

提供功能指示引导或说明 设置帮助中心，提供纯文字教程、图文教程或视频教程，方便用户查找。还可以将教程以浮窗的形式展示在具体功能页面中，让用户可以边看边操作。 设置客服中心（智能客服、电话客服），运营/客服人员专项跟进，随时为年长用户提供帮助。 界面设计中，对于需要点击操作的设置行为指引，引导用户完成点击。例如在按钮文案中加入行为动作，结果导向的内容；还可以对于一些卡片式的点击区域加上按钮引导。

② 语音功能

在适老版中融入语音功能可以很好的辅助年长用户进行一些录入操作和信息获取，因为很多年长用户文化程度不高，不会使用输入法，大多选择手写输入的方式。但是手写输入效率比较低，而且如果写的字不清晰会识别错误。我们可以从以下几个角度融入语音功能：

使用 AI 技术，提供语音输入功能，目前市面上不少银行应用都设置了语音操作的功能，而且将这个作为重点易触达的功能展示在了关键位置。例如工商银行的语音操作；

功能操作过程中，提供实时智能语音助手或人工客服；也可以结合语音导读功能进行同屏解说引导用户操作；

提供结果状态下语音播报或声音反馈提示，在操作正确或错误时给予对应的正向、警示提示音；

融入智能读屏功能。

融入语音功能的时候，考虑到年长用户的听觉障碍，我们还需要注意以下几点

适当增大音量：老年人听觉平均感知音量在 67.5～75.3 分贝之间； 降低语速，提供慢速、正常、快速等语速供用户自己选择，更清晰有效的获取语音信息； 优化收音机制，去除杂音，提升录入识别成功率； 支持方言，可智能识别方言或有一定纠错机制。 ③ 通俗易懂的文字

由于年长用户触网时间短，受教育程度不同，可能对互联网常用的一些词汇存在认知障碍。所以我们在设计的时候需要对一些互联网词汇进行口语化表达，采用用户易理解的文案。

同时对于一些提示性的文案，需要表达清晰，在文案上要具有一定的引导性，例如，用户输入账号缺少 1 位的时候，应当提示：请输入 xx 位账号，而不是仅仅提示，输入错误，让用户自己去找哪里错了。

④ I 模型-精简的布局

目前市面上大多数首页都承载了很多内容，但是这种布局对于年长用户来讲不利于集中视线聚焦功能。所以在适老版建议采用 I 模型的布局模式，聚焦内容，减少用户视线主焦点的转化，这样更便于年长用户阅读与理解。一般来讲，我们需要控制用户的视觉主焦点转化不超过 2 次。

⑤ 使用具体的内容、真实形象

在制作活动 banner 场景中，采用具象的图片会比插画类型的图形更容易向年长用户传达信息，而且会给年长用户传递出真实感从而提升对产品的信任度。例如中国银行在适老版的设计中采用了大量的真人场景配图，非常的直观易理解。

5. 兼容性 辅助技术

移动应用程序不应禁止或限制终端厂商已适配好的辅助设备（如读屏软件等）的接入与使用。在辅助工具开启时，移动应用内容中所有功能性组件均能正常工作：按钮可正常访问；输入框能正常进行输入；多媒体能正常播放；在页面局部更新后，移动应用内容中新增的功能性组件也应能正常工作。

这一点更多的是从开发技术角度制定的规范，要求软件开发的过程中做好适配，保证适老版使用各类辅助技术的时候能够正常运行。我们设计师能做的就是在设计验收的过程中，考虑到这个层面，并将一些辅助功能的接入与使用纳入设计验收。

6. 安全性 ① 拒绝引导性内容

现在很多应用有着各种各样的广告、推销、诱导下载链接等，而年长用户容易受骗，所以在适老版中严禁出现推销广告等内容。《规范》中限制如下：

广告插件及诱导类按键限制 禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件，也不能随机出现广告或临时性的广告弹窗。 禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。 对于银行金融产品来讲，涉及到资金安全，筛选重要功能、安全的产品提供给年长用户就显得尤为重要。例如工行适老版的投资理财和专属存款，仅放了适合年长用户的产品。

② 给用户信任感，保障老年用户个人信息安全

移动应用程序进行个人信息处理时应遵循最小必要原则，即处理个人信息应当有明确、合理的目的，并应当限于实现处理目的的最小范围，不得进行与处理目的无关的个人信息处理，以保障老年用户个人信息安全。

同时我们在设计呈现的时候，可以加入一些安全、保障类的表达来提升产品整体的可信度，增强年长用户对产品的信任感，从而敢用。例如：

加入安全中心、安全保障、信任背书等元素，打消年长用户疑虑； 对关键信息进行脱敏展示，降低年长用户对数据泄露的担心； 在各个环节增加安全信息提示，加强安全认证，多重保障让年长用户安心； 增加防骗、反欺诈模块，增强年长用户防骗意识

章节小结

以上，我们结合《规范》里逐条规则和实际案例拆分讲解了如何去实际落地适老化设计。在这里借用阿里对适老化设计建议的关键词提炼，总结本章重点内容：

字号≥18dp/pt——清晰的字型、足够大的文字、舒适的行间距 强烈好于柔和——符合无障碍标准的对比度、可识别的颜色 具象好于抽象——优先使用写实图片 行动好于描述——使用表示行为的“动词短语”会更容易理解 熟悉好于新鲜——使用符合认知的设计和流程、易理解的图标、通俗易懂的文案 色彩好于图形——使用丰富的色彩，加强年长用户记忆与理解 点击好于滑动——简单的手势操作、容易点击的热区 点击好于输入——提供更便捷的录入方式 多模态好于单模态——语音功能的融入 接下来我们一起看一下目前市面上的一些银行金融产品适老化版本的体验测评分析。

五、银行金融产品适老化案例分析 1. 工商银行

名称：幸福生活版

slogan：超大字体，设计极简；语音助手，交互升级；专属理财，乐享收益；亲情账户，传递关爱。

入口：五个一级页面下拉加号内的版本切换；我的页面-设置-切换长辈版(幸福生活版)

出口：一级页面拉加号内的版本切换；我的页面-设置-切换标准版。

体验分析：

入口和出口位置及交互一致，贴合用户心智，符合操作习惯； 一级页面布局精简，层级清晰，重点功能突出。语音操作放在了最重要的位置，方便年长用户操作 页面内的功能都经过了筛选，只放出了年长用户常用功能。对于网点服务还有专门的适老网点推荐 功能子页面也做了适老化的定制，从视觉到交互，都适配了年长用户需求。 除了个别不是很重要的标签文字比较小，工行整体的适老化都做的不错 推荐指数：☆☆☆☆☆

2. 招商银行

名称：长辈版

入口：我的页面-设置-长辈版

出口：首页-下拉到底部-回标准版

体验分析：

入口较隐蔽，开启无提示直接开启 首页是常用功能、点击客服直接进入“小招客服”，页面精简，重点突出； 功能子页面仅做了简单的文字、控件放大； 点击“回标准版”出现的半弹窗提示，防止误操作，起到二次确认的作用，同时告知用户重新开启的入口 推荐指数：☆☆☆

3. 中国银行

名称：岁悦长情版

slogan：风格简约，大字展示，为年长客户甄选产品和服务

入口：首页-版本；我的-设置-版本切换

出口：我的-切换标准版

体验分析：

入口的设计视觉效果很好，非常直观。 出口太过明显，且没有二次确认，对于年长用户如果误触了回到标准版，可能找不到入口 首次切换至岁悦长情版，有功能引导 一级页面功能和布局做了精简，但是二三级子页面未做适配。 整体设计风格符合年长用户审美，给用户温馨的感觉。 推荐指数：☆☆☆

4. 中国农业银行

名称：大字版

slogan：超大字体，功能精简；语音助手，一键客服

入口：首页-版本；乡村振兴-版本；我的-更多下拉-版本；设置-版本切换

出口：首页-版本；我的-更多下拉-版本；设置-版本切换

体验分析：

多个入口，且入口的设计样式很有特色；出口与入口的路径相同。 布局清晰，功能做了筛选精简，一级页面仅保留常用功能。 重点功能子页面进行了布局和交互的适老化适配。 整体的视觉还原和谐度很好，大字版的用色也针对年长用户的生理特征进行了加深处理。 推荐指数：☆☆☆☆☆

5. 宁波银行

名称：关爱版

slogan：超大字体，精简功能；贴心服务，便捷易用

入口：首页-加号下拉-版本切换；我的-版本切换；

出口：首页-加号下拉-版本切换；

体验分析：

页面极简，取消了底部的 tab 栏，首页视觉表达符合年长用户需求； 语音功能使用了悬浮的按钮，且伴随收起交互，这点对年长用户不是很友好，不容易点击使用； 重点功能子页面仅做了少量适配，大部分控件与普通版一样； 推荐指数：☆☆☆

6. 平安口袋银行

名称：大字版

slogan：平安在手，儿女无忧；字体更大，简洁易懂

入口：首页-加号下拉-版本切换；我的-版本切换；

出口：首页-版本切换；我的-版本切换；我的-设置-版本切换

体验分析：

页面结构清晰，重点功能突出，精选的功能都是与年长用户相关的，比如防骗宝典、平安老人意外险等等； 图标设计更具象，更易读懂理解； 二三级子页面均做了视觉适配，适配呈现效果体验感很好； 各类业务场景都做到了告知、引导和反馈。 推荐指数：☆☆☆☆☆

7. 云闪付

名称：关爱版

slogan：字体大，图标大，使用更简单

入口：首页-版本切换；我的-设置-切换至关爱版

出口：首页-版本切换

体验分析

布局和功能都做了精简； 退出关爱版有二次确认，避免了误操作； 各功能的子页面未做大字适配。 推荐指数：☆☆☆

8. 江苏银行

名称：融享幸福版

slogan：字体更大 简洁清晰 一键帮助 安全无忧

入口：首页-版本切换；

出口：首页-版本切换；

体验分析

入口与出口一致，标识明显； 页面布局精简，功能内容贴合年长用户的需求，特别是一键帮模块里的内容都是实际解决年长用户需求的功能； 语音介绍功能，是其他产品没有的，开启后可以点击进行语音播报讲解，很大程度解决了年长用户看不懂、不会用的痛点； “反欺诈指南”、“日历模式”都贴合年长用户需求，暖心且有特色； 推荐指数：☆☆☆☆☆

总结 这篇文章很长，感谢大家耐心读到了最后。其实刚开始准备这篇文章的时候，只是想基于自己的工作内容做一个复盘。但是在书写总结的过程中，我查找阅读了大量的资料，感受到了无障碍、适老化设计的暖心人文关怀，就觉得很有必要仔细的写一写。特别是这句话“手机字体越来越大，音量越来越大，子女的陪伴却越来越少。子女知识想用一部手机联系到老人，却没有想过，他们也想用手机，去联系今天的世界。”狠狠的触动了我。

所以如果能让更多的设计师关注到这个群体、能够向更多的设计师传达适老化设计的一些知识点，这篇文章就发挥了它的价值。

其实整体来看，目前整个互联网的产品适老化才刚刚开始并不是很完善，企业也可能因为成本、资源等问题无法实际落地推动适老化设计。但是随着时间的推移，一定会有更多的产品关注并落地实施适老化（在我写这篇文章的过程中，有好几家银行产品对适老化的版本做了多次迭代优化，最终编辑排版的时候，又更新了一些案例。所以说适老化是大趋势，头部产品都已经开始注重这部分人群的体验了）希望通过这篇文章给设计师们一点启发。就算大家目前所做的产品，没有适老化设计的需求，里面的一些知识点融入基础产品的设计，也是适用的，能给用户带去更好的用户体验。

再次感谢大家的阅读，希望通过设计的力量，帮助年长用户更好的融入并享受数字化生活。

参考文章：

为了帮助大家更好的理解本文，以下为书写过程中阅读参考的一些文章和报告，可供进一步深入学习。

《QuestMobile2022 银发经济洞察报告》 《中国互联网络发展状况统计报告》  《QuestMobile 银发人群洞察报告》   《QuestMobile 金融支付报告》   《工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》 《腾讯出品！手机银行适老化设计探索（附超多干货）》 《如何做好产品的适老化和无障碍设计？来看腾讯的实战案例！》   《小程序适老化设计指南》   《超全面！「无障碍设计」指南》   《适老化设计——让产品充满温度》   《百度大字版精细系统的适老化设计研究实践》   《一篇就够！实际场景落地适老化设计》   《色彩无障碍指南: 如何让色盲用户获取色彩信息》   《银发族数字化产品适老化研究蓝皮书》   《优设 9 图-如何做好适老化设计》