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

先看一下最終效果，不喜視頻的可以看一下下面的截圖。

主題趴類微信小程序設(shè)計(jì)

• • 一、前言
  • 二、需求梳理
  • 三、原型設(shè)計(jì)
  • 四、界面設(shè)計(jì)
  • 五、數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)
  • 六、開發(fā)準(zhǔn)備
  • 七、迭代開發(fā)
  • 八、單元測試
  • 九、staging測試
  • 十、產(chǎn)品發(fā)布
  • 十一、應(yīng)用推廣
  • 十二、用戶體驗(yàn)采集與產(chǎn)品迭代

一、前言

本文適用于關(guān)注劇本殺等主體活動(dòng)行業(yè)的讀者，或者已經(jīng)工作1~2年且有一定產(chǎn)品或開發(fā)基礎(chǔ)的技術(shù)人員。讀完全文約需要15分鐘。
在資本與真人秀節(jié)目等的推動(dòng)下，劇本殺作為年輕人交友、娛樂新方式在19、20年迎來了第一波高光。后受疫情與行業(yè)規(guī)范等影響，開始關(guān)注周邊及IP打造，更加關(guān)注玩家的嘗鮮、交友、聚會(huì)等全程體驗(yàn)度。迎來了劇本殺2.0。新的劇本殺服務(wù)除了與服飾、美妝、文創(chuàng)、家居等行業(yè)跨界合作提供沉浸式穿越體驗(yàn)外，還有專門針對(duì)交友、婚戀、團(tuán)建等的實(shí)景殺。與KTV、酒吧、網(wǎng)吧、民宿、旅游景點(diǎn)等場景結(jié)合，開拓游客群體。民宿、文旅劇本殺可以吃、住、玩，沉浸式體驗(yàn)，比一般的民宿、旅游更有特色。還有一些劍走偏鋒的，邊玩邊喝酒的“喝酒本”；針對(duì)中小學(xué)生的文學(xué)、場景、知識(shí)點(diǎn)“學(xué)習(xí)本”；劇本殺外賣服務(wù)等的出現(xiàn)，可謂五花八門，各顯神通。
新的行業(yè)玩家也更關(guān)注自身軟實(shí)力的打造，利用信息化手段，充分調(diào)動(dòng)渠道、場地、優(yōu)秀DM等資源。迎接后疫情市場的新機(jī)會(huì)。在此我們針對(duì)這類需求，初步打造一套基于微信小程序的線上劇本殺展示、組局、支付與點(diǎn)評(píng)應(yīng)用。

二、需求梳理

劇本殺功能腦圖梳理
跨地區(qū)、多門店應(yīng)用場景。不同門店有不同促銷和劇本設(shè)定。大家可以看一下上面腦圖，對(duì)產(chǎn)品需求有個(gè)整體了解。

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

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

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

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




頁面設(shè)計(jì)以簡潔、實(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或者微信小程序形式制作，考慮到用戶使用場景和后續(xù)口碑引流，默認(rèn)按照微信功能擴(kuò)展開發(fā)。對(duì)比界面流暢度與品牌增值，選定微信小程序來實(shí)現(xiàn)。
微信小程序系統(tǒng)之前CS部署中間環(huán)節(jié)太多，開發(fā)者需要考慮應(yīng)用層、數(shù)據(jù)庫層、負(fù)載均衡與ssl安全等節(jié)點(diǎn)，后來推出云開發(fā)后，使用對(duì)象map數(shù)據(jù)存儲(chǔ)方便了很多，讓開發(fā)者更加聚焦業(yè)務(wù)功能實(shí)現(xiàn)。考慮到數(shù)據(jù)獨(dú)立性和團(tuán)隊(duì)本身已有ssl服務(wù)器，所以我們還是使用了關(guān)系型數(shù)據(jù)模型。
微信小程序展示層有很多框架可選。考慮到組件豐富度以及后期購買和用品展示的擴(kuò)展需求，我們選擇了jquery weui，vant。
參照組件庫的樣式，對(duì)各頁面和數(shù)據(jù)呈現(xiàn)進(jìn)行了開發(fā)工期與可行性分析討論，反饋給設(shè)計(jì)更新頁面。
開發(fā)環(huán)節(jié)主要工具：微信開發(fā)者工具、sqlyog、sublime、winscp、xshell。
?

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

七、迭代開發(fā)

第一個(gè)sprint把主頁、列表、詳情、預(yù)約主流程頁面串聯(lián)起來。
第二個(gè)sprint把拼班、組局和支付流程增補(bǔ)進(jìn)去。
第三個(gè)sprint把搜索功能和列表排序完成。
第四個(gè)sprint把優(yōu)惠券功能加上，包括對(duì)組局、拼車支付環(huán)境的重構(gòu)。
第五個(gè)sprint把訂單列表、取消、退費(fèi)功能加上。
第六個(gè)sprint微調(diào)各頁面樣式和數(shù)據(jù)記錄完整測試。
經(jīng)開發(fā)測試后，發(fā)布staging預(yù)覽版，提供給甲方手機(jī)端實(shí)際測試。根據(jù)甲方反饋調(diào)整頁面功能后。提交代碼質(zhì)量優(yōu)化，對(duì)前后端算法、查詢、數(shù)據(jù)、素材及代碼規(guī)范進(jìn)行優(yōu)化。
開發(fā)期間碰到的主要邏輯功能有：

微信小程序服務(wù)端
安全口令約定，請(qǐng)求參數(shù)及返回包約定，微信支付，短信口令發(fā)送，分享海報(bào)合成圖生產(chǎn)等。
此外對(duì)接口頻次限制、參數(shù)不正確、版本不支持、服務(wù)返回錯(cuò)誤、處理超時(shí)、接口調(diào)用錯(cuò)誤、授權(quán)認(rèn)證異常等進(jìn)行了后期分析。

微信小程序應(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)。

八、單元測試

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

九、staging測試

上傳后，可以使用體驗(yàn)版二維碼，邀請(qǐng)相關(guān)人員參與體驗(yàn)反饋。
這個(gè)功能還是很實(shí)用的，代碼修改后隨時(shí)可以上傳，分享給大家在不同狀態(tài)下的手機(jī)端測試。

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

發(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ì)等。

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

歡迎大家交流討論更多應(yīng)用型產(chǎn)品的項(xiàng)目實(shí)戰(zhàn)。

最后，用半篇茶詩作結(jié)：
"
贈(zèng)君江南春露芽，恐君誦詩眼生花。
一杯靜對(duì)沉煙斜，世事從渠如亂麻。
—— 宋 · 章甫 《送茶與人》"

總結(jié)

以上是生活随笔為你收集整理的一步步构建剧本杀门店应用小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。