小程序案例剖析：功能型小程序的前后臺(tái)原型設(shè)計(jì)
2019-09-20
為更好的跟大家交流小程序的開(kāi)發(fā)經(jīng)驗(yàn)，開(kāi)拓者科技分享一個(gè)小程序開(kāi)發(fā)案例，大家一起學(xué)習(xí)。
一、案例主體介紹
一家線上教育公司，主要做海外華人留學(xué)生的1v1課程定制輔導(dǎo)的機(jī)構(gòu)。顧名思義就是針對(duì)一些留學(xué)生的課業(yè)進(jìn)行輔導(dǎo)，以幫助他們更好的適應(yīng)留學(xué)生活，并最終通過(guò)考試。
二、小程序項(xiàng)目背景
該企業(yè)目前在很多高校都有自己的校園代理人，這些校園代理人的主要工作職責(zé)，就是幫助我們招募來(lái)自各大高校的學(xué)生來(lái)做我們的兼職老師。因?yàn)槲覀冎饕龅氖?V1定制輔導(dǎo)，所以對(duì)不同專(zhuān)業(yè)的老師需求量非常大；我們品牌自身的影響力，不足以吸引很多學(xué)生主動(dòng)來(lái)加入我們。所以就需要這些校園代理人在各大高校宣傳我們的品牌，并招募這些優(yōu)秀的學(xué)生加入到我們的兼職老師陣營(yíng)里來(lái)。
三、小程序項(xiàng)目需求
本項(xiàng)目的需求是方便這些校園代理人在溝通了意向客戶(hù)后，將他們錄入到我們的兼職老師儲(chǔ)備庫(kù)里。然后企業(yè)可以第一時(shí)間在管理后臺(tái)查看到這些意向客戶(hù)，并對(duì)該客戶(hù)進(jìn)行線上初試、復(fù)試等一系列環(huán)節(jié)的考核，最終將該名客戶(hù)錄取為企業(yè)的兼職老師。代理人可以在小程序看到自己錄入系統(tǒng)的老師信息、老師數(shù)量，當(dāng)前的狀態(tài)，以及賬戶(hù)提成金額等信息。
四、小程序開(kāi)發(fā)調(diào)研
用戶(hù)訪談：最開(kāi)始這一套流程是純線下去實(shí)施的，后面和師資部負(fù)責(zé)老師招聘的負(fù)責(zé)人以及師資部門(mén)的同事溝通后，便決定把這套流程搬到線上來(lái)。由于這套流程比較簡(jiǎn)單，所以就沒(méi)有針對(duì)代理人去進(jìn)行交流，而是把現(xiàn)有的線下流程直接搬到線上來(lái)進(jìn)行實(shí)施。
五、小程序設(shè)計(jì)
本項(xiàng)目的業(yè)務(wù)流程圖如下：
話不多說(shuō)，接下來(lái)詳細(xì)講解一下該小程序的原型設(shè)計(jì)及PRD文檔如何編寫(xiě)。
小程序頁(yè)面
登錄頁(yè)
采用的是賬號(hào)密碼的登錄方式，賬號(hào)密碼由管理后臺(tái)創(chuàng)建，打開(kāi)小程序后默認(rèn)彈出數(shù)字鍵盤(pán)，同時(shí)input框加入“autofocus”屬性，焦點(diǎn)直接聚焦在賬號(hào)輸入框內(nèi)
首頁(yè)（無(wú)數(shù)據(jù)狀態(tài)、有數(shù)據(jù)狀態(tài)）
無(wú)數(shù)據(jù)時(shí)加上創(chuàng)意性的slogan以此達(dá)到激勵(lì)效果；有數(shù)據(jù)時(shí)采用經(jīng)典的卡片式設(shè)計(jì)，頁(yè)面簡(jiǎn)潔明了。
頭部可根據(jù)老師的不同狀態(tài)進(jìn)行篩選，實(shí)時(shí)查看到錄入的客戶(hù)已經(jīng)進(jìn)入到了面試的什么階段。
錄入教師頁(yè)面
采用經(jīng)典的移動(dòng)端Form表單設(shè)計(jì)，同時(shí)上傳文件的功能直接利用從微信的會(huì)話列表拉取。為了防止新手不知道如何上傳文件，我做了一個(gè)教程頁(yè)“如何導(dǎo)入微信文件”進(jìn)行上傳文件的引導(dǎo)來(lái)告知其如何一步步進(jìn)行文件的上傳。
數(shù)據(jù)看板
頂部banner設(shè)計(jì)豐富頁(yè)面視覺(jué)效果，底部的數(shù)據(jù)指標(biāo)對(duì)應(yīng)錄入老師的不同狀態(tài)。因?yàn)槊總€(gè)錄入的老師進(jìn)入不同的面試狀態(tài)，都會(huì)給到代理人不同的提成金額。所以代理人會(huì)經(jīng)常關(guān)注該數(shù)據(jù)指標(biāo)看板的數(shù)據(jù)情況。
其次“矩形塊拼接式”的看板設(shè)計(jì)使頁(yè)面更加美觀、主次分明。每一個(gè)矩形塊都可以點(diǎn)擊進(jìn)入，查看該階段的所有老師，就相當(dāng)于在首頁(yè)操作切換狀態(tài)標(biāo)簽的操作。
我的頁(yè)面
“我的賬戶(hù)”和“我的合同”，由于功能比較重要，就單獨(dú)做成了兩個(gè)按鈕式的設(shè)計(jì)，一方面是使原本枯燥的“我的”頁(yè)面更加美觀，另一方面也突出了功能的主次關(guān)系。
合同簽署頁(yè)面
前端會(huì)在生產(chǎn)環(huán)境下的合同后面加上公司水印，原型上未注明，同時(shí)合同會(huì)在前后端都渲染一份。前端渲染的合同用于給代理人查看并簽約，后端渲染的合同需要在管理后臺(tái)查看、審核并存檔。
合同的內(nèi)容做了模糊處理，合同由于需要手寫(xiě)簽字，所以代理人查看完合同并確認(rèn)無(wú)誤后點(diǎn)擊簽約；之后會(huì)彈出手簽板，代理人只能手寫(xiě)上自己的姓名；然后前端再渲染到合同的乙方簽名處，簽好后合同就算生成了。
個(gè)人資料
數(shù)據(jù)全部由后臺(tái)生成，前端無(wú)法進(jìn)行編輯修改。
身份認(rèn)證詳情頁(yè)
為了驗(yàn)證代理人身份信息，需要代理人登錄小程序后上傳身份證正反面照片，同時(shí)后端需要接入銀聯(lián)的身份認(rèn)證的接口進(jìn)行自動(dòng)化審核。
該身份認(rèn)證的第三方API接口是按次收費(fèi)的，該接口可識(shí)別出身份證正反面是否錯(cuò)誤、照片是否模糊等，點(diǎn)擊“確認(rèn)并提交”后。前端調(diào)該接口進(jìn)行審核并實(shí)時(shí)返回審核結(jié)果；未通過(guò)后端會(huì)返回錯(cuò)誤原因，如“身份證正反面錯(cuò)誤”、“照片模糊”等；通過(guò)后直接顯示已通過(guò)審核就ok。
管理后臺(tái)
合作方渠道列表
用于展示所有已錄入的代理人及其他合作渠道的全部信息。藍(lán)色的文字表示可點(diǎn)擊進(jìn)入詳情頁(yè)：如“渠道名稱(chēng)”可點(diǎn)擊進(jìn)入渠道個(gè)人信息頁(yè)；點(diǎn)擊“招聘記錄”彈出彈窗，顯示當(dāng)前渠道的所有招聘記錄。
創(chuàng)建合作方渠道
創(chuàng)建渠道，用于創(chuàng)建不同類(lèi)別的渠道信息。
合同審核列表
用于展示所有已創(chuàng)建的合同，同時(shí)合同除了固定的內(nèi)容外，有少部分內(nèi)容是動(dòng)態(tài)生成的“如代理人身份的不同、合同有效期限等信息”。所以師資部門(mén)的專(zhuān)員創(chuàng)建合同后需要交由主管審核，合同信息沒(méi)有問(wèn)題才可發(fā)送到小程序給到代理人簽約。
代理人賬戶(hù)提成審核
代理人在小程序進(jìn)行身份驗(yàn)證后需要添加銀行卡相關(guān)信息，然后每一筆提成都會(huì)記錄在該代理人“我的賬戶(hù)”的明細(xì)里和后臺(tái)的提成明細(xì)內(nèi)。每個(gè)月1號(hào)會(huì)生成上月該代理人所有的提成明細(xì)，師資人員審核每一筆提成無(wú)誤后點(diǎn)擊通過(guò)，就可以交由財(cái)務(wù)部門(mén)給代理人銀行卡打錢(qián)了。
六、小程序開(kāi)發(fā)總結(jié)
因?yàn)榉N種原因這里省略了部分頁(yè)面，但最核心的頁(yè)面都放了上去。
最后小程序的部署和上線都由前端開(kāi)發(fā)負(fù)責(zé)，我們需要記錄上線的時(shí)間，并在之后的每一次版本迭代都做好版本記錄和更新記錄就ok，到這里小程序的設(shè)計(jì)就完成了。
因?yàn)樾〕绦蛱峁┝斯╅_(kāi)發(fā)者使用的框架、組件及接口參考文檔。我們?cè)谠O(shè)計(jì)的時(shí)候最好能先仔細(xì)閱讀小程序的相關(guān)說(shuō)明文檔，不要用設(shè)計(jì)APP的那一套理念去設(shè)計(jì)小程序。前端開(kāi)發(fā)可以使用小程序自帶的一些組件，所以不要做過(guò)多的自定義組件的設(shè)計(jì)。
同時(shí)小程序是基于微信的平臺(tái)來(lái)開(kāi)發(fā)的，所以我們?cè)谠O(shè)計(jì)的時(shí)候要考慮與微信強(qiáng)大的功能做好對(duì)接。比如上傳文件可以直接從微信的會(huì)話列表拉取，登錄可以直接默認(rèn)使用微信登錄等，這樣可以大大節(jié)省開(kāi)發(fā)成本。
一、案例主體介紹
一家線上教育公司，主要做海外華人留學(xué)生的1v1課程定制輔導(dǎo)的機(jī)構(gòu)。顧名思義就是針對(duì)一些留學(xué)生的課業(yè)進(jìn)行輔導(dǎo)，以幫助他們更好的適應(yīng)留學(xué)生活，并最終通過(guò)考試。
二、小程序項(xiàng)目背景
該企業(yè)目前在很多高校都有自己的校園代理人，這些校園代理人的主要工作職責(zé)，就是幫助我們招募來(lái)自各大高校的學(xué)生來(lái)做我們的兼職老師。因?yàn)槲覀冎饕龅氖?V1定制輔導(dǎo)，所以對(duì)不同專(zhuān)業(yè)的老師需求量非常大；我們品牌自身的影響力，不足以吸引很多學(xué)生主動(dòng)來(lái)加入我們。所以就需要這些校園代理人在各大高校宣傳我們的品牌，并招募這些優(yōu)秀的學(xué)生加入到我們的兼職老師陣營(yíng)里來(lái)。
三、小程序項(xiàng)目需求
本項(xiàng)目的需求是方便這些校園代理人在溝通了意向客戶(hù)后，將他們錄入到我們的兼職老師儲(chǔ)備庫(kù)里。然后企業(yè)可以第一時(shí)間在管理后臺(tái)查看到這些意向客戶(hù)，并對(duì)該客戶(hù)進(jìn)行線上初試、復(fù)試等一系列環(huán)節(jié)的考核，最終將該名客戶(hù)錄取為企業(yè)的兼職老師。代理人可以在小程序看到自己錄入系統(tǒng)的老師信息、老師數(shù)量，當(dāng)前的狀態(tài)，以及賬戶(hù)提成金額等信息。
四、小程序開(kāi)發(fā)調(diào)研
用戶(hù)訪談：最開(kāi)始這一套流程是純線下去實(shí)施的，后面和師資部負(fù)責(zé)老師招聘的負(fù)責(zé)人以及師資部門(mén)的同事溝通后，便決定把這套流程搬到線上來(lái)。由于這套流程比較簡(jiǎn)單，所以就沒(méi)有針對(duì)代理人去進(jìn)行交流，而是把現(xiàn)有的線下流程直接搬到線上來(lái)進(jìn)行實(shí)施。
五、小程序設(shè)計(jì)
本項(xiàng)目的業(yè)務(wù)流程圖如下：
話不多說(shuō)，接下來(lái)詳細(xì)講解一下該小程序的原型設(shè)計(jì)及PRD文檔如何編寫(xiě)。
小程序頁(yè)面
登錄頁(yè)
采用的是賬號(hào)密碼的登錄方式，賬號(hào)密碼由管理后臺(tái)創(chuàng)建，打開(kāi)小程序后默認(rèn)彈出數(shù)字鍵盤(pán)，同時(shí)input框加入“autofocus”屬性，焦點(diǎn)直接聚焦在賬號(hào)輸入框內(nèi)
首頁(yè)（無(wú)數(shù)據(jù)狀態(tài)、有數(shù)據(jù)狀態(tài)）
無(wú)數(shù)據(jù)時(shí)加上創(chuàng)意性的slogan以此達(dá)到激勵(lì)效果；有數(shù)據(jù)時(shí)采用經(jīng)典的卡片式設(shè)計(jì)，頁(yè)面簡(jiǎn)潔明了。
頭部可根據(jù)老師的不同狀態(tài)進(jìn)行篩選，實(shí)時(shí)查看到錄入的客戶(hù)已經(jīng)進(jìn)入到了面試的什么階段。
錄入教師頁(yè)面
采用經(jīng)典的移動(dòng)端Form表單設(shè)計(jì)，同時(shí)上傳文件的功能直接利用從微信的會(huì)話列表拉取。為了防止新手不知道如何上傳文件，我做了一個(gè)教程頁(yè)“如何導(dǎo)入微信文件”進(jìn)行上傳文件的引導(dǎo)來(lái)告知其如何一步步進(jìn)行文件的上傳。
數(shù)據(jù)看板
頂部banner設(shè)計(jì)豐富頁(yè)面視覺(jué)效果，底部的數(shù)據(jù)指標(biāo)對(duì)應(yīng)錄入老師的不同狀態(tài)。因?yàn)槊總€(gè)錄入的老師進(jìn)入不同的面試狀態(tài)，都會(huì)給到代理人不同的提成金額。所以代理人會(huì)經(jīng)常關(guān)注該數(shù)據(jù)指標(biāo)看板的數(shù)據(jù)情況。
其次“矩形塊拼接式”的看板設(shè)計(jì)使頁(yè)面更加美觀、主次分明。每一個(gè)矩形塊都可以點(diǎn)擊進(jìn)入，查看該階段的所有老師，就相當(dāng)于在首頁(yè)操作切換狀態(tài)標(biāo)簽的操作。
我的頁(yè)面
“我的賬戶(hù)”和“我的合同”，由于功能比較重要，就單獨(dú)做成了兩個(gè)按鈕式的設(shè)計(jì)，一方面是使原本枯燥的“我的”頁(yè)面更加美觀，另一方面也突出了功能的主次關(guān)系。
合同簽署頁(yè)面
前端會(huì)在生產(chǎn)環(huán)境下的合同后面加上公司水印，原型上未注明，同時(shí)合同會(huì)在前后端都渲染一份。前端渲染的合同用于給代理人查看并簽約，后端渲染的合同需要在管理后臺(tái)查看、審核并存檔。
合同的內(nèi)容做了模糊處理，合同由于需要手寫(xiě)簽字，所以代理人查看完合同并確認(rèn)無(wú)誤后點(diǎn)擊簽約；之后會(huì)彈出手簽板，代理人只能手寫(xiě)上自己的姓名；然后前端再渲染到合同的乙方簽名處，簽好后合同就算生成了。
個(gè)人資料
數(shù)據(jù)全部由后臺(tái)生成，前端無(wú)法進(jìn)行編輯修改。
身份認(rèn)證詳情頁(yè)
為了驗(yàn)證代理人身份信息，需要代理人登錄小程序后上傳身份證正反面照片，同時(shí)后端需要接入銀聯(lián)的身份認(rèn)證的接口進(jìn)行自動(dòng)化審核。
該身份認(rèn)證的第三方API接口是按次收費(fèi)的，該接口可識(shí)別出身份證正反面是否錯(cuò)誤、照片是否模糊等，點(diǎn)擊“確認(rèn)并提交”后。前端調(diào)該接口進(jìn)行審核并實(shí)時(shí)返回審核結(jié)果；未通過(guò)后端會(huì)返回錯(cuò)誤原因，如“身份證正反面錯(cuò)誤”、“照片模糊”等；通過(guò)后直接顯示已通過(guò)審核就ok。
管理后臺(tái)
合作方渠道列表
用于展示所有已錄入的代理人及其他合作渠道的全部信息。藍(lán)色的文字表示可點(diǎn)擊進(jìn)入詳情頁(yè)：如“渠道名稱(chēng)”可點(diǎn)擊進(jìn)入渠道個(gè)人信息頁(yè)；點(diǎn)擊“招聘記錄”彈出彈窗，顯示當(dāng)前渠道的所有招聘記錄。
創(chuàng)建合作方渠道
創(chuàng)建渠道，用于創(chuàng)建不同類(lèi)別的渠道信息。
合同審核列表
用于展示所有已創(chuàng)建的合同，同時(shí)合同除了固定的內(nèi)容外，有少部分內(nèi)容是動(dòng)態(tài)生成的“如代理人身份的不同、合同有效期限等信息”。所以師資部門(mén)的專(zhuān)員創(chuàng)建合同后需要交由主管審核，合同信息沒(méi)有問(wèn)題才可發(fā)送到小程序給到代理人簽約。
代理人賬戶(hù)提成審核
代理人在小程序進(jìn)行身份驗(yàn)證后需要添加銀行卡相關(guān)信息，然后每一筆提成都會(huì)記錄在該代理人“我的賬戶(hù)”的明細(xì)里和后臺(tái)的提成明細(xì)內(nèi)。每個(gè)月1號(hào)會(huì)生成上月該代理人所有的提成明細(xì)，師資人員審核每一筆提成無(wú)誤后點(diǎn)擊通過(guò)，就可以交由財(cái)務(wù)部門(mén)給代理人銀行卡打錢(qián)了。
六、小程序開(kāi)發(fā)總結(jié)
因?yàn)榉N種原因這里省略了部分頁(yè)面，但最核心的頁(yè)面都放了上去。
最后小程序的部署和上線都由前端開(kāi)發(fā)負(fù)責(zé)，我們需要記錄上線的時(shí)間，并在之后的每一次版本迭代都做好版本記錄和更新記錄就ok，到這里小程序的設(shè)計(jì)就完成了。
因?yàn)樾〕绦蛱峁┝斯╅_(kāi)發(fā)者使用的框架、組件及接口參考文檔。我們?cè)谠O(shè)計(jì)的時(shí)候最好能先仔細(xì)閱讀小程序的相關(guān)說(shuō)明文檔，不要用設(shè)計(jì)APP的那一套理念去設(shè)計(jì)小程序。前端開(kāi)發(fā)可以使用小程序自帶的一些組件，所以不要做過(guò)多的自定義組件的設(shè)計(jì)。
同時(shí)小程序是基于微信的平臺(tái)來(lái)開(kāi)發(fā)的，所以我們?cè)谠O(shè)計(jì)的時(shí)候要考慮與微信強(qiáng)大的功能做好對(duì)接。比如上傳文件可以直接從微信的會(huì)話列表拉取，登錄可以直接默認(rèn)使用微信登錄等，這樣可以大大節(jié)省開(kāi)發(fā)成本。
訪問(wèn)手機(jī)端更方便
技術(shù)創(chuàng)造價(jià)值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開(kāi)拓者電子科技有限公司 All Rights Reserved
友情鏈接：
小程序開(kāi)發(fā)