---
title: 设计系统简介
slug: 设计系统简介
category: 基础
figma_node_id: 0:1
figma_page_name: 如流设计系统简介
aliases: [设计系统总览, 如流设计系统介绍, Infoflow Design System, 设计系统首页]
last_extracted: 2026-05-19
status: ok
---

# 设计系统简介

> 如流设计系统 2.0（Infoflow Design 2.0）的总览入口页，按 9 个板块介绍系统的接入、协同、组件、流程和理念。Figma 文件 fileKey: `w0sifGo4F7nnrI59sGO55A`，封面副标题 "Version 2.0"。

## 版本与品牌

- 版本号：**Version 2.0**
- 品牌名：**Infoflow Design**（如流设计）
- 工具：Figma
- 大标题样式：PingFang SC Semibold 66px / 行高 66px
- 超大封面样式：PingFang SC Semibold 90px / 行高 100px

## 0. 更新路线图（节点编号 00）

总览整套设计系统的 7 大模块，作为本知识库的章节依据：

- **导航** (Navigation)
- **通用组件** (General Components，原文写作"通用组建"，疑似笔误)
- **信息输入** (Information Input)
- **信息展示** (Information Display)
- **反馈** (Feedback)
- **搜索** (Search)
- **主体框架** (Layout)

视觉上以虚线时间轴串联，每个节点用绿色 (`#00B42A` 成功色)、蓝色 (`#165DFF` 主色) 圆点标记当前进度。

## 1. 接入流程指南（节点编号 01）

副标题：**使用前准备**（"By Infoflow Design"）。
内容说明如何把如流设计系统接入到具体项目中，本页只给入口，详细步骤见专门的"接入流程指南"页面。

## 2. 设计组件（节点编号 02）

两段对应正文原话保留：

> 可以通过搜索快速查找组件（支持中英双语），库中的每个组件都有自己的唯一名称，主要组件附有主色浅背景。

> 将需要的组件拖至画布工作区，组件可通过右侧 Variants 菜单切换不同状态，具体取决于你的需求。注意，组件遵循原子设计理论搭建，内部可能嵌套其他组件，你可以灵活修改组件里的各个部分。

**要点：**
- 组件支持中英双语搜索
- 主要组件有主色浅背景标识
- 通过 Figma 右侧 Variants 菜单切换状态
- 遵循原子设计理论（Atomic Design），组件内部可嵌套，允许灵活修改

## 3. 协同共建机制（节点编号 03）

板块标题，内容由后续详细页阐述：设计师与开发协同共建组件库的机制。

## 4. 跟踪反馈机制（节点编号 04）

板块标题，定义设计系统使用过程中的问题反馈、改进追踪机制。

## 5. 产品接入案例（节点编号 05）

板块标题，收录已经接入设计系统的产品案例展示。截图区有两个 160×160 的用户案例图占位（imageRef: `e5e75f7335e561d58e35f0d4e7faede6243d869a` / `b7bfd9a45ed0b199ee52fad60d71a070d377daf1`）。

## 6. 设计理念 / 原则

整套设计系统的价值观与原则定义，独立成页（见 `基础/设计原则.md`）。视觉上用深色背景突出（背景色 `#1D2129`）。

## 7. 如流平台设计体系

板块标题，介绍如流平台整体设计体系结构（见 `基础/2023设计语言规范.md` 与 `基础/2023设计语言规范.md` 中的体系总览）。封面有一个紫色标签 (`#722ED1`)，配以 "Component properties" 字样。

## 视觉规范快照（封面页观察）

颜色 token 在本页出现：
- 背景色：`color-bg-1` = `#FFFFFF`
- 文字主色：`color-text-1` = `#1D2129`
- 文字辅色：`color-text-3` = `#86909C`、`color-text-4` = `#C9CDD4`
- 填充：`color-fill-2` = `#F2F3F5`
- 主色：`primary-6` = `#165DFF`
- 成功色：`success-6` = `#00B42A`
- 暗夜紫：`purple-1` = `#F5E8FF`、`purple-6` = `#722ED1`

字体阶梯（本页出现）：
- 大标题 PingFang SC Semibold 90 / 100
- 主标题 PingFang SC Semibold 66 / 66
- 章节标题 PingFang SC Semibold 48 / 56
- 编号标签 Inter Bold 24 / 24
- 正文 PingFang SC Regular 24 / 44
- 品牌字 PingFang SC Semibold 30 / 30
- 小标签 PingFang SC Semibold 10 / 20

圆角：卡片 24px，内部插图区 16px。

## 示例

![如流设计系统封面图](../图片/基础/设计系统简介/cover-1.png)
![如流设计系统封面图 2](../图片/基础/设计系统简介/cover-2.png)
![如流设计系统封面图 3](../图片/基础/设计系统简介/cover-3.png)
<!-- 缺图: Infoflow Design 品牌字示意 → ../图片/基础/设计系统简介/品牌字-figma.png（Figma 节点未导出或图已删除，待手动补图） -->
![产品接入案例缩略图 1](../图片/基础/设计系统简介/casethumb-1-703564.png)
![产品接入案例缩略图 2](../图片/基础/设计系统简介/casethumb-2-57a167.png)
![设计理念背景图](../图片/基础/设计系统简介/designli-nian-bg.png)
![平台设计体系 abt-3d](../图片/基础/设计系统简介/platformsystem-abt3d-56586a.png)
![平台设计体系 figma 装饰](../图片/基础/设计系统简介/platformsystem-figmadeco-56586a.png)
![logo 英文版本](../图片/基础/设计系统简介/logo-ying-wen-ban.png)

## 关联
- 详细设计原则见 [设计原则](设计原则.md)
- 整体设计语言体系见 [2023设计语言规范](2023设计语言规范.md)
- 平台设计体系结构展示见本页 "如流平台设计体系" 板块
