certificate-system/docs/产品视觉设计说明.md

产品视觉设计说明

设计目标

本系统是一套证书管理和公开查询产品，视觉上应当清爽、可信、便于长期办公使用。后台页面优先保证信息密度、扫描效率和操作稳定感；公开查询页优先保证用户能快速完成查询、预览和下载。

设计方向

• 不做营销式首页。
• 不做重装饰背景。
• 不使用沉重深色大面积背景。
• 不使用老气的灰褐色或暗沉配色。
• 使用浅色背景、白色工作区、克制青绿色主色。
• 通过边框、间距、字体粗细和轻微阴影建立层级。

颜色

主色：

#16817e

用于：

• 主按钮。
• 激活导航。
• 有效状态。
• 链接。

背景：

#f7fafb -> #eef4f6

用于页面底色，保持清爽但不纯白刺眼。

边框：

#dbe6ea
#c8d7dd

用于卡片、输入框、表格边界。

文字：

#172033 主文字
#64748b 次级文字

风险色：

#c9413a 高风险/危险操作
#b7791f 中风险/警告

后台布局

• 左侧导航固定 248px。
• 工作区使用 28px 页面内边距。
• 页面标题区采用左标题、右主操作按钮布局。
• 表单区域和列表区域分成独立白色面板。
• 卡片圆角控制在 10px 左右，不使用过大的圆角。
• 分页右对齐，符合后台数据列表习惯。

公开查询页

• 查询卡片是第一屏核心。
• 不放多余介绍文字。
• 查询方式使用分段选择。
• 查询结果使用证书卡片展示。
• 结果卡保留证书编号、姓名、项目、课程/阶段、发证日期、发证单位。
• 预览和下载按钮放在卡片右下方。

表格和控件

• 表头使用浅灰蓝背景。
• 表格 hover 只做轻微背景变化。
• 输入框和下拉框高度统一。
• 下拉框箭头不得贴边。
• 主要按钮使用青绿色，危险按钮使用红色。
• 状态标签使用圆角胶囊，但尺寸克制。

自行决策记录

• 选择青绿色作为主色，因为它比蓝色更接近当前证书产品的清爽和可信气质，也不会显得像通用后台模板。
• 没有加入大面积插画、渐变装饰或复杂动效，避免影响后台扫描效率。
• 正式版新增全局 design.css，统一 Element Plus 控件和通用布局。
• 本地验证版同步更新内联 CSS，保证本地验收看到的视觉方向与正式版一致。