> ## 文章索引 > 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt > 这是 lrd.im 的个人博客，记录设计、技术与思考。 # 【译文】无障碍设计：三个 Jira 图标的故事 ![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/01.webp "Photo by Harry Quan on Unsplash") > 导读：Atlassian UX 团队的设计师 Hannah McKenzie 分享了一个优化图标的小案例。主要目的是使图标对色盲人士也具有良好的可访问性。 ## 小细节会产生巨大的影响 你知道世界上有很多种不同类型的色盲吗？在澳洲，有大约 50 万人生活在某种程度的色盲当中。在美国，这个数字接近 1200 万。而在全世界，估计有 3 亿人生活在某种程度的色盲当中，网上的一些资料显示，这个数字甚至接近 3.5 亿。 > 其中红绿色盲占据了大多数，他们难以区分红色和绿色。 现在 Jira 的 Pull request 的图标是通过用灰色、绿色和红色来区分 Open, Merged, Declined 这三种状态。 ![Jira Pull Request 三种状态的原始图标：Open（深蓝色）、Merged（绿色）、Declined（红色），三个图标形状完全相同，仅靠颜色区分状态，对色盲用户不友好。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/02.png "原本的图标，灰色代表 Open，绿色代表 Merged，红色代表 Declined。") 红绿色盲人士看到的图标就像这样： ![色盲模拟对比图：正常视力下，Pull request 图标分别呈灰、绿、红三色；绿色盲（Deuteranopia）和红色盲（Protanopia）患者看到的绿色与红色图标均变为相近的黄褐色，难以区分。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/03.png "") 在 Jira 的软件项目管理看板当中，这些图标很小，并且与每个缺陷中其他小元素一起出现。比如故事点、负责人头像和缺陷 ID。 这是一个 Jira iOS app 项目看板的例子。其中 Pull request 图标用红色圆圈高亮起来作为示意。 ![Jira iOS 应用项目看板截图，展示「To do」列表中的四个任务卡片，每张卡片上的 Pull request 图标（绿色分支符号）均用红色圆圈高亮标注，说明这些图标在密集的卡片信息中体积极小。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/04.png "") 虽然图标很小，但这些图标确实在传达有用的信息。 在 2021 年末，我开始进行优化开发状态图标的工作，并让色盲用户可以访问它们。它开始于一则我在无障碍团队 Slack 频道里的消息： > “我们最近有改进 Jira pull request 图标计划吗？现在这些图标是完全相同的，只能通过颜色来区分。” ![装饰图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/05.webp "Photo by GeoJango Maps on Unsplash") 在 2022 年初，几位设计师和研发在 Slack 的讨论中尝试了一个粗略的方案： ![三个 Pull request 图标的草稿方案：左侧为基础的合并图标（无标记），中间为带勾号的已合并图标，右侧为带叉号的已拒绝图标，通过形状差异而非仅靠颜色来区分状态。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/06.png "") 设计师开始尝试多种概念，产生了更多的方案： ![设计师对 Pull request 图标的多种概念探索方案：包含蓝色 "Open"、绿色 "Merged/Approved" 和红色 "Unmerged/Rejected" 三类状态，通过不同形状（箭头方向、打勾、打叉）区分语义，右侧为参考灵感图标。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/07.png "") 在几个发散性的讨论和设计环节之后，全新的，具有可访问性的 Pull request 图标诞生了！ ![三种新版 Pull Request 图标：Open（深蓝色，两个节点间的箭头）、Merged（绿色，带勾号，线条相连表示合并）、Declined（红色，带叉号，线条断开不相连），通过形状和颜色双重区分状态。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/08.png "") 虽然这些图标仍然由灰色、绿色和红色来分别代表 Open, Merged 和 Declined，但同时，使用了打勾代表 Merged，打叉代表 Decline。而且 Merged 的图标用线条连接在一起（表示合并到分支），Declined 的图标线条则没有与任何东西连接。 ![Jira 移动端看板截图，展示四个「To Do」任务卡片，每张卡片上的 Pull Request 图标均被红圈标注：Open 为灰色双叉图标，Declined 为红色带叉图标，Merged 为绿色带勾且线条相连图标，三者形状各异以区分状态。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/09.png "") ## 这段经历教会了我... - **即使过程很棘手，但也请坚持下去。** 如果你面向的是比较复杂的产品，或者在大型的机构中，你需要主动去在不同团队去联系到合适的同事； - **一些看起来很小的设计往往会涉及到很多不同的人。** 通常是很多件小事（就像在这个案例当中，有许多交流和发散性会议）汇聚成一件大事，以最终呈现在用户面前； - **设计一个支持无障碍的产品对很多人来说是至关重要的，小细节真的很重要。** 每个人都会受益，包括自认为是并非残障群体的的人士。比如电话和电动牙刷，最开始就是为残障人士而设计的。 Atlassian 里几位没有色盲的设计师和工程师对于新设计图标的看法： > “我不是色盲的，但这些图标让我一眼就能看懂。” > “这简直是宝藏。原本同样的图标，不同的颜色让我感到疑惑。我经常想，这是对应着什么分支状态？这是一个非常惊人的优化。” **所以这篇文章用来提醒大家关注细节——即便是小细节也会产生巨大的影响。** ![装饰图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2023-04-01/10.webp "Photo by Balázs Kétyi on Unsplash") --- - 原文：[Accessible design: A story of three Jira icons](https://medium.com/designing-atlassian/a-story-of-three-jira-icons-77503ac7c59b) | Hannah McKenzie - 译者：李瑞东