WorkBuddy · 原型设计 / Prototype v1.0

运维数字员工小程序 · 原型 & UI 设计

基于 Web 端「智能运维数字员工管理平台」统一视觉语言，迁移至移动端小程序，包含登录、首页选择、员工/团队浏览、会话、个人中心 6 大核心页面。设计语言延续科技蓝渐变 + 玻璃拟态 + 圆角卡片，适配 375×812 mini-program 设计稿规范。

iOS / Android WeChat MP CNBM Design Tech Blue Glassmorphism

① 登录流程 Login & Auth

进入小程序的第一道门槛，承接 Web 登录视觉
16:40●●●●5G100%
登录页
科技蓝沉浸式 hero + 账号密码登录 + 安全加密标识

② 首页 - 员工 / 团队入口 Home

登录后第一屏，快速进入对话或选择数字员工 / 团队
16:40●●●●5G100%
运维数字员工
下午好，

张同学 👋

快速对话

查看全部
选择员工
12 位可用
选择团队
4 个组队
新建会话
临时任务
历史记录
28 条

最近对话

查看全部 ›
故
故障诊断专家 在线
已检测到主机 CPU 异常波动，建议立即排查…
12 分钟前
3
团
运维协同小组 团队
@张同学 生产环境告警已升级至 P1，请尽快…
1 小时前
1
日
日志分析助手 在线
最新日报已生成，请点击查看今日运维摘要…
昨天
巡
服务器巡检员 空闲
磁盘空间风险预警：logs 占用已达 92%…
昨天
K
K8s 运维管家 团队
集群自动扩缩容策略已更新
2 天前
首页
对话
员工
团队
我的
首页 - 快速选择
问候语 + 四宫格快捷入口 + 最近对话列表
16:40●●●●5G100%
员工市场

选择数字员工开始对话

已收录 12 位员工 · 5 大运维领域
搜索名称、能力或关键词
全部
运维管理
数据分析
IT 运维
更多
故障诊断专家
#fault #ops
智能分析告警日志，定位根因并给出修复建议，覆盖 12 类故障场景。
故障分析
日志
在线
开始会话
日志分析助手
#logs #search
秒级检索海量日志，自动提取关键事件，生成可解释的异常模式报告。
日志
检索
在线
开始会话
服务器巡检员
#monitor
7×24 实时巡检 CPU / 内存 / 磁盘，异常立即告警并附处置建议。
监控
巡检
在线
开始会话
K8s 运维管家
#k8s #cloud
支持集群自动扩缩容、镜像更新、节点调度等日常操作。
K8s
云原生
在线
开始会话
发布助手
#deploy
标准化发布流程：审批 / 灰度 / 回滚一键搞定。
发布
运维
在线
开始会话
配置告警员
#alert-config
自定义配置告警规则、自定义设置告警阈值、查询告警历史。
告警配置
其它
●可用
开始会话
首页
对话
员工
团队
我的
员工市场
按运维领域分类筛选员工卡片，点击进入对话
16:40●●●●5G100%
团队空间

让专业的 AI 员工组成团队

按场景灵活组队 · 智能分工 · 协同执行
团队总数
4
运行中
2
今日任务
186
协作成功率
96.8%
全部 · 4
运行中 · 2
已暂停 · 2
生产故障应急小组 运行中
故障诊断 + 日志分析 + 巡检
28
已处理
98%
成功率
2.3min
平均响应
故
日
巡
+2
进入对话
变更发布专班 运行中
配置告警 + 发布 + 巡检
126
本周发布
100%
回滚率 0
4.1min
平均耗时
配
发
巡
进入对话
运维数据分析组 已暂停
日志 + 故障 + 性能分析
14
报表数
9 份
日报
5 份
周报
日
性
查看详情
云原生敏捷小组 已暂停
K8s + 巡检 + 发布
7
集群
24
节点
0
故障
K
巡
发
查看详情
首页
对话
员工
团队
我的
团队空间
显示团队统计、4 个团队卡片及成员头像

③ 对话页 & 个人中心 Chat & Profile

实际对话交互页面 + 用户个人中心
16:40●●●●5G100%
故障诊断专家
在线 · 平均响应 1.2s
帮我排查告警
查看今日日报
最近故障
系统巡检
运维数字员工 · 智能协作
你好，我是故障诊断专家 🤖。今天需要我帮你处理什么？
张
线上 prod-003 主机持续告警，帮我看看
prod-003 健康概览 · 实时
68%
CPU
82%
内存
92%
磁盘
CPU
68%
MEM
82%
DISK
92%
清理磁盘
重启服务
查看日志
张
先清理磁盘吧，安全吗？
✅ 已为你筛选出 4 类可清理项（14.2 GB），不影响核心业务。需要我现在执行吗？
向 故障诊断专家 提问…
首页
对话
员工
团队
我的
员工对话页
顶部能力标签 + 富文本气泡 + 卡片化操作建议
16:40●●●●5G100%
我的
张
张同学
运维工程师 · 集团总部
⭐ Lv.4 高级用户

本月数字员工使用

2026 年 8 月 · 累计使用
156
会话数
1,245
任务数
23.6
工作时长
96.8%
成功率
我的消息
3 条未读
›
关注的员工
6 位
›
我的团队
2 个
›
账号安全
已开启
›

能力概览

任务数据
本周排行
技能成长
我的订单

最近活动

查看更多 ›
与「故障诊断专家」完成 1 次会话
2 分钟前
新建团队「生产故障应急小组」
1 小时前
关注了员工「K8s 运维管家」
昨天
首页
对话
员工
团队
我的
个人中心
用户信息 + 数据卡 + 菜单 + 能力概览 + 最近活动

④ 设计说明 Design Notes

视觉语言 · 继承 Web 设计 Token

整体延续 Web 端「智能运维数字员工管理平台」的科技蓝基调，按移动端规范重新布局。

  • 主色：品牌蓝渐变 #0F2F6B → #1A4DA8 → #2768FF，强调色 #2768FF
  • 辅助色：成功 #1A8245、警告 #C25A1B、危险 #C81E1E，与 Web 端语义保持一致
  • 字号：Title 17px / Body 13-14px / Caption 11-12px，遵循 mini-program 设计规范
  • 圆角：卡片 14px，按钮 / 标签 999px，输入框 12px，统一圆角节奏
  • 状态栏预留：所有页面头部 padding-top 预留 44px（状态栏高度），避免内容被状态栏遮挡
  • TabBar 五入口：「首页 / 对话 / 员工 / 团队 / 我的」，对话图标采用微信风格双气泡
  • 登录入口：科技蓝沉浸式 hero（网格 + 粒子 + 电路线），Logo 与系统名同一行，机器人 IP 带辉光，仅保留账号密码登录，底部银行级加密标识 + 版权信息
  • 员工 / 团队选择：员工 tab 和团队 tab 分别独立，员工卡片化展示 + 能力标签快速识别

后续交接建议

  • 确认设计风格 / 配色 / 文案后，可一键生成 Figma / Sketch / 蓝湖 设计交付稿
  • 基于本原型可拆解前端任务：登录模块、首页、员工、团队、会话、个人中心
  • 如需补充页面（如：员工详情 / 团队详情 / 设置 / 通知），可在此基础上延展
  • 所有页面均按 375×812 mini-program 设计稿尺寸