起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure 微信高保真原型圖：驗證碼登錄
編輯導語：驗證碼登陸是我們再熟悉不過的一種操作了，本文作者將整個流程分為三個頁面，并且結合原型圖進行了詳細地介紹。
本文主要內容為微信驗證碼登錄，包括微信驗證中的拼圖頁面等，在線演示：https://d0cfzw.axshare.com。
一、流程圖
二、分頁面演示
將整個流程分為三個頁面：第一個驗證碼頁面，第二個拼圖頁面，第三個驗證碼頁面二。
以下將三個頁面分開演示：
三、第一個頁面
1.?頁面概述
第一個的作用是獲取驗證碼之前確認手機號的，點擊獲取驗證碼時，出現確認手機號彈窗。頁面需要有輸鍵盤輸入功能，點擊文本框，鍵盤會顯示，點擊頁面別的地方，鍵盤就隱藏。
2.?交互概述
第一個頁面需要操作的交互點擊文本框，鍵盤上滑顯示；點擊鍵盤按鈕，輸入框顯示字符，登錄按鈕樣式改變，出現關閉圖標；點擊關閉圖標，文本框文字改變；點擊頁面鍵盤下滑隱藏。
3.?需要繪制的頁面
4.?交互講解操作
第一步描述：點擊輸入框，鍵盤顯示；點擊頁面，隱藏鍵盤；
第一步操作：選中輸入框，新建交互，單擊時顯示鍵盤面板，向上滑動效果。
選中頁面，新建交互，單擊時隱藏鍵盤面板，向下滑動效果：
第二步描述：文本框中有字的時候，登錄按鈕樣式需要改變，顯示關閉圖標；文本框沒有字的時候，按鈕樣式恢復，隱藏關閉圖標。點擊關閉圖標，輸入框文字改變為初始的“請輸入驗證碼”；
第二步操作：選中登錄按鈕，設置交互樣式，設置填充顏色為綠色，字色為白色。
選中輸入框，在文本改變交互下添加動作（文本改變交互看上一篇文章：鍵盤輸入）；在輸入文本框的文字長度不為0的情形下添加設置選中登錄按鈕值為真的動作，添加新動作，顯示關閉圖標。
在輸入文本框的文字長度=0的情形下添加設置選中登錄按鈕值為假的動作，添加隱藏關閉圖標的動作。
描述：關閉圖標顯示時，點擊關閉圖標，輸入框文本變為默認文本，同時關閉圖標隱藏，登錄按鈕樣式改變為未選中狀態；
操作：選中關閉圖標，新建交互單擊時，設置輸入框文本的值為“請輸入驗證碼”；隱藏關閉圖標，設置登錄按鈕選中值為假。
第三步描述：點擊獲取驗證碼按鈕，出現確認手機號彈窗，點擊彈窗取消隱藏彈窗，點擊好，跳轉到拼圖頁面；
第三步操作：選中確認手機號彈窗的取消，新建交互，單擊時隱藏確認手機號彈窗。
選中確認手機號彈窗的好，新建交互，單擊時打開鏈接到拼圖頁面。
四、第二個頁面 拼圖頁面
1.?頁面概述
在此頁面進行拼圖操作，拖動按鈕時進行橫向移動操作。
2.?交互概述
拖動藍色按鈕，按鈕和小拼圖一起橫向移動，移動到陰影處成功，可以有十個坐標的誤差。
3.?需要繪制的頁面
4.?交互講解
第一步描述：將按鈕和小拼圖都轉換成動態面板，因為動態面板有拖動和拖動結束的交互；
第一步操作：選中小拼圖，右鍵單擊，下方有轉換為動態面板；選中按鈕，右鍵單擊，下方有轉換為動態面板。
第二步描述：拖動按鈕時，設置按鈕和拼圖兩個面板隨著拖動而橫向移動，移動必須在一定的區域范圍內，區域范圍是按鈕整體在大圖的橫向坐標以內。
區域范圍的計算：從圖中看出區域范圍的開始位置是默認位置，是按鈕左邊的x坐標值，區域范圍的結尾位置是按鈕右邊和大圖右邊的x坐標一樣的位置。
已知按鈕左邊x坐標值是X，大圖左邊坐標值是Y，大圖寬度是S，那么區域范圍開始位置是X，區域范圍結尾是大圖左邊x坐標值加圖片的寬度，是Y+S，區域范圍是X~Y+S。
原型中按鈕左邊坐標X=89,大圖坐標Y=67，大圖寬度S=276。
第二步操作：選中按鈕，設置移動當前原件（按鈕），跟隨水平移動，設置邊界范圍是89~343。
描述：拼圖的邊界范圍和按鈕的有一些小差別，因為這兩個動態面板大小不一樣，他們排列方式是中部對齊，也就是拼圖的起始位置就比按鈕的位置往右偏十個坐標，所以拼圖的起始坐標需要+10，結束坐標需要-10；
操作：選中按鈕，設置移動拼圖，跟隨水平移動，設置邊界范圍是99~333。
描述：當按鈕拖動結束時，需要判斷拼圖的坐標是不是和陰影部分的坐標重合。拖一條輔助線與陰影坐標重合，發現陰影坐標x是258，當拼圖移動到坐標x=258時，拼圖成功。
但是我們允許有十個坐標的誤差，也就是可以在陰影前十個坐標和陰影后十個坐標之間就判斷是成功的。那么拼圖的坐標在248~268之間，就認為拼圖是成功的。
因為我們拖動的是按鈕，當拖動結束時針對的也是按鈕，所以我們要判斷按鈕x坐標和陰影的x坐標。
按鈕x坐標比拼圖x坐標往左十個坐標，按鈕x坐標=拼圖x坐標-10，判斷按鈕x坐標的正確范圍將拼圖坐標范圍都-10就可以了，所以按鈕的坐標在238~258之間，就認為拼圖是成功的。
當按鈕拖動結束時，判斷按鈕坐標范圍，如果坐標范圍在238~258之間，說明拼圖成功，顯示成功彈窗。若是不在238~258之間，拼圖失敗，顯示失敗提醒。
當拼圖成功后，顯示成功提示，等待幾秒會跳轉到第三個頁面，獲取驗證碼頁面；當拼圖失敗后，顯示失敗提示，當再次拖動按鈕，失敗提示會隱藏。
操作：選中按鈕，新建交互，拖動結束時，顯示成功顯示，添加情形，按鈕的x坐標值（this.x）的值在238~258之間。
顯示成功提示：
等待2s，跳轉到驗證碼登錄頁面：
在拖動結束交互上添加新的情形2，當按鈕x坐標小于238或者大于258時，顯示失敗顯示。
失敗后，會再次移動拼圖，在移動拼圖的時候，需要隱藏失敗提示。選中按鈕，在拖動時交互下添加新的動作，隱藏失敗顯示。
五、第三個頁面
1.?頁面概述
這是拼圖成功后跳轉的頁面，主要功能就是獲取驗證碼，登錄到聊天界面。
2.?交互概述
點擊輸入框，鍵盤顯示，點擊獲取按鈕，60s倒計時。填寫驗證碼，驗證填寫是否正確，正確顯示正確提示，跳轉聊天界面，錯誤顯示錯誤提示。
3.?需要繪制的頁面
4.?交互講解操作
鍵盤顯示隱藏詳情參照第一個頁面，這個頁面忽略。
第一步描述：點擊獲取驗證碼按鈕，出現確認手機號彈窗，點擊彈窗取消隱藏彈窗，點擊好，隱藏確認手機號彈窗，顯示發送成功彈窗，等待1s，隱藏發送成功彈窗，開始60s倒計時；
第一步操作：選中獲取按鈕，新建交互，單擊時顯示確認手機號彈窗。
選中確認手機號彈窗的取消，新建交互，單擊時隱藏確認手機號彈窗。
選中確認手機號彈窗的好，新建交互單擊時隱藏確認手機號彈窗。顯示發送成功彈窗；等待1s；隱藏發送成功彈窗。60s倒計時查看上篇文章，此處忽略。
第二步描述：輸入驗證碼，點擊登錄時對驗證碼進行判斷，如果驗證碼正確，跳轉到聊天界面；如果驗證碼錯誤，顯示錯誤提示彈窗；
第二步操作：假設驗證是123456，選中登錄按鈕，新建交互單擊時，打開新的頁面鏈接。添加情形，輸入文本框的文件文字==123456。
添加情形2，輸入文本框的文件文字！=123456。添加動作顯示驗證碼錯誤彈窗：
第三步描述：驗證碼錯誤出現錯誤彈窗后，點擊取消隱藏錯誤彈窗，輸入框文本變為默認“請輸入驗證碼”；
第三步操作：選中錯誤彈窗的取消，新建交互，單擊時隱藏錯誤彈窗；設置輸入框文本值為“請輸入驗證碼”。
這樣操作完，微信驗證碼登錄的所有步驟就完成了。
本文由@多知 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
可以分享下原型嗎？感謝！
微信公眾號搜不到了 可否發一下原型呢？
鍵盤輸入
關注公眾號回復“微信”可以下載文章中的原型圖