三孩生育政策的出台，反映出我国人口老龄化加剧，老年人已成为互联网产品的使用主力之一。为了让老年人无障碍的使用产品，支付宝等产品推出了「长辈模式」，打造更适合他们的产品体验。

支付宝的「长辈模式」满足“无障碍设计”需求，本期【蓝湖有方】将为大家总结无障碍的 UI 视觉设计指南，通过学习这份指南，让每一位用户都能得到最适合自己的产品使用体验。

无障碍 UI 设计指南

背景

在世界范围内，约有 15% 左右的人身体机能有不同程度的缺陷，其中包括视力、听力、行动和认知障碍。互联网产品给残障及老年人士打造无障碍的 UI 视觉，必不可少。人最常见的机能缺陷包含以下四种类型：

视觉障碍

听觉障碍

行动障碍

认知障碍

为了应对以上四种常见的机能缺陷，帮助我们的用户更好、更轻松的使用产品，产品的视觉需要遵循以下几点要求：

更易被感知

更易被使用

更易被理解

遵循以上几点要求的无障碍设计产品，不仅能给残障和老年人士带来更佳体验的同时，还能帮助普通人更好的使用产品。比如：在夜间人的视力下降，此时，无障碍设计能帮助人在昏暗的环境更容易的识别文字和按钮。

指南

1.更易识别的色彩

色彩是设计的重要组成元素，可以帮助用户区分信息的类别，以及传达情绪，要做到容易被用户感知和识别。每个人的视觉灵敏度不同，产品的 UI 视觉配色要做到让每一个人都感到舒适，需要做到选色因人制宜。

一些特殊群体对颜色的感知状态与普通人有区别，在为他们打造使用无障碍的产品，UI 设计的配色要选择易于被特殊群体识别的色彩。

随着年龄的增长，老年人的视力下降，晶状体变得浑浊，对蓝色的识别能力变差。因此，如果老年人是你负责产品的主要用户群，要尽量避免在 UI 设计中的重要按钮上使用蓝色。

对于红绿色盲患者而言，红色看起来不显眼，因此在为红绿色盲患者打造互联网产品的 UI 界面时，要谨慎使用红色，例如：警告按钮，可取用黄色，更易被色盲患者识别。

还需注意的是，突出重点信息时，不能仅靠颜色来区分，可以增加文字或者符号来补充说明。比如：密码输入错误的时候，密码输入框显示为红色，红绿色盲难以发现，此时在密码输入框后添加一个表达“错误”的 Icon，即可解决此问题。

2.更易阅读的字体

文字是人阅读的重要工具，人们在使用互联网产品的重要元素，在设计时要保证易读性，才能让用户的体验更好。

选择易于阅读的字体

市面上有各种各样的字体，但只有少部分适合互联网产品使用。在互联网行业，无衬线字体因为其轮廓清晰、易于阅读的特征，被广泛应用。比如苹方简体、思源黑体、微软雅黑等字体。

文字和背景的配色保持高对比度

选对字体是成功的第一步，选对颜色才能走向成功。如果文字的颜色和背景的颜色对比度低，不仅有视觉障碍的用户难以识别文字，在昏暗的环境下普通人也会受到影响。因此，UI 界面的文字和背景的配色要保持高对比度，便于用户识别。研究表明：

文字颜色和背景色的对比度不小于 4.5:1，才能更好的满足无障碍设计需求。

如果文字的字号大，文字颜色和背景色的对比度不小于 3:1，才能更好的满足无障碍设计需求。

最后，尽量避免将文字放置在图片背景下，图片中信息多，干扰元素多，会影响用户阅读。

3.更简单的设计

设计师想象力丰富，常常会将创作欲展现在设计中，UI 设计的文字和颜色需要遵守严格的标准，因此很多设计师朋友会将心思花在 Icon 和动效设计上，但有时一不小心用力过猛，花了巧妙心思的设计反而给用户使用产品带来了干扰。打造无障碍 UI 视觉设计，很多时候简单比复杂更好，当然，简单≠无思考，简单更需要下功夫，才能更好的表达产品的用心。

Icon 图标的设计

图标的功能是，用最简单的符号帮助用户更好的识别产品。因此，产品使用的图标最好是简单、普遍、具有高辨识度，才能让每一个用户在看到它时，就清楚的知道图标所携带的功能是什么。

但是，虽然一些普遍性的图片，大众一看便知其含义，但对于入网较晚的老年人来说，他们却不一定清楚的了解其中的含义。在这种情况下，解决办法是：

在简单的图标旁辅以文字说明图标含义；

文字替换图标，传达功能的含义。

以上两种方法都能帮助用户更好的识别产品的功能，是否需要采取以上措施，设计前的调研非常重要且必不可少。除此之外，要确保可点击的图标足够大（对角线长度至少11mm），并且与其他元素之间距离要足够大（至少2mm）。

动效的设计

UI 界面在合适的动效加成下，会更加的生动。但任何事都有两面性，动效好用但不能滥用，不合理的动效不仅不能让产品变得更高级，反而会严重影响用户对产品的使用体验。因此，无障碍 UI 界面中的动效设计要满足以下两个要求：

动效的闪烁频次不能过高，且发光区域小于页面的 25%；

减少过分夸张的运动效果，用户在使用产品时可能会因此分散注意力；

相信看完这篇无障碍设计指南，你肯定对 UI 设计和用户体验有了更深刻的理解。要做好设计，就要了解你的每一个用户，为其创造最适合他的“无障碍”的产品体验。

你还想了解哪方面的设计知识，欢迎在评论区留言，我们下期【蓝湖有方】再见

Powered by Froala Editor