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. 老師,麻煩抽空發一下源文件哦,謝謝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 謝謝?。。?/p>

    來自山西 回復
  27. 求發原型圖335964677@qq.com,謝謝老師

    回復
  28. 求pr文件,1404140642@qq.com!謝謝老師!

    來自北京 回復
  29. 鏈接好像失效了 可以發我一份嗎?郵箱:827135184@qq.com

    來自上海 回復
  30. 您好,鏈接已經失效,能否發一份原型給我!先謝過!rabbitfan@foxmail.com

    來自廣東 回復