如何用变量与函数实现随机生成数字交互？附完整教程

引言

在原型设计中，变量和函数是常见的高级交互功能。通常在像Axure、墨刀这类专业原型设计工具中，它们都有较为完善的交互功能，产品经理可以利用这些功能实现复杂的动态交互，让原型在演示时更接近真实产品的体验效果，同时也能在团队协作中减少沟通误差。
本文将分享一个通过变量与函数表达式实现的随机生成数字的交互教程，应用场景是社交APP原型的个人主页页面。以墨刀的高级交互为示例，逐步解析具体的设置步骤（当然，Axure等工具同样适用），帮助大家掌握这几个实用的交互技巧，并能在日后灵活应用到更多场景中。

先来明确一下交互目标：
1. 随机数字生成：个人主页粉丝、关注、互动、获赞量在打开页面时随机生成，粉丝与互动量为4位随机数、关注为1～100随机整数、获赞为10000～59999的随机5位数；
2. 关注/取消关注交互：在页面中点击关注按钮，粉丝量数量加一，按钮呈现取消关注样式，再次点击后粉丝量数量减一。
一、创建与绑定数字变量

为了实现两个复杂交互效果，首先利用变量的功能，为需要变化的几个数值（粉丝数、关注数、互动数、获赞数）绑定数字变量。以粉丝数量为例步骤为：

• 选择粉丝数量文本，在属性面板上找到文本，鼠标移动可以看到在文本旁出现“+”，点击后选择添加数字变量，名称为“粉丝”，初始值为0。
  同理，将关注、互动、获赞对应的数量文本，依次绑定对应的变量“关注”、“互动”、“获赞”。
  

二、随机生成数字交互

将主页的粉丝、关注、互动、获赞量绑定好变量后，可以组合起来对其设置随机生成数字的交互。这里涉及到使用数字函数公式：Math.ceil、Math.floor和Math.random。在交互设置中：

• 将触发方式设为载入时，行为设为设置变量值。
  为了模拟不同位数的数量呈现，对这4个变量设置的随机生成数字位数不同，具体的公式为：
  
• 将“粉丝”设为Math.floor(Math.random()*9000)+1000
  
• 将“关注”设为Math.ceil(Math.random()*100)
  
• 将“互动”设为Math.floor(Math.random()*900)+100
  
• 将“获赞”设为Math.floor(Math.random()*50000)+10000
  分别代表粉丝量随机生成4位数，关注数为1到100之间的随机整数（可能是一位数或两位数），互动数为随机生成的3位数，获赞数为10000到59999之间的随机5位数。
  

三、关注按钮变化交互

在关注按钮的交互中，要实现以下效果：
当用户点击关注按钮时，自然切换为已关注的按钮状态（样式为取消关注），并且关注后的粉丝量实时增加1位；当用户点击取消关注按钮时，恢复未关注状态（样式为关注），粉丝量实时减去1位。
第一步：将关注按钮转换为动态组件
右键点击关注按钮，选择“转换为动态组件”，进入动态面板中。这时关注按钮称为动态组件中的状态1，可以点击复制出状态2，代表已关注状态，将样式和文字调节称为“取消关注”的样式。
第二步：设置状态切换与变量值变化
为两个按钮分别设置交互事件，以状态1交互为例：

• 触发方式为：单击
  
• 交互行为1：切换为状态2
  
• 交互行为2：设置变量值——将“粉丝”设为“粉丝”+1
  同理，对状态2也设置同样的状态切换，将“粉丝”设为“粉丝”-1。这样就完成了点击关注按钮的两种交互效果。
  

结语

高级交互并没有想象中复杂，借助这些简单易用的变量和函数功能，就能让静态原型转换为动态原型，在演示时体验到更接近真实产品的动态交互反馈。这样不仅能提升原型设计的效果，也能为后续的设计与开发协作打好基础。希望本文的示例能帮助大家掌握变量和函数表达式的用法，在需要制作高保真交互原型时派上用场。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

用心讨论，共获提升！

这个好，看起来很实用

谢谢分享，辛苦了