Axure 教程|抓阄小游戏演示案例

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

zhuajiuyouxiyanshi

我们生活中经常会遇到需要通过抓阄(或抽签)来做决定的问题。有些问题甚至上升到世界难题的高度,比如今晚吃什么,比如和对象如何分配家务活。今天手把手教你用Axure来设计这样一款居家旅行,泡妞撩妹必备神器!

效果如下,也欢迎【在线试玩】:

一、主要需求

1、需要提供一个录入抓阄项的入口。

2、摇一摇手机随机抽取一个选项作为本次抓阄的结果,并将选项内容和序号显示出来。

3、抓取过的选项从列表里删除,用户可继续抓阄,直到每个选项都被抓到为止。

二、素材准备

1、找一张好看的开机启动页面。

2、找几张好玩的表情图片(图片尺寸大小要求一致),无需其他素材。

三、页面流程

启动页、首页、选项添加页、摇一摇页面、抓阄结果页、关于页面。

流程图如下所示:

yemianliuchengtu

四、主要思路

添加一个中继器,用户添加抓阄选项的时候:在中继器里新增一行数据,新增数据的时候为每一行数据添加一个随机数。用户开始抓阄的时候:对中继器按该随机数进行排序并读取中继器排序最靠前(或靠后)的一条数据,并将这两个数据通过局部变量传输并呈现给用户。这就是核心要义说起来很简单,也很容易想到,其他一些细节上的体验就需要慢慢雕琢了。

五、重点解说

(1)中继器字段设计

  • cover:作为每一条数据的封面,用户每添加一个数据位会按序生成一个选项的编号,并按序排列。
  • id:存储随机数的字段,也是抓阄的秘密武器。
  • detail:存储抓阄选项的详细内容的字段。

为了在初始状态列表里有一个添加选项的按钮,将cover的默认值设置为“+”(保存数据的时候中继器将根据cover字段进行升序排列,而“+”会被排在所有自然数之后,因此“+”始终排在最后)。

为了让用户在抓阄的时候永远不会抽到这条默认的数据,id默认值也要确保足够大(这里将id的默认值设置为1000),每次都会被排列在最后一个。用户抽签的时候,根据id进行升序。

(2)中继器样式设置

1、这三个字段在正式抓阄前只有cover显示给其他用户看的。因此在新建中继器的时候,id和detail对应的矩形的边框、填充、字体颜色都需要设置成全透明的。

2、本案例中样式是每3个数据自动换行,因此中继器设置为:横向排列,每行3个数据。具体设置如下图所示:

zhongjiqi

(3)添加抓阄选项

在【选项添加页】的添加按钮增加以下事件:

  • 在中继器增加一行数据,其中cover以全局变量“cover”为基准价1递增,id添加一个随机函数,detail读取用户录入的数据。
  • 将动态面板从“添加选项”的状态切换到“默认首页”。
  • 清空文本输入框,并将中继器根据cover字段进行排序。

具体用例如下图所示:

tianjia1

(4)摇一摇抓阄

  • 模拟摇动手机的动画。
  • 对中继器根据随机数“id”进行排序,并将第一行数据标记。
  • 将第一行数据的cover和detail传递到【抽签结果页】,并将已标记的数据删除(确保不会重复抽到)。
  • 如果抓阄完毕,跳转至首页,并做相应提醒。

zhuajiuyyy

六、美化原型

1、为了看上去更新APP,让原型启动的时候增加一个【启动页面】播放5秒广告后自动跳转到首页,当然允许用户跳过广告的。增加【关于页面】再次打广告!

2、为了让抓阄结果显得不要那么死板,在【抓阄结果页】增加2个动态面板,存放表情库,一个存放提示语库。在每次传送抓阄结果的时候,随机显示(具体函数见上图)。

本着开放交流原则,为大家提供【源文件】供大家学习、研究和优化。

作者源:http://pan.baidu.com/s/1kUCAJ0F

官方源:http://pan.baidu.com/s/1gfPQyzx

 

作者:@陈滨淋,国内某知名电商公司产品总监,起点学院北京1508期优秀学员。

本文由人人都是产品经理专栏作家 @陈滨淋(微信公众号:iambin) 独家发布于人人都是产品经理 。未经人人都是产品经理许可,禁止转载。违者追究责任,谢谢合作。

您的赞赏,是对我创作的最大鼓励。

评论( 25

登录后参与评论
  1. 有一位热心的朋友发现一个bug每次抓阄第一次都默认抓到首次录入的选项。在新增抓阄选项的保存按钮增加对id的排序事件方能解决。感谢这位朋友!

    回复
  2. 错字受!

    回复
  3. 我按照你的原始文件一步步来,然后修改了抓阄后删除掉抓阄到的那个选项 ,变成不删除,之后每次抓阄都是抓第一个输入的,不知道这个问题的原因是什么

    回复
    1. 回复

      抓阄的逻辑就是根据随机数排序,每次读取第一个数,然后删除。你把删除功能去掉了,就永远都是第一个啊。因为随机数是每次你在添加选项就产生的,随后并没有变化!

  4. 这个真的很吊了

    回复
  5. 点赞,收藏~Axure学完了做一个试试,不懂的地方还请指教

    回复
    1. 回复

      随时交流

    2. 回复

      我刚刚试了一下,发现输入可以输入相同的文字,比如,所有的事件都可以输入做饭,再优化一下,应该做成,不可能输入相同的字段

    3. 回复

      好建议!

    4. 回复

      在学习中, :!: :twisted:

    5. 回复

      666

    6. 回复

      我做的有两个地方一直有问题,不知道怎样描述清楚 :cry:

    7. 回复

      已经解决一个,还剩一个

    8. 回复

      解决问题的过程才能进步!

    9. 回复

      你好,我参考了您的这个原型,然后自己创新了一下,作者信息写的是您,并标注了参考了这篇文章,和朋友们交流分享的时候不会侵权吧? :twisted: :twisted: :twisted: :twisted: :twisted:

    10. 回复

      没事儿,源文件放出来,就是跟大家分享的!

  6. 很棒!

    回复
  7. 陈总好,我是你的粉丝。

    回复
    1. 回复

      :roll:

  8. 感觉添加抓阄的内容的时候,一个一个输入会很耗时,可以一次输入多个,如洗衣 做饭 拖地等,中间用空格或者其他的符号隔开每个元素,让系统去判断,这样可以一次生成用户所需的页面。

    回复
    1. 回复

      言之有理!

  9. 哈哈 消遣小游戏

    回复
  10. 闲的没事情做 可以去帮UI切图

    回复
    1. 回复

      嘿,这厮还真爱凑热闹,有这功夫不去搬砖挣口粮,在这叽歪!

    2. 回复

      确实,很多地方看到他在喷。有本事他写点东西或者做点东西来看看。

加载中