欢迎来到我们高级原型设计深度系列的第 2 部分。在第一部分，如何构建高级原型**，**我们探讨了设计师在进入原型设计流程之前需要具备的基础思维方式和前期准备思考。强烈建议通读该文章，以便更全面地理解下文详述的步骤，并加深你对高级原型设计的认识。
这种理解至关重要，因为它为你如何着手自己的高级原型奠定基础。尽量不过度简化地说，它强调了在你开始使用 ProtoPie 或你选择的任何其他工具进行原型设计之前，必须细致思考你的产品究竟如何运作的重要性。
现在你已经阅读了第 1 部分，请在 ProtoPie Studio 中打开下面的起始 Pie 文件并跟着操作。
概览
如何为计算器制作原型
第 1 部分：用你的思考引导构建
第 2 部分：完成基础计算
第 3 部分：连续计算与收尾润色
使用更高级功能的改进思路
像 Pie 一样轻松的设计师-开发者协作
如何为计算器制作原型
在本教程中，我们将展示为什么 ProtoPie 是许多设计师在高级原型项目中的首选。我们将充分利用 ProtoPie 的变量、条件和组件，打造一个动态且可交互的用户体验，复刻 macOS 计算器应用。
第 1 部分：用你的思考引导构建
我们将构建过程拆分为四个主要阶段——输入第一个数字、选择运算符、输入第二个数字，以及计算结果——以建立清晰的逻辑工作流。接下来，我们将引入关键变量 A 和 B，以及另一个变量 op。我们还会创建一个 digit button 组件，可复制并高效复用到 0 到 9 的 10 个数字加上小数点键这 11 种可能。
在本节中，你将学习如何策略性地在文本和数字之间切换变量类型，确保小数表示准确，并为后续构建计算器中更复杂的部分打下坚实基础。让我们看看实际效果！
第 2 部分：完成基础计算
在本节中，我们将根据用户输入在不同阶段之间切换，以创建和管理用于不同数学运算的按钮组件。关键在于开发用于存储和更新变量值的必要逻辑。
此外，你还将学习如何处理诸如“等于”运算等特殊情况来显示结果，以及在执行某些操作时通过闪烁显示区域来提供视觉反馈。通过这一过程，你将能够建立对管理用户交互以及在原型中推进逻辑阶段的基础理解。
第 3 部分：连续计算与收尾润色
我们快完成了！在最后一部分中，我们将完善计算器以处理连续计算。我们会整合不同功能按钮，并为每个按钮配备独特逻辑。
通过这一过程，你将学习如何无缝处理不同阶段并优化用户流程。回到在整个练习中一直作为路线图的流程图，你会看到细致规划与文档记录的重要性。通过拆解每一步，我们能够在设置所需变量和条件时节省大量时间，并有条不紊地应对高级原型设计中的复杂性。
使用更高级功能的改进思路
在这个练习中，我们完成了一个功能完整的计算器：它不仅能进行真实计算，还能复刻真实应用——而这一切都无需编写一行代码。现在我们已经有了良好基础，还能做得更多。以下是一些你可以加入原型的额外想法，让它更上一层楼：
为所有计算器按钮添加悬停与点击状态
添加键盘输入，这样你就不必再指点点击
要不要试试语音输入？为什么不直接告诉计算器要算什么？
当位数过多超出显示宽度时，让文本缩小
将清除按钮升级为像真实应用那样的组合 AC/C 按钮
为部分按钮使用图标而不是文本标签
添加存储功能，以便保存计算结果并在之后取回
尝试添加更多功能键，甚至挑战一下科学计算器布局
这一切以及更多都可以实现——本练习甚至还远未触及 ProtoPie 的可能性边界。
像 pie 一样轻松的设计师-开发者协作
当你一开始就以批判性思维、并以极其细致的方式思考产品如何运作时，你会发现构建高级原型会更轻松。你为开发者交接而创建的所有资源，现在都会成为你的指引。记住！你已经比任何人都更了解你的产品。没有人比你更适合把它变为现实。
