目录
目录
浦发银行新一代智能自助服务平台（VTM系统）设计
浦发银行新一代智能自助服务平台（VTM系统）设计
浦发银行新一代智能自助服务平台（VTM系统）设计
项目简介
项目简介
本项目重点介绍对浦发银行智能自助服务平台 (VTM系统) 的两大关键改造：一是重构“理财产品”业务以改善理财购买体验，二是引入适老化版本（关爱版）以提升无障碍体验。
同时，我主导构建并扩展了统一的设计规范与组件库，提升了产品一致性，为业务的长期增长奠定了基础。项目上线后取得了显著成效，具体成果如下（截止23年10月）：
本项目重点介绍对浦发银行智能自助服务平台 (VTM系统) 的两大关键改造：一是重构“理财产品”业务以改善理财购买体验，二是引入适老化版本（关爱版）以提升无障碍体验。
同时，我主导构建并扩展了统一的设计规范与组件库，提升了产品一致性，为业务的长期增长奠定了基础。项目上线后取得了显著成效，具体成果如下（截止23年10月）：
+17.6%
用户采用率
1
百万+
累计交易量
10
万+
月均老年客户量
设计专利申请
适老化(关爱)版
+17.6%
用户采用率
1
百万+
累计交易量
10
万+
月均老年客户量
设计专利申请
适老化(关爱)版
客户
客户
浦发银行
浦发银行
我的角色
我的角色
UI、交互设计师、
用户研究员
UI、交互设计师、
用户研究员
时间
时间
6/2022 - 4/2023
6/2022 - 4/2023
使用工具
使用工具
Sketch, Figma, Principle, ProtoPie
Sketch, Figma, Principle, ProtoPie
项目团队
项目团队
业务负责人2名，设计师3名，开发小组4个
业务负责人2名，设计师3名，开发小组4个
本项目重点介绍对浦发银行智能自助服务平台 (VTM系统) 的两大关键改造：一是重构“理财产品”业务以改善理财购买体验，二是引入适老化版本（关爱版）以提升无障碍体验。
同时，我主导构建并扩展了统一的设计规范与组件库，提升了产品一致性，为业务的长期增长奠定了基础。项目上线后取得了显著成效，具体成果如下（截止23年10月）：
+17.6%
用户采用率
1
百万+
累计交易量
10
万+
月均老年客户量
设计专利申请
适老化(关爱)版
客户
浦发银行
我的角色
UI、交互设计师、
用户研究员
时间
6/2022 - 4/2023
使用工具
Sketch, Figma, Principle, ProtoPie
项目团队
业务负责人2名，设计师3名，开发小组4个
项目简介
什么是VTM？
什么是VTM？
VTM（Virtual Teller Machine，远程视频柜员机）是一种智能自助终端设备。它通过远程银行客服中心提供在线支持，为用户提供多种非现金银行业务服务，包括但不限于开户、转账、办卡、缴费、贷款申请及投资理财等。
VTM（Virtual Teller Machine，远程视频柜员机）是一种智能自助终端设备。它通过远程银行客服中心提供在线支持，为用户提供多种非现金银行业务服务，包括但不限于开户、转账、办卡、缴费、贷款申请及投资理财等。
用户体验走查与问题识别
用户体验走查与问题识别
我被任命为新版 VTM 系统的设计负责人后，首先带领2名设计师对19个功能模块的开发稿进行了设计还原度审核与用户体验走查。审核过程中，发现“银行理财(理财产品)”模块存在诸多用户体验方面的问题，以“银行理财-列表页”为例：
我被任命为新版 VTM 系统的设计负责人后，首先带领2名设计师对19个功能模块的开发稿进行了设计还原度审核与用户体验走查。审核过程中，发现“银行理财(理财产品)”模块存在诸多用户体验方面的问题，以“银行理财-列表页”为例：
关于"银行理财"模块的初步重构计划
关于"银行理财"模块的初步重构计划
为验证设计走查与开发反馈中识别的问题，我组织了 3 轮快速用户测试，确认问题具有普遍性，并显著影响用户扫读与对比效率。
基于走查与测试结论，我与业务方对齐“银行理财”模块当前的体验问题，推动业务侧评审确认启动重构，并制定分阶段改造计划：优先改造列表页，先从列表结构与产品卡片信息呈现入手，改善扫读与对比体验；后续再结合用户研究结果，逐步推进其他环节的优化与迭代。
为验证设计走查与开发反馈中识别的问题，我组织了 3 轮快速用户测试，确认问题具有普遍性，并显著影响用户扫读与对比效率。
基于走查与测试结论，我与业务方对齐“银行理财”模块当前的体验问题，推动业务侧评审确认启动重构，并制定分阶段改造计划：优先改造列表页，先从列表结构与产品卡片信息呈现入手，改善扫读与对比体验；后续再结合用户研究结果，逐步推进其他环节的优化与迭代。
研究方法与目的
研究方法与目的
为验证该重构方向是否回应用户需求，并进一步明确后续改造范围与优先级，同时收集用户对新版视觉风格的反馈，我们随后开展了专项用户研究。本次采用混合研究：共回收 221 份有效问卷，深度访谈 8 位大堂经理，并对客户开展 15 场情境调研。
为验证该重构方向是否回应用户需求，并进一步明确后续改造范围与优先级，同时收集用户对新版视觉风格的反馈，我们随后开展了专项用户研究。本次采用混合研究：共回收 221 份有效问卷，深度访谈 8 位大堂经理，并对客户开展 15 场情境调研。
核心客群与行为洞察
核心客群与行为洞察
我们首先通过问卷以及访问大堂经理快速摸底到店客户画像、办理渠道分布与VTM高频任务，为后续聚焦“银行理财”改造范围与优先级提供依据。
我们首先通过问卷以及访问大堂经理快速摸底到店客户画像、办理渠道分布与VTM高频任务，为后续聚焦“银行理财”改造范围与优先级提供依据。
购买银行理财
用户旅程地图
用户旅程地图
在完成问卷与访谈后，我们进一步开展情境调研（观察 + 追问），跟踪用户在 VTM 购买银行理财的实际操作与决策过程。并按“入口—选品（列表/详情）—登录—下单—购后管理”拆解链路，归纳各环节的关键痛点。
在完成问卷与访谈后，我们进一步开展情境调研（观察 + 追问），跟踪用户在 VTM 购买银行理财的实际操作与决策过程。并按“入口—选品（列表/详情）—登录—下单—购后管理”拆解链路，归纳各环节的关键痛点。
通用用户 vs. 老年用户
可用性与可访问性要求研究
可用性与可访问性要求研究
考虑到 VTM 场景老年用户占比高，我针对老年用户开展了可用性与可访问性研究，以指导后续方案设计。
考虑到 VTM 场景老年用户占比高，我针对老年用户开展了可用性与可访问性研究，以指导后续方案设计。
目标校准 & 用户洞察
目标校准 & 用户洞察
在完成用户研究和数据分析后，我和业务侧一起重新对齐了产品目标——不再只是改善列表页的扫读与对比体验，我们将核心问题校准为两条主线：提高通用用户的选品决策效率与提升中老年用户的自助完成率与操作信心，用于指导后续方案发散与设计取舍。
在完成用户研究和数据分析后，我和业务侧一起重新对齐了产品目标——不再只是改善列表页的扫读与对比体验，我们将核心问题校准为两条主线：提高通用用户的选品决策效率与提升中老年用户的自助完成率与操作信心，用于指导后续方案发散与设计取舍。
核心设计目标（HMW）
核心设计目标（HMW）
基于重新校准后的用户痛点，我们梳理了两条 HMW（How Might We）问题，用于指导后续方案发散与设计方向。
面向通用用户
面向通用用户
面向通用用户
我们如何提升选品与对比效率，帮助用户更快、放心做出理财产品选择？
我们如何提升选品与对比效率，帮助用户更快、放心做出理财产品选择？
我们如何提升选品与对比效率，帮助用户更快、放心做出理财产品选择？
面向老年用户
面向老年用户
面向老年用户
我们如何提升可读性与可操作性，增强中老年用户的自助操作信心？
我们如何提升可读性与可操作性，增强中老年用户的自助操作信心？
我们如何提升可读性与可操作性，增强中老年用户的自助操作信心？
设计目标与重构范围
设计目标与重构范围
围绕两个核心设计目标，我们将设计策略拆分为两条主线：重构“理财产品”业务与适老化设计，并据此明确本次重构范围。
一、重构“理财产品”（银行理财）模块，帮助用户更快、放心地做出理财产品选择
一、重构“理财产品”（银行理财）模块，帮助用户更快、放心地做出理财产品选择
浏览产品列表
搜索或筛选银行理财，并进行对比
统一产品语义与风险预期
将“银行理财”更名为“理财产品”，并明确自营/代销与产品管理机构，避免“银行背书”误解，校准风险预期，降低咨询与争议成本。
把期限从隐藏筛选提升为列表页一级分类 Tab（贴合首要决策维度）
将产品按期限分组为“全部/(每)日/周/月/季度/半年/年(可赎)”，默认展示“全部”，用户可通过顶部期限分类 Tab 一键切换，帮助用户先收敛范围再浏览对比，快速缩小候选范围。
一键排序，加速筛选与决策
增加按期限/收益/综合的一键排序（支持升降序），降低手动比对与试错成本。
信息结构对齐，降低跨产品对比成本
将双列卡片调整为单列信息流，强化关键指标层级分组与纵向对齐(如期限/收益/风险/起购)，让用户更快完成扫读与对比。
查看产品详情
查看产品详情，选择心仪产品
关键规则前置，建立清晰预期
在详情页集中呈现关键产品信息，并以时间轴串联“购买—生效—退出”关键节点(起购/起息/开放期/赎回等)。
补全业绩表现，降低决策不确定性
补充多时间区间的业绩表现展示，帮助用户形成更明确的收益/风险预期(不等于承诺)。
查看我的持仓，管理持仓(买入/卖出/打印)
管理持仓产品
持仓入口归位到产品分类内，打通“买—管”闭环
将“我的持仓”入口从一级页签调整为“理财/基金”等产品分类下的子入口，让购后管理与选品决策在同一业务闭环内可追踪。
状态与排序增强，快速定位需处理持仓
增加“购买待确认”状态标识，并支持按市值/盈亏排序，帮助用户快速定位需要关注/处理的持仓。
二、引入“关爱版”(适老化版)，为老年用户提供更大、更清晰的界面语言
二、引入“关爱版”(适老化版)，为老年用户提供更大、更清晰的界面语言
重构理财产品模块
重构理财产品模块
产品列表页布局探索：最终选择方案二
产品列表页布局探索：最终选择方案二
为保障版本节奏与风险可控，本次对列表页的改造采用局部改版策略：保留现有导航结构，聚焦列表信息层级划分、筛选排序与关键 CTA 的可用性提升。
我探索了两种列表呈现策略。方案一采用单行列表式结构，将核心信息压缩在一行展示，以便快速纵向对比；方案二采用结构化多行卡片布局，对长标题与标签的适配更友好、信息层级更分明。基于“信息可读性、对比效率、操作可达性、适老友好、落地成本”五项标准，最终采取方案二的多行卡片布局。
方案一：紧凑单行列表式布局
方案一：紧凑单行列表式布局
✅ 优点
信息密度最大化：单行布局同屏可展示更多条目，便于快速浏览。
专业数据对比：关键数据字段严格对齐，便于专业投资者快速比较。
传统交互模式：符合习惯使用Excel等传统数据工具用户的使用习惯。
❌ 缺点
适配性较弱： 长产品名易出现截断或换行不自然，影响版面稳定性。
信息可读性差：所有字段视觉权重相近，缺乏明确的信息层级。
缺乏情感连接：冰冷的表格形式削弱了产品品牌与情感化表达。
对中老年不友好：字号偏小、间距紧凑，易造成识别困难与误操作。
方案二：结构化多行卡片布局（采用）
方案二：结构化多行卡片布局（采用）
✅ 优点
信息更清晰： 分行呈现强化可读性，布局舒展，内容清晰。
层级更明确： 通过字体、色彩、位置等设计手段，突出核心信息（收益/风险/期限），提高扫读、对比效率。
可扩展性强： 能够灵活承载多行标题、标签等，满足复杂的营销需求。
❌ 缺点
同屏效率下降： 单屏内展示的产品条目数量确实少于表格布局。
设计复杂度更高： 需要建立一套完整的卡片组件规范（包括各种状态、尺寸变体），对设计和开发的前期投入要求更高。
改版前 V.S. 改版后
改版前 V.S. 改版后
重构产品列表页
重构产品列表页
1
业务优化: 统一业务口径
将“银行理财”更名为“理财产品”，统一覆盖自营/代销；管理机构以产品说明为准，减少“银行背书”误解与争议成本。
2
解决痛点：筛选功能可供性不足、效率低
把期限从隐藏筛选提升为列表页一级分类 Tab，贴合用户首要决策维度：将产品按期限分组为“全部/(每)日/周/月/季度/半年/年(可赎)”，帮助用户先收敛范围再浏览对比，快速缩小候选范围。
3
解决痛点：产品信息同质化难对比
对比降本：增加按期限/收益/综合的一键排序（支持升降序），降低手动比对与试错成本，提升选品效率。
4
痛点解决/可用性优化：信息可读性不足、双列卡片不利于快速对比、关键 CTA 不突出、标签干扰
信息重排：将双列卡片改为单列信息流以简化视觉路径，并强化收益/期限/确认/起购/风险/年化业绩比较基准等关键信息的层级分组与纵向对齐，弱化干扰标签 (客群专属)，支持关键决策信息“一眼可比”。同时提升 CTA (“产看详情”按钮)可见性与操作确定性。
5
可用性优化: 入口命名更直观
将“查询条件”调整为“更多筛选”，降低理解与使用成本。
1
业务优化: 统一业务口径
将“银行理财”更名为“理财产品”，统一覆盖自营/代销；管理机构以产品说明为准，减少“银行背书”误解与争议成本。
2
解决痛点：筛选功能可供性不足、效率低
把期限从隐藏筛选提升为列表页一级分类 Tab，贴合用户首要决策维度：将产品按期限分组为“全部/(每)日/周/月/季度/半年/年(可赎)”，帮助用户先收敛范围再浏览对比，快速缩小候选范围。
3
解决痛点：产品信息同质化难对比
对比降本：增加按期限/收益/综合的一键排序（支持升降序），降低手动比对与试错成本，提升选品效率。
4
痛点解决/可用性优化：信息可读性不足、双列卡片不利于快速对比、关键 CTA 不突出、标签干扰
信息重排：将双列卡片改为单列信息流以简化视觉路径，并强化收益/期限/确认/起购/风险/年化业绩比较基准等关键信息的层级分组与纵向对齐，弱化干扰标签 (客群专属)，支持关键决策信息“一眼可比”。同时提升 CTA (“产看详情”按钮)可见性与操作确定性。
5
可用性优化: 入口命名更直观
将“查询条件”调整为“更多筛选”，降低理解与使用成本。
1
业务优化: 统一业务口径
将“银行理财”更名为“理财产品”，统一覆盖自营/代销；管理机构以产品说明为准，减少“银行背书”误解与争议成本。
解决痛点：筛选功能可供性不足、效率低
2
把期限从隐藏筛选提升为列表页一级分类 Tab，贴合用户首要决策维度：将产品按期限分组为“全部/(每)日/周/月/季度/半年/年(可赎)”，帮助用户先收敛范围再浏览对比，快速缩小候选范围。
痛点解决/可用性优化：信息可读性不足、双列卡片不利于快速对比、关键CTA不突出、标签干扰
4
信息重排：将双列卡片改为单列信息流以简化视觉路径，并强化收益/期限/确认/起购/风险/年化业绩比较基准等关键信息的层级分组与纵向对齐，弱化干扰标签 (客群专属)，支持关键决策信息“一眼可比”。同时提升 CTA (“产看详情”按钮)可见性与操作确定性。
可用性优化: 入口命名更直观
5
将“查询条件”调整为“更多筛选”，降低理解与使用成本。
解决痛点：产品信息同质化难对比
3
对比降本：增加按期限/收益/综合的一键排序（支持升降序），降低手动比对与试错成本，提升选品效率。
1
可用性优化: 不可购产品设计区分不明+和可购混排
将不可购买产品统一收拢至列表底部并分区展示，同时在分区与按钮处标注不可购原因 (如客群限制/非交易时间/额度不足)，减少混淆与误点，提升查找效率。
2
合规优化：补充业绩比较基准/基准构成与“投资范围”摘要，校准收益预期
在收益率下方新增可展开的“年化业绩比较基准/基准构成”与“投资范围(资产配置方向/比例)”摘要，并同步展示风险提示与免责声明，用于解释收益展示口径、校准收益预期，避免误解为承诺收益，提升信任与决策效率。
1
可用性优化: 不可购产品设计区分不明+和可购混排
1
将不可购买产品统一收拢至列表底部并分区展示，同时在分区与按钮处标注不可购原因 (如客群限制/非交易时间/额度不足)，减少混淆与误点，提升查找效率。
2
合规优化：补充业绩比较基准/基准构成与“投资范围”摘要，校准收益预期
2
在收益率下方新增可展开的“年化业绩比较基准/基准构成”与“投资范围(资产配置方向/比例)”摘要，并同步展示风险提示与免责声明，用于解释收益展示口径、校准收益预期，避免误解为承诺收益，提升信任与决策效率。
改版前 V.S. 改版后
改版前 V.S. 改版后
重构产品详情页
重构产品详情页
1
信息分层：固定区“先给结论”，滑动区“给依据”
将产品管理机构/自营或代销/风险等级/业绩比较基准与投资范围摘要等放入顶部固定区，先回答用户最关心的“这是谁的产品、风险几何、收益怎么理解”。
在滑动区结构化呈现更全面的产品信息(如起息、产品类型、可实时刷新的剩余额度)。
2
解决痛点：时间规则不完整
用可视化时间轴串联“购买—生效—退出”关键节点(起购/起息/开放期/赎回等)，把“规则”变成“可预期的时间线”，帮助用户更好安排资金使用。
3
增加撤单规则：降低决策焦虑
在时间轴下补充撤单窗口与截止时点等关键规则，明确“可撤销范围与时限”，降低用户对“买错能否撤回”的不确定性，减少犹豫与咨询成本，提升下单信心。
1
信息分层：固定区“先给结论”，滑动区“给依据”
将产品管理机构/自营或代销/风险等级/业绩比较基准与投资范围摘要等放入顶部固定区，先回答用户最关心的“这是谁的产品、风险几何、收益怎么理解”。
在滑动区结构化呈现更全面的产品信息(如起息、产品类型、可实时刷新的剩余额度)。
2
解决痛点：时间规则不完整
用可视化时间轴串联“购买—生效—退出”关键节点(起购/起息/开放期/赎回等)，把“规则”变成“可预期的时间线”，帮助用户更好安排资金使用。
3
增加撤单规则：降低决策焦虑
在时间轴下补充撤单窗口与截止时点等关键规则，明确“可撤销范围与时限”，降低用户对“买错能否撤回”的不确定性，减少犹豫与咨询成本，提升下单信心。
1
解决痛点：收益展示口径不一致，导致难对齐比较
解决痛点：收益展示口径不一致，导致难对齐比较
在详情页新增“业绩表现”Tab，与“产品规则”并列展示；展示多个时间区段的区间涨幅和年化收益率(如近一月、近半年等，区间组合因产品而异)，帮助用户全面判断产品短/中/长期收益表现与稳定性，从而更高效完成对比并做出选品决策。
在详情页新增“业绩表现”Tab，与“产品规则”并列展示；展示多个时间区段的区间涨幅和年化收益率(如近一月、近半年等，区间组合因产品而异)，帮助用户全面判断产品短/中/长期收益表现与稳定性，从而更高效完成对比并做出选品决策。
改版前 V.S. 改版后
改版前 V.S. 改版后
重构我的持仓页
重构我的持仓页
1
可用性优化：持仓入口归拢到产品分类内，打通“买—管”闭环
将“我的持仓/交易记录”从与“理财/基金”并列的一级入口，调整为各产品分类下的子入口。这样用户在“选品—买入—查看持仓/操作”过程中无需跨模块来回跳转，降低入口查找与理解成本，也支持按产品维度进行更清晰的持仓管理。
3
解决痛点：赎回预期不清，容易错过可操作窗口
在持仓条目中明确展示“可赎回状态/可赎回时间点”（如“今日可赎/XX日可赎”）。让用户快速判断资金可用性与下一步操作时机，减少反复点开详情确认与误操作。
4
解决痛点：购买后数据待更新，交易状态易被误解
为新购入产品增加“1笔购买交易待确认”状态标签，在份额/市值等尚未更新阶段给出明确状态反馈，降低用户对“是否购买成功/是否系统异常”的误解与咨询，稳定交易后的心理预期。
2
解决痛点：持仓信息多时难抓重点，对比与管理效率低
新增按“市值/盈亏”等维度的排序能力，并补齐关键收益信息的对齐展示。帮助用户快速锁定影响最大的持仓与异常波动项，减少逐条核对成本，提升管理与判断效率。
1
可用性优化：持仓入口归拢到产品分类内，打通“买—管”闭环
将“我的持仓/交易记录”从与“理财/基金”并列的一级入口，调整为各产品分类下的子入口。这样用户在“选品—买入—查看持仓/操作”过程中无需跨模块来回跳转，降低入口查找与理解成本，也支持按产品维度进行更清晰的持仓管理。
2
解决痛点：持仓信息多时难抓重点，对比与管理效率低
新增按“市值/盈亏”等维度的排序能力，并补齐关键收益信息的对齐展示。帮助用户快速锁定影响最大的持仓与异常波动项，减少逐条核对成本，提升管理与判断效率。
3
解决痛点：赎回预期不清，容易错过可操作窗口
在持仓条目中明确展示“可赎回状态/可赎回时间点”（如“今日可赎/XX日可赎”）。让用户快速判断资金可用性与下一步操作时机，减少反复点开详情确认与误操作。
4
解决痛点：购买后数据待更新，交易状态易被误解
为新购入产品增加“1笔购买交易待确认”状态标签，在份额/市值等尚未更新阶段给出明确状态反馈，降低用户对“是否购买成功/是否系统异常”的误解与咨询，稳定交易后的心理预期。
1
可用性优化：持仓入口归拢到产品分类内，打通“买—管”闭环
将“我的持仓/交易记录”从与“理财/基金”并列的一级入口，调整为各产品分类下的子入口。这样用户在“选品—买入—查看持仓/操作”过程中无需跨模块来回跳转，降低入口查找与理解成本，也支持按产品维度进行更清晰的持仓管理。
2
解决痛点：持仓信息多时难抓重点，对比与管理效率低
新增按“市值/盈亏”等维度的排序能力，并补齐关键收益信息的对齐展示。帮助用户快速锁定影响最大的持仓与异常波动项，减少逐条核对成本，提升管理与判断效率。
3
解决痛点：赎回预期不清，容易错过可操作窗口
在持仓条目中明确展示“可赎回状态/可赎回时间点”（如“今日可赎/XX日可赎”）。让用户快速判断资金可用性与下一步操作时机，减少反复点开详情确认与误操作。
4
解决痛点：购买后数据待更新，交易状态易被误解
为新购入产品增加“1笔购买交易待确认”状态标签，在份额/市值等尚未更新阶段给出明确状态反馈，降低用户对“是否购买成功/是否系统异常”的误解与咨询，稳定交易后的心理预期。
适老化设计
适老化设计
将线性图标替换为更具象的拟物化图标
将线性图标替换为更具象的拟物化图标
基于前期可用性与可访问性相关的桌面研究结论：在视觉搜索、可点击对象识别、跨页面导航三类任务中，老年用户在拟物化设计下通常表现为完成更快或更准确。因此，我们在“关爱版”中将“常规版”首页采用的线性图标全部替换为拟物化图标，以减轻老年用户的识别负担。
基于前期可用性与可访问性相关的桌面研究结论：在视觉搜索、可点击对象识别、跨页面导航三类任务中，老年用户在拟物化设计下通常表现为完成更快或更准确。因此，我们在“关爱版”中将“常规版”首页采用的线性图标全部替换为拟物化图标，以减轻老年用户的识别负担。
常规版-线性图标
常规版-线性图标
关爱版-拟物化图标
关爱版-拟物化图标
常规版 V.S. 关爱版
常规版 V.S. 关爱版
关爱版 (适老化版) - 首页设计
关爱版 (适老化版) - 首页设计
常规版-首页
常规版-首页
适老化版-首页
1
服务入口重排 + 可操作按钮 CTA 升级
重新定义三项核心服务，并将文字按钮改为更直观可点击的按钮样式。
2
服务入口简化，仅保留高频业务
将区域二的服务入口由 8 项精简至 6 项，仅保留老年用户的高频功能，减少界面干扰。
3
去广告化，净化信息环境
移除首页广告，显著降低视觉噪音，帮助老年用户聚焦核心业务办理。
4
版本切换友好化
首页提供关爱版按钮。命名上采用中性友好词汇“关爱版”，避免“老年版”等可能带来标签化感受的表述。
1
5
6
简化术语
将业务术语改写为更简单易懂的表达，比如将“进入办理”改为“去申请”，“客户账户登录”改为“点击登录”，以及将“账户总览”改为“我的账户”。
6
合规信息合并展示
将“存款保险”合规展示并入“我的账户”，用轮播卡片呈现，满足必须展示要求，并减少占位与视觉干扰。
适老化版-首页
1
服务入口重排 + 可操作按钮 CTA 升级
重新定义三项核心服务，并将文字按钮改为更直观可点击的按钮样式。
2
服务入口简化，仅保留高频业务
服务入口简化，保留高频业务
将区域二的服务入口由 8 项精简至 6 项，仅保留老年用户的高频功能，减少界面干扰。
3
去广告化，净化信息环境
移除首页广告，显著降低视觉噪音，帮助老年用户聚焦核心业务办理。
4
版本切换友好化
首页提供关爱版按钮。命名上采用中性友好词汇“关爱版”，避免“老年版”等可能带来标签化感受的表述。
1
5
6
简化术语
将业务术语改写为更简单易懂的表达，比如将“进入办理”改为“去申请”，“客户账户登录”改为“点击登录”，以及将“账户总览”改为“我的账户”。
6
合规信息合并展示
将“存款保险”合规展示并入“我的账户”，用轮播卡片呈现，满足必须展示要求，并减少占位与视觉干扰。
常规版-首页
常规版-首页
适老化版-首页
适老化版-首页
1
在“关爱版”中，字体、按钮、图标等视觉元素经过放大适配后，占据较大界面空间。为保障界面清晰度，我将用户不常查看但银行合规必须呈现的合规信息，收纳至可点击触发的弹窗中。
在“关爱版”中，字体、按钮、图标等视觉元素经过放大适配后，占据较大界面空间。为保障界面清晰度，我将用户不常查看但银行合规必须呈现的合规信息，收纳至可点击触发的弹窗中。
增加语音读屏功能
增加语音读屏功能
为减轻老年/视障用户的视觉负担，我们在重要业务场景下增加了屏幕朗读功能，如转账汇款的确认信息步骤。
转账汇款 - 确认转账信息
加强远程客服协助功能
加强远程客服协助功能
小浦随行借记卡服务
小浦随行借记卡服务
简化交互步骤，减少操作困扰
简化交互步骤，减少操作困扰
两步调节字体大小
一键调节字体大小
两步调节字体大小
遵循主流习惯：沿用手机银行 App 中成熟的字体调节交互模型，两步调节字体大小——点击”字号调整“按钮→选择字号。
遵循主流习惯：沿用手机银行 App 中成熟的字体调节交互模型，两步调节字体大小——点击”字号调整“按钮→选择字号。
一键调节字体大小
简化核心操作：将调节步骤简化为一键调节，点击放大/缩小字体。
简化核心操作：将调节步骤简化为一键调节，点击放大/缩小字体。
强化即时反馈：通过非模态提示（弹窗）告知用户当前字体档位，提升操作的可感知性与安全感。
强化即时反馈：通过非模态提示（弹窗）告知用户当前字体档位，提升操作的可感知性与安全感。
常规版：两步发送语音验证码
关爱版：一键发送语音验证码
常规版：两步发送语音验证码
两步交互：语音验证方式默认隐藏于下拉菜单中，须点击展开才能发现并使用语音验证码。
两步交互：语音验证方式默认隐藏于下拉菜单中，须点击展开才能发现并使用语音验证码。
一键切换：支持一键点击文字按钮接收语音验证码，提高该验证方式可发现性，简化交互步骤。
一键切换：支持一键点击文字按钮接收语音验证码，提高该验证方式可发现性，简化交互步骤。
关爱版：一键发送语音验证码
设计系统
定制“关爱版”设计系统与设计规范
定制“关爱版”设计系统与设计规范
在保留并扩展常规版设计系统的基础上，我建立了全新适老化版的设计系统，通过强化色彩对比度、放大字体尺寸及优化UI组件，全面满足 WCAG AA/AAA 无障碍设计标准。
在保留并扩展常规版设计系统的基础上，我建立了全新适老化版的设计系统，通过强化色彩对比度、放大字体尺寸及优化UI组件，全面满足 WCAG AA/AAA 无障碍设计标准。
关爱版- 字体规范（放大）
颜色对比满足 WCAG 2.1 AA/AAA 设计标准
常规版 - 按钮
关爱版 - 按钮 (放大+简化+对比度增强)
第一轮迭代
基于业务反馈的设计迭代
基于业务反馈的设计迭代
可用性测试
可用性测试
我们与业务侧合作开展了线下可用性测试，共有54名参与者。在测试过程中，我们同步记录操作路径与关键卡点，并将发现归纳为可用性问题清单与优化建议，指导后续迭代。
我们与业务侧合作开展了线下可用性测试，共有54名参与者。在测试过程中，我们同步记录操作路径与关键卡点，并将发现归纳为可用性问题清单与优化建议，指导后续迭代。
第二轮迭代
可用性问题与设计迭代
可用性问题与设计迭代
常规版首页（V1.0）
迭代后：常规版首页（V2.0）
问题 1
关爱版（适老化版）入口可发现性不足，按钮点击率低。
设计方案与迭代
当 65 岁及以上老年客户成功登录后，系统将自动切换至关爱版界面。同时，常规版中固定展示“推荐使用关爱版”的提示气泡。
关爱版首页（V1.0）
迭代后：关爱版首页（V2.0）
问题 2
从“常规版”切换到“关爱版”时，缺少明确反馈。中老年用户对系统状态变化更依赖确定性提示，没有成功反馈会让他们怀疑操作是否生效，降低继续操作意愿。
设计方案与迭代
在切换成功时，引入带动效的图标的弹窗提示，强化切换成功的视觉反馈，帮助用户快速感知当前已进入关爱版。
常规版首页（V1.0）
问题 1
关爱版（适老化版）入口可发现性不足，按钮点击率低。
关爱版首页（V1.0）
问题 2
从“常规版”切换到“关爱版”时，缺少明确反馈。中老年用户对系统状态变化更依赖确定性提示，没有成功反馈会让他们怀疑操作是否生效，降低继续操作意愿。
迭代后：常规版首页（V2.0）
设计方案与迭代
当 65 岁及以上老年客户成功登录后，系统将自动切换至关爱版界面。同时，常规版中固定展示“推荐使用关爱版”的提示气泡。
迭代后：关爱版首页（V2.0）
设计方案与迭代
在切换成功时，引入带动效的图标的弹窗提示，强化切换成功的视觉反馈，帮助用户快速感知当前已进入关爱版。
老年客户 VTM 全流程无障碍优化
老年客户 VTM 全流程无障碍优化
我们与大堂经理协作，围绕老年客户在 VTM 上的“看得清、点得准、办得成、遇到问题能求助”，串联网点引导、适老模式、远程协助与回访反馈，形成端到端的无障碍服务闭环，提升自助办理信心。
我们与大堂经理协作，围绕老年客户在 VTM 上的“看得清、点得准、办得成、遇到问题能求助”，串联网点引导、适老模式、远程协助与回访反馈，形成端到端的无障碍服务闭环，提升自助办理信心。
成果
成果
新版本上线后，结合网点反馈与运营口径统计，取得以下成效（截至2023年10月）：
新版本上线后，结合网点反馈与运营口径统计，取得以下成效（截至2023年10月）：
理财产品
+17.6%
用户采用率
1
百万+
累计交易量
10
万+
月均老年客户量
设计专利申请
关爱版 (适老化版)
显著提升客户满意度与自助办理信心
显著提升客户满意度与自助办理信心
浦发银行网点工作人员观察到，老年客户对使用 VTM 的态度发生了明显变化。过去他们常抱怨服务“冷冰冰”、流程复杂；现在则普遍认为办理更快、更方便——而且无需排队等候。
浦发银行网点工作人员观察到，老年客户对使用 VTM 的态度发生了明显变化。过去他们常抱怨服务“冷冰冰”、流程复杂；现在则普遍认为办理更快、更方便——而且无需排队等候。
“我有时候会过来买点理财，我就在附近住。一般我就说下我想存多久，买多少，你们经理给我介绍，完了我再挑一挑…
之前（VTM机）不好用…看不明白啥时候能取…现在我自己在机器上看，方便么，不用排队。现在好用多了，写的比较清楚。”
"以前转账操作总有点吃力，现在这页面一亮出来，什么都清清楚楚。
字大了，步骤也简单明了，我一步步跟着做就行。最贴心的是，机器还会读出来提示我，一点儿也不费眼神。这次都没喊人帮忙，自己就搞定了，心里挺有成就感的。”
"以前转账操作总有点吃力，现在这页面一亮出来，什么都清清楚楚。
字大了，步骤也简单明了，我一步步跟着做就行。最贴心的是，机器还会读出来提示我，一点儿也不费眼神。这次都没喊人帮忙，自己就搞定了，心里挺有成就感的。”
李先生
"现在顺手多了，也不用老叫你们来帮忙。
以前我在机子（VTM机）上转账，老怕点错，得凑近看好几遍。
现在字大了、提示也清楚，我跟着一步步点就行。要是还是不放心，电话里也能帮我确认一下。”
"以前转账操作总有点吃力，现在这页面一亮出来，什么都清清楚楚。
字大了，步骤也简单明了，我一步步跟着做就行。最贴心的是，机器还会读出来提示我，一点儿也不费眼神。这次都没喊人帮忙，自己就搞定了，心里挺有成就感的。”
"以前转账操作总有点吃力，现在这页面一亮出来，什么都清清楚楚。
字大了，步骤也简单明了，我一步步跟着做就行。最贴心的是，机器还会读出来提示我，一点儿也不费眼神。这次都没喊人帮忙，自己就搞定了，心里挺有成就感的。”
张女士
做得比较好的地方有哪些？
做得比较好的地方有哪些？
做得比较好的地方有哪些？
端到端优化理财业务全链路：围绕“找产品—看明白—敢下单—能管理”四个关键决策环节，重构信息层级与操作路径，提升 VTM 场景下选品效率和自助完成率。
我没有一味的延用浦发 App 或 VTM 常规版中的交互规范，而是基于老年用户需求简化了“关爱版”的交互流程，以减少步骤并强化反馈提示。
端到端优化理财业务全链路：围绕“找产品—看明白—敢下单—能管理”四个关键决策环节，重构信息层级与操作路径，提升 VTM 场景下选品效率和自助完成率。
我没有一味的延用浦发 App 或 VTM 常规版中的交互规范，而是基于老年用户需求简化了“关爱版”的交互流程，以减少步骤并强化反馈提示。
后续可以改进的方面有哪些？
后续可以改进的方面有哪些？
后续可以改进的方面有哪些？
在节奏快、工期紧的项目中，更早引入开发团队可以让设计与开发并行推进——可提前搭建可复用的底层组件，提升整体效率、降低交付风险与返工成本。
在节奏快、工期紧的项目中，更早引入开发团队可以让设计与开发并行推进——可提前搭建可复用的底层组件，提升整体效率、降低交付风险与返工成本。
后续迭代计划
后续迭代计划
后续迭代计划
继续完成“理财产品”模块的功能迭代，持续优化用户购买理财时的体验。
持续完善并扩展常规版与关爱版的设计系统与组件库。
基于 PRD，持续推进关爱版其他关键业务/核心服务的设计落地。
继续完成“理财产品”模块的功能迭代，持续优化用户购买理财时的体验。
持续完善并扩展常规版与关爱版的设计系统与组件库。
基于 PRD，持续推进关爱版其他关键业务/核心服务的设计落地。