zhaoxuya520 页面结构和线框图
适用场景
- 单个功能页面的结构设计
- 列表页、详情页、表单页等模式
- 内容层级和主次操作排布
- 给前端的页面骨架说明
核心原则
1. 页面目标先行
每个页面只解决 1~3 个核心目标
不要让一个页面承担过多
2. 用户视线流动
F 模式 / Z 模式 / 古登堡图
按用户阅读顺序排列内容
3. 主次清晰
一个页面只有 1 个主操作
次操作弱化处理
危险操作隔离
4. 内容优先
内容驱动设计，不是装饰驱动
5 个关键问题
每个页面必须回答：
1. 页面目标：这个页面帮助用户完成什么？
2. 核心信息：用户必须先看到什么？
3. 主操作：用户最重要的动作是什么？
4. 次操作：哪些动作可以弱化？
5. 反馈区域：系统如何告诉用户结果？
常见页面模式
列表页
顶部：筛选 + 搜索 + 主操作（如"新建"）
中间：列表本身（表格 / 卡片 / 时间轴）
底部：分页
状态：
- 加载中
- 空列表（无数据）
- 有数据
- 错误（加载失败）
- 无权限
详情页
顶部：返回 + 标题 + 状态徽章 + 主操作
左/中：核心信息分组展示
右：辅助信息 / 相关操作 / 历史记录
底部：危险操作（删除）
状态：
- 加载中
- 详情数据
- 资源不存在
- 无权限
- 已删除
表单页
顶部：标题 + 进度（多步表单）
中间：表单字段（按重要性分组）
底部：提交 + 取消 + 保存草稿
状态：
- 默认（空）
- 有数据（编辑模式）
- 校验中
- 校验失败（字段级错误）
- 提交中（loading）
- 提交成功
- 提交失败
仪表盘
顶部：时间筛选 + 全局指标
中间：图表区（按重要性排列）
右侧：最新动态 / 待办
状态：
- 加载中
- 数据正常
- 部分数据缺失
- 完全无数据
输出格式
页面结构说明
## 页面：[页面名]
### 基本信息
- 页面目标：[1 句话]
- 用户角色：[谁用]
- 进入路径：[从哪进入]
- 视觉风格：[来自 visual-style skill]
### 内容层级
┌──────────────────────────────────┐ │ 顶部：[内容] │ ├──────────────────────────────────┤ │ 主区域：[内容] │ │ │ │ - 核心信息： │ │ - 主操作： │ │ │ ├──────────────────────────────────┤ │ 底部：[次操作 / 分页] │ └──────────────────────────────────┘
### 主要元素
| 元素 | 类型 | 用途 | 优先级 |
|------|------|------|--------|
| 页面标题 | h1 | 标识页面 | P0 |
| 操作按钮 | 按钮组 | 主操作 | P0 |
| 数据列表 | Table | 展示数据 | P0 |
| 筛选器 | Filter | 缩小范围 | P1 |
| 分页 | Pagination | 数据导航 | P1 |
### 状态说明
| 状态 | 触发条件 | 显示内容 | 用户行动 |
|------|---------|---------|---------|
| 加载中 | 页面初始加载 | Skeleton + Spinner | 等待 |
| 有数据 | 加载成功 | 完整列表 | 浏览/操作 |
| 空状态 | 无数据 | 空状态图 + 引导文案 + 主操作 | 创建第一项 |
| 错误 | 加载失败 | 错误信息 + 重试按钮 | 重试 |
| 无权限 | 权限校验失败 | 权限提示 + 联系管理员链接 | 申请权限 |
### 异常处理
- 网络错误：[处理方式]
- 表单校验失败：[处理方式]
- 操作冲突：[处理方式]
### 响应式要求
- 桌面端 (>1024px)：[布局]
- 平板 (768-1024px)：[布局]
- 移动端 (<768px)：[布局]
工作流程
1. 读取 PRD / 用户故事
2. 确定页面目标（不超过 3 个）
3. 列出必要内容元素
4. 按重要性排序
5. 选择页面模式（列表/详情/表单/仪表盘）
6. 设计内容层级（顶/中/底 或 左/中/右）
7. 区分主次操作
8. 列出所有状态（用 component-states skill）
9. 检查响应式
10. 输出页面结构说明
质量自检
□ 页面目标是否清晰（1~3 个）
□ 是否只有 1 个主操作
□ 内容层级是否合理（重要内容靠上）
□ 是否覆盖了所有状态
□ 异常情况是否定义
□ 响应式是否考虑
□ 前端能否据此实现
常见坑
- 页面目标太多——一个页面想干所有事
- 多个主操作——用户不知道点哪个
- 危险操作不隔离——"删除"放在主区域
- 空状态缺失——用户第一次进入看到空白
- 错误状态缺失——加载失败什么都不显示
- 响应式没考虑——桌面设计在移动端崩溃
- 没有视线流动——内容散乱无序
配套模板
templates/page-spec-template.md— 通用页面结构说明（含列表/详情/表单/仪表盘四种模式）templates/wireframe-spec-template.md— 线框图说明模板templates/design-brief-template.md— 设计 brief 模板（项目入口）
与其他 skill 的协作
上游：
user-flow → 提供流程节点
information-architecture → 提供页面在整体中的位置
平行：
component-states → 详细定义每个状态
responsive-design → 详细定义响应式规则
visual-style → 视觉风格指引
下游：
design-handoff → 交接给前端