在本教程中，我们将引导你完成创建高保真原型的过程，以复现熟悉且有趣的 MacBook 设置体验。该项目旨在以连贯且可交互的方式展示 ProtoPie 一些最强大的功能。
我们将涵盖从创建带有实时输入验证的交互式个人资料编辑器，到构建高级无障碍功能（如文本转语音和语音命令）的全部内容。
让我们开始吧。
第 1 部分：交互式个人资料编辑器
本节重点构建“创建电脑账户”界面，用户可在此输入信息并个性化头像。
步骤 1：实现输入验证
首先，我们将构建一个用户输入验证系统，同时覆盖实时检查和表单提交时的验证。
触发验证：
创建一个“Validation”触发器，发送包含 Validation_Type 变量的消息。该变量在表单提交时设为“Continue”，在实时验证时设为“Real-Time”。
当点击“continue”按钮或输入字段失去焦点时，应发送此消息。
触发验证时，先将名为 Error_Exists 的变量初始化为 1。
如果 Validation_Type 为“Continue”，发送“Continue Validation”消息；如果为“Real-Time”，发送“Real-Time Validation”消息。
处理验证消息：
当原型接收到“Continue Validation”时：
验证必填输入字段（账户名、用户名、密码和密码确认）是否为空。
如果某输入字段文本长度为 0（length(input field layer name.text) = 0），则显示该字段对应的错误消息。
当原型接收到“Real-Time Validation”时：
检查密码与密码确认字段是否一致。
如果不一致（password input.text = password confirmation input.text），显示错误消息。
显示错误并继续：
根据验证结果，显示相关错误消息。
如果所有检查都通过，将 Error_Exists 变量设为 0。
当按下“continue”按钮时，触发所有输入字段失去焦点，从而运行验证检查。
如果 Error_Exists 为 0，则跳转到下一个场景。
步骤 2：创建个人资料弹窗
此步骤介绍个人资料编辑弹出窗口的逻辑。
切换弹窗：当用户点击 Edit、Cancel 或 Save 按钮时，应切换弹窗和编辑按钮的可见性。
Save 按钮逻辑：
当点击编辑按钮时，检查 Current_Profile 变量。若其为“None”，则禁用保存按钮。
当用户点击保存时，用 Selected_Profile 的值更新 Current_Profile 变量。
Cancel 按钮逻辑：
若用户点击取消，向 Previews 组件发送“Reset Profile”消息，将个人资料恢复为原始的 Current_Profile。
同时，向 Profile 组件发送“Reset Selection”消息以清除当前选择。
列表切换：当点击“Emoji”或“Monogram”按钮时，切换各自列表及选中效果的可见性。
步骤 3：保存并缩放头像图像
在这里，我们将处理头像图像的选择、显示与缩放。
头像选择：点击头像图像时，发送带有 Selected_ID 的“Select Profile”消息。同时发送“Reset Selection”消息，在显示新选择前清除所有先前选择。
更新预览：在 Previews 组件中，使用 Reorder_ID 变量来管理哪张图像显示在最上层。
启用保存：当主场景接收到“Select Profile”消息时，启用保存按钮。
显示首字母文本：如果所选个人资料是“Monogram”，则显示首字母文本。
图像缩放：使缩放“Knob”可水平拖动。使用 Chain 触发器将 Knob 的 x 位置与 Indicator、预览图像和首字母文本的大小关联起来。
步骤 4：通过姓名输入创建字母头像
第 1 部分的最后一步说明如何根据用户输入的姓名动态生成字母头像缩写。
跟踪姓名输入：创建名为 Your_Name 的变量，实时跟踪 Full name 输入字段中的文本。
提取首字母：使用 Detect 触发器，在 Your_Name 变化时激活。
如果不存在空格（仅有名）：将输入赋给 First_Name，并将其首字母赋给 Initial 变量。
如果存在空格：将空格前文本赋给 First_Name，空格后文本赋给 Last_Name。然后将 First_Name 的首字母加上 Last_Name 的首字母赋给 Initial 变量。
更新字母头像：通过消息将 Initial 值发送到 Profile 组件以更新字母头像文本。确保缩写也会随图像缩放逻辑按比例缩放。
第 2 部分：无障碍功能
本节介绍四种不同无障碍功能的实现，参考了 macOS 中的相关功能。
步骤 1：朗读所选内容（视觉）
此功能为选中文本实现文本转语音，并带有屏幕控制器。
设置：在组件中预先定义可覆盖变量，用于文本大小、行数、高亮尺寸和朗读时长（Slow_Duration, Normal_Duration 等）。
触发：当用户双击一句话时，将选中文本和时长值发送到主场景。显示屏幕控制器，并重置先前高亮。
控制器：允许控制器可拖动。为其按钮添加鼠标悬停效果。播放/停止按钮用于切换 IsSpeaking 变量。
播放逻辑：点击播放时，检查所选速率（普通、快速、慢速），并使用 Speak 响应以对应时长朗读 Selected_Text。
重置：创建“Reset all”消息，用于停止朗读、清除高亮并隐藏控制器。
步骤 2：语音辅助 - “Hey Pie” 设置（运动）
此功能实现了一个可响应不同命令的语音助手。
打字效果：使用计数器变量（Answer_Char_Counter）和 Receive 触发器，逐字输出助手回答，创建打字效果。
语音命令：为不同短语创建独立的 Voice Commands（例如“Hello”“Play some chill music”）。
动态回复：使用 Response_Num 变量触发不同的 Answer_Text 值。例如，若用户说“hello”，将 Response_Num 设为 1，并让助手回复“Hello, how can I help you?”。这也可触发其他响应，如播放音乐或调节音量。
超时逻辑：使用不可见计时框检测用户在一定时间内未说话（如 10 秒）。若发生超时，让助手说“Sorry, I couldn't understand,”并再次提示用户。
步骤 3：实时字幕（听觉）
此功能可实时显示语音音频的转录文本。
设置：场景开始时，立即持续监听。
显示转录：使用内置 $voiceTranscript 变量，并在其每次更新时将值赋给文本字段。
自动滚动：使用 Text_Height 变量跟踪文本容器高度。使用 Detect 触发器检查 Text_Height 是否超过可滚动容器高度。若超过，则自动向下滚动容器以显示最新文本。
退出：确保在用户离开场景前使用 Stop Listening 操作。
步骤 4：输入转语音（言语）
此功能允许用户在字段中输入文本，并让系统朗读出来。
设置：使用开始触发器在场景加载时自动聚焦到文本输入字段。
播放：当用户按下播放或回车键时，触发一个包含输入字段文本的 Speak 响应。
播放计时器：计算语音时长（例如 length(Input_Speaking) * 0.1）。使用不可见计时框在该时长内移动。
播放结束：当计时器完成时，发送“End Timer”消息。这应重置 UI、将播放/停止按钮切换回去，并处理用户在音频播放期间输入文本时的替换逻辑。
就这样，你已经掌握了创建精彩交互式原型的技巧！现在就去构建一些令人惊叹的作品吧。
想获取更多关于如何开始使用 ProtoPie 的技巧与窍门吗？
你可以在我们的 ProtoPie School 版块 中找到大量学习资料，包括可直接使用的示例 Pies！
