20分钟后，男子终于被围观群众和前来交警叫醒。
这种现象已经存在了两周，引得不少村民前去拍照。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。点此查看详情
某日，闲来无事，无聊的翻看着电脑中的APP图标，忽然萌生一个想法：用Axure原型制作一个连连看类型的游戏原型，于是说做就做，打开AxureRP 7，开始搞。一天，两天。。。（由于只有业余时间搞）。。。五天，原型终于搞定。期间经过了不同实现方法的尝试、逻辑的梳理、原型的测试等等等。。。。
原型展示
（点击试玩）
开始界面：点击 PLAY 按钮即可进入游戏
游戏界面：点击翻开图片，图片等待将近1s的时间后自动恢复，如果依次翻开的两个图片如果相同，这两个图片则自动消失，显示 OVER 字样
结束界面：点击 REPLAY 可以重新开始游戏
补充一些废话，做事情要有始有终，所以原型设计也是这样，要有头有尾。
设计过程
这个过程真的不是那么顺利，从开始只是有一个大概的想法，到慢慢实现起来的时候发现很多细节上的问题，从项目管理的角度来讲，真的是渐进明细的一个过程。下面我就从我不断发现问题不断分析实践的角度讲一下这个原型的设计过程。
问题-分析/尝试-实现把问题放在最前面来说并不代表这只是在最开始的时候才有问题，仅仅是为了表达任何事情都从一个想法开始，但是整个设计的过程都摆脱不了问题的存在。
问题01：点击图片实现图片翻转，然后自动恢复，如何实现？
分析/尝试：
通过动态面便的不同状态来显示翻转前和翻转后的图片（开始采用，最终放弃）；通过图片部件的 设置图片动作 实现（最终采用的实现方法）
问题02：依次点击两个图片，如果翻开的图片是一样的，那么这两个图片应该自动消除，该如何实现？
分析/尝试：
使用配对的动态面板（两个动态面板），如果动态面板1和动态面板2的状态都是图片翻开的状态，点击动态面板2的时候设置动态面板1和2同时隐藏或置为状态3。（该方案最终放弃）使用中继器，该过程需要全局变量的配合使用，该过程逻辑比较复杂，暂时不讲。（最终采用的实现方法）
问题03：如何实现初始化的时候所有图片的位置是随机的？
分析/尝试：
使用随机数函数，然后随机出符合条件的坐标值。（该方案最终放弃，原因是该方案是基于构思02中使用动态面板的方案，根本原因是很难避免随机出的坐标值是不重复的，该方案放弃也必然需要放弃动态面板方案，因此两个方案是互相制约的）使用随机函数+中继器，比如初始的时候给中继器的A列赋值随机数，然后再根据A列的值进行排序，因为每次随机数都不一样，因此每次排序的结果都不一样，这样就间接的实现了图片随机显示的需求，实际是图片的顺序随机，这里就不考虑坐标了（最终采用的实现方法）。
阶段总结：以上三个问题可以说是这个小游戏最核心的问题，经过上述的分析和尝试，基本确定了最终了整体实现方法，那么接下来就按照上面的方式告诉大家如何操作。
实操01：使用中继器建好游戏区域的整体框架1）添加“中继器”部件，双击进入设置Dataset，清空中继器的默认内容，分别设置列：SortID-用于存放随机数和排名，URL1-用于存放游戏初始时显示的图片URL，URL2-用于存放点击翻开后显示的图片的URL，IMGID1-翻开后图片的唯一ID，IMGID2-翻开后的相同图片的ID
2）设置 Repeater Style中的Layout，本案例是8*5的图片矩阵，横向8张，纵向5张，因此需要如下图的设置，Items per row 设置为8
实操02：中继器中添加一个“图片”部件，设置图片的点击事件以实现翻转和消除等1）在中继器中添加“图片”部件，设置高宽均为100，x,y坐标均为0
2）添加点击事件/全局变量
①点击图片实现图片翻开效果：点击显示图片2（即翻开），等待1000ms后，显示图片1（即恢复）。Item.URL1/2即是之前设置的中继器的对应的列值。
②依次点开两个相同的图片后，两个图片自动消除，首先考虑如何判断依次点开的两个图片是相同的？我们可以通过之前 中继器 中设置的 IMGID2 的值，如果两个图片的IMGID2 是相同的，那么就认为这两个图片是相同的，这时候需要设置一个全局变量 IMGID2（设置全局变量的方法此处不讲），然后再添加点击事件，当点击图片的时候，将当前图片的IMGID2的值赋值全局变量IMGID2，这样当点击下一张图片的时候用下一张图片的IMGID2跟全局变量IMGID2中存储的值进行比较，如果相同则消除这两个图片。
下面我先把判断条件以及给全局变量赋值添加到点击事件中，如下：
③接下来要考虑如何实现消除的效果，经过大量的尝试（Hide，Disabled等均无法实现）后，最后通过中继器的Delete Rows动作来实现将相同的图片消除，可是这样又会导致中继器的数据项越来越少，而且图片的位置会随着删除的图片而改变（类似Excel中上面的行删除，下面的行就自动上移了），这样其实也是可以的，然后如何判断删除那些rows，于是需要给rows添加标记，通过Mark Rows来实现。
④由于上面的结果不是我想要的理想效果，于是乎继续研究如何解决这个问题。然后想到Delete Rows之后，再Add Rows，这样就补齐了，可是默认Add的Rows总是排在最后面，如何让其插入到图片消除的位置？于是想到SortID（前面中继器讲到），通过给Add的rows添加和之前消除的图片相同的SortID，通过初始时的排序规则（后面讲），就会自动插入到相应的位置，这其实是两步，先是插到了组后，然后通过SortID的排序，使后插入的rows调整到消除图片的位置，验证可行。
增加全局变量SortID
到这里基本上完成了点击翻转图片，图片消除的功能，但是需要仔细思考点击事件的逻辑，在什么点击翻开图片，什么时候点击翻开图片后使图片消除等等。。。具体的逻辑在这里不做详细分析。
实操03：初始时候的图片随机显示。给 PLAY 按钮增加点击事件，事件的动作是Add Rows 和 Add Sort。1）Add Rows，SortID设置为随机数（该随机数为0~1之间的数，且小数位有十七八位，因此基本不会重复），总共添加40 rows。
2）Add Sort，因为40个rows里的IMG2是固定的，但是SortID是随机的，因此每次初始进行一次SortID排序，就保证了每次出现的图片都在不同的位置。
实操04：其他的按钮、隐藏/显示等效果比较基础，在此就不做详细教程了。 阶段总结：到这里记忆连连看这个小游戏的核心功能以及难点部分基本讲完了，上述过程比较粗糙，只讲到了光简单，无法完全根据上面的步骤完成一个可以正常使用的原型，还需要大家加入自己的思考与理解，去完善更多细节的部分。
经验总结
相信大家对Axure原型设计的理念已经了解了很多，我在这里在强点至关重要的一点：就是要尽可能的熟悉AxureRP 的操作，包括部件、事件、动作、函数、变量等等，只有足够的熟悉，才能尽快的实现自己脑海中的想法。
另外不要进入一个误区，让AxureRP限制了你的发挥，毕竟AxureRP的功能还是有限的，当无法实现IDEA的时候，灵活变通。
花了半天的时间，终于码完了上面的字，欢迎交流！
本文由 @W.YiFAN 原创发布于人人都是产品经理 ，未经许可，禁止转载。
赞 1收藏
欢迎举报抄袭、转载、暴力***及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
产品经理学习交流分享平台。
6069文章数
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格·云顿/乔·弗拉尼甘/Bianca Bree
主演：艾斯·库珀/ 查宁·塔图姆/ 乔纳·希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬***
******：86-10-
***邮箱：自制连连看
我站仅对该软件提供链接服务，该软件内容来自于第三方上传分享，版权问题均与我站无关。如果该软件触犯了您的权利，请联系 。
史上最个性的连连看游戏！&
可以自选图片的连连看游戏！&
在你的手机上玩你和恋人亲密照做的连连看游戏！这是展示爱情和忠心的好方法！&
用你家宝宝照片做个连连看！玩你喜欢的明星的连连看！&
（网友已用本系统制作超过5000个连连看，可供免费下载）&
================&
&自制连连看&顾名思义就是你可以自己用自己的照片做一个连连看游戏，放在手机上玩！&
制作很简单，用电脑打开
就可以轻松免费制作，只需10分钟。（已经有5000多人做了，你不会以为自己不会做吧？！）&
当然，你也可以免费玩其他网友已经创建的5000多个连连看游戏！已有的连连看游戏包括各个你能想得到的明星的，胡夏、刘忻、张根硕、张杰...还有各种萌物-
猫猫狗狗，各种体坛健将...&
总之，游戏素材应有尽有，装了才知道！
本应用推荐手机
最新苹果游戏资讯
本站声明：91手机娱乐门户仅创建用户沟通交流的平台，所展示的手机软件、壁纸、铃声、小说等手机资源均为网友上传分享及部分资源提供商授权发布，所有上述资源仅作为用户间分享讨论之用，除开发商授权外不以盈利为目的。如果上述资源版权所有人对此有任何异议，请在两周内速来信与我们联系，我们定当聆听您的意见并严格按照法律程序酌办。【DIY游戏】果壳达人连连看 | DIY小组 | 果壳网 科技有意思
1153151人加入此小组
1.下载并***连连看5.04
。2.到万有引力群，下载共享文件“果壳达人主题.rar”。3.将rar解压得到的三个文件放入连连看***目录下的theme文件夹。4.启动游戏，选择主题模式，点下一页，就能看到“果壳”。------------------------------------------------------------------------------------申明：由于精力有限，未能将所有达人列入，未上榜者请谅解。如有侵犯肖像权嫌疑，请直接联系作者，作者会将文件删除。
+ 加入我的果篮
间接打广告么。。。
下载不来……
大气科学专业，气象万千小组管理员
万有引力广告无误
机械电子工程、消费产品设计专业
引用霉耳朵的回应：间接打广告么。。。没有诶，我只是在广告当中插个小游戏。
生态学硕士
这句牛掰！=w=引用Creative的回应：没有诶，我只是在广告当中插个小游戏。
英语学士，运动达人，单车骑士
程序员，科幻迷
是果壳配对？配成一对就有“啪啪啪”的音效吧！PS:我要改帽纸颜色！
生态学硕士
LZ赶快把小艾和右手配对！引用艾斯昆的回应：是果壳配对？配成一对就有“啪啪啪”的音效吧！
噗哈哈哈哈哈哈~~帽纸好亮~~引用艾斯昆的回应：是果壳配对？配成一对就有“啪啪啪”的音效吧！PS:我要改帽纸颜色！
哈哈哈哈哈哈哈哈哈～～～
自曝的才能上去咩?
wow...高级- -下载一份给我爸，以后他玩连连看就能天天看见我了\(^o^)/
果壳网主编，科学松鼠会成员
为什么我的脸看起来那么大？？？
生态学硕士
我这就算自曝了咩引用lydy1993-meo...的回应：自曝的才能上去咩?
机械电子工程、消费产品设计专业
引用艾斯昆的回应：PS:我要改帽纸颜色！这个颜色最经典了，不高兴的话您可以在自己的电脑上改引用lydy1993-meo...的回应：自曝的才能上去咩?高清正脸容易入选引用moogee的回应：为什么我的脸看起来那么大？？？鬃毛比较多引用鹰之舞的回应：我这就算自曝了咩算是吧
果壳DIY站翻译
广播电视艺术学硕士
引用鹰之舞的回应：LZ赶快把小艾和右手配对！正解~
应该加入隐藏元素，某某和某某可以配对，暗示他们的JQ
数字媒体技术学士
引用ZHen的回应：应该加入隐藏元素，某某和某某可以配对，暗示他们的JQ赞！楼主考虑考虑吧 这可是身关别人终身幸福的事 要慎重哟~
引用鹰之舞的回应：LZ赶快把小艾和右手配对！额。。。弱弱的问下，说的是??
天文爱好者
引用Bravada的回应：额。。。弱弱的问下，说的是??
机械电子工程、消费产品设计专业
引用鹰之舞的回应：LZ赶快把小艾和右手配对！---------------------------------------------引用Bravada的回应：额。。。弱弱的问下，说的是??同问+1引用ZHen的回应：应该加入隐藏元素，某某和某某可以配对，暗示他们的JQ---------------------------------------------引用红花的回应：赞！楼主考虑考虑吧 这可是身关别人终身幸福的事 要慎重哟~风险太大，有需要自己勾搭去。
广播电视艺术学硕士
引用Creative的回应：同问+1哎，枉费鹰之舞一片苦心，这靠谱的idea啊！
生态学硕士
哈，头一次被说靠谱，好得意~~引用彼岸之火的回应：哎，枉费鹰之舞一片苦心，这靠谱的idea啊！顺便给上边的那些答疑：小艾=艾XX
机械电子工程、消费产品设计专业
引用鹰之舞的回应：哈，头一次被说靠谱，好得意~~顺便给上边的那些答疑：小艾=艾XX右手？还是不懂诶
英语学士，运动达人，单车骑士
引用艾斯昆的回应：是果壳配对？配成一对就有“啪啪啪”的音效吧！PS:我要改帽纸颜色！帽子黑了哦。
英语学士，运动达人，单车骑士
引用Creative的回应：右手？还是不懂诶右手？真的不懂诶
死理性极客，科幻迷，图书馆信息管理员
连连看？貌似不适合作万有引力小广告吧……都是自交
引用庄生晓梦的回应：连连看？貌似不适合作万有引力小广告吧……都是自交游戏的主题包被丢在万有引力组的共享里……目的应该是为吸引更多人加勾搭群吧……话说，连连看不是以拍死“照镜子的自恋狂”为目标，让广大人民少自恋，多博爱的么？
生态学硕士
鄙视上面俩装纯洁的男生
鹰姐，你只解释了小艾引用Creative的回应：右手？还是不懂诶我也不懂
哦~似乎明白了
鹰姐这个完全不靠谱的啊引用彼岸之火的回应：引用Creative的回应：同问+1哎，枉费鹰之舞一片苦心，这靠谱的idea啊！
(C)2016果壳网&&&&京ICP证100430号&&&&京网文[-239号&&&&新出发京零字东150005号
