# 微信长辈就医适老化设计规范

## 一、基础规则

1. 我们根据[《移动互联网应用（APP）适老化通用设计规范》](https://docs.qq.com/pdf/DR0RBcGJWRXRmSVJu?fromtype=pdf&_t=1620648986236)和实践经验，总结了适老化设计的基础规则，以供参考。
2. 根据实践经验总结的规则，将以「（新增）」标记。
3. 同时我们将针对部分规则，提供详细的操作指南或案例。

### 1.1 可感知性

#### 1.1.1 字型大小

*详情请查看「操作指南·字型大小」*

1. 建议使用无衬线字体。
2. 建议增加字体大小调整选项（随系统设置调整，或移动应用内部具备字体大小设置选项）。
3. 主要功能及主要界面的文字信息（不包含字幕、文本图像以及与移动应用功能效果相关的文本）最大字体不小于 30pt。
4. 适老版界面及单独的适老版 APP 中的主要文字信息不小于 18pt，同时兼顾移动应用适用场景和显示效果。

#### 1.1.2 行间距

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

#### 1.1.3 对比度

*详情请查看「操作指南·对比度」*
适老化设计中，文本/文本图像呈现方式、图标等元素间的对比度至少为 4.5:1（字号大于 18 pt 时文本及文本图像对比度至少为 3:1）。

#### 1.1.4 颜色用途

1. 文本颜色不是作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。
2. 【例】 在用户输入密码错误的情景下，可使用文字或语音形式直接提示用户输入有误，避免仅使用颜色作为提示手段。

#### 1.1.5 验证码

如果移动应用中存在非文本验证码（如拼图类、选图类验证方式）等老年人不易理解的验证方式，则应提供可被不同类型感官（视觉、听觉等）接受的替代表现形式，例如文字或语音形式，以适应老年人的使用需求。

### 1.2 可操作性

#### 1.2.1 组件焦点大小

*详情请查看「操作指南·组件焦点大小」*

1. 适老版界面中的主要组件可点击焦点区域尺寸不小于 60×60pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44×44pt。
2. 单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48×48pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44×44pt。

#### 1.2.2 强化主要操作（新增）

*详情请查看「操作指南·强化主要操作」*
操作中最重要的操作应当适当予以强化。

#### 1.2.3 手势操作

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

#### 1.2.4 简化操作（新增）

*详情请查看「操作指南·简化操作」*

1. 减少复杂交互和特效。
2. 应避免过多验证流程，比如短信验证、拖动图片验证。

#### 1.2.5 充足操作时间

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

#### 1.2.6 浮窗

1. 在移动应用中，若内容产生新窗口（包含但不限于弹窗），应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部，且最小点击响应区域不能小于 44×44pt。
2. 相同性质且同一内容的浮窗不应反复出现。（新增）

### 1.3 可理解性

#### 1.3.1 提示机制

*详情请查看「操作指南·提示机制」*

1. 应当为必要的操作，提供易于理解的引导提示。（新增）
2. 应在标准版中提供显著的入口，以切换至适老化版本。

#### 1.3.2 直观表达（新增）

*详情请查看「操作指南·直观表达」*

1. 建议为图形按钮提供解释文案。
2. 避免出现专业性过高、晦涩难懂、有歧义的文案。
3. 可适当使用单音节词汇、组成轻重律词组，以使文案更口语化。如「充值话费→充话费」、「查询快递→查快递」等。

#### 1.3.3 保持完整（新增）

*详情请查看「操作指南·保持完整」*
元素与文字，超过极致时尽量保持完整展示而非省略。

#### 1.3.4 即时反馈（新增）

对需要操作的元件，提供各个状态下的即时反馈样式。包括：轻触、长按、禁用等。

### 1.4 安全性

#### 1.4.1 广告插件及诱导类按键限制

1. 禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件，也不能随机出现广告或临时性的广告弹窗。
2. 禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。

#### 1.4.2 保障老年用户个人信息安全

1. 移动应用程序进行个人信息处理时应遵循最小必要原则，即处理个人信息应当有明确、合理的目的，并应当限于实现处理目的的最小范围，不得进行与处理目的无关的个人信息处理，以保障老年用户个人信息安全。
2. 具体收集信息（如位置信息、图片信息等）行为，应符合[《常见类型移动互联网应用程序必要个人信息范围规定》](https://www.gov.cn/zhengce/zhengceku/2021-03/23/content_5595088.htm)[《APP 收集使用个人信息最小必要评估规范》](https://www.ttbz.org.cn/StandardManage/Detail/40991/)要求。

## 二、操作指南·说明

以下将以微信「长辈就医」作为案例，选取「基础规则」中的部分规则阐述详细的操作指南。

### 2.1「长辈就医」

「长辈就医」是微信为老人开发的，解决老人日常看病需求的功能。患者开通后，可直接访问常用医院，挂号更快、字体更大、就医全流程有通知。
![长辈就医](https://res.wx.qq.com/op_res/O67SEr1dbPDtyc-X5uyuVJx8waTOQqYP7agFBT6Z-RTpgB-dFngBA38-VVBLUwNVeefQO_wPkNrgwl28W62P6Q)

### 2.2 标准版 vs 适老化

1. 「长辈就医」是根据微信标准版设计进行适老化改造。
2. 因此，操作指南中案例均默认已有标准版设计，并在此基础上进行适老化改造。

## 三、操作指南·字型大小

### 3.1 基础规则

1. 建议使用无衬线字体。
2. 建议增加字体大小调整选项（随系统设置调整，或移动应用内部具备字体大小设置选项）。
3. 主要功能及主要界面的文字信息（不包含字幕、文本图像以及与移动应用功能效果相关的文本）最大字体不小于 30pt。
4. 适老版界面及单独的适老版 APP 中的主要文字信息不小于 18pt，同时兼顾移动应用适用场景和显示效果。

### 3.2 标准版的适老化改造

1. 如已有标准版设计，则可根据标准版进行适老化设计
2. 字体可按照标准版尺寸放大1.4倍。
3. 为了便于设计，可以四舍五入取整。

### 3.3 字体适老化换算表

| 标准版字体大小 | 倍率  | 适老化字体大小（未取整） | 适老化字体大小（取整） |
| -------------- | ----- | ------------------------ | ---------------------- |
| 22pt           | 1.4倍 | 30.8pt                   | 31pt                   |
| 17pt           | 1.4倍 | 23.8pt                   | 24pt                   |
| 14pt           | 1.4倍 | 19.6pt                   | 20pt                   |
| 12pt           | 1.4倍 | 16.8pt                   | 17pt                   |
| 10pt           | 1.4倍 | 14pt                     | 14pt                   |

## 四、操作指南·对比度

基础规则：适老化设计中，文本/文本图像呈现方式、图标等元素间的对比度至少为 4.5:1（字号大于 18 pt 时文本及文本图像对比度至少为 3:1）。
如已有标准版设计，则可根据标准版进行适老化设计：

| 模式                                                 | 正文                           | 摘要文本                      | 注释文本                     |
| ---------------------------------------------------- | ------------------------------ | ----------------------------- | ---------------------------- |
| 标准版                                               | 亮模式：90%
深色模式：80%   | 亮模式：55% 
深色模式：50% | 亮模式：30%
深色模式：30% |
| 适老化                                               | 亮模式：100% 
深色模式：85% | 亮模式：60%
深色模式：55%  | 亮模式：42%
深色模式：35% |
| *主色可根据医院品牌色定义，无需统一为微信品牌主色。* |                                |                               |                              |

### 4.1 对比度检测工具

1. [WebAIM’s Color Contrast Checker](https://webaim.org/resources/contrastchecker/)：可用于检测对比色是否符合 WCAG 2.0 要求
2. [APCA Contrast Calculator](http://www.myndex.com/APCA/)：可用于检测对比色是否符合 WCAG 3.0（草案） 要求
3. [指南] WCAG 2.0 与 WCAG 3.0 在对比度上的区别可参考[WCAG 3 and APCA](https://typefully.com/DanHollick/sle13GMW2Brp)
4. [whocanuse](https://www.whocanuse.com)：可用于检查对比度是否符合 WCAG 2.0 要求，也可以模拟视障群体所看到的颜色
5. [Contrast Grid](https://contrast-grid.eightshapes.com)：可用于检测设计系统中背景和文字对比是否符合 WCAG 2.0 要求
6. [Stark](https://www.figma.com/community/plugin/732603254453395948)：Figma 插件，可用于在 figma 中检测设计稿对比度

### 4.2 对比度适老化图示

![](https://res.wx.qq.com/op_res/O67SEr1dbPDtyc-X5uyuVNT82LYi61Msgs9MpVEkVvChEveRzcPl4QQNfiN25OZNVjGSokitJSOjYTddIosn_A)

## 五、操作指南·组件焦点大小

### 5.1 基础规则

1. 适老版界面中的主要组件可点击焦点区域尺寸不小于 60×60pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44×44pt。
2. 单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48×48pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44×44pt。

### 5.2 标准版的适老化改造

1. 如已有标准版设计，则可根据标准版进行适老化设计。
2. 对标准版进行适老化设计时，可参考以下方法：

![](https://res.wx.qq.com/op_res/O67SEr1dbPDtyc-X5uyuVCOAQzWzyICB0zfjsnBVbwvoQIOyGrjfE6MiWVSII5ekUdoPvB_cd73IHbeFtrlRwA)

### 5.3 按钮丨 Button

1. 按钮内字体、元素按 1.4倍 放大，上下边距固定。
2. 圆角大小保持固定。

![](https://res.wx.qq.com/op_res/O67SEr1dbPDtyc-X5uyuVDAaWVxu8KG8Os_8YVr7tDj2F-LC9_RtXXWGkgWAWRBeH2qTnlK0laDibn8FBgzPwA)

### 5.4 通知 丨 Notification

![](https://res.wx.qq.com/op_res/O67SEr1dbPDtyc-X5uyuVLZ7YmFbHLvfpq2uW1pHd3ZyrAqNe1hHTF9ll4-o4JPFyRZnZlWKWkH_Q0mVpad8vQ)

### 5.5 栏丨 Bar

![](https://res.wx.qq.com/op_res/O67SEr1dbPDtyc-X5uyuVOfzE7TZUkbyBm32Jncjt52LwmNddQCtj9F6Ikfa-WJr3xNj4pkkl0hkHMxr3qr8JA)

### 5.6 弹窗丨 Dialog

![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmd2PFSfGvoR-Unbsdnr6snrNVP30FptLHuedggtt4mC3aGARZBaflrtpbUYaS78S-A)

### 5.7 容器丨 Container

![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmZPswdPXnZg_qhxLtMIhte1snIaxLkq9QAGaCI9UQQKci5O7LrtgZCyYSi1zrL562A)

### 5.8 元件丨 Element

![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmeK8esGRujHbI7NejPDdazK-p5TBAGDd2aG0zU9hz9NXmiMkTVrJNDIAwIC81u5maQ)

### 5.9 热区设置

![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmQmf7kAif1qq27naWcIQghogV5wsW6Deyn8g9I8xbrCt8nNzuWL0omMOoX-JhKPM4A)
![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmQmf7kAif1qq27naWcIQghogV5wsW6Deyn8g9I8xbrCt8nNzuWL0omMOoX-JhKPM4A)
![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmZNiUiU0Fvplm2ix-ViGB0b6XupXLghnSZDe4EuMkT0tDFsYBKALPZZVEDLRZIN9HQ)

## 六、操作指南·强化主要操作

操作中最重要的操作应当适当予以强化。

![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmSoNK1ow1o6v_CD8lyqlrvz6p5c39qRM5s16SFMYHTlh1VNI4HwXdFvp8Y8SSklO4Q)

## 七、操作指南·简化操作

1. 减少复杂交互和特效。
2. 应避免过多验证流程，比如短信验证、拖动图片验证。

![](https://res.wx.qq.com/op_res/jZI2E0YEbLFLoHfcAnEgmRmx_9dJq5CfEJTX3tN_OXrcQp80YGdV2uSMccsO71u9W4sbgyBlRrg274vi23ngcQ)

## 八、操作指南·提示机制

1. 应当为必要的操作，提供易于理解的引导提示。（新增）
2. 应在标准版中提供显著的入口，以切换至适老化版本。

![](https://res.wx.qq.com/op_res/TCza2xUYDJ3MfcnC_4j4v-DsKRxCjPqX9y_cGK6vLDGWE6DUDTQarjpI5nLnXhFzOhDzHN8lxbMMqDv54cGC2g)

## 九、操作指南·直观表达

1. 建议为图形按钮提供解释文案。
2. 避免出现专业性过高、晦涩难懂、有歧义的文案。
3. 可适当使用单音节词汇、组成轻重律词组，以使文案更口语化。如「充值话费→充话费」、「查询快递→查快递」等。

![](https://res.wx.qq.com/op_res/U3kal7FClvMCcrW_glp4c_enplUbMpf67v3b8NbBUUZiHlAuZbfsutYz_IsRhW4z0XIeVM-7Dv2bb0xHiJ3efQ)

## 十、操作指南·保持完整

元素与文字，超过极致时尽量保持完整展示而非省略。

![](https://res.wx.qq.com/op_res/U3kal7FClvMCcrW_glp4c3ue4ISsdG_JXrCGFmnr8BSgzjhPmVNwzVrf_wtp38reAqqCGuB-UIScvcdoRRGLhA)

## 十一、案例展示·长辈就医

以下将完整展示「长辈就医」案例，作适老化设计参考。标记为「微信官方页面」的页面，无需医院单独设计。

![](https://res.wx.qq.com/op_res/UhwTHK44oSpVoY7gO5Ajo5cp7OwSMsgvqM9mr7GezDww9jtJ5og15hTgjRWa_xD4kRyK89KYbSfz-IrHFsDcOA)
![](https://res.wx.qq.com/op_res/UhwTHK44oSpVoY7gO5Ajo3ANbb3Y1susVFqaM5fMu3K_mIhK2UTx2eNtIXneFYCpqaVBLAC79rLiXnne1PkoeA)
![](https://res.wx.qq.com/op_res/UhwTHK44oSpVoY7gO5AjowDUd26LRV9zluB73B6y_JSzzLOiXMlIFuq_Sx1d30XJ1wwVmDFylX4UXnWjpVnjJA)

## 十二、参考资料

### 政府文件

1. [工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知](https://www.miit.gov.cn/jgsj/xgj/wjfb/art/2021/art_81e8b738d6b24ad6a04f7ecb3f4e0702.html)
2. [工业和信息化部关于印发《互联网应用适老化及无障碍改造专项行动方案》的通知](https://www.gov.cn/zhengce/zhengceku/2020-12/26/content_5573472.htm)
3. [国务院办公厅印发关于切实解决老年人运用智能技术困难实施方案的通知](https://www.miit.gov.cn/xwdt/szyw/art/2020/art_4bacc01b812e49c7b89d88373638bbf6.html)

### 行业规范

1. [Web Content Accessibility Guidelines \(WCAG\) 2.0](https://www.w3.org/TR/WCAG20/)
2. [Web Content Accessibility Guidelines \(WCAG\) 2.2](https://www.w3.org/TR/2023/REC-WCAG22-20231005/)
3. [\[Working Draft\] W3C Accessibility Guidelines \(WCAG\) 3.0](https://www.w3.org/TR/wcag-3.0/)
4. [\[中文版\] Web 内容无障碍指南 \(WCAG\) 2.0](https://www.w3.org/Translations/WCAG20-zh/)
5. [移动互联网应用（APP）适老化通用设计规范](https://docs.qq.com/pdf/DR0RBcGJWRXRmSVJu?fromtype=pdf&_t=1620648986236)
6. [国家标准 GB/T 37668-2019《信息技术 互联网内容无障碍可访问性技术要求与测试方法》](https://openstd.samr.gov.cn/bzgk/gb/newGbInfo?hcno=35ECC696805C1A67C93B74FB6D0D8EFB)

### 企业规范

1. [Apple - Human Interface Guidelines - Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility#Interactions)
2. [Apple - Accessibility for Developers](https://developer.apple.com/accessibility/)
3. [Apple - Videos - Accessibility & Inclusion](https://developer.apple.com/videos/accessibility-inclusion/)
4. [Material Design - Accessibility](https://m2.material.io/design/usability/accessibility.html#understanding-accessibility)
5. [Android - Build accessible apps](https://developer.android.com/guide/topics/ui/accessibility?hl=zh-cn)
6. [Starting Android Accessibility](https://developer.android.com/codelabs/starting-android-accessibility?hl=zh-cn#0)
7. [Microsoft Inclusive Design](https://inclusive.microsoft.design)
8. [IBM Accessibility](https://www.ibm.com/able/)

### 工具

1. [WebAIM’s Color Contrast Checker](https://webaim.org/resources/contrastchecker/)：可用于检测对比色是否符合 WCAG 2.0 要求
2. [APCA Contrast Calculator](http://www.myndex.com/APCA/)：可用于检测对比色是否符合 WCAG 3.0（草案） 要求
3. [指南] WCAG 2.0 与 WCAG 3.0 在对比度上的区别可参考[WCAG 3 and APCA](https://typefully.com/u/DanHollick/t/sle13GMW2Brp)
4. [whocanuse](https://www.whocanuse.com)：可用于检查对比度是否符合 WCAG 2.0 要求，也可以模拟视障群体所看到的颜色
5. [Contrast Grid](https://contrast-grid.eightshapes.com)：可用于检测设计系统中背景和文字对比是否符合 WCAG 2.0 要求
6. [Stark](https://www.figma.com/community/plugin/732603254453395948)：Figma 插件，可用于在 figma 中检测设计稿对比度
7. [Android 无障碍套件](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback&hl=zh&pli=1)：包含一系列无障碍应用，让用户无需用双眼或仅通过开关设备即可使用 Android 设备
8. [a11yproject Checklist](https://www.a11yproject.com/checklist/#content)：由 a11yproject 提供的 Checklist，用于检查设计方案是否符合无障碍要求
9. [W3C Checklist](http://w3c.github.io/apa/fast/checklist.html)：由 W3C 提供的 Checklist，用于检查设计方案是否符合无障碍要求
10. [axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)：Chrome 插件，用于评估 web 产品是否符合无障碍要求
11. [WAVE Evaluation tool](https://chromewebstore.google.com/detail/jbbplnpkjmmeebjpijfedlgcdilocofh)：Chrome 插件，用于评估 web 产品是否符合无障碍要求
12. [VIZ PALETTE](https://projects.susielu.com/viz-palette)：可对配色形成分级报告，用于评估不同颜色在不同面积下的区分度

### 延伸阅读

1. [微信、支付宝等 43 个 APP 将进行适老化及无障碍改造，如何评价这一举动？具有什么样的社会意义?](https://www.zhihu.com/question/436424668/answer/1650804984)
2. [胡泳：为什么今天我们应该关注“数字弃民”？](https://mp.weixin.qq.com/s/JAt34jLJFE-ozP0PDtbUdA)
3. [UX Coffee 设计咖 - 互联网上的盲道](https://www.xiaoyuzhoufm.com/podcast/5e280fab418a84a0461fa480)
4. [无障碍设计小组 - 无障碍知识库](https://github.com/a11y-team/awesome-a11y-cn)
5. [千万别让老年机 只有大字体](https://www.bilibili.com/video/BV1fb4y1X7sd/?vd_source=7e7dbc1459c109cb1f9e6173d2dc9d82)
6. [2021 可及信息无障碍案例汇编](https://www.siaa.org.cn/static/image/img_media/1629791657499.pdf)
7. [2022 可及信息无障碍案例汇编](https://tadc.org.cn/%C3%A3%C2%80%C2%8A2022%C3%A5%C2%8F%C2%AF%C3%A5%C2%8F%C2%8A%C3%A4%C2%BF%C2%A1%C3%A6%C2%81%C2%AF%C3%A6%C2%97%C2%A0%C3%A9%C2%9A%C2%9C%C3%A7%C2%A2%C2%8D%C3%A6%C2%A1%C2%88%C3%A4%C2%BE%C2%8B%C3%A6%C2%B1%C2%87%C3%A7%C2%BC%C2%96%C3%A3%C2%80%C2%8B.pdf)
8. [Screen Recognition: Creating Accessibility Metadata for Mobile Applications from Pixels](https://xiaoyizhang.me/assets/Paper/CHI_2021_ScreenRecognition.pdf)
9. [How to make charts and graphs more accessible](https://blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible/?ref=sidebar#static)
10. [Designing for accessibility is not that hard](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)
11. [Designing For Accessibility And Inclusion](https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/)

## 十三、《微信长辈就医适老化设计规范》验收清单

设计师可根据该清单，验收产品设计是否符合适老化基础标准。

### 可感知性

- 使用无衬线字体
- 所有文本字号不小于 14pt。
- 正文（主要信息）字号不小于 20pt。
- 行间距不小于 1.3 倍。
- 段间距大于 1.3 倍。
- 对比度至少为 4.5:1（字号大于 18 pt 时文本及文本图像对比度至少为 3:1）。
  > 对比度检测可使用[WebAIM’s Color Contrast Checker*](https://webaim.org/resources/contrastchecker/)

### 可理解性

为图标提供释义文字。*详情请查看「操作指南·直观表达」*
超出极值的文字和组件保持完整显示。*详情请查看「操作指南·保持完整」*

### 可操作性

- 组件可点击焦点区域尺寸不小于 44×44pt。
- 主要流程的按钮在首屏可见。*详情请查看「操作指南·强化主要操作」*
- 没有连续、重复出现验证流程（短信验证、图片拖动验证等）。