整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
錄頁面是用戶體驗(yàn)APP的第一步，其設(shè)計(jì)直接關(guān)系到用戶對產(chǎn)品的第一感受。好的登錄頁面應(yīng)該能夠吸引用戶的目光，幫助他們快速、正確地輸入登錄信息，并順利使用應(yīng)用。此外，登錄頁面還應(yīng)該有一定的安全性，保護(hù)用戶的個(gè)人信息不被泄漏。
戶注冊對于一個(gè)APP的重要性毋庸置疑，所以能夠設(shè)計(jì)好注冊功能是一個(gè)優(yōu)秀產(chǎn)品經(jīng)理的基本功。那么在注冊頁面提高用戶體驗(yàn)方面需要注意哪些細(xì)節(jié)？
一、用戶體驗(yàn)方面的設(shè)計(jì)注意事項(xiàng)
1、把郵箱和手機(jī)號(hào)輸入框合并成一個(gè)，可縮減用戶的操作步驟。
2、用戶名密碼這些必填項(xiàng)在沒有輸入時(shí)，登錄按鈕為不可用狀態(tài)，避免誤操作帶來的麻煩。
3、輸入框中顯示提示信息的方式進(jìn)一步釋放了畫面空間，讓整個(gè)畫面看起來更加簡潔。但是注意輸入框、提示文字的顏色灰度要把握好，顏色太淺不容易查看。
4、畫面中核心流程按鈕突出顯示，其它按鈕則最小化顯示，根據(jù)重要程度將顏色加以區(qū)別。
5、輸入框的獲得焦點(diǎn)時(shí)突出顯示，以便在多個(gè)輸入框時(shí)辨別焦點(diǎn)所處的位置。
6、錯(cuò)誤提示直接顯示在畫面中，不以彈出對話框的形式或者toast的形式實(shí)現(xiàn)。消息提示框（toast）顯示時(shí)間如果短的話用戶可能會(huì)看不清楚。
7、頁面中的輸入框、按鈕等其他重要控件盡可能在彈出軟鍵盤時(shí)顯示在手機(jī)屏幕上半部分，方便用戶切換、確認(rèn)等操作。
8、注冊/登錄失敗的情況，提示信息盡可能地詳細(xì)，是賬戶名出錯(cuò)還是密碼出錯(cuò)，或者是手機(jī)號(hào)已經(jīng)被注冊過了。
9、輸入郵箱地址時(shí)，可彈出自動(dòng)補(bǔ)全功能，自動(dòng)加入常見的郵箱后綴。
10、發(fā)送驗(yàn)證郵件后，可給用戶詳細(xì)的說明及操作提示，也可以加入一個(gè)按鈕直接跳轉(zhuǎn)到相應(yīng)的郵箱。
二、功能邏輯方面設(shè)計(jì)注意事項(xiàng)
1、發(fā)送短信前彈出對話框提示用戶確認(rèn)下手機(jī)號(hào)，驗(yàn)證手機(jī)號(hào)是否輸入正確，節(jié)省了用戶發(fā)錯(cuò)一條短信的成本這種做法用戶體驗(yàn)相對稍差。
2、注冊頁面可考慮加入服務(wù)條款的鏈接。個(gè)人感覺沒必要增加一個(gè)單選框讓用戶去選擇，用戶點(diǎn)擊注冊則代表同意該服務(wù)條款。
3、點(diǎn)擊發(fā)送驗(yàn)證碼后可提示倒計(jì)時(shí)恢復(fù)的功能，一般是60秒，這個(gè)設(shè)計(jì)避免用戶反復(fù)點(diǎn)擊發(fā)送多次驗(yàn)證碼。
三、注冊與登錄頁面安全性方面要考慮
1、密碼輸入框加入顯示或者隱藏按鈕，默認(rèn)為明文狀態(tài)。避免用戶輸入錯(cuò)誤。
2、一般情況下不需要單獨(dú)設(shè)計(jì)“確認(rèn)密碼”提示框，移動(dòng)設(shè)備空間有限、操作也不方便。但一些對密碼安全要求高的應(yīng)用可以設(shè)計(jì)“確認(rèn)密碼”功能。
3、密碼輸入錯(cuò)誤過多時(shí)，應(yīng)該考慮要不要加入驗(yàn)證碼機(jī)制，防止被惡意破解密碼。
4、短信驗(yàn)證，連續(xù)驗(yàn)證次數(shù)超過5次時(shí)，可考慮增加驗(yàn)證碼機(jī)制，以確保安全性，同時(shí)避免無謂的損失。
輯導(dǎo)讀：移動(dòng)端產(chǎn)品經(jīng)理經(jīng)常會(huì)需要繪制APP各頁面原型圖，那么在繪制頁面原型圖時(shí)，我們需要注意什么？作者與大家分享了一個(gè)使用Axure制作實(shí)用的驗(yàn)證碼登錄頁面原型，快來一起看一下吧。
點(diǎn)擊獲取驗(yàn)證碼按鈕時(shí)手機(jī)頂端定時(shí)彈出隨機(jī)驗(yàn)證碼
點(diǎn)擊獲取驗(yàn)證碼按鈕后，按鈕顯示倒計(jì)時(shí)，倒計(jì)時(shí)自60開始，每秒向后-1，倒計(jì)時(shí)為0時(shí)可手動(dòng)重新觸發(fā)
彈出驗(yàn)證碼彈窗后，可點(diǎn)擊復(fù)制驗(yàn)證碼按鈕，點(diǎn)擊后驗(yàn)證碼自動(dòng)按順序加載至手機(jī)頁面驗(yàn)證碼文本框內(nèi)，完成加載后跳轉(zhuǎn)至首頁
原型演示地址：https://gduqir.axshare.com
手動(dòng)制作或挑選使用手機(jī)背景。以下為小編手動(dòng)繪制手機(jī)背景：
繪制任意跳轉(zhuǎn)首頁面，以下為小編手動(dòng)繪制首頁：
完成準(zhǔn)備后將首頁置于空白頁下方。
選擇兩個(gè)文本標(biāo)簽，輸入“輸入驗(yàn)證碼”、“驗(yàn)證碼已發(fā)送至手機(jī)+86 185????9905”等文字，可根據(jù)需要調(diào)整文字內(nèi)容、大小，布局，色彩等。
文字下方放置6個(gè)大小相同的文本框及橫線（文本框需分別命名，以便交互時(shí)區(qū)分）。示例如下：
制作一個(gè)驗(yàn)證碼彈窗，需注意驗(yàn)證碼6個(gè)數(shù)字部分需加不同矩形框且分別命名（以便交互時(shí)區(qū)分及隨機(jī)抽取數(shù)字使用）。示例如下：
給驗(yàn)證碼彈窗“復(fù)制驗(yàn)證碼”按鈕制作交互（文1等名稱是手機(jī)背景頁面六個(gè)文本框的命名，該步驟是為了將驗(yàn)證碼彈窗內(nèi)數(shù)字驗(yàn)證碼獲取至手機(jī)頁面文本框內(nèi)，等待是為了有延遲效果，設(shè)置頁面狀態(tài)是為了六個(gè)文本框驗(yàn)證碼都加載完成后將手機(jī)首頁置頂顯示），交互如下：
設(shè)置全局變量random_str，該步驟是為了等會(huì)驗(yàn)證碼彈窗自動(dòng)抽取數(shù)字。
點(diǎn)擊驗(yàn)證碼彈窗，給6個(gè)驗(yàn)證碼框增加交互動(dòng)作，交互動(dòng)作含義為在頁面載入時(shí)random_str是0123456789，然后6個(gè)驗(yàn)證碼文本框分別抽取其中1位數(shù)字。抽取的變量為[[random_str.substr(random_str.length*Math.random(),1)]]。
選擇一個(gè)按鈕輸入“獲取驗(yàn)證碼”文字調(diào)整大小后，將模塊設(shè)置為動(dòng)態(tài)面板，在動(dòng)態(tài)面板內(nèi)增加一個(gè)state2，將按鈕復(fù)制粘貼至state2并修改文字為60（本文中state頁面名稱錯(cuò)誤，理解用意即可）。
在“獲取驗(yàn)證碼”按鈕設(shè)置交互動(dòng)作，該交互是為了點(diǎn)擊獲取驗(yàn)證碼按鈕后彈出驗(yàn)證碼彈窗，并切換動(dòng)態(tài)面板至倒計(jì)時(shí)頁面，交互如下：
在“60”state頁設(shè)置交互動(dòng)作，該交互動(dòng)作是為了讓60每秒向后倒計(jì)時(shí)-1，=0時(shí)文本變?yōu)橹匦芦@取，點(diǎn)擊重新獲取后文字變60繼續(xù)循環(huán)。
載入時(shí)情形1為：
載入時(shí)情形2為：
單擊時(shí)情形1為：
完成以上操作后，將手機(jī)首頁輸入驗(yàn)證碼文本框框線取消，即可完成操作，快來一起試試吧！
本文由 @哪有那么多計(jì)較 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
