錄頁面是用戶體驗APP的第一步，其設計直接關系到用戶對產品的第一感受。好的登錄頁面應該能夠吸引用戶的目光，幫助他們快速、正確地輸入登錄信息，并順利使用應用。此外，登錄頁面還應該有一定的安全性，保護用戶的個人信息不被泄漏。

戶注冊對于一個APP的重要性毋庸置疑，所以能夠設計好注冊功能是一個優秀產品經理的基本功。那么在注冊頁面提高用戶體驗方面需要注意哪些細節？

一、用戶體驗方面的設計注意事項

1、把郵箱和手機號輸入框合并成一個，可縮減用戶的操作步驟。

2、用戶名密碼這些必填項在沒有輸入時，登錄按鈕為不可用狀態，避免誤操作帶來的麻煩。

3、輸入框中顯示提示信息的方式進一步釋放了畫面空間，讓整個畫面看起來更加簡潔。但是注意輸入框、提示文字的顏色灰度要把握好，顏色太淺不容易查看。

4、畫面中核心流程按鈕突出顯示，其它按鈕則最小化顯示，根據重要程度將顏色加以區別。

5、輸入框的獲得焦點時突出顯示，以便在多個輸入框時辨別焦點所處的位置。

6、錯誤提示直接顯示在畫面中，不以彈出對話框的形式或者toast的形式實現。消息提示框（toast）顯示時間如果短的話用戶可能會看不清楚。

7、頁面中的輸入框、按鈕等其他重要控件盡可能在彈出軟鍵盤時顯示在手機屏幕上半部分，方便用戶切換、確認等操作。

8、注冊/登錄失敗的情況，提示信息盡可能地詳細，是賬戶名出錯還是密碼出錯，或者是手機號已經被注冊過了。

9、輸入郵箱地址時，可彈出自動補全功能，自動加入常見的郵箱后綴。

10、發送驗證郵件后，可給用戶詳細的說明及操作提示，也可以加入一個按鈕直接跳轉到相應的郵箱。

二、功能邏輯方面設計注意事項

1、發送短信前彈出對話框提示用戶確認下手機號，驗證手機號是否輸入正確，節省了用戶發錯一條短信的成本這種做法用戶體驗相對稍差。

2、注冊頁面可考慮加入服務條款的鏈接。個人感覺沒必要增加一個單選框讓用戶去選擇，用戶點擊注冊則代表同意該服務條款。

3、點擊發送驗證碼后可提示倒計時恢復的功能，一般是60秒，這個設計避免用戶反復點擊發送多次驗證碼。

三、注冊與登錄頁面安全性方面要考慮

1、密碼輸入框加入顯示或者隱藏按鈕，默認為明文狀態。避免用戶輸入錯誤。

2、一般情況下不需要單獨設計“確認密碼”提示框，移動設備空間有限、操作也不方便。但一些對密碼安全要求高的應用可以設計“確認密碼”功能。

3、密碼輸入錯誤過多時，應該考慮要不要加入驗證碼機制，防止被惡意破解密碼。

4、短信驗證，連續驗證次數超過5次時，可考慮增加驗證碼機制，以確保安全性，同時避免無謂的損失。

輯導讀：移動端產品經理經常會需要繪制APP各頁面原型圖，那么在繪制頁面原型圖時，我們需要注意什么？作者與大家分享了一個使用Axure制作實用的驗證碼登錄頁面原型，快來一起看一下吧。

一、原型需求

點擊獲取驗證碼按鈕時手機頂端定時彈出隨機驗證碼

點擊獲取驗證碼按鈕后，按鈕顯示倒計時，倒計時自60開始，每秒向后-1，倒計時為0時可手動重新觸發

彈出驗證碼彈窗后，可點擊復制驗證碼按鈕，點擊后驗證碼自動按順序加載至手機頁面驗證碼文本框內，完成加載后跳轉至首頁

二、效果預覽

原型演示地址：https://gduqir.axshare.com

三、制作準備

手動制作或挑選使用手機背景。以下為小編手動繪制手機背景：

繪制任意跳轉首頁面，以下為小編手動繪制首頁：

完成準備后將首頁置于空白頁下方。

四、制作流程

選擇兩個文本標簽，輸入“輸入驗證碼”、“驗證碼已發送至手機+86 185????9905”等文字，可根據需要調整文字內容、大小，布局，色彩等。

文字下方放置6個大小相同的文本框及橫線（文本框需分別命名，以便交互時區分）。示例如下：

制作一個驗證碼彈窗，需注意驗證碼6個數字部分需加不同矩形框且分別命名（以便交互時區分及隨機抽取數字使用）。示例如下：

給驗證碼彈窗“復制驗證碼”按鈕制作交互（文1等名稱是手機背景頁面六個文本框的命名，該步驟是為了將驗證碼彈窗內數字驗證碼獲取至手機頁面文本框內，等待是為了有延遲效果，設置頁面狀態是為了六個文本框驗證碼都加載完成后將手機首頁置頂顯示），交互如下：

設置全局變量random_str，該步驟是為了等會驗證碼彈窗自動抽取數字。

點擊驗證碼彈窗，給6個驗證碼框增加交互動作，交互動作含義為在頁面載入時random_str是0123456789，然后6個驗證碼文本框分別抽取其中1位數字。抽取的變量為[[random_str.substr(random_str.length*Math.random(),1)]]。

選擇一個按鈕輸入“獲取驗證碼”文字調整大小后，將模塊設置為動態面板，在動態面板內增加一個state2，將按鈕復制粘貼至state2并修改文字為60（本文中state頁面名稱錯誤，理解用意即可）。

在“獲取驗證碼”按鈕設置交互動作，該交互是為了點擊獲取驗證碼按鈕后彈出驗證碼彈窗，并切換動態面板至倒計時頁面，交互如下：

在“60”state頁設置交互動作，該交互動作是為了讓60每秒向后倒計時-1，=0時文本變為重新獲取，點擊重新獲取后文字變60繼續循環。

載入時情形1為：

載入時情形2為：

單擊時情形1為：

完成以上操作后，將手機首頁輸入驗證碼文本框框線取消，即可完成操作，快來一起試試吧！

本文由 @哪有那么多計較 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。