登錄注冊(cè)界面看起來好像挺簡(jiǎn)單，但是要把登錄注冊(cè)界面做好，卻也不是一件簡(jiǎn)單的事情。最近用Axure做了一個(gè)登錄注冊(cè)的小Demo，歡迎大家批評(píng)指正。

這篇文章主要分為兩個(gè)部分，第一部分先簡(jiǎn)單介紹下注冊(cè)功能，第二部分介紹下部分功能的實(shí)現(xiàn)。

第一部分：簡(jiǎn)單的介紹注冊(cè)功能

首先上原型鏈接：http://3d9jya.axshare.com? ?（加載稍微有點(diǎn)慢，請(qǐng)大家耐心等待）

上圖便是注冊(cè)界面，首先注冊(cè)界面沒有確認(rèn)密碼表單，為什么？這并不是因?yàn)槲彝浟?，而是有原因的。首先，大家有沒有注意到現(xiàn)在很多網(wǎng)站的注冊(cè)都省去了這一步，比如百度，人人等。

我覺得原因可能是以下兩種：

1. 注冊(cè)這個(gè)過程至關(guān)重要，如果步驟過于繁瑣，用戶很可能就會(huì)在這一步放棄了；
2. 現(xiàn)在的注冊(cè)大多數(shù)是基于手機(jī)號(hào)碼和郵箱，找回密碼的成本很低，況且現(xiàn)在用戶擁有那么多賬號(hào)密碼，你可以確保用戶下次登錄的時(shí)候就記得密碼？

接著來看一下注冊(cè)功能的流程圖：

簡(jiǎn)單概說一下流程圖：

當(dāng)用戶點(diǎn)擊注冊(cè)按鈕的時(shí)候，會(huì)去檢查三個(gè)文本框中的內(nèi)容是否符合條件？以及輸入是否正確？如果不符合條件或者輸入不正確，會(huì)分別給出明確的錯(cuò)誤提示。

當(dāng)用戶點(diǎn)擊電話號(hào)碼文本框的時(shí)候，第一步先檢查密碼框和驗(yàn)證碼框是否出現(xiàn)為空的錯(cuò)誤提示，如果是，則清除為空的錯(cuò)誤提示，注意是為空的錯(cuò)誤提示；第二步檢查用戶輸入的是否為空或者不符合手機(jī)號(hào)碼格式，如果出現(xiàn)這種情況，就給用戶明確的錯(cuò)誤提示，如果輸入的是11位數(shù)字且符合手機(jī)號(hào)碼規(guī)范，就清除錯(cuò)誤提示。

那么問題來了，在第一步中我為什么要去清除密碼框或者驗(yàn)證碼框中為空的錯(cuò)誤提示呢？我想你也注冊(cè)過，你也不想在注冊(cè)的過程中看見一大串紅色的錯(cuò)誤提示吧，看見都煩了。至于為什么只是清除為空的錯(cuò)誤提示，因?yàn)槿绻惆哑渌e(cuò)誤提示刪了，用戶就會(huì)以為輸入的是正確，等點(diǎn)擊注冊(cè)的時(shí)候又得回去改一次。點(diǎn)擊密碼框就會(huì)去檢測(cè)上邊的手機(jī)號(hào)碼是否為空和自身是否為空和長度是否6位以上。在這里就不再對(duì)密碼框和驗(yàn)證碼的驗(yàn)證多做敘述了。

當(dāng)所有條件都滿足時(shí)，點(diǎn)擊注冊(cè)按鈕會(huì)發(fā)送驗(yàn)證碼并彈出一個(gè)輸入驗(yàn)證碼的窗口，如下圖所示：

本來我是打算彈出窗口時(shí)不用經(jīng)過“點(diǎn)擊獲取”就可以進(jìn)行倒計(jì)時(shí)的，我把這個(gè)功能寫在頁面載入時(shí)，但是每次開始倒計(jì)的時(shí)間都不一樣，懇請(qǐng)各位大佬指點(diǎn)下。

至于登錄部分跟注冊(cè)部分也差不了多少，各位看官可以看一下上邊的原型鏈接，附帶流程圖哦。

第二部分：介紹部分功能的實(shí)現(xiàn)

1.?隨機(jī)驗(yàn)證碼的生成

（1）首先先設(shè)置一個(gè)全局變量random_str，全局變量的值為ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789。

（2）然后在密碼框上邊放置一個(gè)文本標(biāo)簽，在頁面載入時(shí)設(shè)置文本標(biāo)簽的值。

random_str.substr(random_str.length*Math.random(),1) 表示隨機(jī)獲取某個(gè)字符，所以連續(xù)獲取四個(gè)就組成一個(gè)隨機(jī)驗(yàn)證碼了。

2.?彈出輸入手機(jī)短信驗(yàn)證窗口

創(chuàng)建兩個(gè)動(dòng)態(tài)面板，把其中一個(gè)動(dòng)態(tài)面板設(shè)置背景色跟透明度后置于注冊(cè)登錄頁面上，設(shè)置固定于瀏覽器，起到一個(gè)遮蓋的作用。另一個(gè)動(dòng)態(tài)面板就充當(dāng)彈出窗口。

3.?倒計(jì)時(shí)的實(shí)現(xiàn)

（1）首先拉出一個(gè)按鈕和動(dòng)態(tài)面板(包含兩個(gè)狀態(tài))

（2）設(shè)置一個(gè)全局變量，表示你要倒計(jì)的時(shí)間。

（3）點(diǎn)擊“點(diǎn)擊獲取”按鈕，觸發(fā)循環(huán)遍歷動(dòng)態(tài)面板事件，且每次間隔一秒，并把按鈕設(shè)置為禁用。

（4）設(shè)置動(dòng)態(tài)面板的狀態(tài)改變事件。當(dāng)狀態(tài)改變時(shí)，判斷全局變量是否大于0，如果大于0則設(shè)置讓全局變量自減，然后把全局變量復(fù)制給按鈕的文本值。

好了，到此介紹完畢，如果有錯(cuò)誤的地方，歡迎批評(píng)指正。

作者：calmlee，一名立志從事產(chǎn)品崗位的大四學(xué)生。坐標(biāo)：廣州。郵箱：1935757072@qq.com

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