在构建原型时，你会经常需要让用户在文本字段中输入内容。ProtoPie 让这件事变得非常简单。在本教程中，你将看到让用户输入一些文本并对其进行处理有多么容易。
概览
你将需要什么
你将学到什么
如何为交互式文本字段制作原型
步骤 1：添加文本输入框
步骤 2：自定义输入框
步骤 3：在你的设备上预览
步骤 4：添加交互
步骤 5：再次预览！
就是这样！简单得像香蕉奶油派一样！
了解更多关于交互式文本输入字段的信息
探索更多原型课程
你将需要什么
要跟着本教程操作，请下载这个示例 Pie 文件并在 Studio 中打开它。
我们还会在进行过程中直接在设备上预览体验。为此，你需要在手机或平板上安装 ProtoPie Player 应用。ProtoPie Player 是一款强大且免费的应用，它允许你或任何与你共享 Pie 的人像使用原生移动体验一样在其设备上运行你的原型。
你将学到什么
完成本教程后，你将学会如何：
在你的 Pie（原型）中添加文本输入框
自定义文本输入框
响应用户按下键盘回车键以表示输入完成
构建并调用一个网页 URL——这将是对 ProtoPie 高级功能 Formulas（公式）的预览，我们将在下一篇文章中更详细地讲解。
在你的设备上预览体验
完成时间：≤15 分钟
如何为交互式文本字段制作原型
要学习如何创建动态文本输入字段，请查看视频教程或按照下面的详细分步指南操作。
步骤 1：添加文本输入框
打开示例 Pie 文件。它有一个背景图层，看起来像 Google 的图片搜索界面。
我们将让搜索字段真正可用！
在左上角图标组中找到 Text 菜单项。点击它并选择 Input.****
在画布上任意位置拖拽绘制你的输入字段。
不用担心是否完美。我们将在下一步中精确定位它。
我们希望输入框能完美地放入背景中的胶囊形区域。
你可以拖动控制点来完成，或者直接使用这些数值。
我们来把文本框重命名为更有意义的名称。双击图层，并将其命名为 Search. 稍后确保它精确命名为
Search（区分大小写） 非常重要，因此如果你命名成了小写 s 的search或任何不是Search的名称，请现在修正。
步骤 2：自定义输入框
我们希望输入框与背景无缝融合。在属性面板中取消 Fill 旁边的勾选，以移除文本框的灰色背景色。
当前文本框的占位文本是 "placeholder"。你可以在属性面板的 PlaceHolder 区域中修改它。将其改为
search for images。
💡 专业提示：你也可以在这里更改占位文本的颜色和不透明度。
我们还有更多自定义选项。例如，你可以选择聚焦字段时显示哪种键盘，以及输入框是否应为密码字段。
向下滚动到 Keyboard Options，并查看 Type 旁边的下拉菜单。
选择** Text**、URL、Email 或 Number 会让键盘适配你希望收集的信息类型。例如，如果选择 Number，聚焦字段时会显示数字键盘。选择任一密码选项会隐藏已输入文本，而不是显示输入的字符。
从左到右：Type 选择了 Text、Number 和 Password。
在我们的案例中，我们要获取搜索词。因此将 Type 选择为 Text。
Keyboard Options 下的第二个选项是屏幕键盘上 Return 键的标签文字。
由于我们在制作搜索交互，所以选择 Search。
最后，如果你是为 iOS 设计，还可以选择浅色或深色主题。
选择你喜欢的即可。
步骤 3：在你的设备上预览
在 Studio 预览中，点击文本框。你应该会看到屏幕键盘出现。你的第一反应可能是点击屏幕键盘按键来输入内容。如果你试一下，会发现行不通。这只会导致文本框失去焦点并隐藏键盘。
在桌面电脑上的 Studio 中预览文本输入时，你需要使用物理键盘输入。屏幕键盘在 Studio 中只是占位图像。
我们改为在设备上运行，这样就可以直接使用设备键盘输入。我们将使用设备上的 ProtoPie Player 应用来完成。如果你还没安装，请使用上方“你将需要什么”部分中的链接，在设备上安装 ProtoPie Player。
在 Studio 中点击右上角图标组里的 Device。这会显示一个二维码。让它保持可见，我们马上会用到。
在你的设备上启动 ProtoPie Player 应用。你会看到这个界面：
点击 Scan QR Code 并扫描你刚刚显示的二维码。你的 Pie 现在应该会在设备上启动。
💡 **注意：**要让它正常工作，你的设备需要与运行 Studio 的电脑处于同一 WiFi 网络，或者通过 USB 数据线连接到运行 Studio 的电脑。如果 Pie 无法在设备上启动，请再次检查你的手机是否通过这两种方式之一连接。
在设备上点按文本框。会显示可输入的真实键盘。根据你使用的设备，你会看到原生 iOS 或 Android 键盘。
步骤 4：添加交互
我们希望当用户点击键盘上的 Search 键（表示输入完成）时触发操作（记得我们在步骤 2 中把 Return 键标签改成了 Search）。我们将使用 Return 触发器在该事件发生时执行操作。
在 Studio 中添加一个 Return 触发器。在属性面板中，将其配置为关联到
Search输入图层。
你在此触发器下添加的任何响应，都会在输入图层聚焦且用户点击 Return（即 Search）按钮时触发。
接下来这部分可能看起来有点晦涩。我们将使用 ProtoPie 的一个高级功能——Formulas（公式）——来构建 URL 并发送到浏览器。如果这看起来很陌生不用担心。我们会在下一篇文章中更详细讲解 Formulas。现在只需按步骤操作。
添加一个 Link 响应。Link 响应可用于在浏览器标签页中打开指定 URL。
我们希望用用户输入的内容动态构建 URL，以执行 Google 图片搜索。由于在用户按下 Return 之前我们不知道其输入内容，所以需要即时构建。为此我们将使用 Formula。在 Link 下的列表中选择 Formula.
当你点击这个下拉菜单下方的输入框时，会看到一个小的
∫x图标。这意味着你可以为链接 URL 创建公式！点击
∫x图标。字段会展开，给你更多输入空间。
将以下文本精确输入（包括引号）或复制粘贴到公式字段中：
"https://www.google.com/search?q=" +Search.text + "&tbm=isch"
点击 OK。
继续之前，我再稍微解释一下我们刚才做了什么。每当你在输入框中输入内容时，你输入的值都会存储在该图层名为 text 的属性中。我们通过拼接三段文本创建了这个公式：
一段已知文本——这部分始终相同：
"https://www.google.com/search?q="一段未知文本——Search 输入框的 text 属性：``Search
.text另一段已知文本——同样始终相同：
"&tbm=isch"
💡 注意：还记得第一步中我们把输入图层精确命名为 Search 吗？在公式中我们通过名称直接访问了 Search 图层。以这种方式使用图层名称时，名称是区分大小写的。
再次提醒，如果这看起来很复杂，不用担心。我们会在下一篇文章中更深入讲解 Formulas。这里的关键点是：用户在输入框中输入的任何内容都会作为该图层的属性存储，并可在你的 Pie 中使用。
步骤 5：再次预览！
要将最新更改更新到你的设备，请点击右上角图标组中的 Run。
现在你应该能够执行图片搜索了。输入你想搜索的内容，然后点击 Search.****
你会注意到执行搜索时，设备会切换到浏览器应用来显示结果。如果你使用的是 iOS，还有一个可以调整的地方。
点击 Return 触发器下的 Link 响应。
在属性面板中勾选 Open In-app Browser。
再次点击 Run 以重新加载并将最新更改更新到设备。当你执行搜索时，浏览器标签页会在 ProtoPie Player 应用内打开，你可以点击 Done 返回 Search 输入框。
就是这样！简单得像香蕉奶油派一样！
在本教程中，你学习了文本输入字段的相关内容以及如何配置它们。你还学到了可以通过访问输入图层的 text 属性来使用用户输入的内容。最后，你体验了 Formulas——ProtoPie 的高级功能之一——的强大能力。我们将在下一篇文章中深入讲解 Formulas！
了解更多关于交互式文本字段的信息
** **
探索更多原型课程
如果你一直在跟完整个系列，你会记得上一篇文章讲的是语音与讲话功能。它们在移动设备上都表现得非常出色。看看所有课程，提升你的原型设计技能。
第 6 课：如何创建输入交互
还想要更多？注册 ProtoPie School，成为原型设计高手并免费获得证书！
使用 ProtoPie 创建交互式文本字段
准备好开始原型设计了吗？那就免费下载 ProtoPie，开始创建带有交互式文本输入的原型吧。
