從零開始完整制作劇本殺微信小程序

20 評論 5892 瀏覽 36 收藏 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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 像是個劇本殺版的大眾點評

    來自廣東 回復
  2. 請問評價體系是如何做的呢

    來自中國 回復
  3. 我還挺喜歡這個的!平時玩劇本殺最怕和不熟的人拼車,線上劇本殺快快出現

    來自福建 回復
  4. 頁面風格我挺喜歡的,發現現在各種頁面都是簡潔風更討喜。

    來自浙江 回復
  5. 準備運營不

    回復
  6. 劇本殺換到線上感覺就沒意思了,要的就是線下聚在一起開會的氛圍感。

    回復
  7. 劇本殺這種游戲比較適合線下玩,原來還有很多劇本殺APP,現在也都沒了熱度

    回復
  8. 強啊,以前還招人寫劇本,現在都出小程序了,期待

    回復
  9. 一群人都沒搞懂人家做的啥 人家做的是線上組隊線下玩 都懷疑下面的都是機器人了

    來自四川 回復
  10. 為什么沒有上線

    來自湖南 回復
  11. 作者分析的很好,但是還是想說人生沒有劇本。感覺對劇本殺不太感興趣

    來自湖北 回復
  12. 但是我覺得劇本殺還是在線下更有氛圍吧,線上可能沒有那種感覺。

    來自江西 回復
  13. 產品設計,不僅僅要解決用戶的痛點,最好能給用戶帶來爽點體驗,包括細節關懷與激勵等。

    來自中國 回復
  14. 看到了好多想玩的本嘻嘻,不過劇本殺小程序和在美團大眾點評上架的功能感覺重疊了,主要就是拼車組車,看劇本介紹和顧客評價嘛

    來自廣東 回復
  15. 其實劇本殺確實是很火熱的游戲,現在很多年輕人都喜歡玩。

    來自江西 回復
  16. 這個思路很好不過這么弄的話會不會和狼人殺的模式很像了呢感覺還是線下有氛圍

    來自河北 回復
  17. 哦吼,有么現在有了么,針對于現在疫情原因還是很想體驗一下線上玩的感覺的呢。

    來自河南 回復
  18. 疫情期間作者大大干了這么多事情,好強,希望疫情早日過去?。?!

    來自廣東 回復
  19. 劇本殺APP和小程序在疫情的時候更受到關注,這樣也打發了時間。

    來自安徽 回復
  20. 實際效果如何,之前我也想做這個。不過后面體驗了很多游戲,發現容易疲乏

    來自湖南 回復