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

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

  • 字体

    • 主体：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；
    • 保存即触发版本历史；
    • 错误行标红。

状态颜色规范

状态 颜色 含义
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（制品中心）

功能目标

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

界面模块

  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（报表分析）

报表类型

报表 图表类型 说明
构建成功率 折线图 按日期统计
平均构建时间 柱状图 各语言项目对比
部署频率 柱状+趋势线 每周趋势
回滚次数 饼图 环境维度
成本分析 堆叠条形图 构建分钟+存储
审批响应时间 折线图 按角色分布
Runner 使用率 热力图 每节点任务密度

报表交互

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

验收标准

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

6.10 Settings（系统设置）

模块

  1. 成员管理

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

  2. 通知设置

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

  3. 策略配置

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

  4. 主题设置

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

验收标准

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

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