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

173 評論 35937 瀏覽 257 收藏 11 分鐘

之前和大家分享了Axure的系列交互,從這次開始逐步和大家交流Axure原型的設(shè)計規(guī)范及PRD文檔規(guī)范。

本次以移動端手機號注冊和登錄為例,和大家分享Axure的設(shè)計規(guī)范。

原型基于Axure8制作,以下是本次移動端手機號注冊與登錄原型圖結(jié)構(gòu)。

首先查看完整原型預覽:http://bdh2ot.axshare.com

以下是本期分享內(nèi)容:原型圖核心頁面說明:

一、 文檔修改記錄

文檔修改記錄主要作用是方便產(chǎn)品經(jīng)理記錄每一次的需求調(diào)整,同時在和開發(fā)人員講解需求時方便進行功能需求的復盤。

文檔修改記錄主要包括2個方面,一是版本修改的核心記錄,二是記錄每一次版本修改的詳細清單。

二、 原型說明

原型說明,主要包含3個方便,分別是

1. 頁面結(jié)構(gòu):用來說明本次功能需求的頁面架構(gòu)。

2. 全局說明:用來說明本次產(chǎn)品的基本交互原則、UI原則等。

3. 字符限制:用來說明相關(guān)字段的輸入限制。

三、 流程說明

流程說明,主要是通過流程圖(具體工具可以是Viso),來說明本次功能需求的核心業(yè)務(wù)流程,以本次項目為例,主要包括三個流程,分別是:

1. 注冊流程

2. 登錄流程

3. 找回密碼流程

四、 手機號注冊原型

手機號注冊原型,在本階段單獨介紹正向流程,即從輸入手機號、獲取驗證碼、創(chuàng)建賬號、注冊成功等頁面原型。

1. 初始頁面

當前頁面,從原型上分別需要展示:手機號輸入框、獲取驗證碼按鈕、驗證碼輸入框、下一步按鈕(不可點擊狀態(tài));同時包含部分隱藏控件,如:驗證碼輸入錯誤提示、手機號碼錯誤提示(這些會在異常邏輯原型中單獨說明)

2. 獲取驗證碼等待頁

當前頁面,從原型上分別需要展示:等待時間、驗證碼輸入框、等待驗證碼提示語、下一步按鈕(驗證碼輸入正確后自動觸發(fā)可點擊狀態(tài))

3. 創(chuàng)建用戶名及密碼

當前頁面,從原型上分別需要展示:用戶名輸入框、密碼輸入框(默認明文)、注冊按鈕(默認不可點擊狀態(tài))

4. 創(chuàng)建個人信息頁

當前頁面,從原型上分別需要展示:頭像上傳控件、生日選擇控件、性別選擇、感情狀態(tài)選擇、確定按鈕、跳過按鈕

以上信息,在輸入無誤的情況下,即可完成注冊。

五、 手機號登錄原型

手機號登錄原型,在本階段單獨介紹正向流程,即從輸入手機號、獲取驗證碼、登錄成功等頁面原型。

1. 初始頁面

當前頁面,從原型上分別需要展示:手機號輸入框、獲取驗證碼按鈕、驗證碼輸入框、登錄按鈕(默認不可點擊狀態(tài));同時包含部分隱藏控件,如:驗證碼輸入錯誤提示、手機號碼錯誤提示(這些會在異常邏輯原型中單獨說明)

2. 獲取驗證碼等待頁

當前頁面,從原型上分別需要展示:等待時間、驗證碼輸入框、等待驗證碼提示語、登錄按鈕(驗證碼輸入正確后自動觸發(fā)可點擊狀態(tài))

以上信息,在輸入無誤的情況下,即可完成登錄

六. 找回密碼原型

找回密碼原型,在本階段單獨介紹正向流程,即從輸入手機號、獲取驗證碼、輸入新密碼、找回密碼成功等頁面原型。

1. 初始頁面

當前頁面,從原型上分別需要展示:手機號輸入框、獲取驗證碼按鈕、驗證碼輸入框、下一步(默認不可點擊狀態(tài));同時包含部分隱藏控件,如:驗證碼輸入錯誤提示、手機號碼錯誤提示(這些會在異常邏輯原型中單獨說明)

2. 獲取驗證碼等待頁

當前頁面,從原型上分別需要展示:等待時間、驗證碼輸入框、等待驗證碼提示語、下一步按鈕(驗證碼輸入正確后自動觸發(fā)可點擊狀態(tài))

3. 輸入新密碼頁

當前頁面,從原型上分別需要展示:密碼輸入框(明文狀態(tài))

以上信息,在輸入無誤的情況下,即可完成找回密碼

七. 異常邏輯原型

異常邏輯是開發(fā)中最需要正確處理的邏輯,本次異常邏輯仍分為三方方面,分別是

1 注冊異常:主要包括以下幾種異常邏輯

手機號輸入錯誤

驗證碼輸入錯誤

驗證碼輸入超時

手機號注冊防刷

手機號已注冊

2 登錄異常:主要包括以下幾種異常邏輯

驗證碼輸入超時

手機號格式錯誤

驗證碼輸入錯誤

手機號未注冊

3 其它異常:主要包括以下幾種異常邏輯

操作失敗

斷網(wǎng)狀態(tài)

服務(wù)器異常

字符限制

本次分享到這里完成,下一次,將會和大家分享使用Axure制作PRD文檔的基本規(guī)范。大家有任何疑問,歡迎留言討論。

RP文件下載地址:鏈接:? https://pan.baidu.com/s/1i5aOgFr 密碼: qw2x

 

作者:楊福偉 海外社區(qū)高級產(chǎn)品經(jīng)理,7年互聯(lián)網(wǎng)產(chǎn)品設(shè)計經(jīng)驗,主要負責知名海外社區(qū)的產(chǎn)品設(shè)計。初次開始分享文章,后期將會陸續(xù)分享自己在海外社區(qū)產(chǎn)品設(shè)計中的經(jīng)驗。

本文由 @楊福偉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 麻煩老師抽空發(fā)一下,謝謝 596200982@qq.com

    來自江蘇 回復
    1. 已回復,謝謝!

      來自河南 回復
    2. 麻煩老師抽空發(fā)一下,謝謝 2604483057@qq.com

      來自湖北 回復
  2. 麻煩作者抽空發(fā)一份,謝謝!121516199@qq.com

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

      來自河南 回復
    2. 那能不能麻煩給我轉(zhuǎn)發(fā)一份啊 謝謝

      來自廣東 回復
  3. 下載地址的文件取消了,可以分享一份學習下嗎?

    來自陜西 回復
    1. 請留下郵箱。

      來自河南 回復
    2. 來自陜西 回復
    3. 已回復,謝謝!

      來自河南 回復
    4. 能再分享一下嗎 2545814912@qq.com 謝謝你啊

      來自廣東 回復
  4. 鏈接無效,麻煩老師有空發(fā)一份到我郵箱,455199100@qq.com,謝謝!已關(guān)注老師

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

      來自河南 回復
  5. 麻煩老師抽空分享一份,感謝。985514656@qq.com

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

      來自河南 回復
  6. 有空發(fā)一份到我郵箱,1297566013@qq.com,謝謝!

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

      來自新加坡 回復
  7. 求pr文件,zhi1029@vip.qq.com!謝謝老師!

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

      回復
  8. 流程,邏輯,思路都很清晰,希望作者抽空發(fā)一份~我好學習學習,十分感謝!郵箱173602276@qq.com

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

      回復
  9. 寫的很棒,希望作者可以抽空發(fā)一份RP文件學習,十分感謝!郵箱512661359@qq.com

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

      來自英國 回復
  10. 求老師抽空發(fā)一份,謝謝!郵箱407654503@qq.com

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

      來自英國 回復
  11. 正是現(xiàn)在需要學習的,麻煩老師抽空分享一份,感謝。361031118@qq.com

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

      來自英國 回復
  12. 麻煩作者抽空發(fā)一份,謝謝!1289372591@qq.com

    來自江蘇 回復
    1. 已回復,謝謝!

      來自河南 回復
  13. 麻煩作者抽空發(fā)一份,謝謝!1962292316@qq.com

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

      來自河南 回復
  14. 希望樓主發(fā)一份,謝謝!958545133@qq.cpm

    來自浙江 回復
    1. 已回復,謝謝!

      來自英國 回復
  15. 文件被取消了,請發(fā)郵箱,謝謝!mmt123@foxmail.com

    來自浙江 回復
    1. 已回復,謝謝!

      來自英國 回復
  16. 學習了,謝謝樓主分享。1147610298@qq.com。麻煩樓主給一份,謝謝! ??

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

      來自英國 回復
  17. 文件被百度取消了,不能下載了,麻煩發(fā)一下郵箱 1634605795@qq.com 謝謝作者了。

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

      來自英國 回復
  18. 459384539@qq.com 麻煩樓主發(fā)一份

    來自江蘇 回復
    1. 已回復,謝謝!

      來自英國 回復
  19. 文件被取消了,請發(fā)郵箱,謝謝!3081899784@qq.com

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

      來自英國 回復
  20. 3081899784@qq.com。分享被取消了,請版主發(fā)郵箱謝謝拉。

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

      來自河南 回復
  21. 1092637138@qq.com。麻煩樓主給一份

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

      來自英國 回復
  22. 文件被取消了,請發(fā)郵箱,謝謝!xingxing616@sohu.com

    來自北京 回復
    1. 下載地址為:https://pan.baidu.com/s/1nvMdiMP

      來自河南 回復
  23. 文件被取消了

    來自廣東 回復
    1. 麻煩提供E-mail,我發(fā)郵件

      來自河南 回復
    2. 來自山東 回復
  24. RP文件下載地址 無法查看了

    來自陜西 回復
    1. 麻煩提供E-mail,我發(fā)郵件。

      來自河南 回復
  25. 文章打開以后跳轉(zhuǎn)空白頁了?

    回復
    1. 不太明白什么意思,謝謝。

      回復
  26. 比較規(guī)范,野生產(chǎn)品經(jīng)理表示受益匪淺

    來自廣東 回復
    1. 謝謝,共同學習!

      來自英國 回復
  27. 這種程度的原型,還需要設(shè)計師參與嗎?

    來自北京 回復
    1. 當然需要,需要設(shè)計師參與設(shè)計才能保證UI的一致性。
      原型圖畢竟只是原型

      來自英國 回復
  28. 一個原型做這么多有什么用,大公司就是人多錢多時間多

    來自江蘇 回復
    1. 不太明白你說的“多”代表什么?
      任何一個良性發(fā)展的公司,都不會存在“多余的人”和“多余的時間”

      來自河南 回復
  29. 思路不錯,學習了

    來自廣東 回復
  30. 我覺得相比較內(nèi)容,你闡述的原型設(shè)計的文檔規(guī)范更重要點

    來自廣東 回復
    1. 是的,后面會有文章專門介紹原型設(shè)計規(guī)范。

      來自河南 回復