本文将与您分享一个关于投票功能交互实现的教程。来看看吧~
在原型制作时思考一些交互效果的实现过程，可以锻炼我们的逻辑思维能力，熟能生巧，逐渐高保真的交互效果变得得心应手，从而更好地表达我们想要达到的产品效果。
今天和大家分享一个投票功能交互实现的教程。首先看上图看最终效果：
00-1010
复杂的问题简单化——拆解问题
选择手势图标。鼠标点击时，手势图标顺时针旋转一定角度，再逆时针旋转相同角度返回初始状态。交互如图所示，例如，实现点击手势图标的动态效果。
00-1010点击手势图标，颜色对应的文本元素值为1，即把文本元素A的值设置为[[a 1]](注意：别忘了加[[]])。例如图中所示的交互，可以实现文本元素数值的变化。
00-1010矩形条的长度变化是投票值比例的图形表示。点击手势图标触发对应文本元素的数值变化，然后矩形条的长度(即元素的宽度)随着文本元素的数值变化而变化，而矩形条的高度保持不变。
下一个关键步骤是用公式表示矩形条的长度与文本元素数值的关系。如图所示，蓝色矩形条的长度L1为L1，矩形条的总长度为固定值L2，L1的长度对应值A，L2的长度对应值(a b)，即L1/L2=a/(a b)，由此可以得出L1=L2*a/(a b)
然后，将公式转换为Axure用例中的函数：L1。宽度=[[数学。天花板(L2。宽度* a/(AB))]]
因为Axure中的尺寸值是整数，所以可能是无限小数的a/(a)b值应该四舍五入。这里，函数math.ceil——用于向上舍入，即math.ceil(x)返回大于或等于参数X的最小整数，即浮点数向上舍入。例如：
Math.ceil(1.1)=2math.ceil(3)=3因此，第三步矩形杆长度变化的交互作用如图例所示：
这样，主体工程就完成了。当然也可以进一步限制每个人只能投票一次，点击后设置按钮禁用组件，得到如图所示的效果：
软件版本：Axure 8
作者：吴鸥，微信官方账号：“轻骑体验院”
本文最初由@ Wu Ouuu发布，大家都是产品经理。未经允许禁止转载。
图片来自Unsplash，基于CC0协议。