Axure 9 教程：创建B站图文登录验证交互

"Axure 9 案例教程，如何利用情形实现B站图文登录验证" 在本Axure 9的案例教程中，我们将学习如何创建一个类似哔哩哔哩（B站）的图文登录验证功能。这个验证方法不同于传统的验证码，它要求用户按照特定顺序点击图片中的文字，然后验证点击的顺序是否正确。这个教程适用于有一定Axure基础，大约一年经验的产品经理。 1. **图文验证界面构建** 首先，我们需要绘制验证界面，包括验证图文、提示文字、验证图片、刷新按钮和确认按钮。在Axure中，可以使用热区（Hotspot）元件覆盖在文字上，以便用户点击。 2. **设置点击交互** - **第一步**：为第一个文字设置点击交互。创建一个70×70的热区覆盖在“转”字上，然后添加交互使得当点击该热区时，显示圆形1并置于顶层，同时将圆形1的文本设置为“1”，表示这是第一项被点击的内容。 3. **使用情形（Scenario）管理交互** - **第二步**：为了处理正确的和错误的点击顺序，我们需要使用Axure的情境。首先启用情境，然后添加条件，如果圆形2不可见，则当前点击的是第一个文字。在这种情况下，圆形1的文本应显示为“1”。 4. **设置多个交互情形** - 接下来，我们需要为不同的情形设置不同的交互。在圆形2可见的情况下，这意味着它已被点击过，所以当前点击的应该是第二个文字。此时，应更新圆形1的文本为“2”，并显示圆形2。这可以通过在同一个交互中添加新的条件和动作来实现。 5. **验证逻辑** 当用户点击“确定”按钮时，需要检查点击顺序是否正确。可以创建一个新的交互，当“确定”按钮被点击时，遍历所有可能的点击顺序，对比实际的点击顺序。如果顺序错误，显示“验证失败”并刷新验证图文；如果顺序正确，显示“验证成功”。 6. **刷新与错误处理** 在错误的情况下，可以使用动态面板（Dynamic Panel）的“重置”功能刷新验证图文。同时，可以通过设置全局变量来跟踪用户的点击顺序，并在验证时比较这些变量。 7. **最后步骤** 完成以上步骤后，记得预览和测试原型，确保所有交互和验证逻辑都能正确工作。此外，还可以通过添加更多的文字和图片来扩展验证的复杂性，提高安全性。 通过这个教程，你将掌握在Axure 9中使用情形进行更复杂的交互设计，这对于创建动态、响应式的原型非常有帮助。记住，熟练掌握这些技巧可以帮助你在产品设计中更加游刃有余。