上一篇文章为大家介绍了一下登录功能的设计思路和相关的流程图，本篇主要带大家从0到1绘制一下B端产品的登录功能如何实现
一、功能解析
本篇主要是针对内部员工使用的B端产品，主要功能如下：
①手机号+密码登录
②忘记密码
③记住密码
第②点可以有也可以没有，不过还是建议加上忘记密码的功能，否则超管可能会经常处理用户忘记密码，进行密码重置的任务
二、原型绘制
1.绘制登录背景及登录区域
①点击页面样式，点击背景图片的导入按钮，导入一张登录的背景图片，如果大家不用设置背景，大家当然也可以跳过设置背景
②拖入一个矩形，设置大小为350*420，圆角半径设置为10
2.绘制手机号+密码登录功能
2.1绘制样式
①拖入文字和输入框，将文本修改为手机号，输入框大小设置为220*50，将文本框类型设置为电话号码
②选中文本和输入框，按住ctrl键不放，拖动复制出一个文本框与输入框，将文本框修改为密码，将输入框的类型设置为文本
③拖入一个按钮，名称修改为登录，调整按钮的大小以及合适的位置
④拖入一个复选框，修改名称为记住密码
⑤拖入一个文本，修改名称为”修改密码？“
⑥绘制吐司
拖入一个矩形，命名为吐司内容，修改大小为200*50，圆角为10，背景为深灰色
右键转化为动态面板，命名为吐司，默认设置为隐藏，设置固定到浏览器为水平与垂直居中
如果吐司大家想后续绘制项目一劳永逸，建议大家将其转化为模板，具体可参照我的历史文章《Axure绘制吐司提示》
2.2设置交互
1.按照该流程图进行交互的设置，为登录按钮添加交互事件，当鼠标点击时，添加case1条件，名称修改为手机号或密码格式不正确，添加对应的交互事件
①显示吐司
②设置吐司内容为：“手机号/密码格式不正确”
③等待2s
④异常吐司
2.复制上一个case条件，名称修改为手机号未注册，提示内容也修改为“手机号未注册”
3.按照流程图一一添加对应的交互事件即可
三、总结
由于篇幅有限就不给大家再演示忘记密码的功能了，写本文的目的主要是想给大家展示书写的方式，基本也是写给产品小白的，大佬请忽略，大家如有疑问可以在评论区一起讨论
