如何在你的原型中隐藏和显示密码

当你在网站或应用中注册或登录时，大多数网站会将密码遮蔽（或隐藏）起来，以防被他人窥视。但为了避免输错，密码输入框的一个良好 UX 做法是提供一个显示/隐藏按钮—— 这样用户就能看到自己正在输入的内容。

在本教程中，我们将学习如何在设计中创建这个用于显示和隐藏密码的按钮。ProtoPie 通过使用 Input 输入框和 Detect 触发器，让这件事变得很简单。

概览

• 你将学到什么

• 开始之前

• 如何在原型中显示和隐藏密码

• 1. 准备输入框

• 2. 在按下隐藏/显示时重新排列输入框

• 3. 同步不同输入框中的文本

• 就是这样！你现在可以显示和隐藏密码了

• 使用 ProtoPie 进阶成为设计师

你将学到什么

在本课中，你将学习如何

1. 准备 Input 输入框

2. 在按下隐藏/显示时重新排列 Input 输入框

3. 同步不同输入框中的文本

最后，你将能够做出这样的效果！

[起始 Pie 文件] [完成版 Pie 文件]

开始之前

为了让你快速开始，我们已经准备了一个带有显示/隐藏按钮的 Pie 文件。它通过 Conditions. 来实现。

了解如何使用 Conditions 制作切换按钮。

如何在原型中显示和隐藏密码

1. 准备输入框

　1. 在这些步骤中，我们将先搭建基础：创建一个带遮蔽的 Text Password 输入框，以及一个普通的 Text 输入框。

我们会使用两个文本** Input** 输入框——一个用于显示遮蔽后的密码文本，另一个用于显示可见文本。

　2. 选择 Hide 输入框，然后在 properties panel（属性面板）中找到 Keyboard Options。将 Type 改为 Text Password. 这样会自动将输入到 Hide 输入框中的所有文本进行遮蔽。

　3. 现在预览一下原型。你应该能看到 Hide 输入框正在生效，文本已被遮蔽。

2. 在按下隐藏/显示时重新排列输入框

在这些步骤中，我们将使用 Reorder 响应，让隐藏/显示按钮在 Hide 和 Show 输入层之间切换。

　1. 选择 Show 输入层。在现有的 Tap 交互中，点击 +，添加一个 Reorder 响应。Reorder 响应可以改变图层顺序。在我们的例子中，我们希望把 Show 移到 Hide 前面，使其可见。

　2. 确保 Reorder 响应设置为 Bring Forward。这个属性会将 Show 图层向前移动一层，也就是正好到 Hide 前面。

　3. 将 Reorder 响应移动到第一个 Condition 下方，也就是标题为 "Tap Show button" 的那个。这样，当点击显示按钮时，Reorder 响应就会把 Show 图层移动到 Hide 图层之上。

　4. 对 Hide 图层重复相同步骤。先选择 Hide 输入层，并添加一个 Reorder 响应。再次确认 Reorder 设置为 Bring Forward。这一次，Reorder 响应应应用于第二个 Condition，即 "Tap Hide Button"。所以请确保它位于第二个 Condition 下方。

现在，当点击隐藏按钮时，Reorder 响应会将 Hide 图层移动到 Show 图层之上。

💡 为什么我们使用 Reorder 响应？我们不能直接用 Opacity 来隐藏 "Hide" 和 "Show" 图层吗？

当然可以！那样也能实现。不过，这种方法更快，每个图层只需一个响应，而不必每次都为两个图层分别设置 Opacity 值。

　5. 继续预览你的进度。你会注意到一开始密码框是遮蔽状态。按下隐藏/显示按钮后，遮蔽框消失了，但出现的似乎是一个空的 Show 输入框。我们希望它显示我们之前输入的文本，所以我们将在接下来的步骤中解决这个问题。

3. 同步不同输入框中的文本

在这些步骤中，我们将使用 Detect 触发器来同步 Hide 和 Show 输入层之间的文本。

了解更多触发器相关内容。

　1. 选择 Hide 输入层。点击 Add Trigger 按钮，并添加一个 Detect 触发器。将 Detect 的 value 改为 Text。Detect 触发器会基于所选的 value，检查指定图层上的任何变化。

在我们的例子中，我们选择了 Text，因此每次输入文本发生变化时，这个触发器都会被激活。

　2. 在这个 Detect 触发器中，添加一个 Text 响应。确保该 Text 响应设置到 Show 图层。

　3. 将 Content 改为 Formula. 使用以下公式：``Hide.text。这个公式告诉 Text 响应去镜像在 Hide 图层中输入的文本。

现在，每次在 Hide 图层中输入文本时，相同的文本都会自动复制到 Show 图层。不过，这也应该反向生效。所以……

　4. 对 Show 图层重复相同步骤。先选择 Show 图层，并添加一个 Detect 触发器。将 Detect value 改为 Text.

　5. 给这个 Detect 触发器添加一个 Text 响应，并确保它设置到 Hide 图层。

　6. 再次将其 Content 改为 Formula。这次使用公式 ``Show.text。现在，这个公式会告诉 Text 响应去镜像在 Show 图层中输入的文本。

现在，每当在 Hide 或 Show 图层任一处输入文本时，文本都会分别复制到 Show 和 Hide 图层中。

就是这样！你现在可以显示和隐藏密码了

太棒了！你已经学会了如何创建一个带遮蔽的 Password Text 输入框，并通过 Detect 触发器、Text 响应以及一个超简单的内置公式将其文本镜像到另一个图层。你还学会了如何使用 Reorder 响应在两个图层的可见性之间进行切换。

使用 ProtoPie 进阶成为设计师

ProtoPie 赋能设计师创建交互性强、逼真的原型，从而无需开发也能与相关方进行清晰沟通并高效完成测试。

让我们教你如何将你的设计提升到新高度！

{学习高级原型设计} [免费下载 ProtoPie]