95 lines
2.4 KiB
Markdown
95 lines
2.4 KiB
Markdown
# 产品视觉设计说明
|
||
|
||
## 设计目标
|
||
|
||
本系统是一套证书管理和公开查询产品，视觉上应当清爽、可信、便于长期办公使用。后台页面优先保证信息密度、扫描效率和操作稳定感；公开查询页优先保证用户能快速完成查询、预览和下载。
|
||
|
||
## 设计方向
|
||
|
||
- 不做营销式首页。
|
||
- 不做重装饰背景。
|
||
- 不使用沉重深色大面积背景。
|
||
- 不使用老气的灰褐色或暗沉配色。
|
||
- 使用浅色背景、白色工作区、克制青绿色主色。
|
||
- 通过边框、间距、字体粗细和轻微阴影建立层级。
|
||
|
||
## 颜色
|
||
|
||
主色：
|
||
|
||
```text
|
||
#16817e
|
||
```
|
||
|
||
用于：
|
||
|
||
- 主按钮。
|
||
- 激活导航。
|
||
- 有效状态。
|
||
- 链接。
|
||
|
||
背景：
|
||
|
||
```text
|
||
#f7fafb -> #eef4f6
|
||
```
|
||
|
||
用于页面底色，保持清爽但不纯白刺眼。
|
||
|
||
边框：
|
||
|
||
```text
|
||
#dbe6ea
|
||
#c8d7dd
|
||
```
|
||
|
||
用于卡片、输入框、表格边界。
|
||
|
||
文字：
|
||
|
||
```text
|
||
#172033 主文字
|
||
#64748b 次级文字
|
||
```
|
||
|
||
风险色：
|
||
|
||
```text
|
||
#c9413a 高风险/危险操作
|
||
#b7791f 中风险/警告
|
||
```
|
||
|
||
## 后台布局
|
||
|
||
- 左侧导航固定 248px。
|
||
- 工作区使用 28px 页面内边距。
|
||
- 页面标题区采用左标题、右主操作按钮布局。
|
||
- 表单区域和列表区域分成独立白色面板。
|
||
- 卡片圆角控制在 10px 左右，不使用过大的圆角。
|
||
- 分页右对齐，符合后台数据列表习惯。
|
||
|
||
## 公开查询页
|
||
|
||
- 查询卡片是第一屏核心。
|
||
- 不放多余介绍文字。
|
||
- 查询方式使用分段选择。
|
||
- 查询结果使用证书卡片展示。
|
||
- 结果卡保留证书编号、姓名、项目、课程/阶段、发证日期、发证单位。
|
||
- 预览和下载按钮放在卡片右下方。
|
||
|
||
## 表格和控件
|
||
|
||
- 表头使用浅灰蓝背景。
|
||
- 表格 hover 只做轻微背景变化。
|
||
- 输入框和下拉框高度统一。
|
||
- 下拉框箭头不得贴边。
|
||
- 主要按钮使用青绿色，危险按钮使用红色。
|
||
- 状态标签使用圆角胶囊，但尺寸克制。
|
||
|
||
## 自行决策记录
|
||
|
||
- 选择青绿色作为主色，因为它比蓝色更接近当前证书产品的清爽和可信气质，也不会显得像通用后台模板。
|
||
- 没有加入大面积插画、渐变装饰或复杂动效，避免影响后台扫描效率。
|
||
- 正式版新增全局 `design.css`，统一 Element Plus 控件和通用布局。
|
||
- 本地验证版同步更新内联 CSS，保证本地验收看到的视觉方向与正式版一致。
|