谁会需要原型
大家在会议上对想法达成一致，但每个人脑海中想象的界面各不相同，缺失的步骤只有在开发者开始构建时才会浮现。
- 需要在聘请开发团队之前拿出可点击成果的创始人
- 需要与多位利益相关者就复杂功能达成一致的产品经理
- 正在替换旧内部工具、而其工作流程无人记录的团队
在产品构建之前先查看并测试它
在原型中修复令人困惑的流程，比在已交付的代码中修复更快、更省钱。我们先梳理用户旅程，为关键界面制作线框图，然后为网页端和移动端构建可点击原型，供利益相关者审阅、供真实用户测试。原型包含那些常被忽略的细节，例如空状态、加载状态、错误状态和成功状态。无论之后是否会有开发项目跟进，它都适合验证想法的创始人、规划重要功能的团队，以及正在重新设计的产品。
AI 辅助探索，设计师主导流程
AI 如何协助
- 将需求和粗略草图转化为初稿用户流程和线框图，供设计师进一步完善。
- 生成备选布局和流程变体，以便在确定方案前比较更多选项。
- 为界面起草真实的示例内容和数据，这样测试就不必基于占位文本进行。
- 当测试需要真实交互、实时数据或复杂行为时，加快编码原型的制作速度。
我们的专家负责什么
- 设计师负责信息架构、导航和流程逻辑，包括边界情况和权限。
- 设计师决定哪些变体值得测试以及原因。AI 的产出只是起点，而非决定。
- 每个流程都会审查可用性和无障碍性：标签、焦点顺序、错误恢复和触控目标。
- 在任何内容进入开发之前，原型都会经过真实用户和您的利益相关者验证。
逐屏呈现的原型流程
示意性的预订流程；你的原型涵盖范围内商定的旅程和状态。
开始
用户从链接或菜单进入；任何已退出登录的人会被引导去登录，然后返回此处。
表单
只有在某个答案会改变后续内容时，问题才会拆分到不同屏幕。
检查点: 屏幕顺序已与利益相关方商定
验证错误
被拒绝的输入会让用户停留在该屏幕并标出问题所在，而不是回到起点。
复查
所有答案集中在一个屏幕上；每个编辑链接都会打开对应的步骤，然后返回此摘要。
检查点: 在提交任何内容之前由用户确认
确认
显示已预订的内容、接下来会发生什么，以及之后在哪里更改或取消。
当出现故障时: 如果所选时段在提交前被占用，流程会返回时段选择，并保留所有其他答案。
从想法到经过验证的原型
- 01
梳理用户旅程
我们先确定目标、用户和约束条件，然后梳理最重要的用户流程，包括边界情况和权限。
- 02
制作线框图并探索
低保真线框图，配合 AI 辅助生成的变体，以便快速比较选项。设计师将它们收敛到最具优势的方向。
- 03
原型
包含真实内容和关键交互状态的可点击原型或编码原型，可供利益相关者审阅和用户测试。
- 04
验证并交接
与真实用户开展可用性测试并进行修订，然后将带注释的界面和流程交给您的或我们的开发者。
您将获得什么
从初稿草图到可测试原型
用户流程
梳理所有重要旅程中的每一条路径，标明决策点、用户角色和边界情况，并在设计开始前发现死胡同。
低保真线框图
专注于结构、内容优先级和导航的快速布局，让您在视觉设计开始前就确定各元素的位置。
可点击原型
面向网页端和移动端的高保真 Figma 原型，包含真实内容和过渡效果，可通过链接分享并在真实设备上测试。
编码原型
当测试依赖真实数据或复杂行为时，我们会借助 AI 辅助开发构建编码原型，并事先约定它是否为一次性使用。
交互状态
为每个关键界面设计空状态、加载状态、错误状态和成功状态，让原型展示出错时会发生什么。
面向开发者的注释
在每个界面上提供行为说明、验证规则、内容指引和无障碍说明，为工程交接做好准备。
典型的原型设计需求
我们所界定范围的典型场景，而非客户案例研究。
涉及多个角色的审批工作流程
请求在申请人、经理和财务之间流转，每个角色看到的界面各不相同。我们会梳理每一条路径，包括拒绝和重新分配，并为每个角色的界面制作原型，以便利益相关者可以逐步演练。
一个无规划地不断扩充的设置区域
功能一个接一个地堆叠设置，直到用户找不到自己需要的东西。我们会梳理每个选项的作用，在线框图中重新归类，并为最常见的路径制作原型，让用户试用新的结构。
一项计划展示给客户的功能
销售团队想向潜在客户展示一个尚未构建的功能。我们会用真实的内容为其主流程制作原型，并清楚地标注这是一个概念，以便在不暗示发布日期的情况下收集反馈。
原型设计不涵盖的内容
- 为每个屏幕和断点提供完整的 UI、并应用你的品牌，属于 Figma 与视觉设计；原型则先确定关键流程。
- 细致的动效、微交互和手势属于交互设计；原型只包含测试某个流程所需的过渡。
- 这里包含的原型测试环节用于检验流程；带有严重程度评级和结果报告的完整可用性研究属于用户测试。
- 关于用户需要什么（而非某个流程应如何运作）的开放性问题，最好在绘制线框图之前通过 UX 研究来解答。
原型如何衔接构建、QA 和上线
经真实用户测试
我们会邀请与您的用户相符的人员，针对原型开展可用性测试，然后在开发开始前修订流程。
为工程师提供统一参考
无论是我们的还是您的开发者，都能获得带注释的流程、状态和行为说明，从而基于您团队批准的版本进行估算和构建。
QA 从相同的流程开始
批准的流程成为测试场景。QA 据此检查构建出的产品，包括可用性和无障碍检查。
新功能先制作原型
上线后，分析数据和支持反馈会显示用户遇到困难的地方，新功能在构建之前会先制作原型并进行测试。
常见问题
常见问题解答
我们必须在制作原型之前就承诺开发吗？
不必。线框图和原型设计可以作为独立的合作项目，且文件归您所有。除非您额外添加，否则不包含开发和托管，因此您可以把原型交给自己的开发者、展示给投资者，或向我们索取工程估算。
你们使用哪些原型设计工具？
大多数线框图和原型使用 Figma，当交互需要更逼真时则使用 ProtoPie 或 Framer。当测试依赖真实数据或行为时，我们会借助 AI 辅助开发构建编码原型。AI 设计助手帮助生成变体，而设计师会在您看到之前审查所有内容。
原型能成为最终产品吗？
高保真 Figma 原型通常会成为最终 UI 设计的基础。编码原型是为了快速回答问题而构建的，因此我们会事先约定它将被丢弃还是加固。如果加固，它会经过与任何生产代码相同的工程审查和 QA。
我们尚未发布的产品想法会分享给 AI 工具吗？
仅限您同意的工具。在工作开始之前，我们会确认哪些 AI 工具可以处理您的需求、设计和原型代码。如果您的概念必须保持在限定的边界内，私有 / 本地 AI 工程会使用私有托管的模型。Claude Code / OpenAI Codex 工程会在约定的账户和保留设置下使用商业提供商。
