高保真、高功能性的高级原型设计正迅速成为热门话题。然而，许多设计师在掌握这项技能时仍感到吃力。事实是，要驾驭这一领域需要思维方式的转变。但如果你学会把问题拆解为可管理的小块，这并不一定困难。
当你在制作高级原型时，本质上是在为最终产品奠定基础——也就是将由你的工程团队落地实现的那个版本。你可能会想：“可我是设计师，不是程序员！我到底该从哪里开始？”
好消息是：你已经懂得比自己想象的更多。
概览
从正确的问题开始
高级原型设计中的共性问题
好消息是你已经具备这些技能！
跨越原型设计门槛
案例研究：复刻 macOS 计算器应用
拆解用户可见步骤
进入交互的下一阶段
高级原型设计的力量
下一篇：如何一步步制作计算器原型
从正确的问题开始
这段旅程始于视角的改变。当面对创建高级原型的任务时，你很容易立刻打开像 ProtoPie 这样的工具并问：“好，现在我该怎么把这个原型做出来？”但这其实是个误区。
在跳进你偏好的原型工具之前，首先真正该问的问题应该是：“我正在设计的这个产品是如何运作的？”
****高级原型设计中的共性问题
经常会听到设计师提到 ProtoPie 很难上手。不过，这并不是对 ProtoPie 或任何其他高级原型工具的公平评价。
挑战在于，与您可能在 Figma 或 Sketch 这类工具中做过的简单原型相比，高级原型设计是完全不同的玩法。现实是，高级原型永远不会像随便拖几条连线、把对象连起来那样简单。高级原型设计是在构建一个可运行的设计模型，这自然要求你更深入地理解产品是如何运作的。
我把 Figma 称为“简单”的原型工具，可能对它最近的原型功能增强并不完全公平。但这里有个小洞察：如果你在 ProtoPie 上遇到障碍，那么在处理 Figma 的变量和条件时，你很可能也会遇到类似挑战。问题不太在于工具本身，而更多在于你带来的思维方式。
好消息是你具备这些技能！
我想请你和我一起做一次信念跃迁。为了构建高级原型，你需要暂时戴上程序员的帽子。别担心，你不需要写代码！但是，你确实需要像程序员在编码前那样，理解你的产品如何运作。
这看起来可能要求很高。不过，回顾你花在产品设计上的时间。你其实早已深入研究过产品的运作方式。毕竟，在过去几周或几个月里，你不正是一直在思考产品到底是如何工作的吗？这些思考不正是指导了你的设计决策吗？
例如，我相信你已经创建过类似这样的文档，以支持与开发的交接：
用于开发交接的流程图
💡** 小贴士！** 像这样的文档是关于产品如何运作的知识宝库。** **你对产品的理解，甚至可能比最终实现它的开发者还要深。你其实已经走完一半了。
跨越原型设计门槛
那么，为什么制作高级原型仍然这么难？这就来到本文的核心——你不是从工具里开始做原型，而是从你的头脑中开始。要在头脑中开始原型设计，你需要像程序员那样思考——也就是把产品拆成更小的交互片段，让这些片段共同运转成整体。
在我甚至还没打开 ProtoPie Studio 之前，先带你走一遍我的思考过程。
案例研究：复刻 macOS 计算器应用
我们来看一个真实案例：macOS 计算器应用。它很简单，却是展示这一流程的完美用例，因为我们都知道它如何工作。基础流程很直接：输入一个数字，选择一个运算，再输入另一个数字，点击等号，在计算窗口看到结果。
macOS 计算器的基础 UI
我们来深入看看完成一次计算所需的简单步骤。这里，“用户”指使用应用的人，“系统”指应用及其功能。
将计算拆解为“阶段”
随着原型推进，我会加入更多功能。现在先聚焦于阶段 1。
乍看之下，用户与计算器的交互似乎很直接。但我们的目标是超越显而易见，进入更细的细节。让我们进一步拆解这一步：
用户通过任意数字键输入第一个数字
完成阶段 1 的步骤
拆解用户可见步骤
这个对**阶段 1**的拆解展示了用户可见的步骤。但还有更多我们看不见（却能直觉感知）的事情在发生：
将可见步骤拆分为更细的细节
💡 **小贴士！** 通过深入到微小细节并对比系统与用户行为，我现在对原型有了更清晰的构想。
让我们回看这些步骤，并理解它们对构建的含义：
1. 系统分配一小块内存，用来记住输入的数字，这些数字会组合成计算中的第一个数。系统将其称为 NUMBER A。
这意味着我们需要创建一个变量——变量是存储少量信息的一种方式。我们把这个变量叫做
NUMBER_A，或者直接叫a。
2. 系统将 NUMBER A 初始化为“0”
我们会给变量
a设置初始值0
3. 系统先在显示区展示 NUMBER A 的值
我们需要一个可更新的文本框，用来显示
a的值
4. 用户按下一个数字键（例如“5”）
这说明每个按键都需要一个可点击对象。当用户点击或轻触时，系统会收到其数值信息，即按键标签上显示的数字。
5. 系统将 NUMBER A 的先前值（“0”）与刚输入的数字（“5”）组合 → “05”
我们通过把原值与新按下的数字组合来更新
a的值。（这里有个细节，可能要到真正构建原型时才会更清楚——没关系！这是个迭代过程。）
6. 显示区更新，以反映 NUMBER A 的新值
我们希望文本框显示
a的新值，因此这意味着要先更新a的值，再更新显示文本框。我们还希望去掉前导零。所以即使
a当前是“05”，显示也只会是“5”。
7. 用户再按下另一个数字键
对于每次按下数字键，我们都会重复以上步骤。
8. ……重复以上过程，直到按下运算符键为止
在按下运算符键之前，我们都处于输入第一个数字的状态，因此我很可能需要跟踪用户当前所处的流程阶段。
目前先假设我们的体验有四个阶段：
输入第一个数字
选择运算符
输入第二个数字
计算
在上述步骤期间，我们会一直停留在阶段 1：“输入第一个数字”，直到按下运算符键；届时用户将进入阶段 2：“选择运算符”。
我们可以用一个变量来存储阶段。把它命名为
phase。
到目前为止，我已经梳理了交互中阶段 1：“输入 Number A”的步骤，而还没有考虑如何使用 ProtoPie。
顺便说一句，还记得前面的流程图吗？它展示了计算器应用的流程，帮助我们可视化其运作方式。到目前为止，我们只聚焦了这一部分：
阶段 1：输入第一个数字
💡** 小贴士！** 充分利用你到目前为止为应用设计所做的一切工作。它在这个思维练习中非常有价值。你其实已经把它想通了——复用你已经完成的思考。
进入交互的下一阶段
现在我可以对交互的下一个阶段重复上述练习：
用户按下某个运算符键以选择运算
这还可以进一步拆解如下：
用户按下某个运算符键
系统将阶段从“输入第一个数字”切换为“选择运算符”
系统存储所选运算符
在开始输入第二个数字前，用户可能会按下另一个运算符键
系统将已存储运算符更新为新选择的那个
这些步骤会重复，直到用户按下数字键开始输入第二个数字。
而流程图中是这样呈现的：
阶段 2：选择运算符
接下来，当我推导构建需求时，看起来会是这样：
1. 用户按下某个运算符键
和数字键一样，运算符键也需要做成按钮。我们有四个不同的按钮：加、减、乘、除。
2. 系统将阶段从“输入 Number A”改为“选择运算符”
我们需要更新
phase变量，表明我们不再处于阶段 1：“输入 Number A”，而是进入阶段 2“选择运算符”。
3. 系统存储所选运算符
我们需要一个变量来存储所选运算符。可以命名为
op
4. 在开始输入 Number B 之前，用户可能按下不同的运算符键
这意味着在开始输入 Number B 前，用户可以改变主意。所以我们会确保在按下数字键之前不进入阶段 3。
5. 系统将已存储运算符更新为新选择的那个
我们会用新选择的运算符
B更新变量op
6. 这些步骤会重复，直到用户按下数字键开始输入 Number B
这意味着用户可以在重新输入数字之前随时改变主意；一旦开始输入数字，用户就会切换到阶段 3：“输入 Number B”。
我会对所有阶段重复上述练习，这样就具备了开始构建这个基础体验所需的一切。这标志着我的原型旅程正式开始。首先我会把这些基础交互拼成一个可运行模型，暂时先不处理由修饰键或后续计算带来的附加功能与复杂性。目标是先把这个基础操作打牢，再继续深入。
这种拆解——一直细化到看不见的系统操作——在打开 ProtoPie 之前，就已经形成了我们原型的蓝图。
高级原型设计的力量
现在我已经知道要如何构建它了，就可以开始思考如何把以上步骤映射到我选择的工具中。当然，这里的显而易见之选是 ProtoPie。它的高级功能让我们可以把原型从基础层面进一步扩展，更轻松地探索和实现复杂交互。当然，用 Figma 等其他设计工具也能做到，但 ProtoPie 会让这件事容易得多、也快得多。
复刻一个简单的工具类应用，正是 ProtoPie 功能组件大显身手的绝佳场景。我可以对所有同类按键做相同响应（例如，所有数字键都可以是同一组件的实例）。这样它们的逻辑就集中在一个地方，事情会简单很多。此外，在运行原型时我还可以轻松追踪变量值，这对排查过程中的问题非常有帮助。再加上 ProtoPie 内置的高级数学函数，处理计算器数据也会变得轻而易举。
下一篇：如何一步步制作计算器原型
对交互进行细致拆解并将其转化为可运行原型，这个过程看起来可能令人望而生畏。不过，有了 ProtoPie 这样的工具，这个过程会变成一次令人兴奋的探索，而不是一项艰巨任务。而且，这类应用原型也只是 ProtoPie 能力的冰山一角。
在本系列文章的下一部分，欢迎和我一起一步一步构建我们功能完整的计算器应用。我们将共同探索高级原型设计所提供的广阔能力，确保你能充分准备好，将最具雄心的设计项目真正落地。
