編輯導讀：登錄注冊對于大部分app來說，都是最基礎(chǔ)的模塊，但設(shè)計一個好的登錄注冊系統(tǒng)并不輕松。本文作者通過對比幾款APP的登錄注冊功能撰寫了一份注冊功能PRD，包括版本管理、流程圖、交互設(shè)計、交互原型、文檔說明，與大家分享。

登錄注冊幾乎是所有APP都會有的功能，隨著APP的發(fā)展和設(shè)計，界面形式也從擬物到扁平再到精細化發(fā)展。登錄注冊也有了越來越多的設(shè)計表現(xiàn)，同時許多APP也擴展了更多的第三方登錄。

通過對比以下幾款APP的登錄注冊功能，按常用格式撰寫了一份注冊功能PRD，包括版本管理、流程圖、交互設(shè)計、交互原型、文檔說明。

登錄注冊功能需求文檔【PRD】：

用戶在使用APP的過程中，如果創(chuàng)建賬號，可以方便對自己創(chuàng)建的資料和信息進行管理，如果用戶不喜歡創(chuàng)建賬號，喜歡單機使用，也可以為用戶創(chuàng)建游客模式，在創(chuàng)建賬號的情況下，也可以使用產(chǎn)品的部分功能。

另一方面，公司獲取用戶使用產(chǎn)品過程中的行為資料后，可以為用戶提供更好的服務(wù)，甚至是結(jié)合用戶特點的個性化的服務(wù)。因此創(chuàng)建賬號是必不可少的。

吸引一個新的用戶來注冊使用的過程中，如果用戶遇到了阻礙，容易使新用戶流失，怎樣讓用戶方便快捷地注冊賬號，從而開始嘗試使用產(chǎn)品呢?？偨Y(jié)了其他產(chǎn)品的登錄注冊的設(shè)計方式，嘗試了以下設(shè)計——將首頁簡化為兩個重點，產(chǎn)品提供什么服務(wù)，通過哪些方式可以獲取產(chǎn)品的服務(wù)。

首先在未登錄的頁面通過產(chǎn)品或品牌Logo展示這是一個什么產(chǎn)品，可以為用戶提供什么服務(wù)。其次在頁面中心提供最主要的獲取途徑，密碼登錄或短信登錄。最后，輔以其他更多登錄方式或功能。為用戶簡化信息復雜度，降低用戶注冊負擔。并且，使用過程中的每個頁面，都保持頁面簡潔，內(nèi)容第一。

不同的使用流程決定了產(chǎn)品不同的流程設(shè)計，不同的流程設(shè)計決定了不同的程序設(shè)計。在登錄注冊中，用戶可以選擇通過三種方式登錄，用戶密碼登錄，短信登錄，第三方登錄。

不同的登錄方式相應(yīng)地有三種不同的登錄流程圖。在前期預先了解產(chǎn)品的使用流程可以使設(shè)計和開發(fā)可以提前了解到相關(guān)信息，并考慮設(shè)計與實現(xiàn)，有助于團隊高效協(xié)作。此外，如果遇到不能實現(xiàn)的功能，還可以提前商量解決，如第三方接口的協(xié)調(diào)。

登錄流程圖：

找回密碼流程圖：

頁面流程圖：

頁面流程圖可以幫助明確用戶在完成任務(wù)的過程中，有哪些可能的使用方式，從而使使用流程被具體化，并展示了頁面之間的聯(lián)系和銜接。

短信登錄交互頁面

文檔說明：

前置條件：用戶點擊“短信登錄”按鈕，進入手機驗證頁面

后置條件：完成“登錄”操作，若是首次登錄，進入信息資料頁；若不是首次登錄，進入首頁

手機驗證頁面描述：

注：所有表單不允許錄入空格等特殊符號

對手機號碼輸入的不同情況，產(chǎn)生不同的Toast提示，可以選用以下文本提示。

手機號正確填寫的情況下，對驗證碼輸入的不同情況，產(chǎn)生不同的Toast提示?？梢赃x用以下文本提示。

密碼登錄交互頁面

文檔說明：

前置條件：用戶點擊“用戶登錄”按鈕，進入用戶密碼登錄頁面

后置條件：完成“登錄”操作，進入首頁

用戶密碼登錄頁面描述：

注：所有表單不允許錄入空格等特殊符號

對手機號碼輸入的不同情況，產(chǎn)生不同的Toast提示，可以選用以下文本提示。

手機號正確填寫的情況下，對密碼輸入的不同情況，產(chǎn)生不同的Toast提示?？梢赃x用以下文本提示。

手機號正確填寫，忘記密碼或想要重置密碼，也可以通過頁面中的

來找回按鈕。在設(shè)置密碼頁面，手機號和驗證碼都正確填寫時，可以根據(jù)不同的密碼輸入提示用戶。

第三方登錄交互頁面

文檔說明：

前置條件：用戶點擊選擇第三方登錄，分別進入不同的授權(quán)頁面

后置條件：完成“登錄”操作，若是首次登錄，進入手機號綁定頁；若不是首次登錄，進入首頁

第三方登錄頁面詳細描述：

在點擊第三方登陸頁面后，點擊確認，授權(quán)第三方登錄。

在驗證原型的過程中，可以發(fā)現(xiàn)一些使用過程中的問題，并進行記錄。最后附上兩個交互原型及其使用說明。

短信登錄交互原型：

使用說明

1. 點擊短信登錄
2. 手機號為空，點擊“獲取驗證碼”
3. 輸入手機號“139”，點擊“獲取驗證碼”
4. 輸入手機號“139”和驗證碼“456789”，點擊登錄
5. 點擊“跳過”跳過，返回初始頁面

可以按提示操作使用以下原型http://dwz.date/bNzQ。

密碼登錄交互原型：

使用說明

1. 點擊用戶登錄
2. 輸入手機號“139”，點擊登錄
3. 輸入手機號“139”，輸入密碼12313，點擊登錄
4. 輸入手機號“139”和密碼“426152”，點擊登錄
5. 點擊“我的”，點擊“退出”返回初始頁面

可以按提示操作使用原型http://dwz.date/bNzr。

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

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