Axure示例:移動端手機號注冊與登錄示例(附RP文件)
之前和大家分享了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協議
大神,求原型,麻煩抽空發一份,謝謝!18814181928@163.com
老師,有空能發下原型嗎,謝謝:13512372176@163.com
大神,同求RP文件382917851@qq.com,謝謝!
老師,求RP文件 893371580@qq.com 謝謝!??!
大神,求原型,麻煩抽空發一份,謝謝!1481455895@qq.com
前輩!麻煩抽空發一份到郵箱,萬分感謝! 3160511557@qq.com
麻煩老兄抽空發一份,謝謝!huluwa97@qq.com
麻煩老師抽空發一下,謝謝 765016091@qq.com
大神求原型,502761274@qq.com,謝謝!??!
求原型,435757814@qq.com,謝謝?。。?!
大神求原型??!548535157@QQ.com
大神,求發一份,萬分感謝1721368590@qq.com
麻煩老師抽空分享一份,感謝。946748919@qq.com
大神,RP文件同求一份cdd_the_rock@163.com,感激不盡!
前輩 求份PR文檔,517341660@qq.com 謝謝
楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:351138932@qq.com 謝謝!
麻煩老師抽空發一下,謝謝 99914987@qq.com
已回復,謝謝
您好,能否把你收到的rp文件發我一份謝謝,18814181928@163.com
你好,請問可以轉發一份給我嗎,郵箱ZT4567@126.com
前輩 求份PR文檔,565177834@qq.com 謝謝
已回復,謝謝
大神老師求分享原型,郵箱691728856@qq.com,不勝感激!
您好,能否把你收到的rp文件發我一份謝謝,18814181928@163.com
您好,能否把您收到的rp文件發我一份,yinsuoshitiancai@163.com謝謝
你好,請問可以轉發一份給我嗎,郵箱ZT4567@126.com
楊先生,RP文件同求一份395269175@qq.com,感激不盡!
鏈接失效了, ?? ,麻煩楊老師發一份,807905279@qq.com,感謝~
前輩,鏈接失效了,可不可以發到郵箱,867524747@qq.com.謝謝
鏈接失效了, ?? ,麻煩楊老師發一份,574701259@qq.com,感謝~
大神求文件~~240368401@qq.com 謝謝??!
大神,求RP文件 229242907@qq.com 謝謝?。?!
鏈接好像失效了,麻煩楊老師發我一份,408766620@qq.com,謝謝?。。?#^.^#)
求RP文件 darcyjj@163.com 謝謝?。?!
同求RP文件~worm_chen@163.com,謝謝!
已回復,謝謝!
作者也給我發一份好不 郵箱 404894470@qq.com 謝謝!
已回復,謝謝!
您好,能否把你收到的rp文件發我一份謝謝,18814181928@163.com
你好,能否把收到的原型圖發我一份,335964677@qq.com,感激不盡
楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:zhhbdcc@163.com 謝謝!
已回復,謝謝!
楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:1403076021@qq.com 謝謝!
你好,請問有收到rp文件嗎,麻煩發一份給我335964677@qq.com,非常感謝
麻煩作者抽空發一份,謝謝!1548666122@qq.com
已回復,謝謝!
楊先生 您好。那個鏈接好像失效了 可以發我一份嗎?郵箱:1403076021@qq.com 謝謝!