全文5000字，含有大量的图片，请耐心等待刷新
一、关于无障碍设计
目前越来越多的企业在做无障碍设计的实践，例如之前阿里云设计中心的《设计普惠，从设立开始-阿里云控制台的无障碍设计实践》一篇中就详细介绍了什么是无障碍设计，并提供许多设计理念或方法指导；苹果的iOS系统就有自带非常棒的无障碍体验，专门为无障碍人群设计；Google的无障碍设计也是其中一直探索并实践的一个重要课题。除了这些，我们还可以看到其他一些关于无障碍设计的发展。
Figma和Sketch各自出了无障碍设计检测工具的插件，这两款插件提供了色彩对比检查器和色盲类型模拟器，供设计师快速的检验设计是否符合无障碍设计WCAG的标准。
如果产品没有进行无障碍设计，会给团队、开发带来不少的返工成本，同时给用户造成非常不好的用户体验，影响产品品牌形象。
二、什么是B端医疗？
随着疫情的发展，医疗健康行业也迎来了一个大的爆发点。很多大厂都纷纷扩展医疗版图。大多以C端为主打。
目前有很多的C端的医疗产品，大多以移动端为主。例如微医、平安好医生、京东健康、医鹿等等，主要面向的是患者个人挂号、就诊、买药、慢性病管理等业务，大致可以分为几类：1、B端医疗中的一个小模块，例如挂号、网上就诊2、电商的垂直领域：买药、医美3、健康管理：慢性病管理
而B端医疗面向的是医疗机构，涵盖PC端与移动端。如：综合医院、社区医院、卫生所等，涉及的用户可以分为医生、护士、医技、职工四大类；是打造医院医疗信息化建设，为医院提供医疗服务软件为主体，常见的系统有：HIS、CIS、EMR、CDSS等等。
三、为什么说无障碍设计对于B端医疗是必要的呢？
B端医疗具备业务复杂、信息多；电脑设备老旧、性能差；用户职业画像的三大行业特性。这三大特性决定了B端医疗无障碍设计的必要性。
为了更好的理解，我们从用户体验五要素的角度分为两个部分：战略功能层和体验层去阐述医疗行业业务复杂、信息多的特性。
相较C端产品，我们都知道B端产品的需求往往非常的复杂。
B端医疗产品的需求是把线下医、护、技、工的工作信息化，减少医院的人力成本，提升用户的工作效率。而本身线下医、护、技、工的工作就是由许多的复杂的、多场景的流程组成，且操作内容具有相互交叉性。例如最基本的医嘱流程：
我们可以看到医嘱流程是由不同的用户：医生、护士、医师的操作内容相互交叉而组成。
除了了以上的三个模块，HIS系统中的很多其他功能模块都可以拆分出来成为一个独立的系统，例如医生站、护士站。
如此复杂的业务，如果没有良好的无障碍设计去引导用户，往往会出现找不到功能入口，用户学习成本高等问题。
从结构层到表现层看，B端医疗有信息架构多层级，信息内容多的问题。我们可以看一下信息架构和常见的文书分别对应信息架构和信息内容。
我们可以看到这个他们是由多级导航组合而成，并且分成了多模块。并且每个模块的信息都非常多。
我们都知道“每个人在特定场景下，都有可能是“残障人士”，会引发相应的无障碍设计需求”。可以分为情境性残疾（situationaldisability）和临时性残疾（temporarydisability）。
据我们调研8家医院的电脑设备发现，医院的电脑由于采购的年限比较早，更换率较低，所以电脑设备有很大的一部分都存在老旧、性能差的情况，导致情境性残疾成为了用户工作时的一种常态。
我们从分辨率、显色能力、系统版本三个方面上分析无障碍设计痛点。
3.2.1分辨率问题
据AntDesign统计，使用中台系统的用户的主流分辨率主要为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医生
医生分为：专科医生、住院医生两个类别。根据分析归纳，我们总结了医生的三个特点：专业严谨、高频高聚焦、高负压。
3.3.2护士
护士分为：门诊护士和住院护士两个类别。护士的三个行业特点：高强度、多流程，高聚焦，高认知成本。
职业画像小结
从用户职业画像上来看，医生的认知成本较低，自主学习能力较高，主要的痛点是视觉疲劳、操作目的明确。而相较而言护士的认知成本较高，对改版的厌恶情绪较强烈，且对上网的认知较简单，需要更深一层的无障碍设计帮助护士更好的使用系统。
四、那我们要怎么做呢？
当我们知道B端医疗无障碍设计的必要性之后，我们要怎么做呢？我们也可以根据业务信息、工作设备、用户职业画像三个方面去一一拆解。
4.1业务复杂、信息多
布局：简易度与一致性
虽然所有用户都喜欢用起来简单、交互一致性高的产品，但是为用户提供简单一致的设计更为重要：
4.1.1简单明确
简单明确的视觉动线，让整个产品/网站的内容都是直观和易于理解的。
4.1.2一致性
AntDesign各个产品线都采用左右布局，做到布局的一致性。
4.2工作设备
4.2.1分辨率
我们为了系统更好的适配医院的各个显示器，把画板的设计尺寸定义为1280px。为了让用户的内容操作区域更大，左右布局的系统，导航设计为伸缩性导航，可展开收起，大大提高用户的可操作的区间。
4.2.2显色能力
根据W3C的色彩规范，我们制定了文本、表单的色彩规范，具体如下：
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帮助系统
一个好的帮助系统能够解决大部分用户的操作问题，对于工具类系统而言，帮助系统是必不可少的一项内容。
结语
通过研究无障碍设计，且应用于我们的系统中，虽然刚开始无障碍设计的时候，团队小伙伴纷纷表示这样设计色彩太重了，系统看上去很老，不符合流行趋势等等。但是当无障碍设计改版上线后，得到了用户的极度认可，让我再一次感受到设计是为用户设计的，不是为了设计而设计。当然目前的无障碍设计并不完善，需要通过我们不断的改进无障碍体验，让产品变得更好。