86 lines
4.1 KiB
Markdown
86 lines
4.1 KiB
Markdown
# 浅红色 UI 规范
|
||
|
||
浅色主题设计规范：以白 / 浅灰作大面积背景、深色作正文、**红色（`#F5222D`）为品牌强调主色**。
|
||
|
||
> 全文按主题拆分为 6 篇，章节号（§1 ~ §28）全局唯一，跨篇引用（如"沿用 §5.2.1"）按下表定位即可。
|
||
|
||
## 篇目导航
|
||
|
||
| 篇 | 文件 | 内容 |
|
||
|----|------|------|
|
||
| 一、基础样式 | [01-基础样式.md](01-基础样式.md) | §1 色彩 · §2 字体 · §3 阴影 · §4 圆角 · §6 间距 · §20 语义状态色 |
|
||
| 二、按钮与表单 | [02-按钮与表单.md](02-按钮与表单.md) | §5 按钮 · §12 表单 · §13 输入框 · §14 选择按钮 · §15 标签输入框 · §16 上传 |
|
||
| 三、导航 | [03-导航.md](03-导航.md) | §7 导航组件 · §8 面包屑 · §9 页头与分页 · §10 步骤条 · §11 页签与锚点 |
|
||
| 四、数据展示 | [04-数据展示.md](04-数据展示.md) | §17 弹窗 · §18 卡片 · §19 折叠面板 · §21 进度条 · §22 表格 · §23 标签 · §24 时间轴 |
|
||
| 五、图表 | [05-图表.md](05-图表.md) | §25 图表（通用色序 / 柱 / 折线 / 甘特 / 饼环） |
|
||
| 六、页面与布局 | [06-页面与布局.md](06-页面与布局.md) | §26 统计与汇总卡 · §27 实体卡片 · §28 综合页面布局示例 |
|
||
|
||
## 章节速查（§ → 篇）
|
||
|
||
| § | 章节 | 所在篇 |
|
||
|---|------|--------|
|
||
| 1 | 色彩 | [一](01-基础样式.md) |
|
||
| 2 | 字体 | [一](01-基础样式.md) |
|
||
| 3 | 阴影 | [一](01-基础样式.md) |
|
||
| 4 | 圆角 | [一](01-基础样式.md) |
|
||
| 5 | 按钮 | [二](02-按钮与表单.md) |
|
||
| 6 | 间距 | [一](01-基础样式.md) |
|
||
| 7 | 导航组件 | [三](03-导航.md) |
|
||
| 8 | 面包屑 | [三](03-导航.md) |
|
||
| 9 | 页头与分页 | [三](03-导航.md) |
|
||
| 10 | 步骤条 | [三](03-导航.md) |
|
||
| 11 | 页签与锚点 | [三](03-导航.md) |
|
||
| 12 | 表单 | [二](02-按钮与表单.md) |
|
||
| 13 | 输入框 | [二](02-按钮与表单.md) |
|
||
| 14 | 选择按钮 | [二](02-按钮与表单.md) |
|
||
| 15 | 标签输入框 | [二](02-按钮与表单.md) |
|
||
| 16 | 上传 | [二](02-按钮与表单.md) |
|
||
| 17 | 弹出式窗口 | [四](04-数据展示.md) |
|
||
| 18 | 卡片 | [四](04-数据展示.md) |
|
||
| 19 | 折叠面板 | [四](04-数据展示.md) |
|
||
| 20 | 语义状态色 | [一](01-基础样式.md) |
|
||
| 21 | 进度条 | [四](04-数据展示.md) |
|
||
| 22 | 表格 | [四](04-数据展示.md) |
|
||
| 23 | 标签 | [四](04-数据展示.md) |
|
||
| 24 | 时间轴 | [四](04-数据展示.md) |
|
||
| 25 | 图表 | [五](05-图表.md) |
|
||
| 26 | 统计与汇总卡 | [六](06-页面与布局.md) |
|
||
| 27 | 实体卡片 | [六](06-页面与布局.md) |
|
||
| 28 | 综合页面布局示例 | [六](06-页面与布局.md) |
|
||
|
||
## 颜色速查
|
||
|
||
完整色板与编号见 [§1 色彩](01-基础样式.md)。最常用的功能色：
|
||
|
||
| 角色 | 色值 | 编号 |
|
||
|------|------|------|
|
||
| 主色 Primary | `#F5222D` | ZS-001-09 |
|
||
| 主色 Hover | `#CF1322` | ZS-001 |
|
||
| 主色 Active | `#A8071A` | ZS-001-11 |
|
||
| 链接 / 信息 | `#0079FE` | ZS-002-09 |
|
||
| 正文 | `#222222` | FS-004 |
|
||
| 次级文字 | `#575757` | FS-004-09 |
|
||
| 备注 / 占位 | `#A6A6A6` | FS-004-07 |
|
||
| 禁用文字 | `#C1C1C1` | FS-004-06 |
|
||
| 页面背景 | `#FAFAFA` | FS-004-02 |
|
||
| 容器背景 | `#FFFFFF` | FS-004-01 |
|
||
| 分割线 | `#E8E8E8` | FS-004-04 |
|
||
|
||
**语义状态色**（成功 / 警告 / 错误 / 信息 / 待更新 / 中性，详见 [§20](01-基础样式.md)）：
|
||
|
||
| 语义 | 文字 | 浅底 | 实填 |
|
||
|------|------|------|------|
|
||
| 成功（绿） | `#189D72` | `#EEFCF7` | `#2FD69A` |
|
||
| 警告（橙） | `#FF9900` | `#FFF6EA` | `#FF9900` |
|
||
| 错误（红） | `#F5222D` | `#FEEDED` | `#F5222D` |
|
||
| 信息（蓝） | `#0079FE` | `#EAF4FF` | `#0079FE` |
|
||
| 待更新（青） | `#45C3F3` | `#EFFAFE` | `#45C3F3` |
|
||
| 中性（灰） | `#7F7F7F` | `#F5F5F5` | `#A6A6A6` |
|
||
|
||
## 通用约定速记
|
||
|
||
- **圆角**：按钮 / 输入框 / Tag `2px`；卡片 / 分栏 / Modal `4px`（§4）
|
||
- **间距阶梯**：4 / 8 / 12 / 16（密）· 24 / 32 / 40 / 56（疏），16 是密的上限、24 是疏的下限（§6）
|
||
- **按钮尺寸**：小 `24px` / 正常 `32px`（§5.1）
|
||
- **字体**：中文 Noto Sans S Chinese，数字 D-DIN（§2）
|