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

許仙人
8 评论 4019 浏览 27 收藏 5 分钟
🔗 技术知识、行业知识、业务知识等,都是B端产品经理需要了解和掌握的领域相关的知识,有助于进行产品方案设计和评估

本文以明日之子投票界面为例,拆解了其中的交互动效,并具体分析了每一个交互动效的操作步骤。

最近在追明日之子每天疯狂给妹妹点赞,所以尝试下投票界面的制作,分享给大家,这是我发布的第一篇文章,欢迎各位产品前辈批评指正!

预览效果链接:https://h3i5no.axshare.com

效果展示:

一、分析交互动效

大致分为以下三个步骤:

  1. 中继器的制作,绑定数据(包括选手的头像、姓名、排名、点赞数)。
  2. 点赞事件的创建,及导致票数的改变。
  3. 根据点赞数排名,调整数据显示位置。

二、制作交互动效

1. 中继器的制作及绑定数据

(1)创建一个“中继器”,双击进入编辑界面,设计展示选手信息如下:选手头像、选手姓名、排名、点赞数(记得设置好名称,以便后面操作)。

(2)这里我创建了9组数据,每行显示三个,一共三行;点击index里的中继器,在样式中将布局勾选“水平”、“排布网络”,并设定每row项目数为3。

(3)设定数据库数据并绑定给中继器:姓名:nam、点赞数:Num,排名比较特殊,是插入变量里的index,index是直接获取当前数据的行号;这里随便输了些假数据,我没有设置头像,有需要的同学可以再添加一列img并导入图片。

(4)然后给中继器-每项加载时添加用例并绑定数据库数据。

2. 点赞事件的创建,及导致票数及排名的改变

(1)进入中继器的编辑界面,为点赞按钮设置交互用例,点赞会触发三个改变:

  • 一是点赞数:Num
  • 二是选手排名的位置
  • 三是排名:index,index会根据排名顺序自动更新,这里不需要我们做交互。

(2)为中继器“添加排序”,按照点赞数Num的数量进行降序排列。

(3)为中继器数据集“更新行”,点赞数:Num=Num+1。

预览效果链接:https://h3i5no.axshare.com

 

本文由 @許仙人 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 哈,看完还是不太会?你可能需要从Axure基础开始学

    😳 这里推荐你加Axure实战班的助教小可爱@CC-起点学院(微信:qidiancc520),回复关键词:原型礼包

    领取适合产品新人的原型设计大礼包哦,cc还会不定期分享Axure免费视频课程呢!

    来自广东 回复
  2. 中继器在哪里弄啊

    回复
    1. 左边的组件面板里有呀

      回复
  3. 😉

    来自广东 回复
  4. 源文件可以分享一下吗?

    来自广东 回复
    1. Axure教程:明日之子交互动效源文件
      链接:https://pan.baidu.com/s/1XQ3eGLh2h-gotCdgHRNLwQ
      提取码:c924

      来自北京 回复
    2. 谢谢大佬 😯

      来自广东 回复
    3. 我是小白啦 😎

      来自北京 回复
专题
113172人已学习29篇文章
透过别人的项目总结,学习项目管理项目设计项目流程经验。
专题
12689人已学习14篇文章
近年来,盲盒大量出现在公众视野,引起了一波又一波消费热潮。本专题的文章分享了解读盲盒营销。
专题
43488人已学习18篇文章
继蒸汽机、电力、互联网之后,区块链很可能是下一代颠覆性的核心技术。
专题
13436人已学习14篇文章
好的产品是对人性的窥视,无论是做产品,做运营,懂点心理学还是很有帮助的。本专题的文章分享了消费者心理学。
专题
12728人已学习12篇文章
企业想扩大自身的知名度和影响力都离不开新媒体。本专题的文章分享了企业新媒体运营指南。
专题
32248人已学习17篇文章
你只知道它火了,却不知道它背后的内容营销秘籍。