敏感词
This commit is contained in:
fengxiangdebaozi committed
1 parent
6396ccc701
commit
f472bba9f0
38 files changed
+540
-173
No files matched your search
@@ -0,0 +1,235 @@
|
||||
# 深蓝色 UI 规范
|
||||
|
||||
---
|
||||
|
||||
## 1. 色彩
|
||||
|
||||
### 1.1 标准色
|
||||
|
||||
色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.1 色系总览
|
||||
|
||||
| 色系 | 用途定位 | 代码前缀 |
|
||||
|------|----------|----------|
|
||||
| 渐红系 | 警示、错误、强调操作 | ZS-001 |
|
||||
| 渐蓝系 | 信息、链接、次级操作 | ZS-002 |
|
||||
| 渐青系 | 成功、在线状态、数据高亮 | ZS-003 |
|
||||
| 深蓝系 | 页面背景、容器、导航底色 | ZS-004 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.2 渐红系（ZS-001）
|
||||
|
||||
用于错误提示、危险操作、重要告警。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-001-01 | `#FFF1F0` | 极浅红，错误背景底色 |
|
||||
| ZS-001-02 | `#FFCCC7` | 浅红，输入框错误边框 |
|
||||
| ZS-001-03 | `#FFA39E` | — |
|
||||
| ZS-001-04 | `#FF7875` | — |
|
||||
| ZS-001-05 | `#FF4D4F` | 标准红，Tag / Badge |
|
||||
| ZS-001-06 | `#F5222D` | 主色红，按钮 / 图标 |
|
||||
| ZS-001-07 | `#CF1322` | 深红，Hover 状态 |
|
||||
| ZS-001-08 | `#A8071A` | 深红，Active / Press |
|
||||
| ZS-001-09 | `#820014` | 极深红 |
|
||||
| ZS-001-10 | `#5C0011` | 最深红 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.3 渐蓝系（ZS-002）
|
||||
|
||||
用于信息提示、链接、次级按钮。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-002-01 | `#E6F4FF` | 极浅蓝，信息背景底色 |
|
||||
| ZS-002-02 | `#BAE0FF` | 浅蓝 |
|
||||
| ZS-002-03 | `#91CAFF` | — |
|
||||
| ZS-002-04 | `#69B1FF` | — |
|
||||
| ZS-002-05 | `#4096FF` | 标准蓝，链接 / 信息 Tag |
|
||||
| ZS-002-06 | `#1677FF` | 主色蓝，主操作按钮 |
|
||||
| ZS-002-07 | `#0958D9` | 深蓝，Hover |
|
||||
| ZS-002-08 | `#003EB3` | 深蓝，Active |
|
||||
| ZS-002-09 | `#002C8C` | 极深蓝 |
|
||||
| ZS-002-10 | `#001D6C` | 最深蓝 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.4 渐青系（ZS-003）
|
||||
|
||||
用于成功状态、在线标识、数据图表高亮。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-003-01 | `#E6FFFB` | 极浅青，成功背景 |
|
||||
| ZS-003-02 | `#B5F5EC` | 浅青 |
|
||||
| ZS-003-03 | `#87E8DE` | — |
|
||||
| ZS-003-04 | `#5CDBD3` | — |
|
||||
| ZS-003-05 | `#36CFC9` | 标准青，成功 Tag |
|
||||
| ZS-003-06 | `#13C2C2` | 主色青，在线点 / 图标 |
|
||||
| ZS-003-07 | `#08979C` | 深青，Hover |
|
||||
| ZS-003-08 | `#006D75` | 深青，Active |
|
||||
| ZS-003-09 | `#00474F` | 极深青 |
|
||||
| ZS-003-10 | `#002329` | 最深青 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.5 深蓝系（ZS-004）
|
||||
|
||||
用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。
|
||||
|
||||
| 编号 | 色值 | 说明 |
|
||||
|------|------|------|
|
||||
| ZS-004-01 | `#E8EDF5` | 极浅，分割线 / 禁用底色 |
|
||||
| ZS-004-02 | `#C5CFE0` | 浅，边框 |
|
||||
| ZS-004-03 | `#9BADC8` | — |
|
||||
| ZS-004-04 | `#6E88B0` | — |
|
||||
| ZS-004-05 | `#4A6491` | 中深蓝，次级文字 |
|
||||
| ZS-004-06 | `#2D4473` | 深蓝，卡片容器背景 |
|
||||
| ZS-004-07 | `#1A2F5A` | 深蓝，侧边栏背景 |
|
||||
| ZS-004-08 | `#122347` | 深蓝，导航栏背景 |
|
||||
| ZS-004-09 | `#0C1836` | 极深蓝，页面背景 |
|
||||
| ZS-004-10 | `#060E24` | 最深，全局底色 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色）
|
||||
|
||||
从标准色系中提取，用于具体 UI 角色指定。
|
||||
|
||||
| 角色 | 色值 | 来源 |
|
||||
|------|------|------|
|
||||
| 主色（Primary） | `#1677FF` | ZS-002-06 |
|
||||
| 主色 Hover | `#0958D9` | ZS-002-07 |
|
||||
| 主色 Active | `#003EB3` | ZS-002-08 |
|
||||
| 正常字体色 | `#C5CFE0` | ZS-004-02 |
|
||||
| 次级字体色 | `#6E88B0` | ZS-004-04 |
|
||||
| 禁用字体色 | `#4A6491` | ZS-004-05 |
|
||||
| 辅色（Accent） | `#13C2C2` | ZS-003-06 |
|
||||
| 页面背景色 | `#0C1836` | ZS-004-09 |
|
||||
| 容器背景色 | `#1A2F5A` | ZS-004-07 |
|
||||
| 白色 | `#FFFFFF` | — |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.7 小面积装饰色
|
||||
|
||||
用于图标点缀、徽标、少量强调，不用于大面积背景。
|
||||
|
||||
| 色值 | 说明 |
|
||||
|------|------|
|
||||
| `#6388FF` | 紫蓝，图标装饰 |
|
||||
| `#F5222D` | 红色，危险徽标 |
|
||||
| `#12306C` | 深蓝，品牌点缀 |
|
||||
| `#478880` | 青绿，辅助点缀 |
|
||||
| `#950404` | 深红，重要告警点 |
|
||||
|
||||
---
|
||||
|
||||
#### 1.1.8 图表配色
|
||||
|
||||
**通用图表色序**（面积较大，如柱状图、折线图、饼图）：
|
||||
|
||||
| 序号 | 色值 |
|
||||
|------|------|
|
||||
| 1 | `#1677FF` |
|
||||
| 2 | `#13C2C2` |
|
||||
| 3 | `#4096FF` |
|
||||
| 4 | `#36CFC9` |
|
||||
| 5 | `#69B1FF` |
|
||||
| 6 | `#5CDBD3` |
|
||||
| 7 | `#91CAFF` |
|
||||
| 8 | `#87E8DE` |
|
||||
|
||||
**小面积图表色序**（面积较小，如散点、小徽章、迷你图）：
|
||||
|
||||
| 序号 | 色值 |
|
||||
|------|------|
|
||||
| 1 | `#4096FF` |
|
||||
| 2 | `#36CFC9` |
|
||||
| 3 | `#FF4D4F` |
|
||||
| 4 | `#FFA39E` |
|
||||
| 5 | `#6388FF` |
|
||||
| 6 | `#478880` |
|
||||
|
||||
---
|
||||
|
||||
## 2. 字体
|
||||
|
||||
### 2.1 全局样式 - 字体
|
||||
|
||||
---
|
||||
|
||||
#### 2.1.1 大屏页面字体规范
|
||||
|
||||
##### 中文字体：Noto Sans S Chinese
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 24px Bold | 一级标题 |
|
||||
| 24px Medium | 次要一级标题 |
|
||||
| 22px Medium | 二级标题 |
|
||||
| 22px Regular | 正文 |
|
||||
| 20px Regular | 排版空间有限的正文 |
|
||||
|
||||
##### 数字字体：D-DIN
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 32px Bold | 重要数据展示 |
|
||||
| 32px Regular | 普通数据展示 |
|
||||
| 26px Bold | 常规数据展示 |
|
||||
| 26px Regular | 常规数据展示 |
|
||||
|
||||
##### 特殊数字：DS-Digital
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 50px Bold | 大屏主数据展示 |
|
||||
|
||||
##### 表格字体：Arial
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 20px Regular | 表格横纵轴数字 |
|
||||
|
||||
---
|
||||
|
||||
#### 2.1.2 后台系统字体规范
|
||||
|
||||
##### 中文字体：Noto Sans S Chinese
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 18px Bold | 导航、一级标题 |
|
||||
| 18px Medium | 次要一级标题 |
|
||||
| 16px Bold | 二级标题 |
|
||||
| 16px Medium | 次要二级标题 |
|
||||
| 16px Regular | 正文、按钮内部文字等 |
|
||||
| 16px Light | 次要正文 |
|
||||
|
||||
##### 数字字体：D-DIN
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 26px Bold | 重要数据展示 |
|
||||
| 26px Regular | 普通数据展示 |
|
||||
| 24px Bold | 常规数据展示（小） |
|
||||
| 24px Regular | 常规数据展示（小） |
|
||||
|
||||
##### LOGO 字体：DOUYUFont
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 20px 文字样式 | 页面顶部系统名称 |
|
||||
|
||||
##### 表格数字：Arial
|
||||
|
||||
| 样式 | 使用场景 |
|
||||
|------|----------|
|
||||
| 16px Regular | 表格横纵轴数字 |
|
||||
| 14px Regular | 表格横轴数字（空间有限） |
|
||||
Reference in new issue
Block a user