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

本次以移動(dòng)端手機(jī)號(hào)注冊(cè)和登錄為例，和大家分享Axure的設(shè)計(jì)規(guī)范。

原型基于Axure8制作，以下是本次移動(dòng)端手機(jī)號(hào)注冊(cè)與登錄原型圖結(jié)構(gòu)。

首先查看完整原型預(yù)覽：http://bdh2ot.axshare.com

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

一、 文檔修改記錄

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

文檔修改記錄主要包括2個(gè)方面，一是版本修改的核心記錄，二是記錄每一次版本修改的詳細(xì)清單。

二、 原型說(shuō)明

原型說(shuō)明，主要包含3個(gè)方便，分別是

1. 頁(yè)面結(jié)構(gòu)：用來(lái)說(shuō)明本次功能需求的頁(yè)面架構(gòu)。

2. 全局說(shuō)明：用來(lái)說(shuō)明本次產(chǎn)品的基本交互原則、UI原則等。

3. 字符限制：用來(lái)說(shuō)明相關(guān)字段的輸入限制。

三、 流程說(shuō)明

流程說(shuō)明，主要是通過(guò)流程圖（具體工具可以是Viso），來(lái)說(shuō)明本次功能需求的核心業(yè)務(wù)流程，以本次項(xiàng)目為例，主要包括三個(gè)流程，分別是：

1. 注冊(cè)流程

2. 登錄流程

3. 找回密碼流程

四、 手機(jī)號(hào)注冊(cè)原型

手機(jī)號(hào)注冊(cè)原型，在本階段單獨(dú)介紹正向流程，即從輸入手機(jī)號(hào)、獲取驗(yàn)證碼、創(chuàng)建賬號(hào)、注冊(cè)成功等頁(yè)面原型。

1. 初始頁(yè)面

當(dāng)前頁(yè)面，從原型上分別需要展示：手機(jī)號(hào)輸入框、獲取驗(yàn)證碼按鈕、驗(yàn)證碼輸入框、下一步按鈕（不可點(diǎn)擊狀態(tài)）；同時(shí)包含部分隱藏控件，如：驗(yàn)證碼輸入錯(cuò)誤提示、手機(jī)號(hào)碼錯(cuò)誤提示（這些會(huì)在異常邏輯原型中單獨(dú)說(shuō)明）

2. 獲取驗(yàn)證碼等待頁(yè)

當(dāng)前頁(yè)面，從原型上分別需要展示：等待時(shí)間、驗(yàn)證碼輸入框、等待驗(yàn)證碼提示語(yǔ)、下一步按鈕（驗(yàn)證碼輸入正確后自動(dòng)觸發(fā)可點(diǎn)擊狀態(tài)）

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

當(dāng)前頁(yè)面，從原型上分別需要展示：用戶(hù)名輸入框、密碼輸入框（默認(rèn)明文）、注冊(cè)按鈕（默認(rèn)不可點(diǎn)擊狀態(tài)）

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

當(dāng)前頁(yè)面，從原型上分別需要展示：頭像上傳控件、生日選擇控件、性別選擇、感情狀態(tài)選擇、確定按鈕、跳過(guò)按鈕

以上信息，在輸入無(wú)誤的情況下，即可完成注冊(cè)。

五、 手機(jī)號(hào)登錄原型

手機(jī)號(hào)登錄原型，在本階段單獨(dú)介紹正向流程，即從輸入手機(jī)號(hào)、獲取驗(yàn)證碼、登錄成功等頁(yè)面原型。

1. 初始頁(yè)面

當(dāng)前頁(yè)面，從原型上分別需要展示：手機(jī)號(hào)輸入框、獲取驗(yàn)證碼按鈕、驗(yàn)證碼輸入框、登錄按鈕（默認(rèn)不可點(diǎn)擊狀態(tài)）；同時(shí)包含部分隱藏控件，如：驗(yàn)證碼輸入錯(cuò)誤提示、手機(jī)號(hào)碼錯(cuò)誤提示（這些會(huì)在異常邏輯原型中單獨(dú)說(shuō)明）

2. 獲取驗(yàn)證碼等待頁(yè)

當(dāng)前頁(yè)面，從原型上分別需要展示：等待時(shí)間、驗(yàn)證碼輸入框、等待驗(yàn)證碼提示語(yǔ)、登錄按鈕（驗(yàn)證碼輸入正確后自動(dòng)觸發(fā)可點(diǎn)擊狀態(tài)）

以上信息，在輸入無(wú)誤的情況下，即可完成登錄

六. 找回密碼原型

找回密碼原型，在本階段單獨(dú)介紹正向流程，即從輸入手機(jī)號(hào)、獲取驗(yàn)證碼、輸入新密碼、找回密碼成功等頁(yè)面原型。

1. 初始頁(yè)面

當(dāng)前頁(yè)面，從原型上分別需要展示：手機(jī)號(hào)輸入框、獲取驗(yàn)證碼按鈕、驗(yàn)證碼輸入框、下一步（默認(rèn)不可點(diǎn)擊狀態(tài)）；同時(shí)包含部分隱藏控件，如：驗(yàn)證碼輸入錯(cuò)誤提示、手機(jī)號(hào)碼錯(cuò)誤提示（這些會(huì)在異常邏輯原型中單獨(dú)說(shuō)明）

2. 獲取驗(yàn)證碼等待頁(yè)

當(dāng)前頁(yè)面，從原型上分別需要展示：等待時(shí)間、驗(yàn)證碼輸入框、等待驗(yàn)證碼提示語(yǔ)、下一步按鈕（驗(yàn)證碼輸入正確后自動(dòng)觸發(fā)可點(diǎn)擊狀態(tài)）

3. 輸入新密碼頁(yè)

當(dāng)前頁(yè)面，從原型上分別需要展示：密碼輸入框（明文狀態(tài)）

以上信息，在輸入無(wú)誤的情況下，即可完成找回密碼

七. 異常邏輯原型

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

1 注冊(cè)異常：主要包括以下幾種異常邏輯

手機(jī)號(hào)輸入錯(cuò)誤

驗(yàn)證碼輸入錯(cuò)誤

驗(yàn)證碼輸入超時(shí)

手機(jī)號(hào)注冊(cè)防刷

手機(jī)號(hào)已注冊(cè)

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

驗(yàn)證碼輸入超時(shí)

手機(jī)號(hào)格式錯(cuò)誤

驗(yàn)證碼輸入錯(cuò)誤

手機(jī)號(hào)未注冊(cè)

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

操作失敗

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

服務(wù)器異常

字符限制

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

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

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

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

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