初创团队如何构建最小可行设计系统

8/30/2025

这篇文章是我在初创团队与大公司中做设计期间的经验，结合自身设计实践与阅读，针对初创团队如何构建设计系统的一些思考与总结。仅限 Web 平台，移动端仅供参考 ：）

首先，为什么需要设计系统？

许多人误以为设计系统就是 Figma 里那一套复杂的组件库和详尽的说明文档。但对于一家初创团队而言，设计系统的核心价值不在于设计文档与 Figma 的各种组件，而在于代码。它最终体现为代码库中可复用的 CSS 变量、组件和样式。

你可以暂时没有完美的 Figma 文件或设计文档，但你必须拥有能够交付给用户的代码。这些代码是确保产品体验一致性的基础，为用户的视觉感受和使用体验设定了一个可靠的底线。它让你的产品看起来和感觉起来都更加专业和可靠。

初创团队需要什么样的设计系统？

结合我在 Zeabur（初创团队） 和腾讯（所在部门具有一个完整且复杂的设计系统）的工作经验，一个最小化但高效的设计系统，只需要专注在以下几个关键部分：

颜色 : 一切的基石

一致的颜色不仅能为用户提供连贯统一的视觉体验，也能极大提升前端的开发效率。因此，构建一个具备可访问性、可扩展性和统一命名规范的颜色系统，是整个 MVP 设计系统中最关键、最需要深思熟虑的一步。

颜色是所有视觉元素的 DNA，一旦颜色系统确定并大规模使用，若没有考虑以下几点，后期修改成本将极其高昂，无异于一次彻底的设计重构。在 Zeabur 时，我们就遇到了旧的颜色系统无法很好的支援浅色主题，文本的可读性也不高，无法很好的拓展色阶的问题，因此我们重新设计一个颜色系统，也耗费了不少时间。

在搭建颜色系统时，你需要思考以下问题：

  1. 品牌表达: 颜色如何体现产品特性？如何与品牌 Logo 和整体气质相呼应？
  2. 命名规范: 该如何为颜色命名？是采用语义化命名（如 $colorPrimary, $colorError），还是类似 Tailwind CSS 的功能性命名（如 blue-500, gray-900）？后者通常在扩展性和应对多主题时更具优势。
  3. 颜色数量与拓展性: 我需要多少种颜色？未来是否需要支持更多的颜色？每种颜色都定义多少个色阶？后续是否可能需要新增色阶？哦对了，一般灰色系的颜色可能会需要更多的色阶，因为它们通常用于不同层级的背景色。
  4. 多主题支持: 如何规划亮色（Light Mode）与暗色（Dark Mode）模式的切换？未来是否可能需要支持更多主题（如针对不同客户的品牌色）？
  5. 可访问性: 如何确保文本与背景色之间的对比度符合 WCAG 标准，保证视觉障碍用户的可用性？

相信我，一个经过深思熟虑的颜色系统，会在未来的迭代中为你节省难以估量的时间。

圆角与图标：一致的轮廓

把圆角和图标放在一起讨论，可能会让人有些意外。但实际上，这两者共同定义了产品的视觉轮廓。除了颜色之外，它们是保证视觉体验一致性的一个重要因素。

一个产品的圆角半径，应该与其图标的端点折角处理（比如是圆润的还是尖锐的）保持风格一致。这会形成一种很微妙的视觉和谐感。

圆角与图标

  • 圆角: 较大的圆角通常会营造出更友好、更柔和的氛围；而较小甚至锐利的直角则会传递出更专业、更严肃的感觉。重要的是，你需要统一圆角大小！

  • 图标: 在项目初期，请直接选择一个风格统一的开源图标库（例如 Lucide, Feather Icons 或 Tabler Icons），并坚持使用它。最糟糕的做法，就是从不同平台东拼西凑各种风格不一的图标。

基础控件: 核心交互

在创业初期，你完全不需要像 Ant Design 或 Material Design 那样，一次性实现几十个大而全的组件。你只需要专注在几个最高频、最核心的基础控件上，就足以构建出覆盖 70%-80% 使用场景的设计系统。可以参考Linear如何管理他们的设计系统。

Linear 设计系统

根据我的设计经验，这些基础控件包括：

  • 按钮: 各种状态（primary, secondary, ghost...）和尺寸。
  • 输入框: 文本输入（Input）、文本区域（Textarea）。
  • 选择控件: 复选框 (Checkbox)、单选按钮 (Radio Button)、开关 (Switch)。
  • 反馈与提示: 对话框 (Modal/Dialog)、通知 (Notification/Toast)。
  • 其他你的产品特有的高频使用的组件

这些组件是用户与产品交互的支点。将它们打磨好，产品的核心体验就有了保障。

排版与间距：信息分层

初创团队无需一开始就定义复杂的排版系统。我们只需从最核心的文本角色出发，确保信息层级清晰。一个最小化的排版系统至少应包括以下三个级别：

  • 标题 (Heading): 用于页面或区块的大标题。它应该是最醒目的，可以定义 1-2 个级别。例如: 20px 加粗 (Bold)
  • 正文 (Body): 用于大多数段落、描述和常规文本，是产品中最常见的文字。可读性是第一要务。 例如: 14px 常规 (Regular)
  • 辅助/次要文本 (Subtle/Secondary): 用于占位符 (Placeholder)、提示信息 (Hint)、或者禁用的文本状态。它的视觉强度应该弱于正文。例如: 14px 常规，并使用一个对比度较低的专用色（如 gray-500）。

随着产品功能变复杂，信息层级会增多。届时，你的排版系统可以很自然地演进：

  • 增加标题层级: 从单一的 Heading 扩展到 H1, H2, H3...
  • 细化正文样式: 可能会分化出 Body-Large, Body-Small。
  • 引入功能性样式: 增加如 Link (链接), Caption (图说), Button-Text (按钮文字) 等专用样式。

对于间距，最简单有效的方法是定义一个基础单位（比如 8px），然后所有的间距、内外边距（margin, padding）都使用这个基础单位的倍数 (8px, 16px, 24px, 32px ...)。这样做的好处是：

  • 减少决策: 设计师和工程师不再需要凭感觉决定用 10px 还是 12px，只需从预设的间距梯度中选择。
  • 视觉和谐: 元素之间的关系会变得有规律、有节奏，视觉上更加和谐。

动效（可选）

动效是设计系统中最容易被忽略，却又最能提升产品“质感”的部分。对于初创团队，关键在于统一动效的语言。这意味着，当用户与不同的组件交互时，能感受到一种熟悉的、有预期的节奏感。一个最小化的动效系统，只需要定义两个核心元素：时间和缓动曲线。

  1. 时长: 定义几个固定的时间值，用于不同场景。这能避免工程师凭感觉随意设置 200ms 或 300ms。
    • 快速: 100ms - 150ms。用于微小、即时的反馈，如按钮悬浮 (Hover)、图标高亮。
    • 中速: 200ms - 300ms。用于中等范围的元素变化，如卡片展开/收起、对话框 (Modal) 弹出。
    • 慢速: 400ms - 500ms。用于较大面板的切换，如侧边栏 (Sidebar) 的滑入滑出。
  2. 缓动曲线: 定义一到两个缓动函数，来决定动画的“性格”。ease-in-out 是一种非常安全且自然的默认选项，它模拟了物理世界中物体加速和减速的过程。
    • 标准曲线: 一个通用的 ease-in-out 曲线，用于绝大多数界面元素的过渡。
    • 强调曲线: 一个更具张力的曲线，用于需要吸引用户注意力的时刻，但初期可以省略。

其他

最后还有几个小建议：

  • 从代码开始: 直接在你的代码中创建颜色变量和组件，并不断迭代。
  • 设计不过度工程化: 之后，你可以在 Figma 中创建对应的样式（可能是因为终于找到了一名设计师😂），但不要一开始就陷入组件变体的汪洋大海。先满足当前的设计需求即可。
  • 持续迭代: 当你发现一个新的模式被反复使用时（例如设计师的卡片样式），就是时候将它抽象化，沉淀为系统的一部分了。设计系统是一个生命体，它会随着产品的复杂度而自然生长。

对于初创团队而言，设计系统的目标不是为了“拥有一个设计系统”，而是为了更快、更一致地交付高质量的产品。

参考