Axure示例:移动端手机号注册与登录示例(附RP文件)
之前和大家分享了Axure的系列交互,从这次开始逐步和大家交流Axure原型的设计规范及PRD文档规范。
本次以移动端手机号注册和登录为例,和大家分享Axure的设计规范。
原型基于Axure8制作,以下是本次移动端手机号注册与登录原型图结构。
首先查看完整原型预览:http://bdh2ot.axshare.com
以下是本期分享内容:原型图核心页面说明:
一、 文档修改记录
文档修改记录主要作用是方便产品经理记录每一次的需求调整,同时在和开发人员讲解需求时方便进行功能需求的复盘。
文档修改记录主要包括2个方面,一是版本修改的核心记录,二是记录每一次版本修改的详细清单。
二、 原型说明
原型说明,主要包含3个方便,分别是
1. 页面结构:用来说明本次功能需求的页面架构。
2. 全局说明:用来说明本次产品的基本交互原则、UI原则等。
3. 字符限制:用来说明相关字段的输入限制。
三、 流程说明
流程说明,主要是通过流程图(具体工具可以是Viso),来说明本次功能需求的核心业务流程,以本次项目为例,主要包括三个流程,分别是:
1. 注册流程
2. 登录流程
3. 找回密码流程
四、 手机号注册原型
手机号注册原型,在本阶段单独介绍正向流程,即从输入手机号、获取验证码、创建账号、注册成功等页面原型。
1. 初始页面
当前页面,从原型上分别需要展示:手机号输入框、获取验证码按钮、验证码输入框、下一步按钮(不可点击状态);同时包含部分隐藏控件,如:验证码输入错误提示、手机号码错误提示(这些会在异常逻辑原型中单独说明)
2. 获取验证码等待页
当前页面,从原型上分别需要展示:等待时间、验证码输入框、等待验证码提示语、下一步按钮(验证码输入正确后自动触发可点击状态)
3. 创建用户名及密码
当前页面,从原型上分别需要展示:用户名输入框、密码输入框(默认明文)、注册按钮(默认不可点击状态)
4. 创建个人信息页
当前页面,从原型上分别需要展示:头像上传控件、生日选择控件、性别选择、感情状态选择、确定按钮、跳过按钮
以上信息,在输入无误的情况下,即可完成注册。
五、 手机号登录原型
手机号登录原型,在本阶段单独介绍正向流程,即从输入手机号、获取验证码、登录成功等页面原型。
1. 初始页面
当前页面,从原型上分别需要展示:手机号输入框、获取验证码按钮、验证码输入框、登录按钮(默认不可点击状态);同时包含部分隐藏控件,如:验证码输入错误提示、手机号码错误提示(这些会在异常逻辑原型中单独说明)
2. 获取验证码等待页
当前页面,从原型上分别需要展示:等待时间、验证码输入框、等待验证码提示语、登录按钮(验证码输入正确后自动触发可点击状态)
以上信息,在输入无误的情况下,即可完成登录
六. 找回密码原型
找回密码原型,在本阶段单独介绍正向流程,即从输入手机号、获取验证码、输入新密码、找回密码成功等页面原型。
1. 初始页面
当前页面,从原型上分别需要展示:手机号输入框、获取验证码按钮、验证码输入框、下一步(默认不可点击状态);同时包含部分隐藏控件,如:验证码输入错误提示、手机号码错误提示(这些会在异常逻辑原型中单独说明)
2. 获取验证码等待页
当前页面,从原型上分别需要展示:等待时间、验证码输入框、等待验证码提示语、下一步按钮(验证码输入正确后自动触发可点击状态)
3. 输入新密码页
当前页面,从原型上分别需要展示:密码输入框(明文状态)
以上信息,在输入无误的情况下,即可完成找回密码
七. 异常逻辑原型
异常逻辑是开发中最需要正确处理的逻辑,本次异常逻辑仍分为三方方面,分别是
1 注册异常:主要包括以下几种异常逻辑
手机号输入错误
验证码输入错误
验证码输入超时
手机号注册防刷
手机号已注册
2 登录异常:主要包括以下几种异常逻辑
验证码输入超时
手机号格式错误
验证码输入错误
手机号未注册
3 其它异常:主要包括以下几种异常逻辑
操作失败
断网状态
服务器异常
字符限制
本次分享到这里完成,下一次,将会和大家分享使用Axure制作PRD文档的基本规范。大家有任何疑问,欢迎留言讨论。
RP文件下载地址:链接: https://pan.baidu.com/s/1i5aOgFr 密码: qw2x
作者:杨福伟 海外社区高级产品经理,7年互联网产品设计经验,主要负责知名海外社区的产品设计。初次开始分享文章,后期将会陆续分享自己在海外社区产品设计中的经验。
本文由 @杨福伟 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自PEXELS,基于CC0协议
麻烦老师抽空发一下,谢谢 596200982@qq.com
已回复,谢谢!
麻烦老师抽空发一下,谢谢 2604483057@qq.com
麻烦作者抽空发一份,谢谢!121516199@qq.com
已回复,谢谢!
那能不能麻烦给我转发一份啊 谢谢
下载地址的文件取消了,可以分享一份学习下吗?
请留下邮箱。
1004379235@qq.com
已回复,谢谢!
能再分享一下吗 2545814912@qq.com 谢谢你啊
链接无效,麻烦老师有空发一份到我邮箱,455199100@qq.com,谢谢!已关注老师
已回复吗,谢谢!
麻烦老师抽空分享一份,感谢。985514656@qq.com
已回复,谢谢!
有空发一份到我邮箱,1297566013@qq.com,谢谢!
已回复,谢谢!
求pr文件,zhi1029@vip.qq.com!谢谢老师!
已回复,谢谢!
流程,逻辑,思路都很清晰,希望作者抽空发一份~我好学习学习,十分感谢!邮箱173602276@qq.com
已回复,谢谢!
写的很棒,希望作者可以抽空发一份RP文件学习,十分感谢!邮箱512661359@qq.com
已回复,谢谢!
求老师抽空发一份,谢谢!邮箱407654503@qq.com
已回复,谢谢!
正是现在需要学习的,麻烦老师抽空分享一份,感谢。361031118@qq.com
已回复,谢谢!
麻烦作者抽空发一份,谢谢!1289372591@qq.com
已回复,谢谢!
麻烦作者抽空发一份,谢谢!1962292316@qq.com
已回复,谢谢!
希望楼主发一份,谢谢!958545133@qq.cpm
已回复,谢谢!
文件被取消了,请发邮箱,谢谢!mmt123@foxmail.com
已回复,谢谢!
学习了,谢谢楼主分享。1147610298@qq.com。麻烦楼主给一份,谢谢! 😳
已回复,谢谢!
文件被百度取消了,不能下载了,麻烦发一下邮箱 1634605795@qq.com 谢谢作者了。
已回复,谢谢!
459384539@qq.com 麻烦楼主发一份
已回复,谢谢!
文件被取消了,请发邮箱,谢谢!3081899784@qq.com
已回复,谢谢!
3081899784@qq.com。分享被取消了,请版主发邮箱谢谢拉。
已回复,谢谢!
1092637138@qq.com。麻烦楼主给一份
已回复,谢谢!
文件被取消了,请发邮箱,谢谢!xingxing616@sohu.com
下载地址为:https://pan.baidu.com/s/1nvMdiMP
文件被取消了
麻烦提供E-mail,我发邮件
isfengchao@qq.com
RP文件下载地址 无法查看了
麻烦提供E-mail,我发邮件。
文章打开以后跳转空白页了?
不太明白什么意思,谢谢。
比较规范,野生产品经理表示受益匪浅
谢谢,共同学习!
这种程度的原型,还需要设计师参与吗?
当然需要,需要设计师参与设计才能保证UI的一致性。
原型图毕竟只是原型
一个原型做这么多有什么用,大公司就是人多钱多时间多
不太明白你说的“多”代表什么?
任何一个良性发展的公司,都不会存在“多余的人”和“多余的时间”
思路不错,学习了
我觉得相比较内容,你阐述的原型设计的文档规范更重要点
是的,后面会有文章专门介绍原型设计规范。