大多数原型登录界面都是一种捷径。你点一下按钮，界面就切换了，大家都默认把凭据这件事演一遍。问题不在于美观——而在于伪造的登录会产生伪造的反馈。当测试参与者知道交互不是真实的，他们的行为会发生变化，你收集到的数据也会随之变化。
本教程将构建真实可用的版本：
最终效果是一个与正式产品几乎无法区分的登录流程，完全在 ProtoPie 中构建，无需编写代码。
更喜欢边看边学？完整教程视频会实时带你完成每一步。
更偏向“读一遍就动手”的类型？两种方式都用上：用视频获取整体背景，用本指南逐步完成你之后还想回看的步骤。
你需要准备：
从 Figma 或你偏好的 UI 工具中导入的登录界面
用于 Face ID 动画的 Lottie 文件（本教程中使用的）
更想先看一个完成版？第 1 章的原型文件可在本教程末尾下载。
第一次接触 ProtoPie？先注册一个免费账户，然后边做边学。
第 1 步：从 Figma 导入你的登录界面，并保持图层结构完整
在 Figma 中，打开插件面板，搜索 ProtoPie 并启动它。选中完整的登录画板后，选择 Scene 而不是 Flattened。Scene 会保留你的图层层级；Flattened 则会把所有内容压缩成一张图片，这会让后续无法单独与某个元素交互。
点击导出。你的图层会在 ProtoPie 中以与 Figma 完全相同的结构出现。
💡 在继续之前，请把每个图层都清楚重命名。像“Rectangle 14”这样含糊的名称，会在你开始连接交互时浪费大量时间。
将 Figma 图层直接导入 ProtoPie——保留图层结构，随时可用于原型设计。
第 2 步：把静态输入框替换成真正可以输入文本的组件
这一步将真实原型与可点击假页面区分开来。ProtoPie 原生的 Input 图层可以接受真实键盘输入——这意味着测试者输入的是实际文本，而不是模拟内容。
进入 Text → Input，并将一个 Input 图层拖到画布上。把它放入图层层级中你的用户名字段组内，然后让它在视觉上与你的设计一致：
将占位文本设置为 Username
将背景填充与字段背景匹配
如果字段边缘有多余间距，取消勾选 Padding
从原始文本图层复制十六进制颜色值，并粘贴到 Input 图层的占位文字颜色中，然后匹配字体和字号
预览。点击字段并输入。你的用户名输入框现在可以正常使用了。
💡 在复制之前，将此图层重命名为 Input Username。
第 3 步：将密码框设为掩码，让它表现得像真实应用
复制 Input Username，并把副本放进你的密码字段组中。要把它变成密码框，只需改两处：
将占位文本改为 Password
将 Type 从 Text 改为 Text Password
Text Password 会自动将输入字符掩码为圆点，无需任何额外逻辑。
预览两个字段。用户名显示输入文本，密码显示圆点。完全符合用户预期——这也正是让这个原型在 用户测试 环节中可信的原因。
只需将 Type 切换为 Text Password 就能掩码字段——无需自定义逻辑。
第 4 步：在连接导航之前先创建仪表板场景
在 ProtoPie 中添加一个新场景。它将成为你的仪表板，这时可以暂时保持为空。关键是，在你连接登录按钮之前，它必须已经作为一个 navigation target 存在。
💡 在没有目标场景的情况下就设置 Jump 响应，是早期 ProtoPie 构建中最常见的顺序错误。
第 5 步：让登录按钮跳转到仪表板
选中你的 Log In 按钮图层。添加一个 Tap 触发器，并将响应设置为 Jump，目标指向你的仪表板场景；将转场设置为 Slide in from right to left，以获得原生应用的感觉。
预览并点击。场景切换了。按钮能工作，但不管输入框里是什么，它都会工作。下一步将修复这一点。
Tap 触发器连接到 Jump——登录按钮现在会导航到仪表板场景。
第 6 步：使用变量捕获用户输入内容
变量是让这个原型具备记忆能力的关键。没有变量，输入框就只是视觉上的字段，与应用逻辑毫无关联。
在 ProtoPie 界面左下角，为你的登录场景添加两个变量。将它们都设置为 Text 类型，以便处理字母、数字和特殊字符。
把它们命名为：
username
password
使用公式将每个变量绑定到对应的输入图层。选中 username 变量，点击 Use Formula，然后输入：input("Input Username").text
password 也同样处理：input("Input Password").text
打开每个变量旁边的调试图标。屏幕上会出现绿色的变量覆盖层，显示你输入时的实时变量值。这能在你在其上构建任何逻辑之前，先确认绑定是否正常。
使用免费计划？你可以完成本教程中的所有内容。准备升级时——无限原型、团队协作、更多场景——以下是可用方案。
第 7 步：添加条件逻辑，让只有有效凭据才能登录
回到登录按钮上的 Tap 触发器，并添加一个 Condition。创建两个必须同时成立的条件：
username 等于 alex.c@gmail.com
password 等于 ABC123
把 Jump 响应移入这个条件块中。现在只有当两个值都完全匹配时，场景跳转才会触发。错误凭据、错误的邮箱格式，或空字段——都无法通过。
只有当两个条件都满足时，Jump 响应才会触发。错误凭据无法通过。
第 8 步：为登录失败添加错误状态
没有错误状态的登录流程不算登录流程——它只是一个单向入口。找到你的错误提示图层，将其重命名为 Error Text，并把透明度设为 0，使其在加载时不可见。
为登录按钮触发器添加第二个条件，它与第一个条件相反：
username 不等于 alex.c@gmail.com
password 不等于 ABC123
在这个条件中，添加一个 Change Property 响应，目标为 Error Text。将透明度设为 100。
预览完整流程。错误凭据会显示错误信息。正确凭据会跳转到仪表板。此时登录流程已经有两个明确结果，这正是它可测试且能交付给利益相关方的原因。
第 9 步：加入 Face ID 动画——让它看起来更真实的细节
生物识别登录是那种会让测试者停下来问“这是真应用吗？”的交互。下面是构建方法。
进入 Media，并将一个 Lottie 图层拖到画布上。加载你的 Face ID Lottie 文件，并把该组放在 iPhone 框架上方，画布外。记下你希望它落下来的 Y 坐标——Y: 60 很适合作为落点。
选中你的 Login with Face ID 按钮，并添加一个 Tap 触发器。将其重命名为 Tap Face ID，以便与主登录触发器区分开来。
按顺序添加四个响应：
Move——目标为 Lottie 容器，将 Y 设为 60。这样它会下移进入视图。
Playback: Seek——目标为 Lottie 文件，将时间设为 0 秒。这样会重置动画，使其始终从头开始播放。
Playback: Play——目标为 Lottie 文件。
Jump——跳转到你的仪表板场景，采用从右到左滑入。
第 10 步：调整时序，让动画先播放再切换场景
如果不设置延迟，四个响应会同时触发，场景会在动画还没来得及播放前就跳走。使用时间轴延迟控制把它们错开。
推荐延迟设置：
Move：0 秒（点击后立即触发）
Seek：0 秒（立即触发）
Play：0.5 秒（给 Move 动画留出完成时间，再开始 Lottie）
Jump：1 秒（让完整的 Lottie 动画先播放完，再进行跳转）
在 Jump 响应上勾选 Reset selected scenes。这样当用户返回登录界面时，Face ID 动画会回到初始位置。
预览完整流程：点击使用 Face ID 登录，动画下落并播放，屏幕切换。这就是一种足以面对任何利益相关方或测试参与者的生物识别登录效果。
这个登录流程能带来什么
一个能验证真实凭据、显示实时错误状态并模拟生物识别认证的登录，不只是“看起来很棒”。它会改变你能如何使用这个原型。
测试参与者 会像使用真实产品一样与它互动。你收集到的反馈反映的是真实行为，而不是为了“这只是个演示”而做的配合。利益相关方体验到的是认证流程本身，而不是别人对它的讲解。而当逻辑精确到这个程度时，原型就不再只是一个视觉参考，而会成为工程团队实际依据的规格。
这就是 Pie Bank 的基础。在教程 2 中，我们将设置仪表板、变量如何在每个屏幕之间传递财务状态，以及如何构建让高端应用更有触感的滚动行为。
完成后的登录场景——所有交互都已连接、条件已设置，原型已准备好像真实应用一样预览。
继续在 ProtoPie 中操作
下载第 1 章的原型文件——登录场景已完整搭建，每个交互都已连接。将它与本教程一起打开，查看每一步如何组合在一起，或者将其作为参考来检查你自己的构建。
还没开始使用 ProtoPie？
还没开始使用 ProtoPie？现在就开始免费构建吧。本教程中的所有内容都适用于免费计划。
想把这种原型设计能力带给你的团队？
如果你的团队正在处理复杂的产品体验，并且需要达到这种保真度的原型，我们的 Creative Technologists 会直接与设计团队合作，帮助你更快实现目标。
