編輯導讀:登錄註冊對於大部分app來說,都是最基礎的模塊,但設計一個好的登錄註冊系統並不輕鬆。本文作者通過對比幾款APP的登錄註冊功能撰寫了一份註冊功能PRD,包括版本管理、流程圖、交互設計、交互原型、文檔說明,與大家分享。

登錄註冊幾乎是所有APP都會有的功能,隨着APP的發展和設計,界面形式也從擬物到扁平再到精細化發展。登錄註冊也有了越來越多的設計表現,同時許多APP也擴展了更多的第三方登錄。

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

登錄註冊功能需求文檔【PRD】:

用戶在使用APP的過程中,如果創建賬號,可以方便對自己創建的資料和信息進行管理,如果用戶不喜歡創建賬號,喜歡單機使用,也可以爲用戶創建遊客模式,在創建賬號的情況下,也可以使用產品的部分功能。

另一方面,公司獲取用戶使用產品過程中的行爲資料後,可以爲用戶提供更好的服務,甚至是結合用戶特點的個性化的服務。因此創建賬號是必不可少的。

吸引一個新的用戶來註冊使用的過程中,如果用戶遇到了阻礙,容易使新用戶流失,怎樣讓用戶方便快捷地註冊賬號,從而開始嘗試使用產品呢。總結了其他產品的登錄註冊的設計方式,嘗試了以下設計——將首頁簡化爲兩個重點,產品提供什麼服務,通過哪些方式可以獲取產品的服務。

首先在未登錄的頁面通過產品或品牌Logo展示這是一個什麼產品,可以爲用戶提供什麼服務。其次在頁面中心提供最主要的獲取途徑,密碼登錄或短信登錄。最後,輔以其他更多登錄方式或功能。爲用戶簡化信息複雜度,降低用戶註冊負擔。並且,使用過程中的每個頁面,都保持頁面簡潔,內容第一。

不同的使用流程決定了產品不同的流程設計,不同的流程設計決定了不同的程序設計。在登錄註冊中,用戶可以選擇通過三種方式登錄,用戶密碼登錄,短信登錄,第三方登錄。

不同的登錄方式相應地有三種不同的登錄流程圖。在前期預先了解產品的使用流程可以使設計和開發可以提前瞭解到相關信息,並考慮設計與實現,有助於團隊高效協作。此外,如果遇到不能實現的功能,還可以提前商量解決,如第三方接口的協調。

登錄流程圖:

找回密碼流程圖:

頁面流程圖:

頁面流程圖可以幫助明確用戶在完成任務的過程中,有哪些可能的使用方式,從而使使用流程被具體化,並展示了頁面之間的聯繫和銜接。

短信登錄交互頁面

文檔說明:

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

後置條件:完成“登錄”操作,若是首次登錄,進入信息資料頁;若不是首次登錄,進入首頁

手機驗證頁面描述:

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

對手機號碼輸入的不同情況,產生不同的Toast提示,可以選用以下文本提示。

手機號正確填寫的情況下,對驗證碼輸入的不同情況,產生不同的Toast提示。可以選用以下文本提示。

密碼登錄交互頁面

文檔說明:

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

後置條件:完成“登錄”操作,進入首頁

用戶密碼登錄頁面描述:

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

對手機號碼輸入的不同情況,產生不同的Toast提示,可以選用以下文本提示。

手機號正確填寫的情況下,對密碼輸入的不同情況,產生不同的Toast提示。可以選用以下文本提示。

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

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

第三方登錄交互頁面

文檔說明:

前置條件:用戶點擊選擇第三方登錄,分別進入不同的授權頁面

後置條件 完成“登錄”操作,若是首次登錄,進入手機號綁定頁;若不是首次登錄,進入首頁

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

在點擊第三方登陸頁面後,點擊確認,授權第三方登錄。

在驗證原型的過程中,可以發現一些使用過程中的問題,並進行記錄。最後附上兩個交互原型及其使用說明。

短信登錄交互原型:

使用說明

  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 原創發佈於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

相關文章