Axure示例:移動端手機號注冊與登錄示例(附RP文件)

173 評論 35207 瀏覽 256 收藏 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. 大神,求原型,麻煩抽空發一份,謝謝!18814181928@163.com

    來自廣東 回復
  2. 老師,有空能發下原型嗎,謝謝:13512372176@163.com

    回復
  3. 大神,同求RP文件382917851@qq.com,謝謝!

    來自上海 回復
  4. 老師,求RP文件 893371580@qq.com 謝謝!??!

    來自江蘇 回復
  5. 大神,求原型,麻煩抽空發一份,謝謝!1481455895@qq.com

    來自河南 回復
  6. 前輩!麻煩抽空發一份到郵箱,萬分感謝! 3160511557@qq.com

    來自吉林 回復
  7. 麻煩老兄抽空發一份,謝謝!huluwa97@qq.com

    來自北京 回復
  8. 麻煩老師抽空發一下,謝謝 765016091@qq.com

    來自天津 回復
  9. 大神求原型,502761274@qq.com,謝謝!??!

    來自遼寧 回復
  10. 求原型,435757814@qq.com,謝謝?。。?!

    來自北京 回復
  11. 大神求原型??!548535157@QQ.com

    來自北京 回復
  12. 大神,求發一份,萬分感謝1721368590@qq.com

    來自重慶 回復
  13. 麻煩老師抽空分享一份,感謝。946748919@qq.com

    來自廣東 回復
  14. 大神,RP文件同求一份cdd_the_rock@163.com,感激不盡!

    來自浙江 回復
  15. 前輩 求份PR文檔,517341660@qq.com 謝謝

    來自浙江 回復
  16. 楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:351138932@qq.com 謝謝!

    來自廣東 回復
  17. 麻煩老師抽空發一下,謝謝 99914987@qq.com

    來自北京 回復
    1. 已回復,謝謝

      來自日本 回復
    2. 您好,能否把你收到的rp文件發我一份謝謝,18814181928@163.com

      來自廣東 回復
    3. 你好,請問可以轉發一份給我嗎,郵箱ZT4567@126.com

      來自陜西 回復
  18. 前輩 求份PR文檔,565177834@qq.com 謝謝

    來自四川 回復
    1. 已回復,謝謝

      來自日本 回復
    2. 大神老師求分享原型,郵箱691728856@qq.com,不勝感激!

      來自上海 回復
    3. 您好,能否把你收到的rp文件發我一份謝謝,18814181928@163.com

      來自廣東 回復
    4. 您好,能否把您收到的rp文件發我一份,yinsuoshitiancai@163.com謝謝

      回復
    5. 你好,請問可以轉發一份給我嗎,郵箱ZT4567@126.com

      來自陜西 回復
  19. 楊先生,RP文件同求一份395269175@qq.com,感激不盡!

    來自廣東 回復
  20. 鏈接失效了, ?? ,麻煩楊老師發一份,807905279@qq.com,感謝~

    來自廣東 回復
  21. 前輩,鏈接失效了,可不可以發到郵箱,867524747@qq.com.謝謝

    回復
  22. 鏈接失效了, ?? ,麻煩楊老師發一份,574701259@qq.com,感謝~

    來自浙江 回復
  23. 大神求文件~~240368401@qq.com 謝謝??!

    來自福建 回復
  24. 大神,求RP文件 229242907@qq.com 謝謝?。?!

    來自四川 回復
  25. 鏈接好像失效了,麻煩楊老師發我一份,408766620@qq.com,謝謝?。。?#^.^#)

    來自浙江 回復
  26. 求RP文件 darcyjj@163.com 謝謝?。?!

    來自北京 回復
  27. 同求RP文件~worm_chen@163.com,謝謝!

    來自廣東 回復
    1. 已回復,謝謝!

      來自河南 回復
  28. 作者也給我發一份好不 郵箱 404894470@qq.com 謝謝!

    來自上海 回復
    1. 已回復,謝謝!

      來自河南 回復
    2. 您好,能否把你收到的rp文件發我一份謝謝,18814181928@163.com

      來自廣東 回復
    3. 你好,能否把收到的原型圖發我一份,335964677@qq.com,感激不盡

      回復
  29. 楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:zhhbdcc@163.com 謝謝!

    來自湖北 回復
    1. 已回復,謝謝!

      來自河南 回復
    2. 楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:1403076021@qq.com 謝謝!

      來自四川 回復
    3. 你好,請問有收到rp文件嗎,麻煩發一份給我335964677@qq.com,非常感謝

      回復
  30. 麻煩作者抽空發一份,謝謝!1548666122@qq.com

    來自廣東 回復
    1. 已回復,謝謝!

      來自河南 回復
    2. 楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:1403076021@qq.com 謝謝!

      來自四川 回復