cover_image

这个工科团队说:简单点,开发小程序的套路简单点 | 晓组织

group小程序微信知晓程序晓组织好产品报名云助手痛点
凌歌

<p><img class="aligncenter size-large wp-image-993334" src="https://images.ifanr.cn/wp-content/uploads/2018/03/77800-1024x640.jpg" alt="" width="1024" height="640" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/77800-1024x640.jpg 1024w, http://www.ifanr.com/wp-content/uploads/2018/03/77800-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/77800-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2018/03/77800.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /><br /> Hello,这里是共享数据的神码团队,一共四人,数据疯子冯哥,产品运营兼前端统领龙哥,后宫(后台)带刀侍卫滕统领,外加小鲜肉刘一手。</p> <p><img class="aligncenter size-full wp-image-991102" src="https://images.ifanr.cn/wp-content/uploads/2018/03/tx.jpg" alt="" width="1000" height="300" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/tx.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/tx-360x108.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/tx-768x230.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>这里想先问问大家,你认为怎样的才是好产品?</p> <p>我们认为,<strong>其实做一款好产品非常简单,那就是能够解决你身边某一个痛点。</strong>不简单的是如何发现自己身边的痛点,并找到解决痛点的实现方式。</p> <p>今天我们带来的便是一款「好产品」:报名云助手。这是一款帮助大家统计报名的小程序,说起来「小」,但能做的很多:</p> <ul> <li>支持快速创建报名活动</li> <li>支持自定义报名所需信息的标签</li> <li>支持发送到微信群和分享给微信好友,直接参与报名</li> <li>支持一键导出文件,支持 PDF 和 Excel 表格等</li> <li>功能「单一」但实用,界面简约却不简单</li> </ul> <h3><span style="color: #605eac;">灵感来源</span></h3> <p>设想一下这样的场景:</p> <blockquote><p>在一个创客办公群里,你是一个组织者,要在创客空间举办一个活动需要统计报名信息和人数等。你会怎么去统计?</p></blockquote> <p>常见的做法是往群里「扔」一个 Excel 表格,让大家轮流填写,无法同时操作。还有更夸张的,需要每个人独立下载表格,填写完个人报名信息后,再「扔」还给组织者。而组织人员得一个一个表格去查看,再进行汇总。既耽误时间,又有很高的出错率,简直是在浪费生命。</p> <p><img class="aligncenter size-full wp-image-988106" src="https://images.ifanr.cn/wp-content/uploads/2018/02/examplefb.png" alt="" width="800" height="667" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/examplefb.png 800w, http://www.ifanr.com/wp-content/uploads/2018/02/examplefb-360x300.png 360w, http://www.ifanr.com/wp-content/uploads/2018/02/examplefb-768x640.png 768w" sizes="(max-width: 800px) 100vw, 800px" /></p> <p>有朋友反映:最近幼儿园老师要统计一些家长的信息,把表格发到了家长群里,让家长们一个个轮番接力,当有人操作时,另外的人无法编辑,仅限于只读模式。这让他十分头疼,认为这非常低效。</p> <p>其实已经算不错了。有些年龄大的家长不玩电脑,甚至不会使用 Excel 表格,需要时还得拜托朋友帮忙填写。</p> <p>基于这些场景,我们决定开发一款简单易上手,又便于组织者管理的小程序。</p> <h3><span style="color: #605eac;">小程序的诞生</span></h3> <p>心动不如行动,既然发现了痛点,那就得着手马上行动。说干就干,想到很多活动的邀约使用场景一般都是在微信群里,包括各种办公群、学生群、家长群等。所以,我们决定选择开发一款微信小程序来解决统计困难的问题。</p> <p>当天,不到 5 分钟我们就根据想法画出了一个思维导图:</p> <p><img class="aligncenter size-large wp-image-988109" src="https://images.ifanr.cn/wp-content/uploads/2018/02/siweidaotu-1024x338.png" alt="" width="1024" height="338" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/siweidaotu-1024x338.png 1024w, http://www.ifanr.com/wp-content/uploads/2018/02/siweidaotu-360x119.png 360w, http://www.ifanr.com/wp-content/uploads/2018/02/siweidaotu-768x253.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p>根据思维导图着手画设计图,而对于我们不懂设计的程序员来说,能想到的最好的设计工具便是 Sketch。傻瓜式操作,简单易上手,我们不到两个小时就完成了设计图的制作。</p> <p><img class="aligncenter size-large wp-image-988107" src="https://images.ifanr.cn/wp-content/uploads/2018/02/ht-779x1024.jpg" alt="" width="779" height="1024" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/ht-779x1024.jpg 779w, http://www.ifanr.com/wp-content/uploads/2018/02/ht-360x473.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/ht-768x1010.jpg 768w, http://www.ifanr.com/wp-content/uploads/2018/02/ht.jpg 1000w" sizes="(max-width: 779px) 100vw, 779px" /></p> <p>很多专业设计人员看完这个设计后,给我们的评价是:这个设计充满了浓浓的工科气息。是的,虽然充满了浓浓的工科气息,但是它简约却不简单啊!</p> <h3><span style="color: #605eac;">开发阶段</span></h3> <p>可以看到,从需求痛点的发现,到整体开发完成我们所花时间很短,事实上在两天内我们已经完成了这个项目。</p> <p>之所以能够开发如此快速,是因为我们小程序的开发经验还算丰富。而在开发「报名云助手」之前,我们已经开发完了一款「活动云助手」,整体的后台架构可以直接拿过来用。</p> <p><img class="aligncenter size-large wp-image-988110" src="https://images.ifanr.cn/wp-content/uploads/2018/02/xiaoguotu-1024x494.png" alt="" width="1024" height="494" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/xiaoguotu-1024x494.png 1024w, http://www.ifanr.com/wp-content/uploads/2018/02/xiaoguotu-360x174.png 360w, http://www.ifanr.com/wp-content/uploads/2018/02/xiaoguotu-768x370.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p style="text-align: center;"><span style="color: #808080; font-size: 14px;">「报名云助手」小程序截图</span></p> <p>于是主要时间就花费在写小程序界面和后台接口设计上了。在这里顺便分享一下我们在开发过程中收获的经验吧!</p> <ol> <li>如果你有 React Native 或者 Vue 开发经验的话,小程序的开发对你来说太简单了,因为整个开发的架构基本一样;</li> <li>开发小程序时我们发现了一个很有意思的点:小程序的点击事件和长按事件都是官方提供的,但在长按时,也会同时触发点击事件,二者竟然不能共用,需要特别处理;</li> <li><code>Button</code> 控件的自定义修改需要特别注意,很多样式的修改需要在 <code>::after</code> 或者 <code>::before</code> 属性中,比如自定义 <code>Button</code> 的边框样式就在 <code>::after</code> 属性里面;</li> <li>需要特别注意小程序模板消息的使用和时效性。其实微信官方对于模板推送的功能做了特别限制,避免小程序过度骚扰用户。虽然对于我们开发者来说很头痛,但是对于用户来说,真的很人性化。</li> </ol> <h3><span style="color: #605eac;">总结</span></h3> <p>相信每一个有情怀的程序员都喜欢亲手设计、开发产品。</p> <p>普通用户喜欢使用小而巧的工具,在解决痛点的同时,还可以提高效率。小程序的出现非常好地满足了这样的需求,无需下载,用完即走。</p> <p>对于程序员而言,好的产品没有那么复杂,就像开头说到的:<strong>做一款好产品非常简单,那就是能够解决你身边某一个痛点即可。</strong></p> <p><img class="aligncenter size-full wp-image-988108" src="https://images.ifanr.cn/wp-content/uploads/2018/02/j.jpg" alt="" width="1000" height="885" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/j.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/j-360x319.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/j-768x680.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>别小看这些生活中的发现,因为灵感和成功就在生活之中。其实对于开发和技术人员来说,开发一款产品很简单,难点在于如何发现身边的痛点,以及如何把痛点转化成产品。协调好这两点,才能开发出一款让大家满意的好产品。</p> <p><img class="aligncenter size-full wp-image-988311" src="https://images.ifanr.cn/wp-content/uploads/2018/02/u9055adqmkepkndhwvchdi2k86ggo9od.png" alt="" width="800" height="410" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/u9055adqmkepkndhwvchdi2k86ggo9od.png 800w, http://www.ifanr.com/wp-content/uploads/2018/02/u9055adqmkepkndhwvchdi2k86ggo9od-360x185.png 360w, http://www.ifanr.com/wp-content/uploads/2018/02/u9055adqmkepkndhwvchdi2k86ggo9od-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/5754/</span></a></p> <p><span style="color: #808080;">题图来自:BBC 中文网。</span></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>