Axure示例:移动端手机号注册与登录示例(附RP文件)

173 评论 35047 浏览 255 收藏 11 分钟

之前和大家分享了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协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 老师,麻烦抽空发一下源文件哦,谢谢410054237@qq.com

    来自上海 回复
  2. 麻烦老师抽空发一下,谢谢3200155260@qq.com

    来自广东 回复
  3. 老师,链接失效了,能再分享一下嘛,万分感谢,邮箱506745360@qq.com

    来自四川 回复
  4. 老师还有在么?有看到的话能麻烦发一份学习下么?邮箱2011198532@qq.com谢谢啦

    来自福建 回复
  5. 感谢老师分享,有时间麻烦发一份rp文件学习一下,期待多多更新,我的邮箱272908317@qq.com

    来自北京 回复
  6. 您好(✪▽✪)杨老师可以再分享一次链接吗?☺️☺️听上面的讲述真的很细,想细腻学习下,可行(●°u°●)​ 」

    回复
  7. 大神,内容很全面啊,有学习到。大神有空可否发个rp原型到我邮箱呢,1483824514@qq.com 谢谢大神

    来自广东 回复
  8. 你好,新如坑,求大神发rp原型513989010@qq.com 谢谢啦

    来自陕西 回复
  9. 求大神,发rp原型 1093706556@qq.com

    来自江苏 回复
  10. 很不错呀,可以发一份给我吗?谢谢啦 469070627@qq.com

    来自福建 回复
  11. 想参照学习一下,老师有空的话可以发个邮箱吗?我的邮箱:mlc0816@163.com!谢谢、谢谢、谢谢……..

    来自北京 回复
  12. 麻烦杨老师抽空发一份,谢谢!1195193561@qq.com

    来自安徽 回复
    1. 请问你有收到老师发给的文件吗?有的话能不能给我发一下932230014@qq.com

      来自广东 回复
  13. 想参照学习一下,老师有空的话可以发个邮箱吗?我的邮箱是2864970042@qq.com;谢谢

    来自广东 回复
  14. 老师,可以抽空分享我一份吗?我的邮箱是1587570257@qq.com,万分感谢。 😆

    来自广东 回复
  15. 弱弱的问一下老师 可以发到我邮箱吗cyjyxx@qq.com 真的万分感谢

    回复
  16. 老师,下载地址失效了,求分享,邮箱1430580430@qq.com 谢谢!!

    来自河北 回复
  17. 老师,下载地址失效了,有空的话给我分享一份学习下吧,邮箱liguoxiang_2010@163.com 谢谢!!!

    来自广东 回复
  18. 大神老师求分享原型,邮箱691728856@qq.com,不胜感激!

    来自上海 回复
  19. 老师,下载地址失效了,有空的话给我分享一份学习下吧,邮箱794877113@qq.com 谢谢!!!

    来自上海 回复
  20. 想参照原型学习一下,麻烦老师发个邮箱1076133210@qq.com;谢谢🙏

    来自北京 回复
  21. 文件被取消了,请作者发邮箱,谢谢!494620815@qq.com 感谢您!

    来自广东 回复
  22. 文件被取消了,请作者发邮箱,谢谢!

    来自广东 回复
  23. 文件被取消了,请作者发邮箱,谢谢!1575347097@qq.com

    来自北京 回复
  24. 大神老师,求分享原型,邮箱2295089908@qq.com,非常感谢~

    来自辽宁 回复
  25. 求分享原型,邮箱2416691397@qq.com,不胜感激

    来自浙江 回复
  26. 老师,下载地址失效了,有空的话给我分享一份学习下吧,邮箱1224248219@qq.com 谢谢!!!

    来自山西 回复
  27. 求发原型图335964677@qq.com,谢谢老师

    回复
  28. 求pr文件,1404140642@qq.com!谢谢老师!

    来自北京 回复
  29. 链接好像失效了 可以发我一份吗?邮箱:827135184@qq.com

    来自上海 回复
  30. 您好,链接已经失效,能否发一份原型给我!先谢过!rabbitfan@foxmail.com

    来自广东 回复