「DeployLite」第六章:交互原型与用户体验设计
By Leeting Yan
第六章:交互原型与用户体验设计(Interaction Design & UX Specification)
6.1 信息架构(Information Architecture, IA Map)
顶层导航(Top Navigation)
| 模块 | 图标 | 描述 |
|---|---|---|
| Dashboard | 📊 | 系统总览、最近任务、健康状态 |
| Projects | 🧩 | 项目与仓库管理 |
| Pipelines | 🔁 | 构建与部署历史 |
| Artifacts | 📦 | 制品列表与版本管理 |
| Environments | 🌍 | 环境变量、配置与回滚 |
| Runners | ⚙️ | 执行节点与调度状态 |
| Reports | 📈 | 统计分析与KPI |
| Settings | ⚙️ | 通知、策略、成员、权限 |
| Admin Console | 🛠️ | (仅管理员)系统维护与租户配置 |
页面层级结构(IA Diagram)
Root
├── Dashboard
│ ├── Overview
│ ├── Running Pipelines
│ └── System Health
├── Projects
│ ├── List
│ ├── Detail
│ │ ├── Pipelines
│ │ ├── Artifacts
│ │ └── Settings
├── Pipelines
│ ├── All Runs
│ ├── Run Detail
│ └── YAML Editor
├── Artifacts
│ ├── Versions
│ ├── Details
│ └── Download History
├── Environments
│ ├── Variables
│ ├── Secrets
│ └── Rollback History
├── Runners
│ ├── List
│ └── Metrics
├── Reports
│ ├── Build Stats
│ ├── Deploy Trends
│ └── Cost Analysis
├── Settings
│ ├── Members
│ ├── Roles
│ ├── Notifications
│ └── Policies
└── Admin Console
├── Tenants
├── Quotas
├── Policy Reload
└── Audit Log
6.2 总体设计风格(Design Language)
视觉基调
-
风格关键词:极简(Minimal)、技术感(Technical)、一致(Consistent)
-
配色体系
- 主色(Primary):
#0052CC(蓝) - 辅色(Accent):
#36B37E(绿色成功态)、#FF5630(红色错误) - 中性色:灰阶
#091E42~#F4F5F7
- 主色(Primary):
-
字体
- 主体:
Inter/PingFang SC - 标题:中粗,14–18px
- 正文:常规,12–14px
- 主体:
-
圆角与阴影
- 按钮/卡片圆角:
8px - 阴影:
rgba(0, 0, 0, 0.08)
- 按钮/卡片圆角:
-
图标集
Lucide-react(线性图标风格,统一宽度2px)
-
响应式布局
- 断点:
sm=640px, md=768px, lg=1024px, xl=1280px
- 断点:
6.3 Dashboard(仪表盘)
设计目标
提供平台一览视图,聚焦“状态 + 动态 + 告警”。
页面结构
-
顶部摘要区(Summary Cards)
- 当前活跃 Runner 数;
- 当日构建次数;
- 成功率;
- 当前版本;
- 系统负载状态。
-
最近任务流(Recent Pipelines)
- 显示最近 10 次构建;
- 状态颜色编码(绿色成功、灰色进行中、红色失败)。
-
健康监控(System Health)
- Runner 心跳;
- 队列长度;
- 延迟曲线。
-
告警与提示(Alerts)
- 构建失败;
- 配额超限;
- Runner 离线。
交互要点
- 卡片点击跳转至详细页面;
- 所有数据 10 秒自动刷新;
- 告警支持快速“确认已读”。
验收标准
✅ 页面加载 < 2s; ✅ 自动刷新无闪烁; ✅ 支持夜间模式自动切换。
6.4 Projects(项目管理)
页面功能
-
项目列表
- 按创建时间 / 最近部署排序;
- 可搜索;
- 状态指示(Active / Disabled)。
-
新建项目
- 选择代码仓库;
- 绑定分支;
- 选择语言模板(Go / Node / Java 等);
- 自动创建默认 Pipeline YAML。
-
项目详情页
- Tabs:Overview / Pipelines / Artifacts / Settings;
- 显示最后一次部署状态;
- 展示项目级变量与密钥。
操作交互
- 支持拖拽导入 YAML 文件;
- 删除项目前弹出二次确认;
- 提供“复制项目”功能(拷贝变量与配置)。
6.5 Pipelines(流水线管理)
目标
直观呈现每次构建状态与阶段执行进度。
页面结构
-
Pipeline 列表页
- 显示运行编号、分支、触发人、状态、耗时;
- 可按状态筛选(成功 / 失败 / 运行中)。
-
Pipeline 详情页
- 左侧阶段列表(build/test/package/deploy);
- 右侧日志窗口;
- 支持实时查看运行日志;
- 显示每步执行时间。
-
YAML 编辑器
- 带语法高亮;
- 校验 Schema;
- 保存即触发版本历史;
- 错误行标红。
状态颜色规范
| 状态 | 颜色 | 含义 |
|---|---|---|
| Running | 蓝色 | 执行中 |
| Success | 绿色 | 完成 |
| Failed | 红色 | 错误 |
| Pending | 灰色 | 等待执行 |
| Skipped | 黄色 | 条件跳过 |
交互逻辑(Mermaid)
graph LR
A[触发 Pipeline] --> B[排队等待]
B --> C[分配 Runner]
C --> D[执行 Build Stage]
D --> E[执行 Test Stage]
E --> F[执行 Package Stage]
F --> G[执行 Deploy Stage]
G --> H[生成报告与通知]
验收标准
✅ 支持实时日志流更新; ✅ 每步执行耗时清晰展示; ✅ YAML 编辑器自动补全关键字; ✅ 用户可在 UI 直接重试某阶段。
6.6 Artifacts(制品中心)
功能目标
可视化查看版本、下载、回滚。
界面模块
-
制品列表
- 名称 / 版本 / 构建来源 / 时间;
- 支持多选删除;
- 搜索版本号或 Tag。
-
制品详情
- Hash 校验;
- SBOM 报告;
- 镜像签名验证状态;
- 下载按钮。
-
生命周期
- 显示保留策略;
- 可手动延长保存期。
验收标准
✅ 支持 1GB 文件下载; ✅ SBOM 报告一键查看; ✅ 签名验证结果清晰展示; ✅ 删除操作可回收 48h。
6.7 Environments(环境管理)
设计目标
可视化配置变量与部署状态。
页面布局
- 左侧环境列表(dev / staging / prod);
- 右侧选中环境详情。
功能模块
-
变量与密钥
- 可内联编辑;
- 显示最后修改人;
- 敏感值以
••••掩码。
-
部署历史
- 时间线展示;
- 一键回滚;
- 显示版本差异。
-
配置模板
- 可上传 YAML;
- 支持参数占位符。
验收标准
✅ 环境切换无延迟; ✅ 敏感信息不在 DOM 出现; ✅ 回滚按钮 2 秒内响应。
6.8 Runners(执行节点)
页面模块
-
Runner 列表
- ID、状态、CPU/Mem 使用率;
- 可按标签筛选(docker / k8s / ssh)。
-
Runner 详情
- 当前任务;
- 任务队列长度;
- 最近心跳时间。
-
添加 Runner
- 生成注册命令;
- 复制到终端执行;
- 成功后自动出现在列表。
交互要点
- 离线 Runner 标红;
- 心跳超过 5 分钟自动标记为“unhealthy”;
- 可批量删除。
验收标准
✅ 列表刷新 < 1s; ✅ 新 Runner 注册立即显示; ✅ 离线检测精度 ≥ 99%。
6.9 Reports(报表分析)
报表类型
| 报表 | 图表类型 | 说明 |
|---|---|---|
| 构建成功率 | 折线图 | 按日期统计 |
| 平均构建时间 | 柱状图 | 各语言项目对比 |
| 部署频率 | 柱状+趋势线 | 每周趋势 |
| 回滚次数 | 饼图 | 环境维度 |
| 成本分析 | 堆叠条形图 | 构建分钟+存储 |
| 审批响应时间 | 折线图 | 按角色分布 |
| Runner 使用率 | 热力图 | 每节点任务密度 |
报表交互
- 可导出 CSV / PDF;
- 图表可放大;
- 支持筛选(时间范围 / 项目 / 环境)。
验收标准
✅ 图表渲染时间 < 2s; ✅ 数据实时更新; ✅ 可导出 PDF 报告。
6.10 Settings(系统设置)
模块
-
成员管理
- 添加成员;
- 分配角色;
- 邀请链接。
-
通知设置
- Slack、Email、Webhook;
- 模板可自定义。
-
策略配置
- 选择策略组;
- 开关策略。
-
主题设置
- 暗黑 / 亮色;
- 跟随系统。
验收标准
✅ 成员修改立即生效; ✅ 通知模板可预览; ✅ 暗黑模式切换无闪烁。
6.11 错误与空状态(Empty & Error States)
| 场景 | 设计文案 | 动作 |
|---|---|---|
| 无项目 | “还没有项目,点击创建第一个吧!” | [创建项目] |
| 构建失败 | “构建失败,请查看日志。” | [查看日志] [重新运行] |
| 无 Runner | “未检测到在线 Runner。” | [添加 Runner] |
| 权限不足 | “您无权执行此操作。” | [返回] |
| 网络断开 | “无法连接服务器。” | 自动重试 5s |
6.12 暗黑模式(Dark Mode)
设计原则
- 背景色:
#1E1E1E - 文字:白色
#F0F0F0 - 主色:保持蓝色一致但亮度降低(
#0D66D0) - 所有卡片带 4px 柔光阴影
动态切换
- 跟随系统;
- 手动切换时保存到 localStorage;
- 动画过渡 0.3s。
6.13 移动端适配(Mobile Responsive Design)
| 页面 | 调整策略 |
|---|---|
| Dashboard | 卡片堆叠,简化图表 |
| Pipelines | 隐藏部分列,仅显示状态与耗时 |
| YAML 编辑器 | 只读模式 |
| Runners | 按状态分组折叠 |
| Reports | 图表简化为列表摘要 |
验收标准
✅ 断点宽度 ≤ 768px 下布局自适应; ✅ 关键按钮始终可见; ✅ 滚动性能流畅(FPS ≥ 60)。
6.14 无障碍设计(Accessibility)
- 支持键盘操作(Tab / Enter / Esc);
- 所有图标有 aria-label;
- 色盲安全调色;
- 可开启“高对比模式”;
- 支持屏幕阅读器。
6.15 交互一致性与反馈规则
| 类型 | 行为 | 反馈方式 |
|---|---|---|
| 成功操作 | 按钮变绿 + Toast | “操作成功” |
| 失败操作 | 按钮抖动 + Toast 红色 | “操作失败,请重试” |
| 异步加载 | 显示 skeleton | 骨架屏 500ms |
| 长耗时任务 | 显示进度条 | 带取消按钮 |
| 审批请求 | 弹出确认框 | 支持备注说明 |
6.16 UI 组件库规范(Component Library)
| 组件 | 描述 |
|---|---|
| Button | 支持主/次/危险状态 |
| Card | 带标题与操作栏 |
| Modal | 标准 600px 宽,支持全屏模式 |
| Tabs | 动态加载内容 |
| Table | 支持分页、筛选、固定列 |
| Toast | 全局消息提示 |
| Form | 支持校验与联动 |
| Input | 统一圆角与边框阴影 |
| Switch | 状态切换 |
| Badge | 状态指示颜色一致性(Success/Warning/Error) |
6.17 动效规范(Motion Design)
- 页面切换淡入淡出(0.2s);
- 按钮点击缩放(0.9 → 1.0);
- 加载进度条滑动平滑;
- 图表刷新过渡动画(ease-in-out 0.4s);
- 空状态元素轻微浮动。
✅ 第六章总结 本章确立了平台在视觉与交互层的统一标准,使 DeployLite 既具备工程可用性(可高效操作、信息密度高),又兼具审美一致性与低干扰体验。 整体目标:
「3 秒理解状态,10 秒定位问题,30 秒完成操作。」
接下来将进入:
第七章:技术实现与接口设计(Technical Implementation & API Specification) 该章节会详细说明:
- 技术栈与模块关系
- 接口定义(REST/gRPC)
- 数据流示例
- 构建引擎实现细节
- 插件执行生命周期
- 性能优化策略与单元测试规范