# Page Structure

> 设计单页面结构和线框图时使用。适用于功能页面设计、内容布局、主次操作排布。优先使用页面目标导向方法 + 内容层级 + 主次操作区分。

- Skill: `zhaoxuya520/page-structure` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add zhaoxuya520/page-structure`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhaoxuya520/page-structure/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zhaoxuya520 (https://skillmd.com/u/zhaoxuya520)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhaoxuya520/page-structure

---


# 页面结构和线框图

## 适用场景

- 单个功能页面的结构设计
- 列表页、详情页、表单页等模式
- 内容层级和主次操作排布
- 给前端的页面骨架说明

## 核心原则

```text
1. 页面目标先行
   每个页面只解决 1~3 个核心目标
   不要让一个页面承担过多

2. 用户视线流动
   F 模式 / Z 模式 / 古登堡图
   按用户阅读顺序排列内容

3. 主次清晰
   一个页面只有 1 个主操作
   次操作弱化处理
   危险操作隔离

4. 内容优先
   内容驱动设计，不是装饰驱动
```

## 5 个关键问题

每个页面必须回答：

```text
1. 页面目标：这个页面帮助用户完成什么？
2. 核心信息：用户必须先看到什么？
3. 主操作：用户最重要的动作是什么？
4. 次操作：哪些动作可以弱化？
5. 反馈区域：系统如何告诉用户结果？
```

## 常见页面模式

### 列表页

```text
顶部：筛选 + 搜索 + 主操作（如"新建"）
中间：列表本身（表格 / 卡片 / 时间轴）
底部：分页

状态：
  - 加载中
  - 空列表（无数据）
  - 有数据
  - 错误（加载失败）
  - 无权限
```

### 详情页

```text
顶部：返回 + 标题 + 状态徽章 + 主操作
左/中：核心信息分组展示
右：辅助信息 / 相关操作 / 历史记录
底部：危险操作（删除）

状态：
  - 加载中
  - 详情数据
  - 资源不存在
  - 无权限
  - 已删除
```

### 表单页

```text
顶部：标题 + 进度（多步表单）
中间：表单字段（按重要性分组）
底部：提交 + 取消 + 保存草稿

状态：
  - 默认（空）
  - 有数据（编辑模式）
  - 校验中
  - 校验失败（字段级错误）
  - 提交中（loading）
  - 提交成功
  - 提交失败
```

### 仪表盘

```text
顶部：时间筛选 + 全局指标
中间：图表区（按重要性排列）
右侧：最新动态 / 待办

状态：
  - 加载中
  - 数据正常
  - 部分数据缺失
  - 完全无数据
```

## 输出格式

### 页面结构说明

```markdown
## 页面：[页面名]

### 基本信息

- 页面目标：[1 句话]
- 用户角色：[谁用]
- 进入路径：[从哪进入]
- 视觉风格：[来自 visual-style skill]

### 内容层级

```
┌──────────────────────────────────┐
│  顶部：[内容]                     │
├──────────────────────────────────┤
│  主区域：[内容]                   │
│                                  │
│  - 核心信息：                    │
│  - 主操作：                      │
│                                  │
├──────────────────────────────────┤
│  底部：[次操作 / 分页]           │
└──────────────────────────────────┘
```

### 主要元素

| 元素 | 类型 | 用途 | 优先级 |
|------|------|------|--------|
| 页面标题 | h1 | 标识页面 | P0 |
| 操作按钮 | 按钮组 | 主操作 | P0 |
| 数据列表 | Table | 展示数据 | P0 |
| 筛选器 | Filter | 缩小范围 | P1 |
| 分页 | Pagination | 数据导航 | P1 |

### 状态说明

| 状态 | 触发条件 | 显示内容 | 用户行动 |
|------|---------|---------|---------|
| 加载中 | 页面初始加载 | Skeleton + Spinner | 等待 |
| 有数据 | 加载成功 | 完整列表 | 浏览/操作 |
| 空状态 | 无数据 | 空状态图 + 引导文案 + 主操作 | 创建第一项 |
| 错误 | 加载失败 | 错误信息 + 重试按钮 | 重试 |
| 无权限 | 权限校验失败 | 权限提示 + 联系管理员链接 | 申请权限 |

### 异常处理

- 网络错误：[处理方式]
- 表单校验失败：[处理方式]
- 操作冲突：[处理方式]

### 响应式要求

- 桌面端 (>1024px)：[布局]
- 平板 (768-1024px)：[布局]
- 移动端 (<768px)：[布局]
```

## 工作流程

```text
1. 读取 PRD / 用户故事
2. 确定页面目标（不超过 3 个）
3. 列出必要内容元素
4. 按重要性排序
5. 选择页面模式（列表/详情/表单/仪表盘）
6. 设计内容层级（顶/中/底 或 左/中/右）
7. 区分主次操作
8. 列出所有状态（用 component-states skill）
9. 检查响应式
10. 输出页面结构说明
```

## 质量自检

```text
□ 页面目标是否清晰（1~3 个）
□ 是否只有 1 个主操作
□ 内容层级是否合理（重要内容靠上）
□ 是否覆盖了所有状态
□ 异常情况是否定义
□ 响应式是否考虑
□ 前端能否据此实现
```

## 常见坑

1. **页面目标太多**——一个页面想干所有事
2. **多个主操作**——用户不知道点哪个
3. **危险操作不隔离**——"删除"放在主区域
4. **空状态缺失**——用户第一次进入看到空白
5. **错误状态缺失**——加载失败什么都不显示
6. **响应式没考虑**——桌面设计在移动端崩溃
7. **没有视线流动**——内容散乱无序

## 配套模板

- `templates/page-spec-template.md` — 通用页面结构说明（含列表/详情/表单/仪表盘四种模式）
- `templates/wireframe-spec-template.md` — 线框图说明模板
- `templates/design-brief-template.md` — 设计 brief 模板（项目入口）

## 与其他 skill 的协作

```text
上游：
  user-flow → 提供流程节点
  information-architecture → 提供页面在整体中的位置

平行：
  component-states → 详细定义每个状态
  responsive-design → 详细定义响应式规则
  visual-style → 视觉风格指引

下游：
  design-handoff → 交接给前端
```