# 页面设计方案总结（适合直接转 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 去实现，我建议把这份文档当作 **视觉与结构说明书**，不要把它当作前端工程迁移文档。