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
楊福偉
海外社區高級產品經理
8篇作品 177451總閱讀量
03-062771 瀏覽
大廠集體撤退XR行業，XR將往何處去？
08-087196 瀏覽
智能客服是人工智能領域的“急先鋒”
01-125762 瀏覽
年度回顧｜2022內容營銷名場面
02-141878 瀏覽
在操作 SaaS 客戶數據這件事情上，勸你三思！
04-184141 瀏覽
拒絕換皮科技——營銷活動提效之道
評論
評論請登錄

  1. 麻煩老師抽空發一下，謝謝 596200982@qq.com

    來自江蘇 回復

    1. 已回復，謝謝！

      來自河南 回復

    2. 麻煩老師抽空發一下，謝謝 2604483057@qq.com

      來自湖北 回復

  2. 麻煩作者抽空發一份，謝謝！121516199@qq.com

    來自廣東 回復

    1. 已回復，謝謝！

      來自河南 回復

    2. 那能不能麻煩給我轉發一份啊 謝謝

      來自廣東 回復

  3. 下載地址的文件取消了，可以分享一份學習下嗎？

    來自陜西 回復

    1. 請留下郵箱。

      來自河南 回復

    2. 1004379235@qq.com

      來自陜西 回復

    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. isfengchao@qq.com

      來自山東 回復

  24. RP文件下載地址 無法查看了

    來自陜西 回復

    1. 麻煩提供E-mail，我發郵件。

      來自河南 回復

  25. 文章打開以后跳轉空白頁了？

    回復

    1. 不太明白什么意思，謝謝。

      回復

  26. 比較規范，野生產品經理表示受益匪淺

    來自廣東 回復

    1. 謝謝，共同學習！

      來自英國 回復

  27. 這種程度的原型，還需要設計師參與嗎？

    來自北京 回復

    1. 當然需要，需要設計師參與設計才能保證UI的一致性。
      原型圖畢竟只是原型

      來自英國 回復

  28. 一個原型做這么多有什么用，大公司就是人多錢多時間多

    來自江蘇 回復

    1. 不太明白你說的“多”代表什么？
      任何一個良性發展的公司，都不會存在“多余的人”和“多余的時間”

      來自河南 回復

  29. 思路不錯，學習了

    來自廣東 回復

  30. 我覺得相比較內容，你闡述的原型設計的文檔規范更重要點

    來自廣東 回復

    1. 是的，后面會有文章專門介紹原型設計規范。

      來自河南 回復