miaobo/wechat_ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
wechat_ai/docs/src-ui-design-summary.md

12 KiB
Raw Blame History

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