cover_image

像素级「抄袭」你的童年,现在他们还要承包你的表情包 | 晓组织

group小程序微信头像像素画像素君
知晓程序

<p><img class="aligncenter size-large wp-image-991050" src="https://images.ifanr.cn/wp-content/uploads/2018/03/pf1-1024x640.png" alt="" width="1024" height="640" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/pf1-1024x640.png 1024w, http://www.ifanr.com/wp-content/uploads/2018/03/pf1-360x225.png 360w, http://www.ifanr.com/wp-content/uploads/2018/03/pf1-768x480.png 768w, http://www.ifanr.com/wp-content/uploads/2018/03/pf1.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p>在红白机时代,像素游戏风靡,成为了 70 后、80 后不可磨灭的童年记忆。<strong>像素画的表现在于「去繁存简」,让核心的「点」留下而形成的一种特别的绘画表现形式。</strong></p> <p>我们就是这样一个热爱像素文化的团队,一直专注于「像素文化」传播。2017 年,我们成立像素研究小组,致力于研究像素实体化产品。之后为了更好地传播像素文化,我们上线了一款像素绘图小程序「你萌好魔法拼豆」,并于 2018 年 2 月上线「像素君」,希望让更多人接受和喜欢「像素文化」。</p> <p><img class="aligncenter size-full wp-image-994357" src="https://images.ifanr.cn/wp-content/uploads/2018/03/ed.jpg" alt="" width="1000" height="576" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/ed.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/ed-360x207.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/ed-768x442.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">初生的「像素君」</span></h3> <p><strong>「像素君」是一款自制像素头像的小程序,通过简单的选择拼接组合就可以自动生成一款别致的像素头像。</strong>其名字的由来,是因为我们希望这是一款更亲民的产品,像是我们身边的朋友——一个专门爱研究像素的的朋友,所以才把它拟人化,用了「像素君」这样的名字。</p> <p>那我们为什么要做「像素君」呢?</p> <blockquote><p>降低学习门槛,让更多人发现「像素画」的乐趣。</p></blockquote> <p>在我们的第一款绘制像素画、转取像素图和分享像素作品的小程序「你萌好魔法拼豆」中,我们发现,有很多用户不是用这款小程序来画图,而是喜欢用它来转图,并且转出的图片有 75% 以上是人物头像;甚至还有用户在后台私信我们是否有头像定制的服务。</p> <p style="text-align: center;"><img class="aligncenter size-full wp-image-991058" src="https://images.ifanr.cn/wp-content/uploads/2018/03/7-1.jpg" alt="" width="1000" height="661" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/7-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/7-1-360x238.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/7-1-768x508.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /><span style="color: #808080; font-size: 14px;">你萌好魔法拼豆,一款自制像素画的小程序</span></p> <p>于是我们进行了用户调查,发现对「像素头像」定制服务要求很多,甚至大多数用户愿意付费获得。所以,我们就想是不是可以提供一个简单易操作的制作头像的小程序,让「画」像素画的学习门槛降低,使得更多人喜欢上「像素」这种艺术表现方式呢?</p> <h3><span style="color: #605eac;">奔跑的「像素君」</span></h3> <blockquote><p>与时间赛跑。</p></blockquote> <p>想要开发「像素君」的想法是在元旦放假结束后,在制作过程中带给我们最深的感受便在于和时间赛跑。</p> <p>因为临近春节,微信团队控制小程序最晚提交的版本时间是 2 月 10 日,也就是说,我们需要在 30 天内,<strong>完成小程序申请、UI 界面设计、素材补充、调试和上架通过。</strong></p> <p>虽然之前有做过小程序的经验,但像素君的逻辑是和之前的程序完全不一样。因此时间紧,任务重,能否按时完成是对我们最大的挑战。</p> <p><img class="aligncenter size-large wp-image-991051" src="https://images.ifanr.cn/wp-content/uploads/2018/03/t1-1024x640.png" alt="" width="1024" height="640" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/t1-1024x640.png 1024w, http://www.ifanr.com/wp-content/uploads/2018/03/t1-360x225.png 360w, http://www.ifanr.com/wp-content/uploads/2018/03/t1-768x480.png 768w, http://www.ifanr.com/wp-content/uploads/2018/03/t1.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <blockquote><p>越着急,越出错。</p></blockquote> <p>时间过于紧迫,为了能让「像素君」按时完成调试尽早上线,我们决定采用<strong>单图拼贴</strong>方式。</p> <p>每一个素材都是设计师一笔一笔「点」出来的,每变化一点都是独立的素材(比如,我们的每一种发型都有 16 种颜色,而每一个颜色都对应着一个素材)。就这样,设计师加班加点用了不到 1 周的时间将第一批素材设计完成并上传。但可怕的事情发生了——<strong>素材出现了严重扭曲变形。</strong></p> <p style="text-align: center;"><img class="aligncenter size-full wp-image-991060" src="https://images.ifanr.cn/wp-content/uploads/2018/03/88.jpg" alt="" width="1000" height="586" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/88.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/88-360x211.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/88-768x450.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /><span style="color: #808080; font-size: 14px;">出错图片集合</span></p> <p>后来发现,原来是素材与素材之间呈现的逻辑关系出错了。每类素材的展示方式不同,我们必须给每一个素材设定边界才能使他们不变形,所以在完成了第一批素材设计后,我们不得不把时间浪费在了修改素材上,重塑边界,使素材与素材可以合理匹配。</p> <p><strong>20 天,第一个版本的「像素君」制作完成。</strong>尽管在调试期间测试不断,但仍然担心会有机型不匹配的情况,因此我们在 2 月 1 日之前招募到了第一批体验官帮我们测试小程序的功能,并在 2 月 9 日前将所有 bug 修改完毕,于 2 月 9 日正式提交。很幸运的,2 月 10 日我们就通过了审核,并于当天上线了我们第一个正式版的「像素君」。</p> <h3><span style="color: #605eac;">未来的「像素君」</span></h3> <p>对于第一次玩「像素君」来说,大家都希望把自己的头像画得美美的,但我们想反其道而行之,在测试期间展开了一场 #史上最丑头像# 的活动,然后我们惊奇地发现,原来像素头像还可以丑得如此合理和可爱。</p> <p><img class="aligncenter size-full wp-image-991059" src="https://images.ifanr.cn/wp-content/uploads/2018/03/9-1.jpg" alt="" width="1000" height="584" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/9-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/9-1-360x210.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/9-1-768x449.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>正如前文所说,我们作为像素文化的传播者,希望以「像素君」为一个窗口,让更多人可以接受「像素」这种表现形式,并能够发现「像素」玩法的乐趣。</p> <p>除了这款小程序外,我们也配备了相应的像素产品如<strong>像素积木、像素产品、像素绘本</strong>等等供大家选择,让用户也能体验到实体像素产品的乐趣。</p> <p><img class="aligncenter size-large wp-image-991049" src="https://images.ifanr.cn/wp-content/uploads/2018/03/pd1-1024x640.png" alt="" width="1024" height="640" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/pd1-1024x640.png 1024w, http://www.ifanr.com/wp-content/uploads/2018/03/pd1-360x225.png 360w, http://www.ifanr.com/wp-content/uploads/2018/03/pd1-768x480.png 768w, http://www.ifanr.com/wp-content/uploads/2018/03/pd1.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p>现在的这版「像素君」小程序还是基于比较基础的像素图片组合拼成,没办法做到素材自己 DIY。</p> <p>之后我们会进行新一轮地研发,将所有素材变为点阵图,即在将来使用该小程序时,除了可以任意使用已有素材去拼贴像素头像外,还可以任意修改或创造素材,让用户可以更好地体验像素所带来的创意性的玩法和乐趣。</p> <p>希望通过我们的小程序,能够让更多人发现「像素」玩法的乐趣,也让更多人喜欢和爱上像素文化。</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>