1.排版与字号
知识点字号只是起点,可读性是系统工程
适老界面的正文一般 ≥ 18px(移动端不低于系统默认字号且支持放大),辅助说明也不应低于 14px;关键操作文字加粗;行距 1.5~1.8;中文每行 25~35 字;标题、正文、说明至少拉开两档字阶。
老花使近点后移,字号小时老人会本能地把手机拿远——拿远的极限就是放弃。行距与行长决定「串行率」:中文方块字密度高,行距不足时上下行互相粘连。
全部尺寸用 rem 等相对单位,让「系统字体放大」不破版;字重 ≥ 400,避免细体;避免斜体与大段两端对齐;按钮文字与页面文字同源缩放,防止「字大了按钮装不下」。
把法律条款、活动规则做成 12px 浅灰小字。这些「想让用户别看的地方」恰恰是纠纷与投诉的来源,适老化审查会直接命中。
2.色彩与对比
知识点对比度是唯一硬通货,颜色语义必须冗余
正文对比度 ≥ 4.5:1(AA),争取 ≥ 7:1(AAA);输入框、开关、图标等控件的边界对比 ≥ 3:1;红色错误、绿色成功等语义必须叠加文字或图标,不能只靠颜色。
晶状体黄化让蓝紫通道衰减弱(见 ① 认识用户),色盲与白内障进一步压缩色彩信息;对比度(明度差)是最后失效的通道,所以一切关键信息最后都靠它兜底。
默认浅底深字;深底浅字仅作可选模式;禁用浅灰水印文字、低对比描边按钮;焦点状态用「3px 实线描边 + 位移」表达,不依赖颜色变化;设计稿交付前用对比度工具全检(本章第 8 节有演示)。
「高级灰」设计体系直接移植到老年产品。灰阶体系内的色差对老人几乎不可见,层次感要以明度台阶重建。
3.触控与手势
知识点44×44px 是热区底线,视觉可以更小
点击热区(实际响应区域)不小于 44×44px,相邻目标间距 ≥ 8px;视觉图标可以小于 44px,但必须由不可见的扩大热区补足。双击、长按、双指捏合、边缘侧滑等手势,都必须提供单击按钮的替代路径。
44px 约为成年人食指指腹的触控面积;老年人手部震颤让落点在目标周围晃动,小目标 + 密集排列 = 高误触率。而「看不见的手势」(侧滑返回、长按删除)依赖隐性知识,老人不会主动发现,误触后更不知道如何撤销。
列表项整体可点,而不是只有右侧小箭头可点;返回用左上角显式「返回」按钮,侧滑只作为补充;删除类操作放在与「完成」相反的角落并用文字确认;按下时给即时视觉反馈(加深、按压态),让老人确认「点到了」。
5.表单与输入
知识点标签常显、一次一步、错误可修复
输入框标签常显在框外(占位符不能当标签);长表单拆成分步填写,每步 3~5 项以内;数字字段自动弹数字键盘;错误提示就地出现,说明哪里错、为什么、怎么改;已填内容保留,返回不丢。
能用选择就不让打字(身份证读卡/拍摄识别、常用地址点选);输入框高度 ≥ 48px;验证码改为短信或行为验证,若必须图形码则提供语音播报与一键刷新;提交按钮写明动作后果(「提交并缴费 128 元」)。
用行内小字校验(输入时实时标红)。老人往往注意不到行内变化,提交失败也不知道原因。关键校验要在提交时汇总播报/高亮,必要时语音读出。
6.反馈与容错
知识点每个动作都要「有回音」,每次失败都要「有出路」
点击后即时出现按压态;处理中用文字说明状态(「正在提交,约需 5 秒」)而不是干转圈;成功给结果页而非 toast 一闪而过;失败给可执行的下一步(「重试」「联系客服」);无倒计时,或超时可一键延长。
「没有回音」会被老人理解为「没点上」,于是反复点击造成重复提交/重复扣款;「一闪而过的 toast」对处理速度变慢的用户等于没说。
支付类操作支持事后撤销或客服介入;危险按钮与常用按钮拉开距离;弹窗按钮写清后果且主次分明;提供「操作历史」让老人自查「刚才那笔钱去哪了」。
7.语音与多通道
知识点打字是门槛,语音是拐杖,冗余是底线
三条互补路径:①文字转语音(长按读出屏幕内容,微信关怀模式的做法),服务视力衰退者;②语音转文字(语音输入替代拼音打字,解决不会拼音、打字慢);③读屏兼容(语义化标签、可读的控件名,让系统级读屏工具可用)。
语音播报语速放慢、提供重复播放;文字记录与语音内容一致;重要通知「推送 + 短信 + 电话」分级冗余(金融、医疗场景);语音永远与视觉路径并存——语音是拐杖不是唯一通道,听力障碍与嘈杂环境同样存在。
8.互动演示:对比度对阅读的影响
拖动滑杆改变文字深浅,切换背景色,右侧实时显示 WCAG 对比度与达标情况。你会发现:在中灰底上,连「看着还行」的颜色都常常不达标——这就是为什么对比度要用公式算,不能用眼睛估。
互动演示对比度演示器
当前文字/背景对比度:计算中…
王阿姨,您本月的水费账单已出:68.50 元。
小号说明文字(14px):逾期将按日加收违约金。
判定标准(正文 18px):≥4.5:1 为 AA 达标,≥7:1 为 AAA;14px 小字同样按 4.5:1 判定。按钮底色与白字同样受对比度约束——深浅不合适时「立即缴费」会先看不清。
9.互动演示:点击热区与容错
三行按钮的视觉尺寸不同,试试点按并开启「显示热区」:第一个按钮视觉和热区都只有 28px(反例);第二个 44px(底线);第三个视觉 28px 图标但热区 48px(正确做法:小图标 + 大热区)。
互动演示点击热区演示
试试点击右侧的按钮,这里会告诉你点中了哪一个。
10.长辈模式改造自查清单
把存量 App / 网页改造成长辈模式时的 10 条核心检查项,逐条打勾: