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

173 评论 35087 浏览 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. 麻烦老师抽空发一下,谢谢 596200982@qq.com

    来自江苏 回复
    1. 已回复,谢谢!

      来自河南 回复
    2. 麻烦老师抽空发一下,谢谢 2604483057@qq.com

      来自湖北 回复
  2. 麻烦作者抽空发一份,谢谢!121516199@qq.com

    来自广东 回复
    1. 已回复,谢谢!

      来自河南 回复
    2. 那能不能麻烦给我转发一份啊 谢谢

      来自广东 回复
  3. 下载地址的文件取消了,可以分享一份学习下吗?

    来自陕西 回复
    1. 请留下邮箱。

      来自河南 回复
    2. 来自陕西 回复
    3. 已回复,谢谢!

      来自河南 回复
    4. 能再分享一下吗 2545814912@qq.com 谢谢你啊

      来自广东 回复
  4. 链接无效,麻烦老师有空发一份到我邮箱,455199100@qq.com,谢谢!已关注老师

    来自广东 回复
    1. 已回复吗,谢谢!

      来自河南 回复
  5. 麻烦老师抽空分享一份,感谢。985514656@qq.com

    来自山东 回复
    1. 已回复,谢谢!

      来自河南 回复
  6. 有空发一份到我邮箱,1297566013@qq.com,谢谢!

    来自北京 回复
    1. 已回复,谢谢!

      来自新加坡 回复
  7. 求pr文件,zhi1029@vip.qq.com!谢谢老师!

    来自广西 回复
    1. 已回复,谢谢!

      回复
  8. 流程,逻辑,思路都很清晰,希望作者抽空发一份~我好学习学习,十分感谢!邮箱173602276@qq.com

    来自北京 回复
    1. 已回复,谢谢!

      回复
  9. 写的很棒,希望作者可以抽空发一份RP文件学习,十分感谢!邮箱512661359@qq.com

    来自北京 回复
    1. 已回复,谢谢!

      来自英国 回复
  10. 求老师抽空发一份,谢谢!邮箱407654503@qq.com

    来自四川 回复
    1. 已回复,谢谢!

      来自英国 回复
  11. 正是现在需要学习的,麻烦老师抽空分享一份,感谢。361031118@qq.com

    来自北京 回复
    1. 已回复,谢谢!

      来自英国 回复
  12. 麻烦作者抽空发一份,谢谢!1289372591@qq.com

    来自江苏 回复
    1. 已回复,谢谢!

      来自河南 回复
  13. 麻烦作者抽空发一份,谢谢!1962292316@qq.com

    来自广东 回复
    1. 已回复,谢谢!

      来自河南 回复
  14. 希望楼主发一份,谢谢!958545133@qq.cpm

    来自浙江 回复
    1. 已回复,谢谢!

      来自英国 回复
  15. 文件被取消了,请发邮箱,谢谢!mmt123@foxmail.com

    来自浙江 回复
    1. 已回复,谢谢!

      来自英国 回复
  16. 学习了,谢谢楼主分享。1147610298@qq.com。麻烦楼主给一份,谢谢! 😳

    来自广东 回复
    1. 已回复,谢谢!

      来自英国 回复
  17. 文件被百度取消了,不能下载了,麻烦发一下邮箱 1634605795@qq.com 谢谢作者了。

    来自北京 回复
    1. 已回复,谢谢!

      来自英国 回复
  18. 459384539@qq.com 麻烦楼主发一份

    来自江苏 回复
    1. 已回复,谢谢!

      来自英国 回复
  19. 文件被取消了,请发邮箱,谢谢!3081899784@qq.com

    来自北京 回复
    1. 已回复,谢谢!

      来自英国 回复
  20. 3081899784@qq.com。分享被取消了,请版主发邮箱谢谢拉。

    来自北京 回复
    1. 已回复,谢谢!

      来自河南 回复
  21. 1092637138@qq.com。麻烦楼主给一份

    来自上海 回复
    1. 已回复,谢谢!

      来自英国 回复
  22. 文件被取消了,请发邮箱,谢谢!xingxing616@sohu.com

    来自北京 回复
    1. 下载地址为:https://pan.baidu.com/s/1nvMdiMP

      来自河南 回复
  23. 文件被取消了

    来自广东 回复
    1. 麻烦提供E-mail,我发邮件

      来自河南 回复
    2. 来自山东 回复
  24. RP文件下载地址 无法查看了

    来自陕西 回复
    1. 麻烦提供E-mail,我发邮件。

      来自河南 回复
  25. 文章打开以后跳转空白页了?

    回复
    1. 不太明白什么意思,谢谢。

      回复
  26. 比较规范,野生产品经理表示受益匪浅

    来自广东 回复
    1. 谢谢,共同学习!

      来自英国 回复
  27. 这种程度的原型,还需要设计师参与吗?

    来自北京 回复
    1. 当然需要,需要设计师参与设计才能保证UI的一致性。
      原型图毕竟只是原型

      来自英国 回复
  28. 一个原型做这么多有什么用,大公司就是人多钱多时间多

    来自江苏 回复
    1. 不太明白你说的“多”代表什么?
      任何一个良性发展的公司,都不会存在“多余的人”和“多余的时间”

      来自河南 回复
  29. 思路不错,学习了

    来自广东 回复
  30. 我觉得相比较内容,你阐述的原型设计的文档规范更重要点

    来自广东 回复
    1. 是的,后面会有文章专门介绍原型设计规范。

      来自河南 回复