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