原标题：干货预警：功能型小程序的前后台原型设计
这是一篇干货满满的文章，如果你想要做小程序，一定不能错过！
最近公司基于目前招聘兼职老师的流程做了一款小程序。之所以选择做小程序的原因，一方面是因为项目功能比较简单，没必要开发一款独立的APP；另一方面是因为小程序开发起来比较方便，节约开发成本，用户使用起来也比较方便。
笔者也趁这个机会把自己从0到1做一款小程序的过程给记录了下来，同时分享一下，我是如何最快速地设计一款功能型小程序的前后台原型的。
公司介绍：我们公司是一家线上教育公司，主要做海外华人留学生的1v1课程定制辅导的机构。顾名思义就是针对一些留学生的课业进行辅导，以帮助他们更好的适应留学生活，并最终通过考试。
项目背景：我们目前在很多高校都有自己的校园代理人，这些校园代理人的主要工作职责，就是帮助我们招募来自各大高校的学生来做我们的兼职老师。因为我们主要做的是1V1定制辅导，所以对不同专业的老师需求量非常大；我们品牌自身的影响力，不足以吸引很多学生主动来加入我们。所以就需要这些校园代理人在各大高校宣传我们的品牌，并招募这些优秀的学生加入到我们的兼职老师阵营里来。
项目需求：本项目的需求是方便我们的这些校园代理人在沟通了意向客户后，将他们录入到我们的兼职老师储备库里。然后我们可以第一时间在管理后台查看到这些意向客户，并对该客户进行线上初试、复试等一系列环节的考核，最终将该名客户录取为我们的兼职老师。代理人可以在小程序看到自己录入系统的老师信息、老师数量，当前的状态，以及账户提成金额等信息。
用户访谈：最开始这一套流程是纯线下去实施的，后面和师资部负责老师招聘的负责人以及师资部门的同事沟通后，便决定把这套流程搬到线上来。由于这套流程比较简单，所以就没有针对代理人去进行交流，而是把现有的线下流程直接搬到线上来进行实施。
本项目的业务流程图如下：
话不多说，接下来详细讲解一下该小程序的原型设计及PRD文档如何编写。
小程序页面
登录页
采用的是账号密码的登录方式，账号密码由管理后台创建，打开小程序后默认弹出数字键盘，同时input框加入“autofocus”属性，焦点直接聚焦在账号输入框内
首页（无数据状态、有数据状态）
无数据时加上创意性的slogan以此达到激励效果；有数据时采用经典的卡片式设计，页面简洁明了。
头部可根据老师的不同状态进行筛选，实时查看到录入的客户已经进入到了面试的什么阶段。
录入教师页面
采用经典的移动端Form表单设计，同时上传文件的功能直接利用从微信的会话列表拉取。为了防止新手不知道如何上传文件，我做了一个教程页“如何导入微信文件”进行上传文件的引导来告知其如何一步步进行文件的上传。
数据看板
顶部banner设计丰富页面视觉效果，底部的数据指标对应录入老师的不同状态。因为每个录入的老师进入不同的面试状态，都会给到代理人不同的提成金额。所以代理人会经常关注该数据指标看板的数据情况。
其次“矩形块拼接式”的看板设计使页面更加美观、主次分明。每一个矩形块都可以点击进入，查看该阶段的所有老师，就相当于在首页操作切换状态标签的操作。
我的页面
“我的账户”和“我的合同”，由于功能比较重要，就单独做成了两个按钮式的设计，一方面是使原本枯燥的“我的”页面更加美观，另一方面也突出了功能的主次关系。
合同签署页面
前端会在生产环境下的合同后面加上公司水印，原型上未注明，同时合同会在前后端都渲染一份。前端渲染的合同用于给代理人查看并签约，后端渲染的合同需要在管理后台查看、审核并存档。
合同的内容做了模糊处理，合同由于需要手写签字，所以代理人查看完合同并确认无误后点击签约；之后会弹出手签板，代理人只能手写上自己的姓名；然后前端再渲染到合同的乙方签名处，签好后合同就算生成了。
个人资料
数据全部由后台生成，前端无法进行编辑修改。
身份认证详情页
为了验证代理人身份信息，需要代理人登录小程序后上传身份证正反面照片，同时后端需要接入银联的身份认证的接口进行自动化审核。
该身份认证的第三方API接口是按次收费的，该接口可识别出身份证正反面是否错误、照片是否模糊等，点击“确认并提交”后。前端调该接口进行审核并实时返回审核结果；未通过后端会返回错误原因，如“身份证正反面错误”、“照片模糊”等；通过后直接显示已通过审核就ok。
管理后台
合作方渠道列表
用于展示所有已录入的代理人及其他合作渠道的全部信息。蓝色的文字表示可点击进入详情页：如“渠道名称”可点击进入渠道个人信息页；点击“招聘记录”弹出弹窗，显示当前渠道的所有招聘记录。
创建合作方渠道
创建渠道，用于创建不同类别的渠道信息。
合同审核列表
用于展示所有已创建的合同，同时合同除了固定的内容外，有少部分内容是动态生成的“如代理人身份的不同、合同有效期限等信息”。所以师资部门的专员创建合同后需要交由主管审核，合同信息没有问题才可发送到小程序给到代理人签约。
代理人账户提成审核
代理人在小程序进行身份验证后需要添加银行卡相关信息，然后每一笔提成都会记录在该代理人“我的账户”的明细里和后台的提成明细内。每个月1号会生成上月该代理人所有的提成明细，师资人员审核每一笔提成无误后点击通过，就可以交由财务部门给代理人银行卡打钱了。
总结
因为种种原因这里省略了部分页面，但最核心的页面都放了上去。
最后小程序的部署和上线都由前端开发负责，我们需要记录上线的时间，并在之后的每一次版本迭代都做好版本记录和更新记录就ok，到这里小程序的设计就完成了。
因为小程序提供了供开发者使用的框架、组件及接口参考文档。我们在设计的时候最好能先仔细阅读小程序的相关说明文档，不要用设计APP的那一套理念去设计小程序。前端开发可以使用小程序自带的一些组件，所以不要做过多的自定义组件的设计。
同时小程序是基于微信的平台来开发的，所以我们在设计的时候要考虑与微信强大的功能做好对接。比如上传文件可以直接从微信的会话列表拉取，登录可以直接默认使用微信登录等，这样可以大大节省开发成本。
欢迎私下和我交流，共同进步，本人致力于成为这个星球上最全面的产品经理。
作者：韩涛，个人微信：ht291655928
本文由@韩涛 原创发布于人人都是产品经理。未经许可，禁止转载。
题图由正版图库 图虫创意 授权游戏网
责任编辑：
| 相关下载 |
大家都知道，我们的足球财富平台，每周都有个推荐榜单，奖金非常可观。可能朋友们也有自己关注的选手，大家平常会发现，有些选手红单率很不错，但却无法上榜详情>>
原标题：干货｜ 宝丽星为你解读品牌海外运营成功的三大关键要素 如果你的品牌想要进入海外市场，最担心什么？最希望得到什么样的帮助和服务支持？如何确保详情>>
《梦塔防手游》在3月5日发布新版本，带来了更加优质的塔防游戏体验。在本次新版本中调整了英雄和卡牌在冒险模式中的属性能力，维持属性平衡，增加游戏趣味，希望大详情>>
原标题：干货回顾 | 乐客5周年年庆活动，助力vr体验店“破蛹而出” 2020年的春节，大家都寄于很大的希望，在节前做了很多的准备，希望能在春节大干一场，使店详情>>
原标题：写给女孩子的8条干货清单 7 愿每天都是你的女生节。节日快乐。 作者 | 李尚龙 写在女生节的几条干货清单，希望对你有用： 01 女孩子可以外详情>>
在之前呢小miu给大家带来了一些DUST2进攻时能够用到的技巧，但是在实际的操作过程中还是会有非常多的细节遗漏。虽然进攻的过程中总体思路不会有大的详情>>
原标题：干货回顾丨销售组织如何长期、稳健、规模化增长？ 嘉宾：硅谷销售研究院创始人Patrick 1. 疫情之下谈增长：长期稳健的规模化增长 有人说增长靠详情>>
原标题：4000字干货 | 如何搭建游戏数据分析平台 本文作者为数数科技某游戏客户的运营总监，在使用数数科技的产品之前，他们在内部尝试自建数据分析平详情>>
原标题：干货 | 七项模特健身法则 科学的训练才是王道 无论是想让身体更健康还是再度挑战减肥，把运动列入目标吧。为了不让自己半途而废，同时又能达到详情>>
原标题：男士搭配干货，直接上图 男生只要你注重穿着，干净利索自然有气质。不要总拿丑、胖、矮来说事，为什么那么多单眼皮的男生也很受欢迎~下面推荐些详情>>
![[实战干货]《DFQ》开发随录全集(1-9)_lorien](http://5b0988e595225.cdn.sohucs.com/images/20200115/7215282e996044858893efa4515c24ea.jpeg)
原标题：[实战干货]《DFQ》开发随录全集(1-9) 干货又来了，本课程共9节，大家可以收藏慢慢看~ 01.《DFQ》开发随录——图集 02.《DFQ》开发随录——资源详情>>
原标题：腾讯优量汇游戏助推计划干货来袭！ 2019年12月27日，“向心力”——腾讯优量汇2020年度发布会在北京顺利举行。腾讯优量汇团队与在场近500位详情>>
原标题：比化妆重要一百倍的卸妆干货分享，详细又全面你都做对了吗？ 慧boss干货小课堂开课啦！今天的主题是 卸妆，仙女们拿小板凳坐好记笔记啦！ 卸妆是详情>>
关于国产游戏，国内玩家一直都抱有谨慎而又期待的态度。在不太乐观的市场环境下一直没有让人满意的作品出现。不过最近国产厂商有了一些动作，在腾讯与详情>>
原标题：干货还是噱头？众多国产游戏引入光追技术，玩家：本质还是垃圾 关于国产游戏，国内玩家一直都抱有谨慎而又期待的态度。在不太乐观的市场环境下一直详情>>
2019年12月5日，由中国通信工业协会区块链专业委员会、中国通信工业协会虚拟现实专业委员会、广东省游戏产业协会、深圳市互联网文化市场协会指导，行业头部媒体详情>>
原标题：退而求其次！云顶9.23版本稳分干货阵容推荐 大家好，我是掌游宝作者：失眠！ 9.23登录国服已经有了一周，大家是不是已经玩腻了海洋法、掠食者刺和云详情>>
Hello，大家好。这里是王者驿站 今天，小编给大家带来的是白起的玩法攻略，那么小编到底有没有能力写这一篇攻略呢？我介绍一下自己吧，S16赛季用白起最高上详情>>
一年一度的《洛奇》玩家见面会终于揭开了它神秘的面纱，在众多米莱西安翘首以盼的目光下，穿越时空遇见你《洛奇》14周年玩家见面会正式开场了！ 门口 签到区迎面而详情>>
绝对干货《颤抖吧三国》神器升段所需材料大盘点（一） 随着版本的更替，神器系统所带来收益是日益增加。绝大数玩家都已经拥有了属于自己的一详情>>
贪婪洞窟手游中很多小伙伴不知道怎样能把游戏玩好，也不知道实用小技巧及游戏机制是什么，今天小编就带着大家了解一下贪婪洞窟实用干货分享;这里想写一些关于游戏机制的解析，因详情>>
原标题：干货教学：超强对抗路渔夫孙策教程，战斗局势全在一船中 Hello，各位观众老爷们大家好鸭，我是电竞撸时代。 本期撸时代给大家推荐一位巅峰赛特别强详情>>
原标题：干货！球鞋的几大属性，哪个才是你最看重的关键点？ 很多小伙伴在选择实战篮球鞋时，不明白篮球鞋的意义出发点在哪里：为什么会不支持穿fake球鞋进详情>>
原标题：百家号引流之被动吸粉大法，干货大放送 在之前，笔者分享过关于百度经验的引流方法，一条经验可以做到长期截流，只要百度搜索引擎存在，就能源源不断详情>>
原标题：YSLNIKI的一些真假鉴别点第一集，干货（个人感受，不说味道包型这些） YSL NIKI一直很in的一款百搭包，这几年的当红IT BAG的背后，都一定有一位女明星详情>>
微软一年一度的X019活动即将在15日凌晨4点开启，Xbox官方称这次是“规模最大”的一次。而业界知名分析师Daniel Ahmad（ZhugeEX）也爆料说：如果你是Xbox G详情>>
【导读】微软X019活动即将于今夜开启，业界分析师ZhugeEX爆料称这次活动将有很多干货，新收购的黑曜石还将有全新的IP！ 微软一年一详情>>
相信很多人都在职场中遇见过这样的情况：在老板和员工的相处之中，由于大家对工作内容、职责、理念等方面的不同理解，会产生一些分歧和矛盾，从而引出老板“生气咆哮”模详情>>
原标题：高手干货丨创业企业想要有所突破，创始人需要想清楚哪些问题？ 创始人的初心是企业的DNA，如果没有这个DNA，就不会有这个公司的存在；这个DNA是决定详情>>
原标题：“26条措施”干货满满 “广泛、精准，而且务实。”对于刚刚发布的《关于进一步促进两岸经济文化交流合作的若干措施》(以下简称“26条措施”)详情>>
在《问道》中，常常看到道友们在在游戏中苦苦烦恼该如何提高自己的战力。明明非常努力的做任务却总打不过去。想要挑选适合的装备也不知道该如何选择。那么在这里就给各位道详情>>
原标题：干货！10个免费的PDF文献资源网站推荐 各位读者，这次推荐的10个学术资源搜索引擎，小编均已经亲自测试过，都能正常打开链接，而且绝大部分网站的文详情>>
原标题：第二届进博会新闻通气会讲了这些干货 11月2日上午10时，第二届中国国际进口博览会新闻通气会在上海国家会展中心召开。 中国国际进口博览会详情>>
原标题：纯干货 | 2019 Q3网络安全态势报告 网络安全状况概述 根据深信服安全云脑及深信服安全监测平台统计数据显示，2019年第三季度，网站攻击数量总详情>>
原标题：5G商用正式启动，你想知道的干货都在这儿 10月31日上午，在2019年中国国际信息通信展览会开幕式上，工信部与三大运营商、中国铁塔联合举行了5G详情>>
原标题：干货：职业模特的重要面试技巧！ 模特工作的各个阶段都要进行面试，这也是获得工作的主要途径。不要认为自己已经有了一定的知名度，就忽视面试的重详情>>
