編輯導(dǎo)語(yǔ)：驗(yàn)證碼登陸是我們?cè)偈煜げ贿^(guò)的一種操作了，本文作者將整個(gè)流程分為三個(gè)頁(yè)面，并且結(jié)合原型圖進(jìn)行了詳細(xì)地介紹。

本文主要內(nèi)容為微信驗(yàn)證碼登錄，包括微信驗(yàn)證中的拼圖頁(yè)面等，在線演示：https://d0cfzw.axshare.com。

一、流程圖

二、分頁(yè)面演示

將整個(gè)流程分為三個(gè)頁(yè)面：第一個(gè)驗(yàn)證碼頁(yè)面，第二個(gè)拼圖頁(yè)面，第三個(gè)驗(yàn)證碼頁(yè)面二。

以下將三個(gè)頁(yè)面分開(kāi)演示：

三、第一個(gè)頁(yè)面

1.?頁(yè)面概述

第一個(gè)的作用是獲取驗(yàn)證碼之前確認(rèn)手機(jī)號(hào)的，點(diǎn)擊獲取驗(yàn)證碼時(shí)，出現(xiàn)確認(rèn)手機(jī)號(hào)彈窗。頁(yè)面需要有輸鍵盤(pán)輸入功能，點(diǎn)擊文本框，鍵盤(pán)會(huì)顯示，點(diǎn)擊頁(yè)面別的地方，鍵盤(pán)就隱藏。

2.?交互概述

第一個(gè)頁(yè)面需要操作的交互點(diǎn)擊文本框，鍵盤(pán)上滑顯示；點(diǎn)擊鍵盤(pán)按鈕，輸入框顯示字符，登錄按鈕樣式改變，出現(xiàn)關(guān)閉圖標(biāo)；點(diǎn)擊關(guān)閉圖標(biāo)，文本框文字改變；點(diǎn)擊頁(yè)面鍵盤(pán)下滑隱藏。

3.?需要繪制的頁(yè)面

4.?交互講解操作

第一步描述：點(diǎn)擊輸入框，鍵盤(pán)顯示；點(diǎn)擊頁(yè)面，隱藏鍵盤(pán)；

第一步操作：選中輸入框，新建交互，單擊時(shí)顯示鍵盤(pán)面板，向上滑動(dòng)效果。

選中頁(yè)面，新建交互，單擊時(shí)隱藏鍵盤(pán)面板，向下滑動(dòng)效果：

第二步描述：文本框中有字的時(shí)候，登錄按鈕樣式需要改變，顯示關(guān)閉圖標(biāo)；文本框沒(méi)有字的時(shí)候，按鈕樣式恢復(fù)，隱藏關(guān)閉圖標(biāo)。點(diǎn)擊關(guān)閉圖標(biāo)，輸入框文字改變?yōu)槌跏嫉摹罢?qǐng)輸入驗(yàn)證碼”；

第二步操作：選中登錄按鈕，設(shè)置交互樣式，設(shè)置填充顏色為綠色，字色為白色。

選中輸入框，在文本改變交互下添加動(dòng)作（文本改變交互看上一篇文章：鍵盤(pán)輸入）；在輸入文本框的文字長(zhǎng)度不為0的情形下添加設(shè)置選中登錄按鈕值為真的動(dòng)作，添加新動(dòng)作，顯示關(guān)閉圖標(biāo)。

在輸入文本框的文字長(zhǎng)度=0的情形下添加設(shè)置選中登錄按鈕值為假的動(dòng)作，添加隱藏關(guān)閉圖標(biāo)的動(dòng)作。

描述：關(guān)閉圖標(biāo)顯示時(shí)，點(diǎn)擊關(guān)閉圖標(biāo)，輸入框文本變?yōu)槟J(rèn)文本，同時(shí)關(guān)閉圖標(biāo)隱藏，登錄按鈕樣式改變?yōu)槲催x中狀態(tài)；

操作：選中關(guān)閉圖標(biāo)，新建交互單擊時(shí)，設(shè)置輸入框文本的值為“請(qǐng)輸入驗(yàn)證碼”；隱藏關(guān)閉圖標(biāo)，設(shè)置登錄按鈕選中值為假。

第三步描述：點(diǎn)擊獲取驗(yàn)證碼按鈕，出現(xiàn)確認(rèn)手機(jī)號(hào)彈窗，點(diǎn)擊彈窗取消隱藏彈窗，點(diǎn)擊好，跳轉(zhuǎn)到拼圖頁(yè)面；

第三步操作：選中確認(rèn)手機(jī)號(hào)彈窗的取消，新建交互，單擊時(shí)隱藏確認(rèn)手機(jī)號(hào)彈窗。

選中確認(rèn)手機(jī)號(hào)彈窗的好，新建交互，單擊時(shí)打開(kāi)鏈接到拼圖頁(yè)面。

四、第二個(gè)頁(yè)面 拼圖頁(yè)面

1.?頁(yè)面概述

在此頁(yè)面進(jìn)行拼圖操作，拖動(dòng)按鈕時(shí)進(jìn)行橫向移動(dòng)操作。

2.?交互概述

拖動(dòng)藍(lán)色按鈕，按鈕和小拼圖一起橫向移動(dòng)，移動(dòng)到陰影處成功，可以有十個(gè)坐標(biāo)的誤差。

3.?需要繪制的頁(yè)面

4.?交互講解

第一步描述：將按鈕和小拼圖都轉(zhuǎn)換成動(dòng)態(tài)面板，因?yàn)閯?dòng)態(tài)面板有拖動(dòng)和拖動(dòng)結(jié)束的交互；

第一步操作：選中小拼圖，右鍵單擊，下方有轉(zhuǎn)換為動(dòng)態(tài)面板；選中按鈕，右鍵單擊，下方有轉(zhuǎn)換為動(dòng)態(tài)面板。

第二步描述：拖動(dòng)按鈕時(shí)，設(shè)置按鈕和拼圖兩個(gè)面板隨著拖動(dòng)而橫向移動(dòng)，移動(dòng)必須在一定的區(qū)域范圍內(nèi)，區(qū)域范圍是按鈕整體在大圖的橫向坐標(biāo)以?xún)?nèi)。

區(qū)域范圍的計(jì)算：從圖中看出區(qū)域范圍的開(kāi)始位置是默認(rèn)位置，是按鈕左邊的x坐標(biāo)值，區(qū)域范圍的結(jié)尾位置是按鈕右邊和大圖右邊的x坐標(biāo)一樣的位置。

已知按鈕左邊x坐標(biāo)值是X，大圖左邊坐標(biāo)值是Y，大圖寬度是S，那么區(qū)域范圍開(kāi)始位置是X，區(qū)域范圍結(jié)尾是大圖左邊x坐標(biāo)值加圖片的寬度，是Y+S，區(qū)域范圍是X~Y+S。

原型中按鈕左邊坐標(biāo)X=89,大圖坐標(biāo)Y=67，大圖寬度S=276。

第二步操作：選中按鈕，設(shè)置移動(dòng)當(dāng)前原件（按鈕），跟隨水平移動(dòng)，設(shè)置邊界范圍是89~343。

描述：拼圖的邊界范圍和按鈕的有一些小差別，因?yàn)檫@兩個(gè)動(dòng)態(tài)面板大小不一樣，他們排列方式是中部對(duì)齊，也就是拼圖的起始位置就比按鈕的位置往右偏十個(gè)坐標(biāo)，所以拼圖的起始坐標(biāo)需要+10，結(jié)束坐標(biāo)需要-10；

操作：選中按鈕，設(shè)置移動(dòng)拼圖，跟隨水平移動(dòng)，設(shè)置邊界范圍是99~333。

描述：當(dāng)按鈕拖動(dòng)結(jié)束時(shí)，需要判斷拼圖的坐標(biāo)是不是和陰影部分的坐標(biāo)重合。拖一條輔助線與陰影坐標(biāo)重合，發(fā)現(xiàn)陰影坐標(biāo)x是258，當(dāng)拼圖移動(dòng)到坐標(biāo)x=258時(shí)，拼圖成功。

但是我們?cè)试S有十個(gè)坐標(biāo)的誤差，也就是可以在陰影前十個(gè)坐標(biāo)和陰影后十個(gè)坐標(biāo)之間就判斷是成功的。那么拼圖的坐標(biāo)在248~268之間，就認(rèn)為拼圖是成功的。

因?yàn)槲覀兺蟿?dòng)的是按鈕，當(dāng)拖動(dòng)結(jié)束時(shí)針對(duì)的也是按鈕，所以我們要判斷按鈕x坐標(biāo)和陰影的x坐標(biāo)。

按鈕x坐標(biāo)比拼圖x坐標(biāo)往左十個(gè)坐標(biāo)，按鈕x坐標(biāo)=拼圖x坐標(biāo)-10，判斷按鈕x坐標(biāo)的正確范圍將拼圖坐標(biāo)范圍都-10就可以了，所以按鈕的坐標(biāo)在238~258之間，就認(rèn)為拼圖是成功的。

當(dāng)按鈕拖動(dòng)結(jié)束時(shí)，判斷按鈕坐標(biāo)范圍，如果坐標(biāo)范圍在238~258之間，說(shuō)明拼圖成功，顯示成功彈窗。若是不在238~258之間，拼圖失敗，顯示失敗提醒。

當(dāng)拼圖成功后，顯示成功提示，等待幾秒會(huì)跳轉(zhuǎn)到第三個(gè)頁(yè)面，獲取驗(yàn)證碼頁(yè)面；當(dāng)拼圖失敗后，顯示失敗提示，當(dāng)再次拖動(dòng)按鈕，失敗提示會(huì)隱藏。

操作：選中按鈕，新建交互，拖動(dòng)結(jié)束時(shí)，顯示成功顯示，添加情形，按鈕的x坐標(biāo)值（this.x）的值在238~258之間。

顯示成功提示：

等待2s，跳轉(zhuǎn)到驗(yàn)證碼登錄頁(yè)面：

在拖動(dòng)結(jié)束交互上添加新的情形2，當(dāng)按鈕x坐標(biāo)小于238或者大于258時(shí)，顯示失敗顯示。

失敗后，會(huì)再次移動(dòng)拼圖，在移動(dòng)拼圖的時(shí)候，需要隱藏失敗提示。選中按鈕，在拖動(dòng)時(shí)交互下添加新的動(dòng)作，隱藏失敗顯示。

五、第三個(gè)頁(yè)面

1.?頁(yè)面概述

這是拼圖成功后跳轉(zhuǎn)的頁(yè)面，主要功能就是獲取驗(yàn)證碼，登錄到聊天界面。

2.?交互概述

點(diǎn)擊輸入框，鍵盤(pán)顯示，點(diǎn)擊獲取按鈕，60s倒計(jì)時(shí)。填寫(xiě)驗(yàn)證碼，驗(yàn)證填寫(xiě)是否正確，正確顯示正確提示，跳轉(zhuǎn)聊天界面，錯(cuò)誤顯示錯(cuò)誤提示。

3.?需要繪制的頁(yè)面

4.?交互講解操作

鍵盤(pán)顯示隱藏詳情參照第一個(gè)頁(yè)面，這個(gè)頁(yè)面忽略。

第一步描述：點(diǎn)擊獲取驗(yàn)證碼按鈕，出現(xiàn)確認(rèn)手機(jī)號(hào)彈窗，點(diǎn)擊彈窗取消隱藏彈窗，點(diǎn)擊好，隱藏確認(rèn)手機(jī)號(hào)彈窗，顯示發(fā)送成功彈窗，等待1s，隱藏發(fā)送成功彈窗，開(kāi)始60s倒計(jì)時(shí)；

第一步操作：選中獲取按鈕，新建交互，單擊時(shí)顯示確認(rèn)手機(jī)號(hào)彈窗。

選中確認(rèn)手機(jī)號(hào)彈窗的取消，新建交互，單擊時(shí)隱藏確認(rèn)手機(jī)號(hào)彈窗。

選中確認(rèn)手機(jī)號(hào)彈窗的好，新建交互單擊時(shí)隱藏確認(rèn)手機(jī)號(hào)彈窗。顯示發(fā)送成功彈窗；等待1s；隱藏發(fā)送成功彈窗。60s倒計(jì)時(shí)查看上篇文章，此處忽略。

第二步描述：輸入驗(yàn)證碼，點(diǎn)擊登錄時(shí)對(duì)驗(yàn)證碼進(jìn)行判斷，如果驗(yàn)證碼正確，跳轉(zhuǎn)到聊天界面；如果驗(yàn)證碼錯(cuò)誤，顯示錯(cuò)誤提示彈窗；

第二步操作：假設(shè)驗(yàn)證是123456，選中登錄按鈕，新建交互單擊時(shí)，打開(kāi)新的頁(yè)面鏈接。添加情形，輸入文本框的文件文字==123456。

添加情形2，輸入文本框的文件文字！=123456。添加動(dòng)作顯示驗(yàn)證碼錯(cuò)誤彈窗：

第三步描述：驗(yàn)證碼錯(cuò)誤出現(xiàn)錯(cuò)誤彈窗后，點(diǎn)擊取消隱藏錯(cuò)誤彈窗，輸入框文本變?yōu)槟J(rèn)“請(qǐng)輸入驗(yàn)證碼”；

第三步操作：選中錯(cuò)誤彈窗的取消，新建交互，單擊時(shí)隱藏錯(cuò)誤彈窗；設(shè)置輸入框文本值為“請(qǐng)輸入驗(yàn)證碼”。

這樣操作完，微信驗(yàn)證碼登錄的所有步驟就完成了。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議