告别静态原型！手把手教你用墨刀让设计“动起来”

欢迎大家来到IT世界,在知识的湖畔探索吧!

引言

在产品原型设计中，产品经理常说：“低保真看流程，高保真看体验。”用过墨刀的朋友们都知道，它不仅能快速搭建页面框架、完成流程跳转，还能通过高级交互功能模拟用户操作、数据变化，还原核心逻辑。

今天就带大家系统了解学习墨刀的四个高级交互功能——变量、函数、条件判断、监听。通过典型场景和详细操作步骤，你会发现原型图也能灵活地“动起来”，实现接近真实产品的动态体验。

一、变量：记录与传递信息

变量可以简单理解为一个“大型记忆载体”。在产品设计中，很多场景需要保存用户输入的内容或系统状态，例如购物车数量、登录状态、积分余额等，变量就是实现这一功能的关键因素。这项功能的经典使用场景有：购物车商品数量动态变化、登录状态的保存与传递、计数器、积分、余额实时更新等。

举一个实战案例：购物车数量动态增加。

当前交互目标为：当点击“+”按钮时，加购的商品数量自动增加。

欢迎大家来到IT世界,在知识的湖畔探索吧!

具体使用教程：

1. 创建并绑定变量

选中购物车商品数量文本，在右侧属性面板 → 文本处点击“+” → 创建数字变量“数量”，初始值设为 1。

2. 对加购按钮设置交互行为

• 触发方式：单击
• 行为：设置变量值
• 目标变量：“数量”
• 值：“数量”+1

这样就完成啦，用户每点击一次“+”，商品数量就会增加 1，实现动态数量展示。

二、函数：封装逻辑反复调用

函数是将一组交互逻辑打包，需要时直接调用。墨刀提供了数字、字符串、日期等常用函数，能大大提升交互的表现力。函数运算常见的使用场景有：系统时间/日期自动跟随、验证码随机数字生成、字符串长度运算（手机号/密码校验）等等。

举一个实战案例：四位数随机验证码。

当前交互目标为：页面加载时，随机生成4位数验证码。

具体操作步骤为：

1. 创建并绑定变量

• 在验证码文本属性面板，创建并绑定一个数字变量“随机数字”，初始值随意设定四位数（如 6483）。

2. 设置交互逻辑

• 触发方式：载入时
• 行为：设置变量值
• 目标变量：“随机数字”
• 值：Math.floor(Math.random()*9000+1000)

预览后，每次刷新页面都会生成一个随机验证码，还可以为下方“换一换”文本做交互设置，点击实现随机验证码生成。

三、条件判断：控制分支逻辑

条件判断就像是原型交互的大脑中枢，可以根据不同的输入或状态进行判断，走向不同的逻辑分支，模拟用户操作的真实反馈流程。常见的使用场景有：格式正确与否提示、登录验证（账号/密码）、角色权限校验等等。

举一个实战案例：登录页手机号码格式验证。

当前交互目标为：手机号输入正确格式可正常跳转页面，格式不正确则显示文本提醒。

具体操作步骤为：

1. 绑定变量

在手机号输入框 → 属性面板 → 文本处创建并绑定变量“手机号码”，初始值为空。

2. 设置按钮交互

• 触发方式：单击
• 行为：条件判断
• 条件：如果“手机号码”.length==11，则跳转页面
• 条件分支：否则显示文本“手机号码为11位数”

利用条件判断对输入手机号格式做简单的判断，给出不同的反馈。

四、监听：实时响应变化

监听是指对某些变量或控件的状态进行监控捕捉，并且在变化发生时立即触发相应的反馈动作。这类功能的常见使用场景是：输入框输入时即时反馈、进度条加载动态变化、开关状态联动等等。

举一个实战案例：输入框输入内容实时计数。

当前交互目标为：用户在多行输入框输入内容时，右下角实时显示字数统计，超过200字时计数变红。

具体操作步骤为：

1. 设置绑定变量

• 选中输入框在右侧属性面板中文本处，创建并绑定字符串变量命名为“多行输入框”，初始值为空；
• 选中计数数字“0”，在右侧属性面板文本处，创建并绑定数字变量命名为“实时计数”，初始值为0。

2. 准备动态组件

将计数文本转为动态组件，状态 1 为正常显示，状态 2 改为红色字体，为超出字数提醒做准备。

3. 添加交互行为

• 选择多行输入框，触发方式：“监听”
• 目标：“多行输入框”
• 行为：条件判断
• 条件：如果“多行输入框”.length<=200，则将“实时计数”设为“多行输入框”.length，切换计数组件状态2
• 条件分支：否则将“实时计数”设为“多行输入框”.length，切换计数组件状态1

这样就可以实现当输入框输入内容时，计数实时显示与输入内容长度一致，并且当字数超出200字后，计数数字颜色变红以提醒超出。

总结

本文对墨刀的高级交互功能变量、函数、条件判断、监听做了详细的介绍和实战案例展示，相信读到这里，你已经对这些功能的应用方式有了更清晰的理解。实际项目中它们并非孤立使用，而是可以灵活组合，进而让原型从单纯的“静态页面”升级为“动态演示”。

不止文中举例的这些场景，除此之外，墨刀还提供了重置、组件变换、动效设置等更细致的交互能力，能进一步丰富演示效果，帮助产品经理高效产出高保真动态交互原型。