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

本次以移動端手機號注冊和登錄為例，和大家分享Axure的設計規(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. 字符限制：用來說明相關字段的輸入限制。

三、 流程說明

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

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)

服務器異常

字符限制

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

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

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

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

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