第六章：交互原型与用户体验设计（Interaction Design & UX Specification）

6.1 信息架构（Information Architecture, IA Map）

顶层导航（Top Navigation）

页面层级结构（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

• 字体

  • 主体：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（仪表盘）

设计目标

提供平台一览视图，聚焦“状态 + 动态 + 告警”。

页面结构

1. 顶部摘要区（Summary Cards）

   • 当前活跃 Runner 数；
   • 当日构建次数；
   • 成功率；
   • 当前版本；
   • 系统负载状态。

2. 最近任务流（Recent Pipelines）

   • 显示最近 10 次构建；
   • 状态颜色编码（绿色成功、灰色进行中、红色失败）。

3. 健康监控（System Health）

   • Runner 心跳；
   • 队列长度；
   • 延迟曲线。

4. 告警与提示（Alerts）

   • 构建失败；
   • 配额超限；
   • Runner 离线。

交互要点

• 卡片点击跳转至详细页面；
• 所有数据 10 秒自动刷新；
• 告警支持快速“确认已读”。

验收标准

✅ 页面加载 < 2s；
✅ 自动刷新无闪烁；
✅ 支持夜间模式自动切换。

6.4 Projects（项目管理）

页面功能

1. 项目列表

   • 按创建时间 / 最近部署排序；
   • 可搜索；
   • 状态指示（Active / Disabled）。

2. 新建项目

   • 选择代码仓库；
   • 绑定分支；
   • 选择语言模板（Go / Node / Java 等）；
   • 自动创建默认 Pipeline YAML。

3. 项目详情页

   • Tabs：Overview / Pipelines / Artifacts / Settings；
   • 显示最后一次部署状态；
   • 展示项目级变量与密钥。

操作交互

• 支持拖拽导入 YAML 文件；
• 删除项目前弹出二次确认；
• 提供“复制项目”功能（拷贝变量与配置）。

6.5 Pipelines（流水线管理）

目标

直观呈现每次构建状态与阶段执行进度。

页面结构

1. Pipeline 列表页

   • 显示运行编号、分支、触发人、状态、耗时；
   • 可按状态筛选（成功 / 失败 / 运行中）。

2. Pipeline 详情页

   • 左侧阶段列表（build/test/package/deploy）；
   • 右侧日志窗口；
   • 支持实时查看运行日志；
   • 显示每步执行时间。

3. YAML 编辑器

   • 带语法高亮；
   • 校验 Schema；
   • 保存即触发版本历史；
   • 错误行标红。

状态颜色规范

交互逻辑（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（制品中心）

功能目标

可视化查看版本、下载、回滚。

界面模块

1. 制品列表

   • 名称 / 版本 / 构建来源 / 时间；
   • 支持多选删除；
   • 搜索版本号或 Tag。

2. 制品详情

   • Hash 校验；
   • SBOM 报告；
   • 镜像签名验证状态；
   • 下载按钮。

3. 生命周期

   • 显示保留策略；
   • 可手动延长保存期。

验收标准

✅ 支持 1GB 文件下载；
✅ SBOM 报告一键查看；
✅ 签名验证结果清晰展示；
✅ 删除操作可回收 48h。

6.7 Environments（环境管理）

设计目标

可视化配置变量与部署状态。

页面布局

• 左侧环境列表（dev / staging / prod）；
• 右侧选中环境详情。

功能模块

1. 变量与密钥

   • 可内联编辑；
   • 显示最后修改人；
   • 敏感值以 •••• 掩码。

2. 部署历史

   • 时间线展示；
   • 一键回滚；
   • 显示版本差异。

3. 配置模板

   • 可上传 YAML；
   • 支持参数占位符。

验收标准

✅ 环境切换无延迟；
✅ 敏感信息不在 DOM 出现；
✅ 回滚按钮 2 秒内响应。

6.8 Runners（执行节点）

页面模块

1. Runner 列表

   • ID、状态、CPU/Mem 使用率；
   • 可按标签筛选（docker / k8s / ssh）。

2. Runner 详情

   • 当前任务；
   • 任务队列长度；
   • 最近心跳时间。

3. 添加 Runner

   • 生成注册命令；
   • 复制到终端执行；
   • 成功后自动出现在列表。

交互要点

• 离线 Runner 标红；
• 心跳超过 5 分钟自动标记为“unhealthy”；
• 可批量删除。

验收标准

✅ 列表刷新 < 1s；
✅ 新 Runner 注册立即显示；
✅ 离线检测精度 ≥ 99%。

6.9 Reports（报表分析）

报表类型

报表交互

• 可导出 CSV / PDF；
• 图表可放大；
• 支持筛选（时间范围 / 项目 / 环境）。

验收标准

✅ 图表渲染时间 < 2s；
✅ 数据实时更新；
✅ 可导出 PDF 报告。

6.10 Settings（系统设置）

模块

1. 成员管理

   • 添加成员；
   • 分配角色；
   • 邀请链接。

2. 通知设置

   • Slack、Email、Webhook；
   • 模板可自定义。

3. 策略配置

   • 选择策略组；
   • 开关策略。

4. 主题设置

   • 暗黑 / 亮色；
   • 跟随系统。

验收标准

✅ 成员修改立即生效；
✅ 通知模板可预览；
✅ 暗黑模式切换无闪烁。

6.11 错误与空状态（Empty & Error States）

6.12 暗黑模式（Dark Mode）

设计原则

• 背景色：#1E1E1E
• 文字：白色 #F0F0F0
• 主色：保持蓝色一致但亮度降低（#0D66D0）
• 所有卡片带 4px 柔光阴影

动态切换

• 跟随系统；
• 手动切换时保存到 localStorage；
• 动画过渡 0.3s。

6.13 移动端适配（Mobile Responsive Design）

验收标准

✅ 断点宽度 ≤ 768px 下布局自适应；
✅ 关键按钮始终可见；
✅ 滚动性能流畅（FPS ≥ 60）。

6.14 无障碍设计（Accessibility）

• 支持键盘操作（Tab / Enter / Esc）；
• 所有图标有 aria-label；
• 色盲安全调色；
• 可开启“高对比模式”；
• 支持屏幕阅读器。

6.15 交互一致性与反馈规则

6.16 UI 组件库规范（Component Library）

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）
• 数据流示例
• 构建引擎实现细节
• 插件执行生命周期
• 性能优化策略与单元测试规范