常见交互
计算器原型：分步指南
学习如何使用我们的分步指南创建一个功能齐全的计算器原型。提升你在高级UI/UX设计方面的技能。
Jeff Clarke, UX Designer & ProtoPie Educator
December 27, 2023
欢迎来到我们深入系列文章的第二部分，关于高级原型设计的。在第一部分，我们探讨了如何构建高级原型，设计师需要具备的基本思维和准备工作。为了全面掌握这些步骤并加深对高级原型设计的理解，强烈建议您阅读整篇文章。 这种理解至关重要，因为它为如何处理自己的高级原型奠定了基础。在开始使用ProtoPie或您选择的任何其他工具进行原型设计之前，需要认真思考产品实际运作方式的重要性。 现在你已经阅读了第一部分，请在ProtoPie Studio中打开下面的起始Pie文件并跟随。
如何制作计算器
在本教程中，我们将展示为什么ProtoPie是许多设计师在高级原型设计项目中的首选选择。我们将充分利用ProtoPie的变量、条件和组件，创建一个动态交互的用户体验，模仿 macOS 计算器应用程序。
第一部分：运用思维指导构建
我们将我们的构建分为四个主要阶段 - 输入第一个数字，选择运算符，输入第二个数字，计算结果以建立一个逻辑工作流。接下来，我们将引入基本变量 A 和 B，以及另一个变量 op。我们还将创建一个数字按钮组件，我们可以复制并高效地重用，以处理数字 0 到 9 加上小数点键的所有 11 种可能性。
在本节中，你将学习如何在文本和数字之间 t 切换变量类型，确保准确的十进制数表示，并为构建计算器中复杂的部分奠定坚实的基础。让我们看看它是如何运作的！
第一部分：运用思维指导构建
第二部分：完成基本计算
在这一部分中，我们将根据用户输入在不同的数学操作之间进行切换，以创建和管理我们的按钮组件 。关键在于制定必要的逻辑来存储和更新变量值。
此外，你将学习如何处理特殊情况，比如“等于”操作以显示结果，并在执行某些操作时通过闪烁显示提供视觉反馈。通过这个过程，你将能够建立对管理用户交互的基础理解，并在原型中通过逻辑阶段前进。
第二部分：完成计算
第三部分：进行后续计算和最后的润饰
我们快要完成了！在最后一部分，我们将完善我们的计算器，使其能够处理后续计算。我们将整合不同的功能按钮，并为每个按钮配备独特的逻辑。
通过这个过程，你将学会如何无缝处理不同的阶段，并改善用户流程。作为对我们一直以来作为路线图的流程图的回顾，在这个练习中你将看到详细规划和文档记录的重要性。通过分解每个步骤，我们能够节省大量设置所需的变量和条件的时间，并有条不紊地解决高级原型设计中涉及的复杂性。
第三部分：进行后续计算和最后的润饰
使用更高级功能的改进思路
在这个练习中，我们完成了一个完全功能的计算器，可以执行实际的计算，同时模仿一个真实的应用程序 —— 所有这些都是在不写一行代码的情况下实现的。我们现在有了一个良好的基础，还有更多可以做的事情。以下是一些建议，可以添加到我们的原型中，使其更加完善：
- 为所有计算器按钮添加悬停和点击状态
- 添加键盘输入，这样你就不需要指着点击了
- 尝试语音输入？为什么不告诉你的计算器要计算什么呢？
- 当显示屏宽度无法容纳太多数字时，让文本缩小
- 将清除按钮升级为真实应用程序中的 AC/C 组合按钮
- 对于某些按钮，使用图标而不是文本标签
- 添加存储计算结果并以后检索的内存功能
- 尝试添加更多的功能键，甚至尝试科学计算器的布局
- 所有这些都是可能的，甚至还有更多可能性 —— 这个练习甚至无法揭示 ProtoPie 的全部潜力。
设计师和开发者的合作轻松宛若摊煎饼
当你首次深入思考产品的运作方式时 —— 从细节入手 —— 你会发现构建高级原型会更容易。你为开发者创建的所有资源现在成为你的指南。记住！你比任何人都更了解你的产品。没有其他人比你更适合将其变为现实。