編輯導(dǎo)讀：劇本殺作為最近幾年年輕人喜愛的社交活動(dòng)，不僅在線下發(fā)展得紅紅火火，線上也同步出現(xiàn)了類似的產(chǎn)品。本文作者分享了自己從零開始完整制作劇本殺微信小程序的故事，一起來(lái)看看吧。

趁管控在家的這幾周，做了一套劇本殺的線上預(yù)約、支付、點(diǎn)評(píng)微信小程序。感謝大白、社區(qū)各自愿者與醫(yī)護(hù)人員的長(zhǎng)期付出，期待上海早日解封，讓工作、生活各方面恢復(fù)日常。本小程序適用于桌游、劇本殺、轟趴館、私人影院、主題民宿、文創(chuàng)文旅主體項(xiàng)目。

先看一下微信小程序的最終效果截圖。

一、前言

本文適用于關(guān)注劇本殺等主體活動(dòng)行業(yè)的讀者，或者已經(jīng)工作1~2年且有一定產(chǎn)品或開發(fā)基礎(chǔ)的技術(shù)人員。

在資本與真人秀節(jié)目等的推動(dòng)下，劇本殺作為年輕人交友、娛樂新方式在19、20年迎來(lái)了第一波高光。后受疫情與行業(yè)規(guī)范等影響，開始關(guān)注周邊及IP打造，更加關(guān)注玩家的嘗鮮、交友、聚會(huì)等全程體驗(yàn)度。迎來(lái)了劇本殺2.0。新的劇本殺服務(wù)除了與服飾、美妝、文創(chuàng)、家居等行業(yè)跨界合作提供沉浸式穿越體驗(yàn)外，還有專門針對(duì)交友、婚戀、團(tuán)建等的實(shí)景殺。與KTV、酒吧、網(wǎng)吧、民宿、旅游景點(diǎn)等場(chǎng)景結(jié)合，開拓游客群體。民宿、文旅劇本殺可以吃、住、玩，沉浸式體驗(yàn)，比一般的民宿、旅游更有特色。還有一些劍走偏鋒的，邊玩邊喝酒的“喝酒本”；針對(duì)中小學(xué)生的文學(xué)、場(chǎng)景、知識(shí)點(diǎn)“學(xué)習(xí)本”；劇本殺外賣服務(wù)等的出現(xiàn)，可謂五花八門，各顯神通。

新的行業(yè)玩家也更關(guān)注自身軟實(shí)力的打造，利用信息化手段，充分調(diào)動(dòng)渠道、場(chǎng)地、優(yōu)秀DM等資源。迎接后疫情市場(chǎng)的新機(jī)會(huì)。在此我們針對(duì)這類需求，初步打造一套基于微信小程序的線上劇本殺展示、組局、支付與點(diǎn)評(píng)應(yīng)用。

二、需求梳理

劇本殺功能腦圖梳理

跨地區(qū)、多門店應(yīng)用場(chǎng)景。不同門店有不同促銷和劇本設(shè)定。

大家可以看一下上面腦圖，對(duì)產(chǎn)品需求有個(gè)整體了解。

三、原型設(shè)計(jì)

基于上個(gè)環(huán)節(jié)的功能需求，參照常用功能組件，用Axure初略畫了各頁(yè)面，方便后續(xù)討論細(xì)化。

四、界面設(shè)計(jì)

經(jīng)過(guò)多輪討論后，確定好各頁(yè)面細(xì)節(jié)功能后開始UI美工制圖。

頁(yè)面設(shè)計(jì)以簡(jiǎn)潔、實(shí)用為主。統(tǒng)一整體樣式，內(nèi)容層次清晰，規(guī)范。

主要組件有：搜索導(dǎo)航條，劇本卡片，拼車卡片，玩家人數(shù)反串與否組件，rating評(píng)分，優(yōu)惠券卡片等。

五、數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

數(shù)據(jù)圍繞拼車gathering，按照分類、劇本、玩家、門店等實(shí)體對(duì)象進(jìn)行關(guān)系型數(shù)據(jù)存儲(chǔ)設(shè)計(jì)。

數(shù)據(jù)ER設(shè)計(jì)

六、開發(fā)準(zhǔn)備

框架選型、功能分解與項(xiàng)目開發(fā)討論反饋。

產(chǎn)品可選App、H5或者微信小程序形式制作，考慮到用戶使用場(chǎng)景和后續(xù)口碑引流，默認(rèn)按照微信功能擴(kuò)展開發(fā)。對(duì)比界面流暢度與品牌增值，選定微信小程序來(lái)實(shí)現(xiàn)。

微信小程序系統(tǒng)之前CS部署中間環(huán)節(jié)太多，開發(fā)者需要考慮應(yīng)用層、數(shù)據(jù)庫(kù)層、負(fù)載均衡與ssl安全等節(jié)點(diǎn)，后來(lái)推出云開發(fā)后，使用對(duì)象map數(shù)據(jù)存儲(chǔ)方便了很多，讓開發(fā)者更加聚焦業(yè)務(wù)功能實(shí)現(xiàn)?？紤]到數(shù)據(jù)獨(dú)立性和團(tuán)隊(duì)本身已有ssl服務(wù)器，所以我們還是使用了關(guān)系型數(shù)據(jù)模型。

微信小程序展示層有很多框架可選?？紤]到組件豐富度以及后期購(gòu)買和用品展示的擴(kuò)展需求，我們選擇了jquery weui，vant。

參照組件庫(kù)的樣式，對(duì)各頁(yè)面和數(shù)據(jù)呈現(xiàn)進(jìn)行了開發(fā)工期與可行性分析討論，反饋給設(shè)計(jì)更新頁(yè)面。

開發(fā)環(huán)節(jié)主要工具：微信開發(fā)者工具、sqlyog、sublime、winscp、xshell。

頁(yè)面樣式微調(diào)

主功能開發(fā)環(huán)節(jié)

七、迭代開發(fā)

第一個(gè)sprint把主頁(yè)、列表、詳情、預(yù)約主流程頁(yè)面串聯(lián)起來(lái)。

第二個(gè)sprint把拼班、組局和支付流程增補(bǔ)進(jìn)去。

第三個(gè)sprint把搜索功能和列表排序完成。

第四個(gè)sprint把優(yōu)惠券功能加上，包括對(duì)組局、拼車支付環(huán)境的重構(gòu)。

第五個(gè)sprint把訂單列表、取消、退費(fèi)功能加上。

第六個(gè)sprint微調(diào)各頁(yè)面樣式和數(shù)據(jù)記錄完整測(cè)試。

經(jīng)開發(fā)測(cè)試后，發(fā)布staging預(yù)覽版，提供給甲方手機(jī)端實(shí)際測(cè)試。根據(jù)甲方反饋調(diào)整頁(yè)面功能后。提交代碼質(zhì)量?jī)?yōu)化，對(duì)前后端算法、查詢、數(shù)據(jù)、素材及代碼規(guī)范進(jìn)行優(yōu)化。

開發(fā)期間碰到的主要邏輯功能有：

1. 微信小程序服務(wù)端

安全口令約定，請(qǐng)求參數(shù)及返回包約定，微信支付，短信口令發(fā)送，分享海報(bào)合成圖生產(chǎn)等。

此外對(duì)接口頻次限制、參數(shù)不正確、版本不支持、服務(wù)返回錯(cuò)誤、處理超時(shí)、接口調(diào)用錯(cuò)誤、授權(quán)認(rèn)證異常等進(jìn)行了后期分析。

2. 微信小程序應(yīng)用端

component搜索組件，排行rank，seats玩家狀態(tài)展示組件，stepper人數(shù)設(shè)定規(guī)則，信息元素多樣式的flex布局組合等。

此外對(duì)各異常的默認(rèn)樣式處理，像網(wǎng)絡(luò)異常、存儲(chǔ)異常、內(nèi)存異常、字段參數(shù)異常、帶寬限制、內(nèi)存異常、權(quán)限異常、數(shù)據(jù)異常等也需要酌情考慮。

關(guān)于開發(fā)這塊，如果大家有興趣可以恢復(fù)提出您關(guān)注的知識(shí)點(diǎn)，我可以再開帖細(xì)講具體實(shí)現(xiàn)。

八、單元測(cè)試

微信開發(fā)者工具提供了比較完整的調(diào)試預(yù)覽功能，UI、數(shù)據(jù)AppData，代碼代碼質(zhì)量?jī)?yōu)化等方面方便開發(fā)。
微信小程序調(diào)試工具

九、staging測(cè)試

上傳后，可以使用體驗(yàn)版二維碼，邀請(qǐng)相關(guān)人員參與體驗(yàn)反饋。

這個(gè)功能還是很實(shí)用的，代碼修改后隨時(shí)可以上傳，分享給大家在不同狀態(tài)下的手機(jī)端測(cè)試。

十、產(chǎn)品發(fā)布

用git做好版本控制，發(fā)布產(chǎn)品，全量發(fā)布，注意聲明。

十一、應(yīng)用推廣

工具型應(yīng)用可以掛在公眾號(hào)菜單鏈接、門店前臺(tái)等。

十二、用戶體驗(yàn)采集與產(chǎn)品迭代

快速開發(fā)第一版本上線后，根據(jù)實(shí)際使用反饋，設(shè)定二期升級(jí)版本需求。比如DM設(shè)定與團(tuán)隊(duì)激勵(lì)等。

自此，一套實(shí)用的劇本殺微信小程序就開發(fā)完成了。

產(chǎn)品設(shè)計(jì)，不僅僅要解決用戶的痛點(diǎn)，最好能給用戶帶來(lái)爽點(diǎn)體驗(yàn)，包括細(xì)節(jié)關(guān)懷與激勵(lì)等。

我是輕云茶客，歡迎有興趣的朋友一起討論更多產(chǎn)品設(shè)計(jì)與項(xiàng)目開發(fā)的案例實(shí)踐。

最后用一首一首茶詩(shī)來(lái)結(jié)束本文：

茶罷晴檐唱午雞，偶騎驢去過(guò)東溪。

酒肴分倩樵夫拿，筆硯專令童子攜。

放目水亭欄獨(dú)倚，題詩(shī)僧舍壁新泥。

興闌歸問(wèn)來(lái)時(shí)路，到處蟬鳴日已西。

—— 宋 趙汝鐩 《茶罷》

本文由 @輕云茶客 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于CC0協(xié)議