前言
产品经理在设计APP原型时,是不是经常遇到这种情况:为了展示一个按钮的多种交互状态,不得不反复复制页面并手动修改内容;演示原型时,只能输入某个特定的信息才有切换页面的交互效果,但客户上手一试就尴尬了......
如果你的APP原型还停留在以上“手动阶段”中,想要突破原型设计瓶颈,不妨跟我一起学习高级交互功能的使用方法,让你的原型立刻灵动起来!(文中有案例教程)
一、原型设计高级交互功能有哪些
在传统原型设计中,产品经理仅依赖页面跳转、显示隐藏、打开浮层等基础交互功能,对高级交互功能还停留在复杂的印象或者不了解的状态,接下俩为你介绍几个高级交互功能“变量、条件判断与函数”。
1. 变量
变量是原型设计中很常见的高级交互功能,它可以应用在APP内实现多元素联动的场景,让绑定变量值的元素随着某些操作,自动响应不同状态的变化。以音量调节为例,变量可实时同步按钮点击次数与滑动条位置,无需手动关联多个组件。
2. 条件判断
条件判断一般应用在对某些变量值或组件状态的变化进行判断,从而展示出不同的交互状态,可以是对按钮开关的true/false判断,也可以是对变量值大于/等于/小于某个值的判断,例如当商品库存不足无法继续加购。
3. 函数
函数在变量与条件判断的应用,是可以进一步对变量值进行处理和运算,它的运算逻辑与JavaScript类似,支持字符串处理、数学运算、获取系统时间等操作,例如生成随机数字、校验输入框文本等等。
二、高保真交互APP原型案例拆解
举例一个变量、条件判断与函数运算功能在APP原型设计中的应用——APP重置密码(基于墨刀原型操作),帮助你更好的了解高级交互功能的效果。
1. 明确交互需求:
当用户忘记密码需要重置新的密码时,规定密码为6-15个字符,并且两次输入的密码一致,才能顺利进入下一步的流程。
2. 高级交互功能:
如果想要实现以上的流程,需要使用变量条件判断、函数功能。
- 变量:储存两个密码的文本数据
- 条件判断:校验长度范围与一致性
- 函数:获取文本长度
3. 实际操作步骤:
- 为两个输入框创建字符串变量“新密码”“重复密码”,绑定文本属性;
- 对“下一步”按钮设置单击触发的交互事件,行为条件判断:
如果“新密码”字符长度≥6小于,且“新密码”字符长度≤15,且重置密码=新密码,那么跳转至设置成功页面;否则显示“密码格式错误或不一致”的文本提示。
如图所示,在设置交互事件时,需要用到条件判断和函数的功能来区分重置密码成功与未成功的两种状态。只需要根据提示选择条件判断与函数运算,就可以轻松完成这样一个复杂交互流程。
三、实现高级交互效果的原型工具
原型设计工具有很多,不过拥有变量、条件判断、函数运算这种高阶交互功能的主流原型工具,有墨刀与Axure。
- 墨刀:作为头部国产原型设计工具,不仅在轻量便捷的操作使用上占据优势,墨刀也在不断开发高级交互功能,满足更多场景需求。
- Axure:作为以高级交互功能为核心优势的原型设计工具,尽管在操作步骤上比前者更加复杂,但是其高阶交互功能仍然是一大特色。
两款原型设计工具都能够实现丰富的高级交互效果,在操作便捷性上墨刀更胜一筹,在其他更高阶功能上Axure依然保持优势。如果你的原型设计需要通过变量、条件判断、函数功能,那么可以选择通过墨刀的简单操作来实现,如果你的原型设计还需要用到其他高级功能例如中继器,可以在Axure中学习探索。
结语
利用好高级交互功能,可以让原型更加贴近真实产品体验,这对有高保真交互原型需求的产品经理来说是刚需。从本文分享的墨刀APP原型案例教程可以看出来,高级交互功能的使用方法非常简单,掌握各类高阶的交互功能,能够使你的原型变得更加灵动!