背景介绍

20年11月24日，国务院办公厅印发《关于切实解决老年人运用智能技术困难的实施方案》(国办电政函 [2020] 45号)，旨在解决老年人在日常生活中因面临“数字鸿沟”，而无法充分享受智能化服务带来便利的问题。第46次《中国互联网络发展状况统计报告》指出，截止2020年6月，我们网民规模为9.40亿，其中50岁以上网民群体占比为22.8%，2.14亿。 老年人群体占比与日俱增，在产品中需体现出对老人的用户体验关怀。

适用范围

本规范中所列条目，适用于适老版服务(如适老版界面、单独的适老版APP)。

老年用户特征

1.生理特征

视听能力:

老年人的感官能力明显下降。视觉的灵敏度、明暗都需要增大2倍以上的对比;对蓝色的鉴别能力比对红、绿色鉴别能力下降更明显;空间、和信息加工能力下降;听觉的灵敏度可能会减少50%之
多,低音听不见，高音不爱听，交谈时喜慢怕快，喜欢安静怕嘈杂。

运动控制:

老年人对身体的控制明显退化。关节灵活度下降，感受器和外感神经的反应能力和传递信息的能力下降、手部肌肉能力下降，影响了包括控制精细动作的肌肉力量、动作的灵活性及动作的准确性。

2.认知特征

老人面临认知老化问题。注意力维持时间受到影响、接收信息能力下降、记忆能力减弱。记忆力的减退还会使老年人某些逻辑推理变差,造成感觉的分析变慢、执行运动反映时间也较长，会导致老年
人执行日常生活活动能力丧失，更影响生活独立性。

3.情感特征

●决策心理:
老年人有着同年轻人不一样的决策模式。经验主义的心智模型使老年人更看重先前的知识，且更重视专家的意见。
●情绪特征:

老年人容易情绪逐渐低落。随着年龄的增加，对社会参与积极性的降低，记忆力思维能力的衰退，老年人对情绪的控制能力较弱，容易产生挫败感。

设计原则

【包容性】

1. 颜色

●避免使用蓝色、紫色等冷色调。随着年龄增长， 人类的晶状体会变黄变浑浊，导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果，从而降低元素在界面中的对比度。
● 颜色不应该用作传达信息、指示操作或区分元素的唯一 视觉手段，需要用额外的文字提示。

2.对比

●文本/文本图像 呈现方式、图标等元素间的对比度至少为4.5: 1 (字号大于18 dp/pt时文本及文本图像对比度至少为3: 1)。

3.字体

●使用字体时， 最小采用18pt/dp， 需要对主要信息进行加粗处理，并支持老年用户可自由调节字体大小(随系统设置调整，或移动应用内部具备字体大小设置选项)， 建议使用无衬线字体。
●主要功能及主要 界面的文字信息(不包含字幕、文本图像以及与移动应用功能效果相关的文本)最大字体不小于30 dp/pt,适老版界面及单独的适老版APP中的主要文字信息不小于18 dp/pt,同时兼
顾移动应用适用场景和显示效果。

4.图形

●需注意增加图标和按钮的尺寸 大小。
●应尽量采用拟物化、通用化的设计，图标语义尽可能具有老年人的生活时代特征，符合他们的知识经验。
● 建议搭配文字描述，方便老年用户更清晰、快速理解。

5.焦点

适老版界面中的主要组件可点击焦点区域尺寸不小于60 x 60dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于44 x 44dp/pt;
单独的适老版APP中首页主要组件可点击焦点区域尺寸不小于48x48dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于44x44dp/pt.

6.语音

引入更多维度的信息通道，听觉通道是仅次于视觉的最常使用的感觉通道，在设计时可考虑加入语音阅读和阅读控制器来帮助老年人更方便的接受信息。

7.手势

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

8.验证码

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

9.兼容性

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

【掌控感】

1. 信息架构
   

扁平化:

一、是视觉层级的扁平化，弱化视觉效果，突出功能主义，以要表达的内容或引导的操作为核心，尽可能减少干扰信息;

二、是信息层次的扁平化，建议页面层级最多不要超过2级，缩短用户与目标信息之间的触达路径。

一致性:

固定的UI导航系统可以使老年用户依靠肌肉记忆使用产品，效率更高。

连贯性:

页面跳转前后需有继承关系，通过文字、颜色等视觉元素加强关联。

2.信息传达

需要有更清晰且符合老年人认知的表意信息，避免信息含有歧义，所有描述、状态、操作尽量唯- - 且易于理解。
在规范中要求具备搜索功能的APP要将“长辈版”作为搜索关键词，APP版本名称要按照规范的要求，名称为“亲情版”、“关爱版”、 “关怀版”，尽量不要用其他名称。

3.操作反馈

●充足操作时间: 在移动应用中，如果限时不是活动的必要部分或关键要素，且不会导致用户发生法律承诺或财务交易，则应为用户的操作留下充足时间，在用户操作完毕前界面不发生变化。
●浮窗:若内容产生新窗口(包含但不限于弹窗)，应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部，且最小点击响应区域不能小于44x44dp/pt.

【安全性】

1.广告插件及诱导类按键限制

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

2.保障老年用户个人信息安全

移动应用程序进行个人信息处理时应遵循最小必要原则，即处理个人信息应当有明确、合理的目的，并应当限于实现处理目的的最小范围，不得进行与处理目的无关的个人信息处理，以保障老年用户个人信息安全。具体收集信息(如位置信息、图片信息等)行为，应符合《常见类型移动互联网应用程序必要个人信息范围规定》《APP收集使用个人信息最小必要 评估规范》要求。

基于老年人的生理特征、认知特征及情感特征，提出以下体验设计原则:

间距与布局

间距 Space

同一物理尺寸(肉眼所见尺寸)下，低密度显示器的像素个数明显小于高密度显示器的像素个数，所以像素(PX)在 多变的设备和分辨率下不是一个稳定可用的单位, DP可以自适应屏幕的密度,不管屏幕密度怎么变化，实际显示的物理尺寸相同, DP可以保证物理尺寸的一致性，故选择DP作为单位

●一般以375*667的iPhone为统一的移动端设计画布;   一个s=4, s4代表间距4*4=16;

页面布局需遵循以4为最小单位原则，元素之间间距、元素高度为4的倍数;

●设计和开发过程中，任一元素(模块)与模块之间的距离。常规计算原则以4的倍数核算;同时适用于横向、纵向布局，(间距编号 可方便开发同学的配置端统一设置调用)

转交弧度

老年人喜欢温暖，有弧度的卡片更让人有亲近感。适老规范中，卡片弧度的选择上可以选择4、8、10、 12的圆角。

一般以375*667的iPhone为统- 的移动端设计画
一个R=2, R4代表间距2*4=8;

常用布局

老人的视觉和触觉的感知能力降低,在界面设计中需要放大触摸目标使目标项足够清晰，能够提高老人点击的准确率和速度;同时模块与模块之间的距离也要足够大。

• 横排卡片不超过3个，间距16dp;

• 上下模块间距24dp
  
  

颜色

整体说明

色彩代表品牌对外形象及V1识别，品牌色的数量根据品牌特性制定，可以1个也可以多个， 用于主Button. 主搜、价格、ICON等需要突出品牌特征的地方在业务中经常使用的颜色。对其进行编号,垂直、水平可拓展。
可以分为系统级色彩体系和产品级色彩体系。本页定义的是系统级色彩，产品色彩在业务场景中可根据实际需求进行调整。

[规则]

1、基本常规用色包括:主题色、中立色、文字色、遮罩颜色、功能色;
2、每个产品端至少有-个主题色，也可以设置多个辅助主题色;

[老年人视觉特点]

1、 偏爱暖色调,想要引起老年人注意的信息使用暖色调;
2、据研究表明老年人会把浅色看成深色，对蓝色的鉴别能力比对红、绿色鉴别能力下降更明显，界面上的重要元素要避免使用蓝色。
3、到60岁后很容易会出现混淆黄色和绿色、蓝色和绿色、橙色和黄色的问题，所以在设计中避免这三组混搭的颜色。
4、老年人不喜欢复杂的界面，背景色最好选择单一-的色彩。

主题色  Neutral

功能色  Functional

文字  Text

字体

遵循采用各自平台的官方字体库

字号

行高

舒适的行高确保页面文字层次明确、视觉统- -,使用统- -行高， 方便设计和开发协同，行高-般为字号的1.4倍, 小数点四舍五入取整。若有特殊需要，可重新设定行高。

字重

对于老龄化产品可以提高字重,加粗文字使轮廓更加清晰。- 般情况下我们不使用细体，多使用medium/Bold字重。字重是前端设置字体粗细的另一个说法， 以下字重参考。

图标

整体说明

图标分为业务图标与系统通用图标，以下初步定义的是业务图标大小和绘制规范建议

绘制栅格规范

固定产出44*44dp为基础，下方图为便于查看 放大3倍

颜色

有些图标语义相近，通过绘制形状不能有效区分时，色彩可以很好得辅助进行进一一步细分。 在实际操作.上色时，需要注意图标所对应事项的具体属性以及其内容配置页的色彩属性。

基础色彩=底色+渐变色

按钮

整体说明

1、定义:按钮是对用户的点击做出反应，并触发即时操作，每个按钮都有一一个相对应的操作或流程。

2、一个页面中只能有-一个主要按钮，用于引导用户的操作行为;

3、有大小2个尺寸，高度分别为48dp、36dp， 宽度根据文字横向拉伸;

按钮尺寸

    大按钮

大按钮:高度48dp，最小宽度S20 (80dp) 圆角24dp

    小按钮

中按钮:高度36dp，最小宽度S15 (60dp) 圆角4dp

规则:纵向有大中小三种尺寸，横向可根据文字横向拉伸;

图标分类&样式

● 按钮交互状态分为三类: Normal (默认)、Touch (按下)、Disabled (禁用)

●标准按钮: 标准按钮分为主要和次要，-一个模块中(如浮层、表格、表单、页面等)只能有一个主要按钮,主引

导用户的操作;其他的按钮皆为次要操作。

按钮布局

Button.与Button之间(包括文字Button和图标Button)水平最小间距: 8dp (Button距离 屏幕边缘16dp)考虑到iPhone X及以上机型的底部结构，建议底部按钮都衬白色底色

• 行排列时，按重要程度高→低，依次从右- >左排列

  
  

按钮适配