什么是 KRDS？即使政府工作人员都不知道的韩国政府设计系统

Source: Dev.to

什么是 KRDS？

Korea Government Design System（韩国政府设计系统）—— 由行政安全部于 2023 年制定的公共部门网站设计指南。
如果你注意到 Gov24、国家健康保险服务等韩国政府网站的外观与体验十分相似，那就是 KRDS 在发挥作用。

为什么要创建它？

1. 一致性

以前政府网站在导航位置、按钮颜色和整体布局上差异巨大，导致公民难以找到所需服务。KRDS 统一了结构、导航和 UI 组件，使用户在不同站点之间获得熟悉的体验。

2. 可访问性

公共部门网站必须符合韩国的可访问性认证。KRDS 将颜色对比、键盘导航和屏幕阅读器支持等要求内置其中，帮助各机构在不重复造轮子的情况下满足基本的可访问性标准。

3. 成本节约

从零开始设计每个站点成本高昂。复用 KRDS 组件可以降低设计和开发工作量，从而降低费用。

现状

员工不知道它的存在

招标文件常常要求“符合 KRDS”，但许多项目经理并不清楚这具体指什么，也不知道如何验证。

非技术人员难以理解

KRDS 网站使用“组件”“设计令牌”“语义颜色”等术语。开发者和设计师能理解这些概念，但行政人员往往无法判断一个站点是否符合 KRDS。

设计师感到受限

“使用此颜色”“按钮要这样做”“间距必须精确”等指南会让习惯创意自由的设计师觉得受限。对设计“过于平淡”或“脱离潮流”的担忧很常见。

那么该怎么做？

KRDS 是“最低标准”

不需要 100 % 完全遵循 KRDS；只要满足核心要求即可。

• 颜色 – 以政府品牌调色板（蓝色）为基准。
• 可访问性 – 最低 4.5:1 的颜色对比度，完整的键盘导航。
• 结构 – 简单的 header‑content‑footer 布局。

只要满足这些要点，就可以声明“已应用 KRDS”。

允许自定义

可以在 KRDS 调色板中混入额外的机构颜色或品牌元素。

/* KRDS default */
--krds-primary: #256EF4; /* blue */

/* Agency addition (example) */
--agency-primary: #00A86B; /* Ministry of Environment green */

这不是在替代 KRDS，而是对其进行扩展。

实际落地步骤

向非技术人员解释 KRDS

KRDS 是什么？

“它是由行政安全部制定的政府网站设计指南。所有政府网站外观相似正是因为 KRDS，遵循它还能自动满足可访问性要求。”

我们的站点符合 KRDS 吗？

“只要 header 和 footer 符合指南结构，颜色使用政府调色板，且站点可以通过键盘进行导航，就算符合。”

小结

KRDS 本身并不是问题，难点在于如何清晰解释并提供可落地的实施指导。

基于 KRDS 的开源 React 组件可在以下地址获取：

Tags: #react #designsystem #accessibility #government #opensource