项目背景

通用安装助手是一款提供软件购买、下载与激活的桌面应用。

在该项目中，完成了设计系统从 0-1 的搭建，将设计规则沉淀为可复用资产，为后续迭代提供统一基础。

安装助手包含软件展示、版本选择、购买流程、已购管理等多个业务场景，单纯依靠页面设计难以保证长期一致性。因此，通过建立设计系统，将视觉规范、交互组件和业务模块逐步抽象，形成一套可持续扩展的设计体系。

设计系统规划

在开始界面设计前，先规划设计系统的整体结构，而不是直接进入页面制作。

根据产品定位和后续扩展需求，将设计系统划分为五个层级：

• Design Principles：设计原则，统一视觉和产品体验规则。
• Foundations：基础设计语言，包括 Color、Typography、Layout 等。
• Design Tokens：将设计规则转化为多层变量。
• Components：可复用的基础组件。
• Business Components：包含业务逻辑的复合组件。

设计系统搭建流程

设计系统并不是一次性完成的规范文档，而是在页面设计与开发过程中持续迭代形成的。

在项目初期，先建立一套最小可用规范，包括基础颜色、字体、布局等核心规则。随后，在设计和开发中反复验证和反思，并持续对规则进行调整优化。

例如，在初版 Typography 设计中，先定义了一套基础字号体系。但在后续应用中，出现标题层级不足，和字号语义不清晰等问题。

因此，需要进一步扩充 Typography：

• 增加标题层级，满足不同信息层级展示需求；
• 增加 Regular / Bold 两种字重，以区分标题、正文等不同用途。

通过对规则的持续验证和调整优化，使设计系统能够适配业务场景，而不是停留在理论层面。

流程图展示了设计系统的搭建过程。下面将结合本项目，介绍设计系统各个层级的具体设计与实践。

01 Foundations：搭建设计系统原子层

安装助手作为效率型工具，需要在有限空间内展示大量软件信息，因此基础设计语言重点围绕信息层级、阅读效率和视觉一致性展开。

主要包含：

• Color：定义品牌色、中性色和语义色，用于区分操作、状态反馈和信息层级。
• Typography：建立标题、正文、辅助内容等层级，通过字号与字重组合形成清晰的信息结构。
• Layout/Spacing：统一页面布局和间距规则，不同模块之间保持一致节奏。
• Radius/Shadow：定义视觉风格，确保组件风格统一。

所有基础规范统一整理至 Figma「基础规范」页面，作为后续设计和组件建设的基础。

02 Design Tokens：建立可维护变量体系

随着页面和组件数量的增加，如果在各处直接使用具体数值，会导致修改成本增加，也难以保证整体的一致性。

因此，必须进一步将基础规范抽象为 Design Tokens，并通过 Figma Variables 进行管理。

例如：

• 文本颜色不直接使用具体色值，而通过 Text Token 管理；
• 背景、边框、状态颜色通过语义 Token 管理；
• 间距、圆角等基础属性统一维护。

如此一来，当设计规范调整时，可以通过修改 Token 快速同步到相关页面和组件中。

Design Tokens 让设计规则从“页面样式”转变为“系统变量”，提高了设计维护效率。