cover_image

太「色」啦,但是对眼睛好呀 | 晓组织

小程序微信颜色阿里寻找像素眼
非来非去

<p><img class="alignnone size-full wp-image-1019712" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG71.jpeg" alt="" width="900" height="500" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG71.jpeg 900w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG71-360x200.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG71-768x427.jpeg 768w" sizes="(max-width: 900px) 100vw, 900px" /></p> <p>大家好,我是黄滚,本名徐仁禄,黄滚是我的花名。我曾在阿里巴巴工作七年,任搜索技术专家,此前也有过创业的经历。</p> <p><img class="alignnone size-full wp-image-1019568" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG19-1.jpeg" alt="" width="2880" height="2160" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG19-1.jpeg 2880w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG19-1-360x270.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG19-1-768x576.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG19-1-1024x768.jpeg 1024w" sizes="(max-width: 2880px) 100vw, 2880px" /></p> <p>我们的团队在不断扩张中,到发稿时,已经形成了一支由中高级开发工程师、用户体验设计师为主的八个人的精干队伍。产品经理曾就职于支付宝,在加入团队之前打造了一款日活百万的小程序;运营总监此前操盘千万级投放,在新媒体方面的运营也非常有经验;UI 设计师是手绘专业科班出身,对色彩有着超强的运用能力,能够直达用户心底。</p> <p>今天我们团队给大家带来的一款有意思的小程序:寻找像素眼,这是一款由我们 UI 设计师主导的社交测试类产品,看似简约,其实不简单。这款产品重在寓测于乐,所以测试是目的,玩乐是根本。</p> <h3><span style="color: #605eac;">创作灵感</span></h3> <p>大家都知道,眼睛是心灵的窗户。智力高不高,就看你的眼力好不好。眼力值的高低还与右脑的发达程度密切相关,因为人的右脑主管艺术、灵感、创意,右脑越发达,说明眼力值越高,那么艺术等方面的潜力就越大,成就也会越大。</p> <p>怎么来测眼力值呢?考驾照的时候,红绿色盲的人会被禁考,色弱的人也会受到影响。受此启发,我们的 UI 设计师想到了找出不一样的色块这样的玩法。</p> <p>测试一共 36 关,随着关数的提升,色块越来越多,当关数增加到一定数值,色块数量不再变化,色块间的差异也越来越小,越来越难找出那一块不一样的色块。</p> <h3><span style="color: #605eac;">UI 设计是重中之中</span></h3> <p>这是一款以“色”为基础的小程序,看似简单的界面耗费了我们用户体验设计师大量的心血。从 logo 到主色,从 icon 到风格,从细节到整体……设计师都在不断的尝试,反复的修改。</p> <p>黄色是明度最高的色彩,能够带给人轻快活力的视觉感受。但是低饱和的黄色容易让人产生疲倦,而社交娱乐尤其是还有时间限制的产品则需要能够给人一些的紧张感,高饱和的黄色是最佳选择,最后成了这款产品的主色。</p> <p>寻找像素眼的 logo 如果仔细看,是由眼睛和放大镜组成,将两个元素抽象成基础的几何图形(圆形),图形的简化有利于人的记忆。</p> <p><img class="alignnone size-full wp-image-1019570" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG20-1.jpeg" alt="" width="1908" height="348" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG20-1.jpeg 1908w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG20-1-360x66.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG20-1-768x140.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG20-1-1024x187.jpeg 1024w" sizes="(max-width: 1908px) 100vw, 1908px" /></p> <p>在确定了主色和 logo 之后,接下来的 icon 设计也颇费了一番功夫,不难发现,设计师为了增强趣味性,进行特别处理,最终的icon 都带有一种微胖的可爱。</p> <p><img class="alignnone size-full wp-image-1019573" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG21-1.jpeg" alt="" width="1928" height="528" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG21-1.jpeg 1928w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG21-1-360x99.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG21-1-768x210.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG21-1-1024x280.jpeg 1024w" sizes="(max-width: 1928px) 100vw, 1928px" /></p> <p>考虑到色盲无法识别色相,页面色块的设计上使用了同一色值提升明度的方法,随着关卡的变化色块由少递多,用同一关卡的色块明度递减来增加游戏的难度。</p> <p><img class="alignnone size-full wp-image-1019575" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG22-1.jpeg" alt="" width="952" height="968" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG22-1.jpeg 952w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG22-1-360x366.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG22-1-768x781.jpeg 768w" sizes="(max-width: 952px) 100vw, 952px" /></p> <h3><span style="color: #605eac;">玩法必须有意思</span></h3> <p>纯粹的找色块,实在是枯燥而无趣,我们为这款产品设置了两种不同的玩法,一种是 60 秒大闯关,另一种每关 3 秒,3 秒内该关通过就可以进入下一关了。</p> <p>为了让玩家玩得尽兴,我们增加了心理暗示,为每一关设置背景音乐,我们设置了 3 秒倒计时来增强紧迫感。最后几关的难度比较大,玩家会留下只差几秒就可以通关了的遗憾,为此设置了分享到群就可以延时 10 秒,不过机会只有一次。结束时系统直接算出玩家排位,玩家可以分享到群或者朋友圈。</p> <p><img class="alignnone size-full wp-image-1019576" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG23-1.jpeg" alt="" width="2028" height="1812" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG23-1.jpeg 2028w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG23-1-360x322.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG23-1-768x686.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG23-1-1024x915.jpeg 1024w" sizes="(max-width: 2028px) 100vw, 2028px" /></p> <p><img class="alignnone size-full wp-image-1019577" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG24.jpeg" alt="" width="2032" height="1776" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG24.jpeg 2032w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG24-360x315.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG24-768x671.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG24-1024x895.jpeg 1024w" sizes="(max-width: 2032px) 100vw, 2032px" /></p> <p>一局结束,会出现测试结果,展示通过关数及在玩家中的排位,排行榜可以展示所有玩家中的前一百名。只要将小程序转发到群,玩家就可以看到自己在任意一个群里的排行。</p> <p><img class="alignnone size-full wp-image-1019578" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG25-1.jpeg" alt="" width="1984" height="1644" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG25-1.jpeg 1984w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG25-1-360x298.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG25-1-768x636.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG25-1-1024x849.jpeg 1024w" sizes="(max-width: 1984px) 100vw, 1984px" /></p> <h3><span style="color: #605eac;">我们走过的弯路</span></h3> <p>如果以为做了这么多这么大量的工作,用户就会蜂拥而至流量就会源源不断了,那就大错特错。</p> <p>我们进行了内测,很快发现了一个重要的问题,用户根本不知道不知道怎么玩。设计时只想着简单直接的开始,并没有去做引导,也没有介绍玩法。在得到用户反馈之后,设计师不得不加班修改,连续熬了几个晚上,这款增加了玩法引导的UI设计才终于和大家见面,所有第一次进入的用户都会弹出玩法说明和帮助说明。</p> <p>这也告诉我们任何时候都需要站在用户的角度来思考。</p> <p><img class="alignnone size-full wp-image-1019580" src="https://images.ifanr.cn/wp-content/uploads/2018/04/WechatIMG26.jpeg" alt="" width="2024" height="1784" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG26.jpeg 2024w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG26-360x317.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG26-768x677.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2018/04/WechatIMG26-1024x903.jpeg 1024w" sizes="(max-width: 2024px) 100vw, 2024px" /></p> <h3><span style="color: #605eac;">我们和用户的故事</span></h3> <p>我都已经通关了,你们要不要给我一点奖励啊?</p> <p>有一天,一个玩家兴奋的发来这条消息。我们查了下数据发现目前的通关用户并不多,说明我们这款小程序真正通关并不是很容易。</p> <p>我们是否可以免邮赠送给通关客户娃娃?</p> <p>这个点子迅速成为我们团队讨论的热点。最终我们将这个定为一条规则,所有通关用户都将会得到一个娃娃,没想到,这条规则不但提升了老用户的留存率,还为我们增加了大量的新用户。</p> <p>目前更多的有趣玩法正在开发中,更新的版本即将上线。我们在知晓小程序商店发布之后,很快被推荐到了首页的每日精选,还在新锐榜上霸榜了好几天,为此特别感谢知晓小程序商店。</p> <p><img class="alignnone size-full wp-image-1019603 aligncenter" src="https://images.ifanr.cn/wp-content/uploads/2018/04/f2gtderm6dif6j2jv4sm9zl5ogtkguig.png" alt="" width="800" height="410" srcset="http://www.ifanr.com/wp-content/uploads/2018/04/f2gtderm6dif6j2jv4sm9zl5ogtkguig.png 800w, http://www.ifanr.com/wp-content/uploads/2018/04/f2gtderm6dif6j2jv4sm9zl5ogtkguig-360x185.png 360w, http://www.ifanr.com/wp-content/uploads/2018/04/f2gtderm6dif6j2jv4sm9zl5ogtkguig-768x394.png 768w" sizes="(max-width: 800px) 100vw, 800px" /></p> <p style="text-align: center;"><span style="color: #808080; font-size: 14px;">「寻找像素眼」小程序使用链接</span><br /> <a href="https://minapp.com/miniapp/5754/"><span style="color: #808080; font-size: 14px;">https://minapp.com/miniapp/6404/</span></a></p> <p><strong>关注「<span style="color: #605eac;">知晓程序</span>」公众号 ,在微信后台回复「<span style="color: #605eac;">晓组织</span>」,看厉害的人怎么做小程序。</strong></p> <p><img class="size-full wp-image-963729 aligncenter" src="http://images.ifanr.cn/wp-content/uploads/2018/01/qrcode.gif" alt="" width="750" height="375" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/qrcode.gif 750w, http://www.ifanr.com/wp-content/uploads/2018/01/qrcode-360x180.gif 360w" sizes="(max-width: 750px) 100vw, 750px" /></p>