全文5000字，含有大量的图片，请耐心等待刷新

一、关于无障碍设计

目前越来越多的企业在做无障碍设计的实践，例如之前阿里云设计中心的《设计普惠，从设立开始-阿里云控制台的无障碍设计实践》一篇中就详细介绍了什么是无障碍设计，并提供许多设计理念或方法指导；苹果的iOS系统就有自带非常棒的无障碍体验，专门为无障碍人群设计；Google 的无障碍设计也是其中一直探索并实践的一个重要课题。除了这些，我们还可以看到其他一些关于无障碍设计的发展。

1.1设计效率的提升

Figma和Sketch各自出了无障碍设计检测工具的插件，这两款插件提供了色彩对比检查器和色盲类型模拟器，供设计师快速的检验设计是否符合无障碍设计WCAG的标准。

1.2 国家也在推动互联网的无障碍设计改造

工信部近日印发通知，自2021年1月起，在全国范围内组织开展为期一年的互联网应用适老化及无障碍改造专项行动。此次行动，将开展互联网网站与 APP 适老化及无障碍改造。首批优先推动国家相关部委及省级人民政府、残疾人组织、新闻媒体、交通出行、金融服务、社交通讯、生活购物、搜索引擎等8大类、共115家网站进行改造；首批优先推动新闻资讯、社交通讯、生活购物、金融服务、旅游出行、医疗健康等6大类、共43个APP进行适老化及无障碍改造。

可以看到其中的一个大类即为医疗健康。作为与每个人息息相关的医疗健康，覆盖的人群年龄跨度极大，特别是在我国进入人口老龄化的当前，无障碍设计对医疗健康而言极为重要。

如果产品没有进行无障碍设计，会给团队、开发带来不少的返工成本，同时给用户造成非常不好的用户体验，影响产品品牌形象。

二、什么是B端医疗？

随着疫情的发展，医疗健康行业也迎来了一个大的爆发点。很多大厂都纷纷扩展医疗版图。大多以C端为主打。

目前有很多的C端的医疗产品，大多以移动端为主。例如微医、平安好医生、京东健康、医鹿等等，主要面向的是患者个人挂号、就诊、买药、慢性病管理等业务，大致可以分为几类：1、B端医疗中的一个小模块，例如挂号、网上就诊    2、电商的垂直领域：买药、医美    3、健康管理：慢性病管理

而B端医疗面向的是医疗机构，涵盖PC端与移动端。如：综合医院、社区医院、卫生所等，涉及的用户可以分为医生、护士、医技、职工四大类；是打造医院医疗信息化建设，为医院提供医疗服务软件为主体，常见的系统有：HIS、CIS、EMR、CDSS等等。

三、为什么说无障碍设计对于B端医疗是必要的呢？

B端医疗具备业务复杂、信息多；电脑设备老旧、性能差；用户职业画像的三大行业特性。这三大特性决定了B端医疗无障碍设计的必要性。

3.1 业务复杂、信息多

为了更好的理解，我们从用户体验五要素的角度分为两个部分：战略功能层和体验层去阐述医疗行业业务复杂、信息多的特性。

3.1.1 战略功能层：业务复杂

相较C端产品，我们都知道B端产品的需求往往非常的复杂。

B端医疗产品的需求是把线下医、护、技、工的工作信息化，减少医院的人力成本，提升用户的工作效率。而本身线下医、护、技、工的工作就是由许多的复杂的、多场景的流程组成，且操作内容具有相互交叉性。例如最基本的医嘱流程：

我们可以看到医嘱流程是由不同的用户：医生、护士、医师的操作内容相互交叉而组成。

B端医疗中这类流程非常多，我们可以再来看一下“阿里云的医疗健康解决方案-云HIS系统业务架构”图。从图中可以看到C端医疗：挂号、买药、慢性病管理只是B端的一小部分功能的延伸；医嘱也与医生站、护士站、门诊发药等相关联。

除了了以上的三个模块，HIS系统中的很多其他功能模块都可以拆分出来成为一个独立的系统，例如医生站、护士站。

如此复杂的业务，如果没有良好的无障碍设计去引导用户，往往会出现找不到功能入口，用户学习成本高等问题。

3.2、体验层：信息多

从结构层到表现层看，B端医疗有信息架构多层级，信息内容多的问题。我们可以看一下信息架构和常见的文书分别对应信息架构和信息内容。

信息架构

我们可以看到这个他们是由多级导航组合而成，并且分成了多模块。并且每个模块的信息都非常多。

3.2 工作设备

我们都知道“每个人在特定场景下，都有可能是 “残障人士”，会引发相应的无障碍设计需求”。可以分为情境性残疾（situational disability）和临时性残疾（temporary disability）。

据我们调研8家医院的电脑设备发现，医院的电脑由于采购的年限比较早，更换率较低，所以电脑设备有很大的一部分都存在老旧、性能差的情况，导致情境性残疾成为了用户工作时的一种常态。

我们从分辨率、显色能力、系统版本三个方面上分析无障碍设计痛点。

3.2.1 分辨率问题

据Ant Design统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统才存在 1280 的显示设备。蚂蚁中台设计团队统一的画板尺寸为 1440px。

但根据我们对医院设备调研的结果显示，医院的主流分辨率为1366、1280、1024，其中1280、1024分辨率的占比又占比较大的部分；拥有1440分辨率以上的医院只有1家。

因此，我们为了系统更好的适配医院的各个显示器，把画板的设计尺寸定义为中间值1280。其次1280*720的分辨率乘以1.5倍正好是1920*1080大屏的尺寸，当系统中的一些业务需要与大屏联动的时候，开发也更好适配。

高分辨率是保证显示器清晰度的重要前提，小的分辨率加上小的电脑尺寸，直接影响了内容的清晰度与信息承载量。

变小的内容空间，直接给设计师带来了最佳屏效率的难度大幅度增加的问题。加上业务复杂，信息多的特性，设计师设计往往很苦恼信息没地方放，需要通过折叠、层级变深、二次触发等等设计手段去解决问题。这就导致用户在工作时找不到功能入口、信息隐藏太深，查找不方便，需要多次培训，工作效率降低等不友好的体验。

3.2.2 显色能力

医院的显示器显色能力是一个极大的问题。当我们着手无障碍设计的时候，有28%的问题都指向了显示器的显色问题，如：屏幕一片白，字体灰灰的看不见等等问题。

这些问题在我们用mac设计时，mac的高清显示器让我们看不到这些问题。因此，我们为了了解并解决这个问题，我们找来了几台与医院相应的显示器来测试。结果如下：

我们可以发现，在mac上能显示的分割线条和背景底色，在医院显示器上基本上变成了一片白色，同时显示器蓝色的显色能力较差，如果使用深蓝色的色系，在这类显示器上肉眼看上去易像黑色。

3.2.3 系统版本

除了分辨率和显示能力的问题，医院的工作设备同时还存在系统版本、浏览器版本低的问题，个别医院的系统还存在xp系统的情况。这里会造成两个问题：

1、开发时如果全部使用黑体、微软雅黑类的字体，因为这类字体并不是点阵字体，所以医院的设备里面，14px以下的字号就会出现字体边缘模糊的情况。

2、如果浏览器的版本较低，一些hover投影的效果会出现兼容的问题，导致鼠标hover上去没有效果，操作指向性不明显。

各个浏览器版本兼容一览

3.3 用户职业画像

前面讲到医院工作人员分为医、护、技、工四大部分，其中还根据工作岗位的不同，职位还有细分。

为了给用户提供提供更好的用户体验，我们通过持续进行的用户访谈、观察用户实操等分别建立了医疗行业的代表群体：医生与护士的职业画像。通过用户职业画像的建立，我们可以针对不同的用户更好的呈现无障碍设计。

3.3.1医生

医生分为：专科医生、住院医生两个类别。根据分析归纳，我们总结了医生的三个特点：专业严谨、高频高聚焦、高负压。

• 专业严谨：医生的工作具有的专业的，不可替代的性质。系统里面含有大量的医疗专业词语，有很多专业术语的简称/简拼。同时工作需要严谨细致，工作流程需要规范化、尽可能的避免出现医疗事故。

• 高频高聚焦：医生是在多元化场景下工作的。通过听、看、问、答等等多元场景聚焦到系统里进行具体操作。
• 高负压：1vN的重复性医患沟通，忙时连喝水的时间都缺乏。由于医疗资源匮乏，导致医患关系紧张，同时专科医生长时间盯着电脑，视觉容易疲劳。医生为了升职评级，工作外会用大量的时间去学习医疗知识，自学能力强。

3.3.2 护士

护士分为：门诊护士和住院护士两个类别。护士的三个行业特点：高强度、多流程，高聚焦，高认知成本。

• 高强度、多流程：1vN，存在大量的沟通工作，且多是多个点、多条线的流程工作，流程需要规范化。医患关系紧张，护士工作压力大。
• 高聚焦：护士是在多点、多线的场景下工作的。每天会在固定时间集中进行患者评估后，集中电脑上录入信息；也会快速定位某个患者进行单患者管理。同时根据一些紧急事件的推送进行紧急处理。
• 高认知成本：护士对于新系统/新版本的学习，平均比医生需要培训更多的次数，且对上网的认知较简单，一些复杂的、创新的操作理解、学习较慢。对于改版的厌恶情绪较大。

职业画像小结

从用户职业画像上来看，医生的认知成本较低，自主学习能力较高，主要的痛点是视觉疲劳、操作目的明确。而相较而言护士的认知成本较高，对改版的厌恶情绪较强烈，且对上网的认知较简单，需要更深一层的无障碍设计帮助护士更好的使用系统。

四、那我们要怎么做呢？

当我们知道B端医疗无障碍设计的必要性之后，我们要怎么做呢？我们也可以根据业务信息、工作设备、用户职业画像三个方面去一一拆解。

4.1 业务复杂、信息多

布局：简易度与一致性

虽然所有用户都喜欢用起来简单、交互一致性高的产品，但是为用户提供简单一致的设计更为重要：

• 对视障用户来讲，简单一致的界面让他们更容易记住UI布局，使用产品的时候更快、更不容易出错。
• 对认知障碍用户来讲，简单一致的界面更容易理解和上手。

4.1.1简单明确

简单明确的视觉动线，让整个产品/网站的内容都是直观和易于理解的。

4.1.2一致性

Ant Design各个产品线都采用左右布局，做到布局的一致性。

4.2 工作设备

4.2.1 分辨率

我们为了系统更好的适配医院的各个显示器，把画板的设计尺寸定义为1280px。为了让用户的内容操作区域更大，左右布局的系统，导航设计为伸缩性导航，可展开收起，大大提高用户的可操作的区间。

4.2.2 显色能力

根据W3C的色彩规范，我们制定了文本、表单的色彩规范，具体如下：

具体的色彩对比数值，可以使用https://contrast-ratio.com/，方便地检测对比度是否达标

4.2.3、系统、浏览器版本

4.2.3.1默认字体

为了解决低版本系统的时候字体显示不清楚，把低版本系统的默认字体改为点阵字体：宋体。其他一般系统则选用黑体或微软雅黑。

4.2.3.2行间距

考虑到用户的视觉障碍、视觉疲劳等因素，设定系统最小文本字号为14px；同时把行间距从常规web的行间距为1.2、1.4变为为1.4、1.5、1.6倍数，适当的拉开行间距，便于阅读。

4.2.3.3投影兼容

如果设计中涉及投影效果，需在ie低版本的情况下，需考虑没有投影的样式，例如：

描边+放大只是其中一种方式，还可以通过位移、信息变化等方式呈现

4.3 用户职业画像

根据用户职业画像的特点，我们从通识性、直观性、辅助性三个方面来讲述。

4.3.1 通识性

4.3.1.1图标通识性

在设计图标的时候，需要从用户心智的角度去考虑怎么使用图标。特别是在表格中，一些复杂的图标，不具备通识性，用户往往不能理解，学习成本增高。这时候就不可使用图标，直接使用文字更好。

4.3.1.2文案通俗性-用户语言

一个系统含有许许多多的文案，文案的重要性不言而喻。往往一句让用于难以理解的文案，会让用户产生系统难用的结论。所以我们在设计系统时，遇到一些专业性强的文案，需要把它转化为通俗易懂的用户语言。

4.3.2 简单直观性

4.3.2.1减少操作

考虑到用户群体的高认知、年龄、高负压、高聚焦等因素，在数据输入的操作中，应该尽量减少手动输入，能提供选择项的内容都尽可能使用选择控件。

4.3.2.2明确有效性

对于一些提示的文案，需要做到明确有效性，避免无效文案。

4.3.2.3鼠标光标引导

对于不同属性的操作方式，要给予不同的鼠标光标反馈，直观性展示可操作性。例如语雀：拖拽、选择、调整大小的是分别对应两种不同的鼠标光标。

语雀四种鼠标光标

以下是几种常见的鼠标光标类型：

4.3.2.4提示性

对于一些非文本内容，如导航图标，不具备通识性的时候，需要即时给予文字反馈信息，直观表达信息含义。如语雀：导航hover即时反馈导航信息。

4.3.3辅助性

4.3.3.1自动提示

比如搜索框输入时的自动提示结果，让所有人操作都更块。或者预测用户接下来想做的事情、提供捷径，避免用户在复杂的界面里寻找下一步操作

4.3.3.2帮助系统

一个好的帮助系统能够解决大部分用户的操作问题，对于工具类系统而言，帮助系统是必不可少的一项内容。

结语

通过研究无障碍设计，且应用于我们的系统中，虽然刚开始无障碍设计的时候，团队小伙伴纷纷表示这样设计色彩太重了，系统看上去很老，不符合流行趋势等等。但是当无障碍设计改版上线后，得到了用户的极度认可，让我再一次感受到设计是为用户设计的，不是为了设计而设计。当然目前的无障碍设计并不完善，需要通过我们不断的改进无障碍体验，让产品变得更好。

参考出处：

• W3C Introduction to WebAccessibility
• Apple Human InterfaceGuidelines无障碍板块
• Material Design无障碍板块
• We are colorblind
• Designing For, and As, aColor-Blind Person
• Color Universal Design (CUD)
• Designing maps for thecolor-vision impaired
• Color Contrast And Why YouShould Rethink It
• 黄淑敏. (2006). 残疾人就业中存在的问题与对策. 发展, (12), 50-51.
• 谷歌无障碍设计负责人夏冰莹知乎专栏
• 中国信息无障碍研究会官方网站

Powered by Froala Editor