不要仅为85%的用户设计：关注无障碍设计
点击关注 异步图书，置顶公众号
每天与你分享 IT好书 技术干货 职场知识
作为设计师，我们更倾向于设计是以解决问题为基础的。尽管我们会因为博物馆没有规划轮椅坡道而毫不犹豫地抗议，但是对界面上的一些明显缺陷却视而不见，尤其是糟糕的视觉设计，可能会成为良好用户体验的障碍。尽管一些人长期以来一直致力于帮助残疾人用户适应这种情况，但我们已经达成共识，广大用户期待针对用户需求进行优化的产品。
世界卫生组织（WHO）统计，全球人口中视力受损的为4%，弱视为4％，盲人为0.6％。 如果你的产品忽视了无障碍设计，将有超过5亿人无法使用你的产品。 2017年，无障碍环境迎来了关键的转折点。这部分归功于诉讼-自2015年以来，已有超过240家美国企业因为网站的可访问性被起诉（华尔街日报，付费专区），多元化和包容性已成为许多大公司优先考虑的事情。如果公司希望产品为广泛的受众提供服务，那么作为一名设计师，你应该关心你的用户，在设计中有同理心和人性化。
可视化界面是深入无障碍设计的一个切入点。 本文中，我们将讨论一些最常见的视觉障碍（尤其是色盲），着重讨论如何微调工作流程和产品界面，以保证所有用户都能正常使用。
1. 无障碍设计影响所有用户
一个无障碍的产品不仅仅造福于8.6％的有视觉障碍的用户。许多网站和应用程序过于复杂，每个人都会或多或少地遇到一些界面问题：当我们疲惫的时候；当我们笨拙地尝试边走路边阅读手机信息的时候；当我们晚上眯着眼睛看屏幕的时候；当我们一手拿着购物篮，一手拿着手机的时候。
即使是具有标准视力的大部分人对色彩也有不同的感知方式，所以，无障碍性不仅仅关乎视力受损的人群。 每个人都有身体和精神上的局限，我们只需在工作中想得更周到一些就可以有效地帮助他们。然而无障碍设计有时意味着在最佳实践和无障碍性之间寻求平衡，创造一个两者兼顾的产品。
2. 视觉障碍如何影响体验
为了创造一个无障碍的产品，我们首先需要了解视力受损的人如何看事物。
根据世界卫生组织（WHO）统计，屈光不正（近视、远视、散光和老视）占视力受损总人数的43％，白内障占33％，青光眼占2％，仅色盲一项就占全球总人数的4.5％，严重影响了用户对设计的体验。
让我们来看看这些问题是如何体现的，如图1所示。
图1 对某些色盲用户而言，红绿色的用户界面信息传达不佳
主要的色盲类型有以下3种。
（1）单色视觉（全色盲）
虽然并不常见，但是全色盲的人看不到任何颜色。例如，那些只依靠细微颜色渐变来区分元素的界面的人，对于他们来说是非常难以识别的，操作按钮可能都很难找到。
（2）双色视觉（双色视觉）
对于只能看见两种颜色的人来说，色彩缤纷的调色板看上去是由同一种颜色的不同色调组成的。 如果APP通过颜色来表示不同的标签或频道，那么，这类用户不一定能够从该设计中受益。
（3）异常三色视觉（色觉异常）
色觉异常的人，是指眼睛里3种视锥细胞中的一种出现了不同程度的损伤。色觉异常涵盖的范围很广，轻者可能色觉接近正常，严重的话也可能是双色视觉。在你的logo或界面设计中，如果颜色是主要因素，那么有异常三色视觉的用户可能会欣赏不了，尤其是当你的按钮和其他界面元素用了相同的字体和图标时，用户体验会更差。
问题的关键是你不能假设用户都会看到同样的事物。 那么，我们如何优化设计来满足每个人的体验呢？
3. 颜色只是个工具，并非万能钥匙
颜色不仅在很大程度上决定了界面外观，而且在组织内容、定义层次结构、传达界面行为和流程中也起到了重要作用。 这是一个强大的设计工具，但为了有效地使用它，你需要了解其功能和限制。下面我们来讨论一些关键的规则。
• 在选择和使用颜色时，应考虑色盲用户，我们在后面的内容中会展示。
• 避免仅用颜色来传达重要信息——使用图标，最好是文本来阐释颜色信息。
• 确保文字链接从周围的内容中脱颖而出。
由于视觉障碍用户最常见的困难是识别颜色的特定色调，因此应该更多地利用对比度来区分元素，使其清晰易读，如图2所示。
图2 深色和浅色在一起的对比度较高
图3为高对比度颜色提供了基本的指南。下半部分的深色与上半部分的浅色形成鲜明对比，避免使用下半部分的较浅颜色和上半部分的较深颜色的对比。
图3 深色和浅色提供强烈的对比，而两种深色搭配会混在一起
如果色环中的邻近色在亮度上没有差别，那么请避免使用两者的对比色，如图4所示。
图4 互补色对比强烈，而邻近色对比差异较小
不要单靠颜色来传达信息。缺乏对颜色的描述可能会误导用户，耐克的搜索栏就是一个例子，如图5所示。应该在颜色板上添加颜色名来帮助用户理解颜色，用户就无需一遍遍地使用鼠标悬停来确认自己选对了颜色。
图5 颜色板可能会让网上购物的顾客感到困惑
避免单独使用颜色来指示用户如何操作或者要传达的信息，而是将颜色作为用户的辅助信息。
你在设计上使用的颜色越多，混淆色调的概率就越大。因此要限制调色板。下面的15色调色板为常见的色盲类型提供了良好的辨别方案。患有第三色盲的人不能区分如图6中的标有圆点（●）的颜色搭配以及标有三角形（◥）的颜色搭配。
图6 色盲人群无法区分某些颜色
使用纹理和图案来强化对比。例如，色盲用户可能很难识别图形和图表。在这种情况下，可以使用图案来增强对比，可能的话，也可以直接使用文字说明。当然，是否用不同颜色还取决于你所显示的数据系列，如图7所示。
图7 纹理可以更好地区分颜色
按钮的目的是引起用户注意并直接操作，在设计按钮时请避免使用容易给色盲用户造成混淆的颜色组合（如红色和绿色，蓝色和黄色）。
此外，请确保这些元素包含清晰可见的文字或图标，使目标明确，如图8所示。
图8 操作按钮更不应该通过容易混淆的颜色组合来误导用户
4. 创建无障碍的UI设计
将你的设计去色处理，是一个很好的功能性测试。如果完全依赖于颜色的界面，在去色之后逻辑上的问题会被放大，如图9所示。例如，只用颜色的话，去色后界面上各元素的易用性可能会很差，但如果使用形状、颜色和对比来区分关键元素，界面就会非常清晰。
图9 界面去色可以暴露设计的缺陷
如果使用细微的阴影来创造对比度，就可以保持品牌颜色的一致性和品牌辨识度，如图10所示。
图10 想要保持品牌颜色的一致性，不妨尝试用阴影来提升对比度
与其把力气花在设计花哨不切实际的界面上，不如设计美观功能实用的用户界面。用不同的颜色来标识悬停（用于非触屏设备）、点击、激活和错误状态，并用图标来辅助颜色和文本，使用标准的组件或者常规的设计样式可以帮我们做到这些。图11是一个不切实际的UI示例，去色后的界面只剩下一连串文字。
图11 谨防严重依赖红色文字作为唤起动作的标识
对于网站内容，万维网联盟（W3C）的《Web内容无障碍指南2.0（WCAG 2.0）》详细介绍了使网站更易用的建议。级别A是最低要求，级别AA要求音频和视频配有字幕，级别AAA是无障碍最高级别的评级要求。
许多元素都很简单：为图片使用替代文本，已验证的会话过期后仍然保留表单信息。 WCAG 2.0提出的最重要但基本的建议之一是对比度，尤其是关于文本与背景颜色的对比度，如图12所示。
图12 正如Web无障碍中AAA级别的建议，文字和背景颜色的强对比有利于用户识别
5. “但Dribbble①不喜欢！”
作为设计师，我们希望做出最有创意的解决方案，对吧？
虽然，无障碍设计的确会增加一些设计上的限制，但你已经在各种条框限制中进行设计了，这些限制确保了产品的功能性，而无障碍只是其中的一条限制。
无障碍设计不仅仅针对有视觉障碍的人，每个人都受益于无障碍的内容。无论设计师是否有更高尚的审美目标，这些设计都构建了一个以功能为基础的美好世界。无障碍设计不仅直接，而且对于你、你的老板、你的客户和你的用户也很重要。有了无障碍的基础知识，以及我们列出来的实践范本，你在Dribbble上的作品可能会被广泛流传。
6. 设计师实用工具
了解别人如何看待你的设计是为每个人提供最佳体验的关键。幸运的是，有一些简单的方法可以帮你利用WCAG 2.0确保自己的设计无障碍。
（1）Sketch
Stark是一个出色的Sketch插件，提供各种类型的色盲窗口模拟效果。它还提供了两个选定图层之间的对比率。
建议使用Sketch自带的Symbol②功能来创建UI元素，这样可以很方便地检查所有变量及其状态，不然很容易忘记在哪些地方用了什么，同一元素在不同地方使用的时候也不便于同步。
（2）Photoshop
Photoshop自带颜色色盲检查工具，如图13所示。
图13 使用Photoshop的校样设置来模拟色盲
（3） 网上工具
• Tanaguru
用这个颜色工具取两个颜色值，它会计算出这两个颜色之间的对比度，也可以给出与所输入颜色相近的颜色和对比度，提高了无障碍性。
• Colorblind Web Page Filter 色盲网页滤镜
该工具可以在网页上模拟不同类型的色盲看到的状态。
• NoCoffee
这个“视觉模拟器”插件可以识别网页上的问题，如敏感度低、对比度低和颜色依赖。
（4）IOS应用程序
Felipe Elioenay开发的Colorblindness App③是我们的最爱之一。用户将手机摄像头对准日常物体，点击想要了解的部分，它就会描述该物体的颜色，用户界面超级简单。
（5）其他工具
Color Oracle是一个mac OS的实用程序，它可以模拟各种类型色盲所看到的屏幕。
7. 自己编写无障碍体验：给开发者的提示
好的设计和好的用户体验可以在很大程度上提升网站无障碍性，但有时我们还需要更进一步将开发也纳入考虑范围。
（1）语义HTML
像屏幕阅读软件这样的辅助技术需要编写符合标准的语义HTML，以提高无障碍性。
HTML5元素是语义HTML，它提供了页面的结构。使用屏幕阅读器的盲人需要在页面中做到选择性阅读，而不是从头到尾听完整个页面。适当地使用标题级别（h1~h6）可以更容易地满足这一需求，用户可以听所有的章节标题，然后有选择性地阅读他们感兴趣的部分。
保持内容和样式的分离也是非常重要的。HTML用于内容和结构，CSS用于表现和设计样式。
（2）图片
对于具有视觉障碍的用户，图片上需要加上替换性的标签来解释图片，也要配上标题和标签来解释缺失的语境。为图片添加这些信息时，应侧重描述其功能。例如，前往图片集”比“图片集”更有用。
（3）视频和音频
使用HTML5视频和音频标签可以让浏览器知道哪里有什么内容，并默认使用系统播放界面，系统自带的播放界面对用户来说既熟悉又无障碍。
（4）表单
对于使用屏幕阅读器的用户来说，如果你不能确保他们能够访问填写表单所需要的所有信息，那么他们填写表单时会有问题。
使用屏幕阅读器的人需要知道每个字段应该输入什么内容，因为他们无法看到字段旁边的标签。 现有的解决方案是标签元素，它将标签文本与表单字段相关联。
HTML5有一个新功能是指定输入字段的数据类型。通过标记预期的数据类型，浏览器将为该数据类型提供最佳的输入类型（例如，数字对应数字键盘或日期对应日期选择器）。
（5）iOS和Android
苹果公司一直以来都支持无障碍设计，例如它的显示缩放功能。在过去几年，苹果公司进一步地发展了这一点，将iOS中动态字体（见图14）、自动布局以及UI堆栈视图等特性结合在一起，形成了高度响应式UI的基础，并且所有的开发人员都能轻松地使用，如图14所示。
图14 苹果公司在最新的全球开发者大会上推出了动态字体
在2017年全球开发者大会上，苹果公司鼓励更多的第三方开发者支持动态字体；iOS11支持自定义字体，以满足用户对动态字体④大小的偏好。
Android有自己的响应式布局和动态字体解决方案。你可以指定以dp（密度独立像素）和sp（可缩放像素）为单位的度量，根据用户的设置自动进行调整。
8. 无障碍设计最佳设计经验
• 色彩对比是一种强大的设计工具，也是AAA级无障碍设计的支柱。
• 不要仅仅依靠色彩和图标,文本标签会明确告知用户他们看到的选项。
• 填充的图标比线型图标更清晰（苹果公司也这么认为）。如果一定要用线性图标的话，粗线条比细线条更容易识别。
• 用不同的填充图案来增强对比给人一种质地感，也可以帮助用户区分不同的元素。
• 点击区域周围要有足够的留白，以便于用户能够定位和点击它们。
• 可识别的剪影图标效果好于圆圈中带符号的图标。
• 语言要精确，例如在按钮上的动词要让用户明确知道他们可以点击“继续”，而不是笼统的“是”和“否”选项。
• 字母基本高度较小的字体更容易阅读（Brandon Grotesque字体是一个很好的例子），但也要避免使用花体字（比如Lobster字体）。
• 确保文本链接明显可见，例如使用下画线将文本链接和普通文本区分开。
• 确保你的JavaScript和CSS技术不会屏蔽高亮显示。很多用户会高亮显示部分文本来增加对比度。
• 熟悉性和一致性使用户有一个良好的开端。我们应该知道什么时候使用规范的设计样式、常见的交互模式以及原生组件。
• 图标与按钮应方便点击，但不必过大。将它们放在低对比度的容器中，或者增大它们周围的留白，以便于视觉平衡并且方便点击。
• Random A11Y凝聚了一群人的努力，它致力于创建对比度高且好看的色彩搭配。
——————————
本文来源于异步社区，作品《不要仅为85%的用户设计：关注无障碍设计》，未经授权不得转载。
延伸推荐
2018年2月新书
2018年1月重磅新书
小学生开始学Python,最接近AI的编程语言：安利一波Python书单
政策升温：大家都在学大数据，一大波好书推荐
8本新书，送出一本你喜欢的
AI经典书单| 入门人工智能该读哪些书？
长按二维码，可以关注我们哟
每天与你分享IT好文。
在“异步图书”后台回复“关注”，即可免费获得2000门在线视频课程；推荐朋友关注根据提示获取赠书链接，免费得异步图书一本。赶紧来参加哦！
点击阅读原文，查看更多内容
阅读原文