从零开始完整制作剧本杀微信小程序

19 评论 3481 浏览 22 收藏 13 分钟

编辑导读:剧本杀作为最近几年年轻人喜爱的社交活动,不仅在线下发展得红红火火,线上也同步出现了类似的产品。本文作者分享了自己从零开始完整制作剧本杀微信小程序的故事,一起来看看吧。

趁管控在家的这几周,做了一套剧本杀的线上预约、支付、点评微信小程序。感谢大白、社区各自愿者与医护人员的长期付出,期待上海早日解封,让工作、生活各方面恢复日常。本小程序适用于桌游、剧本杀、轰趴馆、私人影院、主题民宿、文创文旅主体项目。

先看一下微信小程序的最终效果截图。

一、前言

本文适用于关注剧本杀等主体活动行业的读者,或者已经工作1~2年且有一定产品或开发基础的技术人员。

在资本与真人秀节目等的推动下,剧本杀作为年轻人交友、娱乐新方式在19、20年迎来了第一波高光。后受疫情与行业规范等影响,开始关注周边及IP打造,更加关注玩家的尝鲜、交友、聚会等全程体验度。迎来了剧本杀2.0。新的剧本杀服务除了与服饰、美妆、文创、家居等行业跨界合作提供沉浸式穿越体验外,还有专门针对交友、婚恋、团建等的实景杀。与KTV、酒吧、网吧、民宿、旅游景点等场景结合,开拓游客群体。民宿、文旅剧本杀可以吃、住、玩,沉浸式体验,比一般的民宿、旅游更有特色。还有一些剑走偏锋的,边玩边喝酒的“喝酒本”;针对中小学生的文学、场景、知识点“学习本”;剧本杀外卖服务等的出现,可谓五花八门,各显神通。

新的行业玩家也更关注自身软实力的打造,利用信息化手段,充分调动渠道、场地、优秀DM等资源。迎接后疫情市场的新机会。在此我们针对这类需求,初步打造一套基于微信小程序的线上剧本杀展示、组局、支付与点评应用。

二、需求梳理

剧本杀功能脑图梳理

跨地区、多门店应用场景。不同门店有不同促销和剧本设定。

大家可以看一下上面脑图,对产品需求有个整体了解。

三、原型设计

基于上个环节的功能需求,参照常用功能组件,用Axure初略画了各页面,方便后续讨论细化。

四、界面设计

经过多轮讨论后,确定好各页面细节功能后开始UI美工制图。

页面设计以简洁、实用为主。统一整体样式,内容层次清晰,规范。

主要组件有:搜索导航条,剧本卡片,拼车卡片,玩家人数反串与否组件,rating评分,优惠券卡片等。

五、数据结构设计

数据围绕拼车gathering,按照分类、剧本、玩家、门店等实体对象进行关系型数据存储设计。

数据ER设计

六、开发准备

框架选型、功能分解与项目开发讨论反馈。

产品可选App、H5或者微信小程序形式制作,考虑到用户使用场景和后续口碑引流,默认按照微信功能扩展开发。对比界面流畅度与品牌增值,选定微信小程序来实现。

微信小程序系统之前CS部署中间环节太多,开发者需要考虑应用层、数据库层、负载均衡与ssl安全等节点,后来推出云开发后,使用对象map数据存储方便了很多,让开发者更加聚焦业务功能实现。考虑到数据独立性和团队本身已有ssl服务器,所以我们还是使用了关系型数据模型。

微信小程序展示层有很多框架可选。考虑到组件丰富度以及后期购买和用品展示的扩展需求,我们选择了jquery weui,vant。

参照组件库的样式,对各页面和数据呈现进行了开发工期与可行性分析讨论,反馈给设计更新页面。

开发环节主要工具:微信开发者工具、sqlyog、sublime、winscp、xshell。

页面样式微调

主功能开发环节

七、迭代开发

第一个sprint把主页、列表、详情、预约主流程页面串联起来。

第二个sprint把拼班、组局和支付流程增补进去。

第三个sprint把搜索功能和列表排序完成。

第四个sprint把优惠券功能加上,包括对组局、拼车支付环境的重构。

第五个sprint把订单列表、取消、退费功能加上。

第六个sprint微调各页面样式和数据记录完整测试。

经开发测试后,发布staging预览版,提供给甲方手机端实际测试。根据甲方反馈调整页面功能后。提交代码质量优化,对前后端算法、查询、数据、素材及代码规范进行优化。

开发期间碰到的主要逻辑功能有:

1. 微信小程序服务端

安全口令约定,请求参数及返回包约定,微信支付,短信口令发送,分享海报合成图生产等。

此外对接口频次限制、参数不正确、版本不支持、服务返回错误、处理超时、接口调用错误、授权认证异常等进行了后期分析。

2. 微信小程序应用端

component搜索组件,排行rank,seats玩家状态展示组件,stepper人数设定规则,信息元素多样式的flex布局组合等。

此外对各异常的默认样式处理,像网络异常、存储异常、内存异常、字段参数异常、带宽限制、内存异常、权限异常、数据异常等也需要酌情考虑。

关于开发这块,如果大家有兴趣可以恢复提出您关注的知识点,我可以再开帖细讲具体实现。

八、单元测试

微信开发者工具提供了比较完整的调试预览功能,UI、数据AppData,代码代码质量优化等方面方便开发。
微信小程序调试工具

九、staging测试

上传后,可以使用体验版二维码,邀请相关人员参与体验反馈。

这个功能还是很实用的,代码修改后随时可以上传,分享给大家在不同状态下的手机端测试。

十、产品发布

用git做好版本控制,发布产品,全量发布,注意声明。

十一、应用推广

工具型应用可以挂在公众号菜单链接、门店前台等。

十二、用户体验采集与产品迭代

快速开发第一版本上线后,根据实际使用反馈,设定二期升级版本需求。比如DM设定与团队激励等。

自此,一套实用的剧本杀微信小程序就开发完成了。

产品设计,不仅仅要解决用户的痛点,最好能给用户带来爽点体验,包括细节关怀与激励等。

我是轻云茶客,欢迎有兴趣的朋友一起讨论更多产品设计与项目开发的案例实践。

最后用一首一首茶诗来结束本文:

茶罢晴檐唱午鸡,偶骑驴去过东溪。

酒肴分倩樵夫拿,笔砚专令童子携。

放目水亭栏独倚,题诗僧舍壁新泥。

兴阑归问来时路,到处蝉鸣日已西。

—— 宋 赵汝鐩 《茶罢》

 

本文由 @轻云茶客 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 请问评价体系是如何做的呢

    来自中国 回复
  2. 我还挺喜欢这个的!平时玩剧本杀最怕和不熟的人拼车,线上剧本杀快快出现

    来自福建 回复
  3. 页面风格我挺喜欢的,发现现在各种页面都是简洁风更讨喜。

    来自浙江 回复
  4. 准备运营不

    回复
  5. 剧本杀换到线上感觉就没意思了,要的就是线下聚在一起开会的氛围感。

    回复
  6. 剧本杀这种游戏比较适合线下玩,原来还有很多剧本杀APP,现在也都没了热度

    回复
  7. 强啊,以前还招人写剧本,现在都出小程序了,期待

    回复
  8. 一群人都没搞懂人家做的啥 人家做的是线上组队线下玩 都怀疑下面的都是机器人了

    来自四川 回复
  9. 为什么没有上线

    来自湖南 回复
  10. 作者分析的很好,但是还是想说人生没有剧本。感觉对剧本杀不太感兴趣

    来自湖北 回复
  11. 但是我觉得剧本杀还是在线下更有氛围吧,线上可能没有那种感觉。

    来自江西 回复
  12. 产品设计,不仅仅要解决用户的痛点,最好能给用户带来爽点体验,包括细节关怀与激励等。

    来自中国 回复
  13. 看到了好多想玩的本嘻嘻,不过剧本杀小程序和在美团大众点评上架的功能感觉重叠了,主要就是拼车组车,看剧本介绍和顾客评价嘛

    来自广东 回复
  14. 其实剧本杀确实是很火热的游戏,现在很多年轻人都喜欢玩。

    来自江西 回复
  15. 这个思路很好不过这么弄的话会不会和狼人杀的模式很像了呢感觉还是线下有氛围

    来自河北 回复
  16. 哦吼,有么现在有了么,针对于现在疫情原因还是很想体验一下线上玩的感觉的呢。

    来自河南 回复
  17. 疫情期间作者大大干了这么多事情,好强,希望疫情早日过去!!!

    来自广东 回复
  18. 剧本杀APP和小程序在疫情的时候更受到关注,这样也打发了时间。

    来自安徽 回复
  19. 实际效果如何,之前我也想做这个。不过后面体验了很多游戏,发现容易疲乏

    来自湖南 回复