高保真原型教程：APP登录页的3种高级交互设计

在进行APP原型设计时，通常最先搭建的页面就是登录页。很多产品经理会先绘制静态图，标注交互提示，这样的方式虽然能够满足与设计和开发的基本沟通需求，但如果在这个基础上加入动态的交互效果，原型会更接近真实产品，尤其适用软件外包产品经理给客户演示。

今天我想和大家分享一个APP登录页的三种高级交互设计方法。这些案例会用到动态组件、变量、函数、条件判断和监听等高级功能。掌握了它们的用法，不仅能实现登录页的交互，还能灵活迁移到其他类似场景中。本次教程将以原型设计工具——墨刀为例进行演示。

一、输入框长度判断

在APP的登录页面，常见的登录方式有手机号+验证码。这里的交互目标为：

• 当输入手机号长度为11位数，则显示“对勾”提示（对勾组件名称为“手机正确”），非11位数不显示；
• 当输入验证码长度为6位数（这里仅模拟验证码），则显示“对勾”提示，非6位数不显示。

APP登录页

对手机号输入框设置交互事件的具体操作流程为：

1. 触发方式——监听

• 目标——手机号输入框；
• 属性——输入框文本长度；

2. 行为逻辑——条件判断

• 条件1：如果手机号文本长度==11，则显示“对勾”即手机正确组件
• 条件2：否则（手机号文本长度不是11）隐藏“对勾”即手机正确组件

验证码输入框的交互设置方法与手机号是类似的。这样通过“监听+条件判断”，就可以实现输入框的实时验证和正向反馈啦。

二、获取验证码倒计时

在获取验证码这里涉及到一个60秒倒计时的交互，很多产品经理不知道如何设计，其实逻辑非常简单，利用动态组件和变量就可以轻松实现。

动态面板多个状态

具体操作为：

1. 设置动态组件——为了按钮文本变化

• 第一个动态组件：将获取验证码按钮转为动态组件：状态1为“获取验证码”，状态2将文本改为“60”
• 第二个动态组件：将状态2组件转为新的动态组件：状态1为“60”，状态2为“60”，状态3为“重新获取”

2. 创建绑定变量——为了60秒数字变化

• 创建一个数字变量“验证码倒计时”，绑定第二个动态组件的验证码文本属性，初始值为60

3. 设置交互行为

• 在第一个动态组件中：单击获取验证码，切换状态2：文本改为60
• 在第二个动态组件中：对状态1“60”组件设置载入时的交互——条件判断
• 条件1：如果“验证码倒计时”<=60，则“验证码倒计时”设为“验证码倒计时”-1；切换至状态2
• 条件2：如果“验证码倒计时”=0，则切换至状态3

同样对状态2的“60”设置载入时的交互，让其与状态1循环切换，实现从60倒计时至0，然后为重新获取。通过变量与动态组件的循环切换，可以模拟倒计时60秒的完整逻辑，整体操作并不复杂。

三、页面跳转时的交互反馈

前面有了对手机号和验证码输入框的长度判断和正向反馈交互，在实现页面跳转交互时，要确保两个输入框的格式正确，否则要根据输入结果给出不同反馈。这里的交互目标为：

• 当手机号和输入框格式都不正确，则提示“请输入正确的手机号与验证码”
• 当手机号格式错误，但输入框格式正确，则提示“手机号格式错误”
• 当输入框格式错误，但手机号格式正确，则提示“验证码错误”

交互设置

操作步骤如下：

1. 设置并绑定变量

• 新建字符串变量“错误提示”，绑定错误提示文字的文本属性，初始值为空

2. 设置登录按钮的交互行为

• 触发方式为：单击
• 行为：条件判断
• 条件1：如果“手机号”.length==11 && “验证码”.length==6，则打开加载中浮层，跳转至登录成功页面；否则设置变量值——将“错误提示”设为“请输入正确的手机号与验证码”
• 条件2：如果“手机号”.length!=11 && “验证码”.length==6，则设置变量值——将“错误提示”设为“手机号格式错误”
• 条件3：如果“手机号”.length==11 && “验证码”.length!=6，则设置变量值——将“错误提示”设为“验证码错误”

这样借助字符串长度函数和条件判断，可以轻松实现多种错误提示场景，这样的高级交互设置，能在演示时达到接近于真实产品的体验。

结语

以上三个案例展示了动态组件、变量、函数、条件判断和监听在APP登录页中的实战应用，可能表达不是很有逻辑，算半个教程。从输入框校验到验证码倒计时，再到跳转提示，高级交互功能的组合使用，可以让APP原型具备高保真的交互体验。

虽然这只是登录页的例子，但同样的逻辑也适用于注册页、表单验证、支付流程等场景。对产品经理而言，掌握高级交互功能的用法，既可以提升产品原型的质量，也能加速与设计开发的沟通。如果你平时只画静态原型图，不妨尝试将这些高级交互加入到设计中，体验创造出接近真实产品的高保真动态交互原型。