本文以明日之子投票界面为例，拆解了其中的交互动效，并具体分析了每一个交互动效的操作步骤。
　　最近在追明日之子每天疯狂给妹妹点赞，所以尝试下投票界面的制作，分享给大家，这是我发布的第一篇文章，欢迎各位产品前辈批评指正！
　　预览效果链接：https：h3i5no。axshare。com
　　效果展示：
　　一、分析交互动效
　　大致分为以下三个步骤：
　　中继器的制作，绑定数据（包括选手的头像、姓名、排名、点赞数）。
　　点赞事件的创建，及导致票数的改变。
　　根据点赞数排名，调整数据显示位置。
　　二、制作交互动效
　　1。中继器的制作及绑定数据
　　（1）创建一个“中继器”，双击进入编辑界面，设计展示选手信息如下：选手头像、选手姓名、排名、点赞数（记得设置好名称，以便后面操作）。
　　（2）这里我创建了9组数据，每行显示三个，一共三行；点击index里的中继器，在样式中将布局勾选“水平”、“排布网络”，并设定每row项目数为3。
　　（3）设定数据库数据并绑定给中继器：姓名：nam、点赞数：Num，排名比较特殊，是插入变量里的index，index是直接获取当前数据的行号；这里随便输了些假数据，我没有设置头像，有需要的同学可以再添加一列img并导入图片。
　　（4）然后给中继器每项加载时添加用例并绑定数据库数据。
　　2。点赞事件的创建，及导致票数及排名的改变
　　（1）进入中继器的编辑界面，为点赞按钮设置交互用例，点赞会触发三个改变：
　　一是点赞数：Num
　　二是选手排名的位置
　　三是排名：index，index会根据排名顺序自动更新，这里不需要我们做交互。
　　（2）为中继器“添加排序”，按照点赞数Num的数量进行降序排列。
　　（3）为中继器数据集“更新行”，点赞数：NumNum1。
　　预览效果链接：https：h3i5no。axshare。com

以“封装”的思维，来做原型原型是产品经理岗位最基本也是最重要的产出了，那么作为我们产品汪的日常工作，效率就很关键了，想要提高效率，不妨试一试用“封装”的思维方式来做原型吧封装的概念不管大家是……Auxre教程：网易云音乐听歌识曲交互动效制作如何用Auxre制作网易云音乐听歌识曲交互动效呢？一起来文中看看效果展示：分析交互动效打开网易云音乐，截图，然后我们可以看到，这个就像水波的动效是这样组成的：……从制作“打地鼠”小游戏，看对接客户的最后一步本文通过分享一个用Axure做打地鼠小游戏的小案例，希望大家通过这个案例能了解到：循环事件的设置方法；全局变量局部变量的使用方法；函数公式的使用方法；事件用例的使用方法；数据传……Axure教程：图片局部开灯交互动效如何利用Axure制作图片局部开灯交互动效呢？来文中看看本期教学由于是用作者本人的自拍照片进行制作教学，所以大家请勿乱传播，以免暴露本人帅的事实，话不多说，教学开始！……Axure教程：明日之子投票界面交互动效制作本文以明日之子投票界面为例，拆解了其中的交互动效，并具体分析了每一个交互动效的操作步骤。最近在追明日之子每天疯狂给妹妹点赞，所以尝试下投票界面的制作，分享给大家，这是我发……Axure教程：如何制作微信拍摄小视频按钮动效本文跟大家讲解一下，如何制作微信拍摄小视频按钮动效，一起来看看看看效果：制作过程1。分析截两张微信拍摄过程的界面，一共要制作两个动效：按钮交互：当……App产品原型背后要交代的细节和要理解的原则（一）笔者从产品经理设计需求的角度，分享了APP产品原型设计背后需要的注意的细节和原则，供大家参考与学习。移动App的产品设计往往都是所见即所有，没有太深奥的逻辑要交代的，比葫……Axure教程：计数文本域实现制定UI规范时，遇到实现“限制字数的文本域”的交互问题，即当用户输入的字数长度超过限制要求，如何只保留规定长度的文本？效果如下：我们知道【Number】类型的文本框……Axure技巧分享：个人中心二级菜单的交互实现在实现web端的顶部导航头像个人中心二级导航的原型，很多新手都会忽略Axure自带的一些高级交互效果，而采用冗余而复杂的交互事件。那么，要如何简单去实现这个效果呢？原型效……Axure教程：音乐播放器中，带时间的进度条歌词颜色变化旋转本文以QQ音乐为例，实现了带时间的进度条、歌词颜色变化、唱片旋转、暂停播放等原型交互。一、效果展示体验地址：https：v0u9to。axshare。com原……Axure教程：如何利用Axure实现可伸缩导航？在原型设计中，Axure还可以用于实现可伸缩导航功能，展现出菜单栏或者导航栏都无法完全展现的子菜单。那么，通过什么样的操作可以实现呢，本文为我们揭晓了答案。一、场景简述……Axure教程：首页的左右滑动、点击切换卡片、加载动画等交互本案例实现了微信读书首页的左右滑动切换卡片、点击按钮切换卡片、加载新卡片的动效、判断用户是否已浏览完推荐的新卡片等交互效果。一、效果展示体验地址：https：1qp……