---

name: ux-flow description: "使用StyleSeed UX模式设计用户流程和页面结构，包括渐进式披露、中心辐射导航和信息金字塔。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ux, flows, navigation, product-design, styleseed] tools: [claude, cursor, codex, gemini]

UX Flow

概述

作为StyleSeed的一部分，此技能在设计页面之前先设计流程。它使用经过验证的UX模式来定义入口点、出口、页面清单和导航结构，使实现具有连贯的用户旅程，而非一堆断开的页面。

何时使用

• 规划引导流程、结账、账户管理、仪表盘或下钻流程时使用
• 新功能跨越多个页面或模态状态时使用
• 用户需要清晰的任务路径而非单个孤立页面时使用
• UI需要在构建组件之前确定导航逻辑时使用

工作原理

信息架构原则

• 渐进式披露：仅在需要时展示复杂性
• Miller定律：将内容分块为可管理的组
• Hick定律：最小化每个页面的决策负担

常见导航模型

• 中心辐射式：用于仪表盘和详情视图
• 线性流程：用于引导、表单和结账
• 标签导航：用于3到5个顶级区域

流程规则

• 每个流程都有明确的入口点
• 每个流程都有明确的出口或成功条件
• 关键功能通常应在从首页三次点击内可达
• 非根页面需要返回导航
• 加载、空状态和错误状态需要明确的恢复路径

输出

提供：

1. ASCII流程图
2. 页面清单，包含每个页面的用途
3. 加载、空状态和错误状态的边界情况
4. 推荐的页面脚手架和可复用模式以供后续实现

最佳实践

• 优先优化清晰度而非密度
• 让一个页面回答一个主要问题
• 对风险或破坏性步骤保持退出通道可见
• 在绘制详细布局之前定义状态转换

附加资源

• StyleSeed仓库
• 源技能

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停下来寻求澄清。