624 lines
12 KiB
Markdown
624 lines
12 KiB
Markdown
# 页面设计方案总结（适合直接转 HTML + CSS）
|
||
|
||
本文只保留可直接迁移到 **纯 HTML + CSS** 的内容：
|
||
|
||
- 配色方案
|
||
- 布局方案
|
||
- 页面关系
|
||
- 组件关系
|
||
- 常用视觉模块
|
||
- 页面复刻建议
|
||
|
||
目标：你可以把它当成一份视觉与结构设计说明，在别的目录下直接手写 HTML + CSS 实现。
|
||
|
||
---
|
||
|
||
## 1. 整体设计气质
|
||
|
||
这套界面的核心气质是：
|
||
|
||
- **桌面端工具型产品**
|
||
- **微信绿色主品牌色**
|
||
- **大圆角卡片化布局**
|
||
- **顶部毛玻璃 / 半透明工具栏**
|
||
- **浅层次背景，不走厚重拟物**
|
||
- **深浅双主题**
|
||
- **日志、状态、工作台等模块有明显的功能分区**
|
||
|
||
更适合的产品类型：
|
||
|
||
- AI 助手桌面端
|
||
- 本地工作台
|
||
- 控制台 / 监控台
|
||
- 多模块业务工具
|
||
- 轻后台但不是传统表格后台
|
||
|
||
一句话概括：
|
||
|
||
> 微信绿色品牌风格 + 桌面端工作台布局 + 卡片化轻玻璃界面。
|
||
|
||
---
|
||
|
||
## 2. 配色方案
|
||
|
||
### 2.1 Light 主题主色板
|
||
|
||
| 语义 | 色值 | 用途 |
|
||
|---|---:|---|
|
||
| 页面背景 | `#f7f8f7` | 最外层大背景 |
|
||
| 页面白底 | `#ffffff` | 主内容区域 / 卡片主底 |
|
||
| 次级表面 | `#f2f5f3` | 次级块、顶部条、浅灰面 |
|
||
| 主文字 | `#151716` | 标题、正文 |
|
||
| 次文字 | `#66716c` | 说明、描述 |
|
||
| 弱文字 | `#909a95` | 辅助信息、占位 |
|
||
| 分隔线 | `#dde4df` | 卡片边线、容器边线 |
|
||
| 强分隔线 | `#cad5cf` | 输入框边线等更强调场景 |
|
||
| 主品牌色 | `#07c160` | 主按钮、选中态、关键状态 |
|
||
| 主品牌高亮 | `#10d978` | 渐变高光 / 装饰层 |
|
||
| 主品牌浅底 | `#e6f7ee` | 选中背景、绿色浅底 |
|
||
| 次主品牌浅底 | `#f1fbf6` | 更轻的绿色背景 |
|
||
| 强调蓝 | `#2d8cff` | 辅助强调、截图框、信息辅助 |
|
||
| 警告橙 | `#fa8c16` | 版本、警告状态 |
|
||
| 错误红 | `#f5222d` | 停用、错误、危险操作 |
|
||
|
||
### 2.2 Dark 主题主色板
|
||
|
||
| 语义 | 色值 | 用途 |
|
||
|---|---:|---|
|
||
| 页面背景 | `#090d0b` | 深色底 |
|
||
| 页面主底 | `#0d1110` | 应用主底 |
|
||
| 一级表面 | `#121817` | 卡片 |
|
||
| 二级表面 | `#18211e` | 顶栏、次级分块 |
|
||
| 主文字 | `#f4f7f5` | 主要标题 / 内容 |
|
||
| 次文字 | `#aab5af` | 说明文本 |
|
||
| 弱文字 | `#7f8c85` | 辅助信息 |
|
||
| 分隔线 | `#24302b` | 轻边线 |
|
||
| 强分隔线 | `#34423c` | 强边线 |
|
||
| 主品牌色 | `#07c160` | 不变，保持品牌识别 |
|
||
| 主品牌高亮 | `#0ed46e` | 深色模式高亮层 |
|
||
| 主品牌浅底 | `#0d2a1b` | 深色下选中底 |
|
||
| 次主品牌浅底 | `#10251a` | 更弱的绿色底 |
|
||
| 强调蓝 | `#2d8cff` | 信息强调 |
|
||
| 警告橙 | `#fa8c16` | 警告 |
|
||
| 错误红 | `#ff4d4f` | 错误 |
|
||
|
||
### 2.3 配色使用原则
|
||
|
||
1. **绿色只给主动作和主状态**
|
||
- 主按钮
|
||
- 选中状态
|
||
- 正向结果
|
||
- 关键进度
|
||
|
||
2. **蓝色做辅助强调，不抢主色**
|
||
- 辅助信息
|
||
- 说明型标注
|
||
- 选区边框 / overlay
|
||
|
||
3. **橙色用于版本号、警告、待处理**
|
||
|
||
4. **红色只用于停用、错误、危险动作**
|
||
|
||
5. **背景层次通过 page / surface / surface-2 完成，不要随便加很多新灰色**
|
||
|
||
---
|
||
|
||
## 3. 圆角、边框、阴影规则
|
||
|
||
### 3.1 圆角体系
|
||
|
||
当前设计里圆角偏大，建议统一：
|
||
|
||
| 场景 | 推荐圆角 |
|
||
|---|---:|
|
||
| 主窗口外壳 | `12px` |
|
||
| 通用卡片 panel | `18px` |
|
||
| 次级块 / 输入 / 小面板 | `8px` ~ `14px` |
|
||
| 胶囊按钮 / 主按钮 | `999px`（全圆） |
|
||
| 状态标签 / Tag | `999px`（全圆） |
|
||
| 浮动按钮 FAB | `999px`（全圆） |
|
||
|
||
整体风格偏“柔和圆角”，不是锐角矩形。
|
||
|
||
### 3.2 边框规则
|
||
|
||
- 卡片、列表项、输入框、标签大多都有一层轻边线
|
||
- 边框颜色不重，强调的是结构层次，不是视觉攻击性
|
||
- 建议所有卡片默认带边框，而不是全靠阴影分层
|
||
|
||
### 3.3 阴影规则
|
||
|
||
主要阴影偏柔和、大范围扩散：
|
||
|
||
- 通用 panel：轻投影
|
||
- 主按钮：带绿色发光感阴影
|
||
- 主视觉球体 / 引擎区域：更明显的大阴影
|
||
- 不建议到处堆重阴影
|
||
|
||
设计原则：
|
||
|
||
> 阴影是辅助层次，不是主视觉主角。
|
||
|
||
---
|
||
|
||
## 4. 背景与材质方案
|
||
|
||
### 4.1 主壳背景
|
||
|
||
主壳不是纯白/纯黑背景，而是：
|
||
|
||
- 多层 radial gradient
|
||
- 少量品牌色气氛染色
|
||
- 再叠一层半透明 page 背景
|
||
|
||
也就是说，窗口背景应该有一点品牌感，不要做成“普通表单系统”。
|
||
|
||
### 4.2 毛玻璃顶栏
|
||
|
||
顶部条采用：
|
||
|
||
- 半透明渐变背景
|
||
- 模糊滤镜 `blur`
|
||
- 饱和度增强
|
||
- 轻阴影
|
||
|
||
适合作为：
|
||
|
||
- 顶部标题栏
|
||
- 轻工具栏
|
||
- 分页工具条
|
||
|
||
### 4.3 终端面板材质
|
||
|
||
日志区和终端区单独走暗色质感：
|
||
|
||
- 深色渐变背景
|
||
- 终端字体配色
|
||
- 信息等级分色
|
||
|
||
这类模块和普通卡片要明确区分，不能混成一个系统。
|
||
|
||
---
|
||
|
||
## 5. 页面布局方案
|
||
|
||
### 5.1 主窗口布局
|
||
|
||
主窗口统一结构：
|
||
|
||
1. 顶部工具栏 / 标题栏
|
||
2. 中间主内容区
|
||
3. 底部 Tab 导航
|
||
|
||
这是一个典型的 **桌面应用壳层布局**。
|
||
|
||
适合任何多模块产品。
|
||
|
||
### 5.2 首页 / 主操作台布局
|
||
|
||
首页采用“中心主控 + 操作按钮 + 底部日志”的结构：
|
||
|
||
1. 顶部状态胶囊
|
||
2. 中部大视觉中心（引擎球体）
|
||
3. 主操作按钮组
|
||
4. 次操作入口（如设置）
|
||
5. 下方功能卡片（如标注入口）
|
||
6. 底部日志面板
|
||
|
||
这种布局适合：
|
||
|
||
- 有“启动 / 停止”主动作的产品
|
||
- 有设备 / 引擎 / Agent 状态的产品
|
||
|
||
### 5.3 列表页布局
|
||
|
||
知识库页、技能页是同一种布局模板：
|
||
|
||
1. 顶部筛选条（Segmented）
|
||
2. 中间卡片列表
|
||
3. 右下角浮动新增按钮（FAB）
|
||
|
||
特点：
|
||
|
||
- 不使用复杂表格
|
||
- 每项信息控制在 2~3 层
|
||
- 点击卡片进入详情
|
||
- 新增入口悬浮在底部右侧
|
||
|
||
### 5.4 流程页布局
|
||
|
||
蒸馏页采用：
|
||
|
||
1. 顶部说明 + 主行动按钮
|
||
2. 中部进度卡
|
||
3. 底部结果列表
|
||
|
||
这是标准的 **“说明 → 行动 → 进度 → 结果”** 布局。
|
||
|
||
适合：
|
||
|
||
- 创建流程
|
||
- 训练流程
|
||
- 导入流程
|
||
- 任务构建流程
|
||
|
||
### 5.5 设置中心布局
|
||
|
||
设置页采用桌面端标准的 **左导航 + 右内容** 布局：
|
||
|
||
- 左侧：设置分类
|
||
- 右侧：当前分类详情编辑
|
||
|
||
适用于：
|
||
|
||
- 系统设置
|
||
- AI 参数配置
|
||
- 权限开关中心
|
||
- 模型、提示词、功能项管理
|
||
|
||
### 5.6 工作台布局
|
||
|
||
工作台是双栏结构：
|
||
|
||
- 左边：实时画面 / 监控画面 / 预览
|
||
- 右边：分析结果 / 建议回复 / 问答区
|
||
|
||
这是典型的 **“实时输入 + 解释输出”** 布局，特别适合 AI 工作台。
|
||
|
||
### 5.7 工具页布局
|
||
|
||
标注页是非常标准的工具布局：
|
||
|
||
- 左侧：属性检查器（Inspector）
|
||
- 右侧：大画布 / 工作区
|
||
|
||
左侧包括：
|
||
|
||
- 当前对象属性
|
||
- 名称、类型、描述编辑
|
||
- 区域列表
|
||
- 操作按钮
|
||
|
||
右侧包括：
|
||
|
||
- 截图 / 画布
|
||
- 框选操作
|
||
- 可视化 overlay
|
||
|
||
这套方案可以复用到任何：
|
||
|
||
- 标注工具
|
||
- 可视化编辑器
|
||
- 区域配置工具
|
||
- 低复杂度设计器
|
||
|
||
---
|
||
|
||
## 6. 组件关系总结
|
||
|
||
下面不是代码依赖，而是视觉和结构依赖关系。
|
||
|
||
### 6.1 壳层组件关系
|
||
|
||
#### 顶栏（Title Bar）
|
||
|
||
包含：
|
||
|
||
- 页面标题
|
||
- 主题切换按钮
|
||
- 主壳动作按钮 / 或关闭按钮
|
||
|
||
适合作为所有页面的统一头部。
|
||
|
||
#### 底部 Tab
|
||
|
||
包含：
|
||
|
||
- 图标容器
|
||
- 文案
|
||
- 当前高亮态
|
||
|
||
用于一级功能切换。
|
||
|
||
### 6.2 卡片关系
|
||
|
||
页面的大多数块都应该统一抽象成“卡片”：
|
||
|
||
- 信息卡
|
||
- 列表卡
|
||
- 配置卡
|
||
- 进度卡
|
||
- 说明卡
|
||
- 预览卡
|
||
|
||
卡片关系原则：
|
||
|
||
- 所有大模块先做卡片
|
||
- 卡片内部再分标题、正文、操作
|
||
- 不要直接把一堆内容裸铺在页面上
|
||
|
||
### 6.3 按钮关系
|
||
|
||
按钮建议分层：
|
||
|
||
#### 主按钮
|
||
|
||
- 绿色
|
||
- 全圆角
|
||
- 高权重文字
|
||
- 带轻微绿色阴影
|
||
|
||
用途：
|
||
|
||
- 启动
|
||
- 保存
|
||
- 开始
|
||
- 新建主流程
|
||
|
||
#### 次按钮
|
||
|
||
- 白底或 surface 底
|
||
- 细边框
|
||
- 文字较稳重
|
||
|
||
用途：
|
||
|
||
- 教程
|
||
- 取消
|
||
- 普通动作
|
||
|
||
#### 危险按钮
|
||
|
||
- 红色
|
||
- 只用于停用 / 删除 / 风险动作
|
||
|
||
#### 悬浮按钮 FAB
|
||
|
||
- 绿色圆形浮动
|
||
- 放在右下角
|
||
- 用于新增类动作
|
||
|
||
### 6.4 状态关系
|
||
|
||
建议统一使用胶囊或轻文本状态：
|
||
|
||
- success：绿色
|
||
- warning：橙色
|
||
- muted：灰色
|
||
|
||
适用于：
|
||
|
||
- 启用 / 未启用
|
||
- 已生效 / 未生效 / 已停用
|
||
- 在线 / 待启动 / 异常
|
||
|
||
### 6.5 表单关系
|
||
|
||
设置和编辑类页面的基础表单元素建议统一为：
|
||
|
||
- `label + input`
|
||
- `label + textarea`
|
||
- `label + switch`
|
||
- `section title + desc`
|
||
|
||
这样所有设置页会保持一致的阅读节奏。
|
||
|
||
### 6.6 日志关系
|
||
|
||
日志模块不应该长得像普通卡片，而应该独立成“终端视觉”：
|
||
|
||
- 深色背景
|
||
- 等宽字体
|
||
- 彩色日志等级
|
||
- 自动滚动
|
||
- 空态提示
|
||
|
||
这样能快速把“系统输出”与“业务内容”分开。
|
||
|
||
---
|
||
|
||
## 7. 常用视觉模块清单
|
||
|
||
如果你要纯 HTML + CSS 实现，建议优先复刻这些视觉模块。
|
||
|
||
### 7.1 顶栏模块
|
||
|
||
元素：
|
||
|
||
- 标题
|
||
- 主题切换按钮
|
||
- 行为按钮组 / 关闭按钮
|
||
|
||
### 7.2 底部导航模块
|
||
|
||
元素：
|
||
|
||
- 4 个 Tab
|
||
- 图标容器
|
||
- 文案
|
||
- 当前态高亮
|
||
|
||
### 7.3 主按钮模块
|
||
|
||
元素：
|
||
|
||
- 图标（可选）
|
||
- 主要文案
|
||
- 大圆角
|
||
- 绿色底
|
||
|
||
### 7.4 卡片列表模块
|
||
|
||
元素：
|
||
|
||
- 标题
|
||
- 描述 / 时间 / 次要信息
|
||
- 状态 / 版本 / 标签
|
||
- 整项可点击
|
||
|
||
### 7.5 分段筛选模块
|
||
|
||
元素：
|
||
|
||
- 一组横向选项
|
||
- 当前项主色高亮
|
||
- 未选中项弱化
|
||
|
||
### 7.6 设置面板模块
|
||
|
||
元素：
|
||
|
||
- 左导航
|
||
- 右详情
|
||
- 输入框
|
||
- 文本域
|
||
- 开关行
|
||
- 保存按钮
|
||
|
||
### 7.7 工作台模块
|
||
|
||
元素：
|
||
|
||
- 实时预览区域
|
||
- 状态角标
|
||
- 信息流 / 聊天记录
|
||
- 建议输出区
|
||
- 输入问答区
|
||
|
||
### 7.8 工具画布模块
|
||
|
||
元素：
|
||
|
||
- 左侧属性面板
|
||
- 右侧大画布
|
||
- 区域列表
|
||
- 描述编辑
|
||
- 保存 / 取消
|
||
|
||
---
|
||
|
||
## 8. 页面之间的关系
|
||
|
||
从设计角度，当前页面关系可以概括为：
|
||
|
||
### 一级入口层
|
||
|
||
- 微信分身
|
||
- 知识库
|
||
- skill 市场
|
||
- 员工蒸馏
|
||
|
||
这 4 个是底部一级导航。
|
||
|
||
### 二级功能层
|
||
|
||
从一级页进入二级窗口：
|
||
|
||
- 设置
|
||
- 工作台
|
||
- 日志
|
||
- 详情
|
||
- 新建页
|
||
- Demo 页
|
||
|
||
所以页面层级关系是：
|
||
|
||
> 主壳首页负责聚合入口，二级窗口负责展开具体任务。
|
||
|
||
### 工具专用层
|
||
|
||
- 标注页
|
||
- 标注 Demo 页
|
||
|
||
这一层偏“专业工具界面”，应和普通列表页明显区分。
|
||
|
||
---
|
||
|
||
## 9. 纯 HTML + CSS 复刻建议
|
||
|
||
这里只给视觉实现建议，不涉及框架。
|
||
|
||
### 9.1 先做变量，不要先写页面
|
||
|
||
建议先把这些变量建立起来：
|
||
|
||
- 页面背景色
|
||
- 表面层级色
|
||
- 文字层级色
|
||
- 边框色
|
||
- 主品牌色
|
||
- 警告色
|
||
- 错误色
|
||
- 阴影变量
|
||
- 圆角变量
|
||
|
||
这样你后面全部页面都能复用。
|
||
|
||
### 9.2 先做 8 个通用模块
|
||
|
||
先做完这些基础模块，再拼页面：
|
||
|
||
1. 顶栏
|
||
2. 底部导航
|
||
3. 卡片 panel
|
||
4. 主按钮 / 次按钮 / 危险按钮
|
||
5. 状态胶囊
|
||
6. 标签 tag
|
||
7. 分段筛选
|
||
8. 终端日志面板
|
||
|
||
### 9.3 再拼页面，而不是反过来
|
||
|
||
推荐顺序：
|
||
|
||
1. 主壳布局
|
||
2. 首页主操作页
|
||
3. 列表页模板
|
||
4. 设置页模板
|
||
5. 工作台模板
|
||
6. 工具页模板
|
||
|
||
### 9.4 不要破坏统一关系
|
||
|
||
如果你用 HTML + CSS 重写，最重要的是保留：
|
||
|
||
- 颜色关系
|
||
- 卡片体系
|
||
- 顶栏风格
|
||
- 按钮分级
|
||
- 页面层次
|
||
- 列表页模板一致性
|
||
- 终端区与普通区的明显区分
|
||
|
||
而不是逐字逐句复刻某个 JSX 页面。
|
||
|
||
---
|
||
|
||
## 10. 最应该保留的内容
|
||
|
||
如果只保留设计语言，优先保留这几项：
|
||
|
||
1. **微信绿色主品牌色体系**
|
||
2. **卡片化布局**
|
||
3. **顶部毛玻璃工具栏**
|
||
4. **底部 Tab 主壳结构**
|
||
5. **列表页：筛选 + 卡片 + FAB**
|
||
6. **设置页：左导航 + 右编辑**
|
||
7. **工作台：左监控 + 右结果**
|
||
8. **工具页：左属性 + 右画布**
|
||
9. **深浅主题变量体系**
|
||
10. **终端日志模块的独立视觉风格**
|
||
|
||
---
|
||
|
||
## 11. 一句话总结
|
||
|
||
这套设计最适合被抽象成一套 **桌面端 AI 工作台视觉规范**：
|
||
|
||
- 主色是微信绿
|
||
- 结构是桌面工具壳
|
||
- 内容是卡片化分区
|
||
- 交互是主按钮 + 分段筛选 + 浮动入口 + 日志面板
|
||
- 页面模板清晰分成：首页、列表页、设置页、工作台、工具页、二级详情页
|
||
|
||
如果你接下来要用纯 HTML + CSS 去实现，我建议把这份文档当作 **视觉与结构说明书**，不要把它当作前端工程迁移文档。 |