
关于
使用 StyleSeed UX 模式设计用户流程和页面结构,包括渐进式披露、中心辐射导航和信息金字塔
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个顶级区域
流程规则
- 每个流程都有明确的入口点
- 每个流程都有明确的出口或成功条件
- 关键功能通常应在从首页三次点击内可达
- 非根页面需要返回导航
- 加载、空状态和错误状态需要明确的恢复路径
输出
提供:
- ASCII流程图
- 页面清单,包含每个页面的用途
- 加载、空状态和错误状态的边界情况
- 推荐的页面脚手架和可复用模式以供后续实现
最佳实践
- 优先优化清晰度而非密度
- 让一个页面回答一个主要问题
- 对风险或破坏性步骤保持退出通道可见
- 在绘制详细布局之前定义状态转换
附加资源
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必要的输入、权限、安全边界或成功标准,请停下来寻求澄清。
兼容工具
Claude CodeCursor
标签
前端开发