利用 AI 设计高可用 UX 用户流程与页面结构 #

解决产品开发中“页面碎片化”的问题：通过在编写代码前让 AI 先规划完整的 UX 流程图和屏幕清单，确保用户路径连贯且符合交互心理学。

为什么需要这个技能 #

很多开发者在实现新功能时，习惯于直接进入单个页面的 UI 编码，导致最终产出的产品是一堆互不相干的页面，缺乏整体的逻辑链路。用户在操作时常会感到迷茫，找不到返回路径或在复杂任务中迷失。

本技能引入了 StyleSeed 的 UX 设计模式，强制 AI 在绘制界面之前，先思考入口、出口、屏幕清单以及导航结构。它通过应用经典的交互定律（如米勒定律、希克定律），将复杂的业务逻辑转化为清晰的渐进式披露路径，确保产品在实现前就具备一致的用户体验。

适用场景 #

• 复杂业务链路规划：如设计新用户的引导流程（Onboarding）、支付结算流或账户管理体系。
• 多状态界面设计：当一个功能涉及多个模态窗口（Modal）或多级跳转页面时。
• 仪表盘架构：需要构建“中心-辐射”型（Hub-and-Spoke）导航的后台管理系统。
• UI 逻辑先行：在确定组件细节之前，需要定义清晰的任务路径和状态切换逻辑。

核心工作流 #

1. 应用信息架构原则：

   • 渐进式披露：仅在需要时展示复杂信息。
   • 分块处理：根据米勒定律将内容分组，避免认知过载。
   • 简化决策：应用希克定律，减少每页的决策选项。

2. 选择导航模型：

   • 中心辐射型：适用于仪表盘与详情页切换。
   • 线性流：适用于表单填写、结账等步骤引导。
   • 标签导航：适用于 3-5 个顶层核心功能区。

3. 定义流程规则：

   • 明确每个流程的唯一入口与成功退出条件。
   • 确保核心功能在 3 次点击内可达。
   • 强制定义加载中（Loading）、空状态（Empty）和错误状态（Error）的恢复路径。

4. 输出交付物：

   • 绘制 ASCII 流程图。
   • 列出屏幕清单及其具体用途。
   • 定义边缘情况的处理逻辑。
   • 提供建议的页面脚手架和可复用模式。

下载和安装 #

下载 ux-flow 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐