Axure教程:明日之子投票界面交互动效制作

?

Axure教程:明天的儿子投票界面互动动画制作

本文以明天儿子的投票界面为例,分解交互效应,分析每次交互的操作步骤。

57240959a44442b8bb1c97a92d4be4c0.jpeg

最近,我对我明天追逐的儿子很生气,所以我尝试制作投票界面并与大家分享。这是我发表的第一篇文章。我欢迎老年人的产品批评我!

预览效果链接:

表现显示:

首先,分析交互动力学

它大致分为以下三个步骤:

转发器的制作,绑定数据(包括玩家的头像,名称,排名,喜欢)。

就像事件的创建,以及投票数量的变化一样。

根据点数调整数据显示位置。

二,交互动态的产生1.中继器的生成和绑定数据

(1)创建“转发器”并双击进入编辑界面。该设计显示玩家信息如下:玩家头像,玩家姓名,排名和喜欢(记得设置名称以便以后操作)。

110f3f74fd3346db867f5e8846d6d08b.jpeg

(2)这里我创建了9组数据,每行显示3组,共3行;点击索引中的转发器,在样式中,检查布局“水平”,“排列网络”,并设置每个行项数为3.

4f245779b396442b83ecff304f4fee98.jpeg

aad2388c13bd4ee4af824114f8fe4d99.jpeg

(3)设置数据库数据并绑定到转发器:名称:nam,如number:Num,排名特殊,是插入变量中的索引,index是直接获取当前数据的行号;这里丢失了一些假数据,我没有设置头像。需要它的学生可以添加另一列img并导入图像。

87f6c1e5c53c40769b108de2891babda.jpeg

6aa2a79637ac42599e02ab5d2293653f.jpeg

(4)然后给转发器 - 添加一个用例并绑定每个负载的数据库数据。

2.喜欢活动的创建,以及投票和排名的变化

(1)进入转发器的编辑界面,设置Like按钮的交互式用例,Like会触发三个更改:

一个是喜欢这个数字:Num

第二,玩家排名的位置

第三是排名:索引,索引会根据排名顺序自动更新,没有必要我们互动。

(2)转发器的“添加排序”,根据点数Num以降序排序。

(3)转发器数据集的“更新行”,如数字:Num=Num + 1。

4a53f05e9f9a44f4af73beae54290fc6.jpeg

bafdef38cac742a48e95eab0b7154959.jpeg

63e51d6c29794bacbf17d6e52df0c281.jpeg

预览效果链接:

本文最初由