Gravity UI 设计系统：如何轻松构建您自己的界面

大家好，我是 Alexey Sizikov，Yandex Cloud 的用户体验（User Experience）部门负责人。在这篇文章中我想分享一个消息：我们已将我们的设计系统与组件库 Gravity UI 开源发布。

借助 Gravity UI 组件库，你可以构建现代化的界面。它包含：

• 一套基础 React 组件；
• 用于落地页（Landing Page）的搭建器库；
• 组件使用的详细指南；
• Figma 资源库；
• 一套现成图标，总计接近 600 种变体；
• ChartKit —— 数据可视化包；
• Yagr —— 基于 uPlot 的高性能图表渲染器；
• I18n —— 界面本地化包；
• 以及另外超过 25 个实用库。

下方折叠内容将介绍：我们为什么做 Gravity UI、如何使用它、我们的做法有哪些特点与优势，以及未来的演进计划。另外还会讲：如何在项目中配置不同的配色方案，以及为什么我们不是两套常见主题，而是四套主题。

Gravity UI 的特点是什么

基于真实经验

我们设计系统的一个显著特点是：它基于用户需求不断演进，而我们的用户大多是开发者。更重要的是，设计师与他们所负责的产品紧密相连。每位设计师都会覆盖若干个具有不同使用场景的服务。某个方案在他们的服务中完成验证后，产品设计师会将其推广到其他服务，以确认它确实可用并能帮助开发者。

例如，侧边导航组件最初只有 Logo 和菜单项。后来为了方便，我们加入了包含“所有服务”和搜索的条目。当某个服务需要直接在侧边菜单中创建新实体时，我们新增了一个带“+”的独立按钮。再后来，为了适配菜单项很多的复杂服务，又增加了带分隔符的菜单分区，以及“其他项”按钮。

灵活的可变性

Gravity UI 的许多组件都可以根据不同场景进行配置。例如，pagination 组件就有多种显示方式：显示总页数、使用完整的按钮文字、支持跳转到指定页面、支持修改每页条目数——这类配置适用于页数较多的情况。如果你的场景中结果不多，可以启用紧凑模式，甚至隐藏数字只显示箭头。

广泛的适用范围

使用 Gravity UI，你既可以做一个简单的后台管理界面，也可以做一个包含图表的复杂仪表盘。下面是一些可以用我们设计系统搭建的示例：

• 落地页，
• 管理后台，
• 仪表盘，
• 图表，
• CRM，
• 分析服务。

例如，我们的同事做了这样的仪表盘：

也可以做一个简单的落地页。例如，展示我们开源项目的网站就是基于 Gravity UI 组件构建的。

超过 150 位贡献者

我们的生态系统持续发展并不断改进。除了来自开发者社区的反馈之外，我们还会收到来自 100 多个已在使用我们设计系统的服务的建议。

举个例子：一开始我们只有两套主题——深色和浅色。但我们开始收到一些团队的反馈：他们会把界面投到电视上用来查看图表，或在站会期间展示。问题在于，电视上界面显示不够清晰。类似问题也会发生在使用老旧或质量较差显示器的用户身上。

最终我们为每个主题都开发了“增强对比度”版本。它会提高深色与浅色，以及语义色的亮度。这通过 CSS 样式进行配置，并在用户设置中进行控制。

顺便说一句，现在你也可以参与贡献：欢迎在 GitHub 提交 PR，或在 Figma 中留下评论。

如何使用 Gravity UI 进行开发

将界面适配你的品牌

接下来我会介绍 Gravity UI 还能做什么。先从“将设计系统适配你的品牌”说起。例如，当 YDB 开源时，我们面临的任务是：既要保留统一的设计系统，又要让不同品牌呈现出各自的独特性。为此我们创建了一组独立的 CSS 变量，包含品牌色、字体以及圆角半径。代码看起来像这样一个小块：

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

在这组变量里你可以替换字体、强调按钮颜色、圆角等。这样就能在保持品牌风格的同时，用同一个设计系统服务多个品牌。如果这种方式不适合你，也可以创建自己的配色方案。详细说明见文档。

值得注意的是，修改品牌色不会影响主要界面。这一点对使用语义色的元素尤其重要：例如红色仍然表示错误，绿色仍然表示成功。

Figma 中的组件

为了方便工作，我们的设计团队已将组件的所有状态准备好并上传到 Figma。 如有需要，你可以复制这套库，并直接在工具里尝试搭建界面。

在最近一次更新后，库中不再重复放置全部四套主题。 默认在浅色主题下工作，但你可以在 Layer（图层）面板中将任意元素或整页切换到其他主题。

库中的所有元素都展示在 Overview 页面上。 在这里你可以找到所需组件，并跳转到包含该元素所有状态的页面。 另外，每个组件还提供使用示例。

近 600 个图标

图标是设计与可用性中不可或缺的元素。 它们帮助组织和结构化内容、突出重点，并提升信息的可读性。 乍一看，做一套图标包似乎并不难。 但当我们需要为复杂隐喻（如虚拟机、数据库、不同类型的图表）制作图标时，遇到了不小挑战。

为了让图标搜索更方便，我们使用了特殊的命名系统。 现在同一个图标可以通过不同名称找到。 例如，要找到带箭头的图标，你可以输入任意一个词：arrow、enter、move、login。

指南

正如我在上文提到的，我们的目标是让开发者能够依据指南中对组件的描述，轻松创建典型界面。 我们希望这个过程尽量简单，不必为每一个元素都去找设计师。 目前我们已经有 5 个内部服务案例：完全由开发者仅凭指南创建。

当然，仅靠开发者之力无法解决所有问题：无论如何，总会有需要 UX/UI 专家关注的复杂场景。 即便如此，我们也成功为设计师减轻了很大一部分负担。

在指南中，设计团队对组件进行了说明，并给出了使用建议，同时展示了正确与错误做法的示例。 你可以在这个页面查看。

如何开始使用 Gravity UI

你只需要在控制台输入命令：

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

更详细的说明在 GitHub 仓库首页。

你可以在 UIkit 查看 Gravity UI 的全部组件，并在 Libraries 中选择并接入满足你需求的库。

最后再总结一下：Gravity UI 是一个从真实用户经验、开发者需求与设计师专业能力中成长起来的设计系统，因此它更实用、更高效。现在任何人都可以免费使用它。

我们希望在用户需求与反馈的基础上，把项目做得更好。欢迎来 GitHub 提交 PR，在 Figma 留下评论，并分享你的使用案例。