APP动态交互原型实例｜墨刀变量控制+条件判断教程

引言

不同行业的产品经理在绘制原型图时，拥有不同的呈现方式。对于第三方软件技术服务公司的产品经理来说，高保真动态交互原型不仅可以在开发前验证交互逻辑，还能为甲方客户带来更直观、真实的体验。

本文第三部分将分享一个实战案例：仅需三步，利用变量控制和条件判断功能，实现APP原型中“重置密码”流程的动态交互效果。

APP原型重制密码动态交互效果展示

一、变量与条件判断核心原理

1. 变量

在原型设计中，变量（Variable）作为动态交互的核心，可以存储用户输入、状态标记等数据。你需要为变量命名，并设置一个初始值，当用户触发某个操作时，变量值能够跟着变换。比如用户每天签到领取积分，总积分会随之增加。

2. 条件判断

而条件判断（Conditional Logic）常用来检查和判断验证某些条件，然后分支到不同的交互流程。比如常见的兴趣爱好选择验证：如果用户选择兴趣爱好>3个，则跳转到下个页面，否则将弹窗提醒。

通过变量与条件判断功能，可以使原型演示中表现出各个状态和反馈，贴近真实应用，更具动态感与真实感。

二、动态交互原型工具指南

目前有很多原型设计工具在交互功能上较为简单，无法满足更多高级的动态交互效果。而产品经理使用的主流原型工具两大巨头：墨刀与Axure，均含有丰富的交互功能，其中墨刀的操作简单更便捷，Axure的自定义程度更高。

1. 墨刀

墨刀作为国内前沿原型设计工具，不仅在界面布局操作、内置优质素材库方面广受好评，更是在丰富的交互功能上下了功夫。这为有高保真原型需求的产品经理提供了素材模板参考价值，和各类交互功能的高阶体验。虽然还未达到与Axure完全对齐的交互水平，但是在功能设置的操作上更加简单，一学就会。

2. Axure

Axure本身就以其强大的交互功能著称，处理大型复杂逻辑项目时，可以实现各类交互事件，达到与真实产品体验高相似度的效果。虽然同样的交互功能操作上不如墨刀的简单，但在大型项目深度交互上自定义程度较高，网络上还是有不少教程分享的，可以针对性的学习了解。

三、实战：3步实现动态交互

接下来以更好上手的墨刀为例，分享APP原型“重置密码”流程的动态交互制作教程。

第1步：创建和绑定变量

• 明确流程：输入新密码——重复输入新密码——点击确定——设置成功。两个输入框的内容需要验证一致。

原型页面中的操作流程图

• 创建变量：选中组件到交互页面下方，点击变量选择字符串，为两个组件分别创建变量「密码1」、「密码2」，值为空白即可。
• 变量绑定：墨刀的变量绑定可直接通过组件属性面板完成，无需代码。将输入框的文本属性分别绑定到对应变量。

创建密码输入框变量

第2步：设置条件判断交互

选中确定按钮添加交互行为，墨刀交互行为的触发方式有常见的单击、双击、长按、鼠标移入移出/右键、左右上下滑动等；这里选择单击的触发方式。

具体操作步骤如下：

1. 触发方式：单击
2. 行为：条件判断
3. 条件：

• 如果变量密码1=变量密码2
• 交互行为：跳转至设置成功页面

1. 条件分支：

• 否则
• 交互行为：显示/隐藏
• 目标元素：密码不一致提醒
• 选择显示

设置条件判断交互分支

注：交互事件中的条件判断可设置等于、不等于、大于、小于、布尔值判断等多种规则。

第3步：预览与验证效果

变量交互设置完成后，即可在选中页面，点击右上方的预览按钮，在墨刀原型页面中直接预览。

墨刀原型单个页面直接预览

预览时填写相同密码时跳转成功页面，不同密码时弹出提示。验证完成后，你就拥有了一个简单而完整的动态重置密码交互原型。

结语

通过以上简单三步，你可以在短时间内利用墨刀的变量控制与条件判断功能，轻松实现类似的动态交互效果。这两个高阶交互功能不仅提升了原型的真实感，也为开发提供了清晰的交互逻辑参考，提升交付效率。