新闻动态

适老化视觉设计方法

设计师是团队中为数不多可以站在用户角度思考问题的产品角色。所以不应把适老化设计成一味的音量大、字号大、大设备。不考虑兼容性，可能会出现由于字号过于大，页面其他元素都“跑了”位置，验证码也错位了。不仅没降低难度，反而带来困扰。

1. 使用非衬线体

字体的选择上，规则是减少不必要的视觉干扰，保证易读性，更适合老年人。可字体分为衬线体和非衬线体如何选择呢？

衬线又被称为“字脚”，衬线体（Serif）就是指有边角装饰的字体。非衬线体（Sans-serif）则与衬线体相反，通常是机械和统一粗细的线条，没有边角的装饰。

所以常规的非衬线体可读性更强。从视觉角度上看非衬线体比衬线体更大、结构更清晰，所以建议长文阅读或小屏幕更偏好使用非衬线字体；衬线字体主要用来提升短句美感，更多用于标题或者小篇幅文本。

2. 最小字号16pt

Ant Design设计语言中有讲到确认最小字体的方法，通过肉眼到物体之间的距离、物体的高度以及人的最小可接受视角，构成一个三角函数关系。

对于普通用户，最小视角0.3度时的阅读效率最好，一般眼睛距离电脑屏幕为50cm，根据三角函数公式能算出合适的字高。对于不同PPI的屏幕可以通过两轮换算（cm到inch，inch到pixel）得出最小字号。（换算网站在文章末尾）

经过计算得出，字号最小采用16像素。一般产品设计大多使用Regular和Medium两种字重，对于老龄化产品，考虑易读性，可以通过在原本基础上再提升一个字重，加粗文本的方式使文字轮廓更加清晰。

3. 自由调节字号大小

上面计算出的16pt字号也仅仅适用于大部分人群，不排除16pt都未必可以满足他们的可能。在iOS系统设计显示与亮度中，可以修改文字粗细，调节文字大小。

微信里也有类似的功能。目的就一个，可以根据自身视力做对应的选择，提供优质的用户体验让各种用户都可以便捷使用产品。

4. 1.5-1.8倍的行间距

在移动应用中，应可对文字大小进行调整，段落内文字的行距至少为1.3倍，且段落间距至少比行距大1.3倍，同时兼顾移动应用适用场景和显示效果。通常标题行间距为1.3倍，文字行间距为1.5-1.8倍，视觉效果是最舒展，舒适的。

5. 强对比度颜色

用户通常会根据自己的生活习惯、大脑认知去判断事物本身。所以我们做设计时应尽量降低学习成本。可以借鉴真实存在的物品设计，保持和老年人现实生活认知是一致的。比如生活中常见的红绿灯，红色表示禁止，黄色表示警告，绿色表示通过。

增强颜色对比度：文本的视觉呈现以及文本图像至少有 4.5:1 的对比度。目前有很多测试颜色对比度的网站，可以帮你判断是否达到AA标准。（网站网址在文章末尾）

对比度（AA级）：文本的视觉呈现以及文本图像至少7:1的对比度；大号文本（字重为Bold时大于18px，字重为Regular时大于24px）以及大文本图像至少有4.5:1的对比度。对比度（AAA级）：文本的视觉呈现以及文本图像至少要有4.5:1的对比度；大号文本（字重为Bold时大于18px，字重为Regular时大于24px）以及大文本图像至少有3:1的对比度。

6. 图标设计

图标是APP必备的元素之一。通常最直接适老化方式是增加图标和按钮的尺寸大小，达到易操作性、易读性。

还有一点容易忽略，尽量采用拟物化、通用化的设计，图标表达尽可能具有老年人的生活时代特征，符合他们的认知习惯，图标越具象，老年人使用起来越方便。当然建议搭配文字描述，更便于清晰、快速理解。

四、适老化的交互体验设计

1. 操作手势以及定义

人机交互中有诸多操作手势，介于不同的使用目标、场景，交互手势设计也大相径庭。总结下来主要是以下几种交互方式：单击（Click）、双击（double click）、长按（long press）、拖拽（drag）。

这里存在个问题，就是手指贴合上屏幕的时候，手指与屏幕的贴合面，并不是正圆形，均匀向四周扩散的，而是向下的扩散更大一些的椭圆形。以触摸中心点为基准，触摸的过程中会有向下的一个偏移。

确保用户操作的流畅感，不会受到10px误差影响。就把这几种常用的交互方式做了重新定义：

单击：

触发规则：单机触摸屏幕，位移在10px后者规定热区以内的；注意事项：在触摸屏幕后需要立即响应，并且在完成响应之前，需要屏蔽其他操作；行为定义：触发主操作，选中/激活，跳转/弹出。长按：

出发规则：按下和松手间隔超过500ms，并且位移小于10px；注意事项：长按选择后需要阵容手机，松手后才展示菜单；行为定义：用户触发辅助功能，包括选择/复制/拖动选择等功能。双击：

触发规则：连续单击同一区域两次，再次单击间隔不超过500ms，再次单击距离不超过10px；注意事项：视场景，允许第一次单击时先响应单击行为，等第二次单击时再触发双击；行为定义：触发常用功能，通常是单击的递进操作，双击容器可直接放大容器。长按/拖拽：

触发规则：按下和松手间隔时间超过500ms进入长按拖拽状态，此时移动手指超过10px进入可拖拽状态；注意事项：由于拖动通常会与页面滑动冲突，因此多数场景需要长按拖动；行为定义：快捷拖动选择内容，或者直接移动页面组件。

2. 操作低难度、低精度

（1）可点击

根据费茨定律，任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。因此界面设计中需要放大目标以至于足够清晰，便于用户精准快速的触达。指尖的长度为8-10mm，所以10mm x 10mm就是一个最小触摸目标尺寸。

（2）怎么点

据研究，点击，上下滑动，左右滑动，放大缩小这几个操作是老年人接受度更高的。所以在设计交互时，尽可能使用老年用户熟悉的交互方式，减少复杂的交互方式。以往复杂的交互方式通常是最难被发现触达的。

（3）低难度

老年人身体运动机能下降，导致很难完成长距离、长时间、连续的精准的操作。所以在界面设计时候，尽可能设计在下半部分。保证手指移动最短距离。减少精准度非常高的手势操作。比如下图验证身份，左图需要旋转精准的某一个角度，右图仅需要从左到右滑动。

3. 有效反馈提示

老年用户对识别动态信息的捕捉即刻感知明显下降。因此，在界面设计中如果涉及到短暂垂岸的提示性信息。在原本停留的时长基础上延长一截。

比如提留时间小于3秒，那么就延长到3秒；提留时间小于3-5秒，那么就延长到5秒；提留时间5-7秒，那么就延长到7秒。如果不在这个范围内的时长，那么可以提供关闭机制。

4. 语音功能

（1）增大音量

老年人伴随的身体特征下降还有听力，通常做法是适当增大音频/视频的音量。研究表明，老年人听觉平均感知音量在67.5～75.3分贝之间。

（2）降低语速

保证老年人有效的接收到声音信息并进行理解，音频/视频的播放速度也需要适当放缓慢。提供慢速、正常、快速3档语速，让老年人自己选择适合自己的速度，更有效的获取声音信息。

（3）AI技术辅助输入

现实中，很多老年人文化程度不高，不会使用输入法，甚至拼音都不会，大多都选择了手写这种输入方式。但手写这种方式存在很严重的识别问题。再加上肢体运动能力的退化其实手写也并不算是真正的好体验，就是折中的方案。

可以借助AI技术，提供语音输入功能。 老年人可以方便的通过语音和图像搜索主动探索获取新知，答疑解惑，跟上时代进步。

（4）用选择代替输入

不仅是针对老年人群了，对于年轻人也是一样。选择类的交互方式远比输入类提升效率大很多。所以尽可能避免繁琐的打字过程。尽可能选用选择框代替输入。假如产品内的信息是通用的，可以在输入框提供默认选项。

5. 通俗易懂的文字

由于老年人触互联网网时间短、受教育程度不同，难以避免互联网术语理解力不强。设计时需要对专业术语都进行了口语化，采用通俗易理解的文案。

6. 给用户信任感

老年人由于触网时间短，对网络充满陌生感。需要对一些官方内容增加标签（或保障）来提升产品整体的可信度，增强对产品的信任感。

比如老年用户多少都伴随着身体健康问题，大概率会使用医疗产品，给医师、医院提供专业官方认证机制以及前端展示，让老年人用的踏踏实实。

7. 缩短操作链路

老年用户大多处于浅层触网状态，掌握的APP功能很少，在使用新产品时候，经常会出现“我在哪儿”“我在做什么”“接下来我要做什么”等困扰。有两个解决办法：

可以适当提供操作引导，告知用户所处的位置；减少非必要操作，避免非必要场景干扰。

适老化设计流程

大多数产品的基本设计流程分为以下几个阶段：产品定位与市场分析、草图绘制架构设计阶段、视觉设计（界面设计）阶段、界面输出可用性测试、产品上线以及优化方案。

适老化产品设计流程大体上基本一致，主要体现在设计方向以及设计细节的把控。接下来跟大家说一下设计师在每个阶段应该做哪些事？

1. 产品定位与市场分析

在这个阶段中，UI设计师主要的工作就是了解用户。深入老年用户的使用场景，从生理特征出发，观察老年群体特征比如听觉、视觉；过程中深入到心理特征，比如不安全感、担心等心理感受。总之，收集相关信息对后面适老化设计工作做铺垫。

2. 草图绘制架构设计阶段

结束了产品定位阶段，我们可以根据所获取的信息对UI进行构思。包括产品草图绘制、交互方式定义与选择、操作与跳转流程、产品结构，页面布局、开发设计成本。前面有提到适老化的交互设计细节，所以该环节是实现适老化的重点之一，集中在产品的交付方式、功能架构。

3. 视觉设计阶段

在这个阶段，需要设计师对草图进行高保真界面设计。也是实现适老化最重要的设计环节，把控整个产品的风格、色调、图标、字体、信息排布等多个对象的视觉表现。视觉往往是使用产品最直观的感受，老年用户也不例外。

4. 界面输出可用性测试

可用性测试是一种用于以用户为中心的交互设计的技术,通过对用户进行测试来评估产品。UI的可用性测试就是找具有代表性的用户对产品进行模拟操作，同时设计人员、开发人员共同观察、聆听、记录。在测试中对产品细节进行调整打磨。

接下来，需要与开发工程师对接。所以需要设计师配合开发人员完成相关界面，并将最终定稿做技术输出。也就是把界面做切图标注，设计规范、交互文档等一同给到开发人员。

5. 产品上线以及优化方案

这个阶段就是检验产品是否符合市场需求、老年人需求。最常见的做法就是数据埋点，通过跟踪产品使用的状况，后续进一步优化产品。

六、适老化开发适配

工作中通常有一个错误认知，适配是开发的事。你是不是也这么做，按照375*812的设计后剩下就交给开发做适配安卓端设计了？

这样不是不可以，只是很容易与开发反复沟通与调试，整体效率会很低。在正常开发应用的情况下，这么做问题不大。但适老化版本是为特殊群体开发的。为了让老年群体平等便捷的获取、使用信息。设计师需要主动做适配工作，那么具体怎么做呢？

1. 适配基础规则

界面元素跟随文字放大而放大：

同一容器内所有元素的相对间距始终保持固定：

元素、文本当宽度到达极值情况下，采取自动折行，对齐方式遵循原本的对齐方式：

文本信息尽量保持完整展示：

2. 字体样式适配

在适老化模式下，字体、图标、按钮比通常放大1.4倍（参考值）。元素间距始终保持固定不变。

通常情况下，文本、图像、图标等元素间的颜色对比度要达到4.5:1。字号大于18pt时，文字与元素的颜色对比度至少达到3:1。而在适老化设计，可以是在在基础上再次增加对比度，保证信息可读性、易读性。

3. 热区适配

热区，是界面中可交互的部分（俗称可点击的地方），交互后会引发一个事件，这个事件可以是链接跳转，也可以是提交或者弹出对话框。

热区太小会使用户感觉与元素进行交互时需要很精准的操作，而这一点与适老化相悖。所以适当的调节热区大小，便于老年用户触达。

通常会这么做：

小于44pt的元素（文字、图标、按钮、图片）周围增加12pt的反馈热区大于等于44pt的元素，并且有明显清晰的边界，可以不增加热区范围。当多个元素指向同一个操作结果，可以使用联合完整的热区。元素存在某个容器内，所以热区是不可以超出容器本身的。特殊情况下小尺寸的元素，可以考虑将热区超出容器，甚至可以覆盖其他元素，目的以保证最小40*40pt热区。

4. 基础组件适配

（1）导航栏

标准规范的导航栏不需要缩放；大于标准的导航栏缩放倍率：1.18，热区需要同步扩展。

（2）底部标签栏

tabbar根据功能数，在屏幕宽度下平均分均分，且图标与文案需要居中对齐；图标与文案根据缩放倍率进行缩放。

（3）顶部标签栏

标签栏文案与下划线根据缩放倍率，等比缩放；标签之间的间距保持固定。

（4）搜索栏

搜索栏适配规则为文字、图形元素等比放大，间距保持不变；搜索框外边距保持固定。

（5）功能模块

模块组件左右距离边缘固定间距，元素跟随系统缩放倍率；

元素跟随全局缩放倍率进行缩放；

元素缩放后，需要确保信息及元素展示完整。

七、设计验证

1. 什么是设计验证

设计验证的目的是验证产品设计是否满足用户的要求，证实设计输出满足输入要求。

“设计验证”是产品设计和开发阶段的输出，也是过程设计和开发阶段的输入，由设计部门负责输出。

（1）数据检验

检验设计是否达标，数据是最有效的办法。通过数据，可以验证设计是否达到预设的产品目标、业务诉求、商业目标。第二可以分析产品上线后所遗漏的地方，以便于未来产品迭代、新功能研究。

通过获取APP的UV用户数、新增用户、活跃用户、启动次数、使用市场、留存率、转化率、流失率这些基础数据可以分析APP的基础数据。甚至可以获取功能项的步骤完成时长，分析功能的成功率、完成率、出错率、满意度。从而得出你的适老化设计是否真的适老。

2. 灰度发布（A/B Test）

灰度测试是指产品（功能）在小范围内的测试工作，然后在慢慢放量，直到这个全新的产品（功能）覆盖到所有系统用户。灰度发布包括了 A/B Test。

和灰度发布不同的是，A/B Test 一般针对两种不一样的设计方案，均分给两个群体的人使用。如针对 A、B 两种设计方案，50% 的用户体验到 A 方案，另外 50% 的用户体验到 B 方案。