Home WorksWorks At Zeabur

Works at Zeabur

Published Sep 18, 2024

⋅

Updated Mar 10, 2025

⋅

10 minutes read

Zeabur （发音是/ˈziːˌbər/）是一个PaaS平台，帮助开发者一键部署任何服务，包括前端、后端与数据库，无论使用什么编程语言、框架。在 Zeabur，我的工作覆盖了设计系统的构建与维护、用户体验设计（UX/UI）以及品牌宣传物料的设计，同时还负责简单页面的前端开发。

设计系统

我主要设计了

Zeabur Dashboard 新的颜色色板与 Color Token 命名规则
基础控件的组件，包括设计与开发
图案设计

颜色

为了设计浅色模式（现在只有暗色模式）与以后更好地拓展，我重新设计了 Zeabur 的颜色系统。Zeabur 采用了 Tailwind CSS 默认的配置，包括颜色、字体和图标。Tailwind 提供了高质量的预设，并允许灵活的自定义修改，帮助我们在设计与开发中快速迭代。

_{tailwind 内置一系列规定好的 CSS 属性}

_{Zeabur 的新旧灰色色板}

新色板

我们基于 Tailwind 的色板，为 Zeabur 引入了品牌色 violet、orangered，以及扩展后的灰色色板。Violet 作为主色，orangered 用于破坏性操作，而略带紫色调的灰色被广泛用于背景和文本。为了更好地表现层次感，我们增加了950-700及300-50区间的灰色采样，以满足设计需求。这些颜色的选择为后续的设计系统命名提供了基础。

我们使用 OKLCH 色彩空间来设计新色板，该色彩空间确保相同亮度的颜色视觉上一致。参考 Tailwind 的亮度分布，我们确保新色板在视觉层面上与原有色板保持一致，从而让用户在界面中感受平滑过渡。

Design Token

作为初创团队，复杂的设计系统并不适合快速迭代。为此，Zeabur 的颜色系统主要沿用 Tailwind 的 primitive 命名方式（如 slate/100），这为设计提供了高度灵活性。同时，我们为常用的背景、描边、文字等元素引入了语义化命名，保持灵活性的同时简化了管理。

例如，surface 用于背景，text 用于文本和图标，stroke 用于描边。同时，我们没有限定这些语义化 token 的具体使用场景（如color.background.btn.hover），而是采用了同样的数值后缀。这种命名方式为设计和开发提供了统一的语言，并保证了设计的可扩展性。

_{语义化命名}

颜色用法

Zeabur 的颜色系统按 Tailwind 编号，同一色相从50至950，灰色有更详细的区分用于背景设计。Surface/100-200 常用于大面积背景，500色号则作为solid color，应用于按钮等小面积区域。

灰色主要作为背景色与文本颜色。surface/100-200 一般用于面积比较大的背景。对于层级的表示，一般有两种方式，在100和200之间不断切换，或者是色值逐渐变高。

surface/300-500 一般用于面积比较小的背景，例如按钮。surface/300 一般作为默认状态，400 一般作为hover状态，500一般作为 active 或 selective 状态。

对于不同状态例如hover的切换，一般是上移或下移一个值。例如在亮色模式 button 是 surface/100，hover 时变为 surface/200。

组件

在 Zeabur，我利用 figma 的最新特性重新设计了一系列组件。正如之前提到的，我们采用了一种渐进式，比较灵活的方案。我们在最开始只设计了最基础的控件组件。

Button
Toggle
Input
Checkbox
Radio
Select
Listbox
Menu

在遇到非设计系统中的组件时，我们会先尝试用非组件的方式。如果类似组件在之后的设计中频繁使用，我们会将其加入到设计系统中。并随着特性增加、从旧设计切换到新设计的过程中，逐渐增加必要的组件。同时，我还负责了组件的开发工作，保证了设计与开发的一致性，包括 Modal、Button、Listbox、Menu 等组件。通过同时进行设计与开发的工作，我们保证了设计系统的一致性，同时也保证了设计系统的可扩展性。

// 使用 headlessUI 封装的 Modal 组件
<Modal open={isOpen} onClose={onClose}>
  <ModalBackdrop />
  <ModalPanel>
    <ModalHeader onClose={onClose}>
      <ModalTitle>Title</ModalTitle>
      <ModalDescrption>desc</ModalDescrption>
    </ModalHeader>
    <ModalContent>
    {/*You can do whatever you want here*/}
      <div>content</div>
    </ModalContent>
    <ModalFooter>
      <Button onClick={onClose}>Cancle</Button>
      <Button onClick={onClose} variant={'primary'}>
        OK
      </Button>
    </ModalFooter>
  </ModalPanel>
</Modal>