BookFlow UX 原型总览

Garrett 五层设计模型 — 五层文档 + 三套子系统 HTML 原型

设计文档 (L1-L5)
L1

战略层 Strategy

用户画像 · 产品目标 · 成功指标

L2

范围层 Scope

7 主服务 · 成果物追踪 · 限额体系

L3

结构层 Structure

导航结构 · 用户流程 · 页面规范

L4

框架层 Skeleton

18 个页面线框图 · 组件交互规范

L5

表现层 Surface

设计令牌 · 组件样式 · 实现方案

子系统A:内部自动化管线 Dashboard(深色主题)
🏠

仪表盘

7 个服务卡片 + 管道快照 + 活动流 + 资源用量

Dashboard
🔗

管道看板

六阶段 Kanban + 点击卡片滑出详情面板(成果物时间线)

Dashboard
🌐

翻译管理

翻译队列 + 历史 + 供应商管理 + 密钥池(可展开)

Dashboard
子系统B 用户侧(浅色主题)
🔍

首页搜索

Hero + 搜索框 + 功能介绍 + 免费额度引导

Customer
📂

搜索结果

书籍列表 + 状态 Badge(可下载/可翻译)+ 操作按钮

Customer
📖

中英对照查看

左右分屏 + 同步滚动 + 章节导航(核心功能页)

Customer
子系统B 管理员后台(混合主题)
📊

运营概览

统计卡片 + 用户层级分布 + 无结果搜索 + 趋势图 + 文章列表

Admin