优秀包装设计作品的设计目的在于代表企业或品牌的形象,良好的优秀包装设计作品建立起品牌和客户之间的联系:
假设一个服务代表需要为一个客户修理一台坏了的机器,而这个客户的位置在地图上被高亮显示。如果服务代表患有色盲,他们可能无法区分哪个标记被突出显示。他们必须在菜单和表格中搜寻信息。这是没有效率的。因此,搜索基本信息所需的额外时间累积起来会影响客户服务的质量。
但是,对地图的设计进行一些改变,使其对色盲友好,就能产生很大的不同。
在以下示例中,左侧的地图显示了一系列蓝色标记中的一个粉色标记。右边的地图模拟了色盲的人可能看到的同一张地图:都是一种颜色。你可以想象这有多令人沮丧。
左图:对于视力正常的人来说,地图是什么样子。右图:对于色盲的人来说,相同的地图可能是什么样子乔恩乔丹/销售人员我们知道我们可以做两件事来提高地图的可访问性:
创建一个色盲友好的调色板,任何人,尤其是色盲的人,都可以设置。创建符合对比度要求的标记以获得更好的可视性。成为可访问性冠军了解为什么让每个人都能访问技术非常重要。
关于可访问性的技巧1,400点从网络可访问性开始
什么是色盲?因为这个名字,有一种误解,认为色盲的人只能看到黑色和白色。色盲或色觉缺陷(化学气相沉积)的实际含义是,与具有典型色觉的人相比,一个人区分颜色的能力下降。
那么化学蒸汽沉积(chemical vapor deposition)有多普遍呢?全世界约有3.5亿人患有此病,占总人口的4%。这种情况在男性中更为普遍,每12名男性中就有一人患有这种疾病(约8%)。这意味着我们当前的销售力量用户中可能有很大一部分患有色盲。如果我们不做出改变,我们就有可能阻止新用户使用我们的地图程序。
模拟不同类型的色盲如何影响一个人对颜色的感知乔恩乔丹/销售人员在上面的糖果图片示例中,我们可以了解不同类型的色盲如何影响一个人对自然颜色的感知。最常见的色盲形式是德国(deuteranomaly和德语乌托邦)和protan (protanomaly和protanopia),它们是红色/绿色类型。红/绿色色盲的经典例子是看不到长满绿叶的树上的红苹果。它们都融合在一起。第三种类型,tritan(tritananomaly和tritanopia),是蓝色/黄色色盲。典型的例子是地图上蓝色的水和黄色的土地看起来一样。
从地图标记开始我们从重新设计地图标记开始,知道它将在我们如何处理调色板中发挥重要作用。我们的旧标记没有清晰的边界,因此视觉敏锐度较低的人可能很难将其与后面的地图区分开来。
WCAG(网页内容可访问性指南)要求两个元素之间的比例至少为3.5:1。因为地图标记的颜色可能太接近其背后地图的颜色,所以我们认为这是一个有机会的领域。我们打破了标记行业标准的惯例,添加了双边框,并带有一致的白色轮廓。采用这种设计,无论背景如何,标记始终具有最低11:1的对比度。
我们还使中心点根据标记的颜色从白色变为黑色,以确保始终有一个清晰的焦点。这个功能是修改调色板的关键。
地图标记的修正和对比度的比较乔恩乔丹/销售人员开发调色板完成标记后,我们开始开发色盲友好调色板。基于我们的设计系统团队之前为创建可访问的调色板所做的工作,我们选择了24种最合适的颜色。我们移除了所有在地图背景上太亮而不可见的颜色,以及太暗而不容易区分的颜色。
左侧的图表显示了销售力量的辅助调色板。右边是为色盲设计的流线型调色板乔恩乔丹/销售人员我们使用了一个色盲模拟器来检查我们的可访问性(a11y)调色板。在不同类型的色盲中,我们最初的调色板导致了太多的重复。所以,我们继续实验。我们想平衡给用户最大可能的颜色集,也可以区分所有色盲类型。我们最终从a11y调色板中选择了12种颜色,调整它们以最大化区分,并添加了黑色和白色。
从来没有人想到为化学蒸汽沉积(chemical vapor deposition)设计。在最好的情况下,可能会有一个切换选项,可用的颜色较少。
社区成员/色盲团体,Reddit测试色盲友好调色板使用色盲模拟器只能做这么多。虽然这是一个很好的起点,但是我们需要用真实的用户来测试这个面板