從原理到實(shí)操:教你作一個(gè)登錄注冊(cè)的小Demo

6 評(píng)論 21013 瀏覽 70 收藏 7 分鐘

登錄注冊(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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 感覺這個(gè)不是流程圖。。。 倒像是交互圖

    來自廣東 回復(fù)
  2. 看你的流程圖,我差點(diǎn)吐了,太密集,頭暈啊,

    來自北京 回復(fù)
  3. 小主的功能流程圖是用什么軟件做的?

    回復(fù)
    1. office中的visio 可以做,也可以安裝獨(dú)立的visio。在線的腦圖也有https://www.processon.com/i/58c0b5e5e4b0aa7e47f5b4f2。

      來自上海 回復(fù)
    2. 用Axure,哈哈

      來自廣東 回復(fù)
  4. 這種小case跟rd講下就行,不過做的很詳細(xì)

    來自上海 回復(fù)