編輯導(dǎo)語(yǔ)：我們?cè)诤芏嘬浖卿浄绞嚼锩娑伎梢钥吹綊叽a登錄這個(gè)選項(xiàng)，那么它是如何實(shí)現(xiàn)的呢？本文作者通過(guò)掃碼登錄這一案例，詳細(xì)講述了Axure高保真原型的核心邏輯，推薦正在做交互設(shè)計(jì)的童鞋閱讀。

首先來(lái)看看我們要實(shí)現(xiàn)的效果：

看過(guò)效果之后我們?cè)俅_認(rèn)一下我們要實(shí)現(xiàn)的幾個(gè)功能

1. 二維碼有個(gè)失效的時(shí)間；
2. 當(dāng)二維碼失效的時(shí)候，掃碼不成功會(huì)有個(gè)錯(cuò)誤提示；
3. 當(dāng)二維碼沒(méi)有失效的時(shí)候，掃碼成功，需要移動(dòng)端上進(jìn)行確認(rèn)登錄；
4. 當(dāng)掃碼成功后，移動(dòng)端上確認(rèn)登錄后，登錄成功；
5. 當(dāng)掃碼成功后，移動(dòng)端上取消登錄，二維碼立即失效。

那么，我們提煉一下幾個(gè)重點(diǎn)

1. 設(shè)置二維碼失效的時(shí)間，原型中設(shè)置為10秒，可自行調(diào)整。
2. 有個(gè)掃描中的狀態(tài)，當(dāng)開(kāi)始掃描的時(shí)候，設(shè)置一個(gè)短小的掃描時(shí)間，再進(jìn)行判斷當(dāng)前二維碼是否失效；
3. 當(dāng)二維碼失效了，顯示錯(cuò)誤提示；
4. 當(dāng)二維碼沒(méi)有失效，顯示掃描成功頁(yè)面，進(jìn)行確認(rèn)登錄操作；
5. 當(dāng)操作“確認(rèn)登錄”，移動(dòng)端回到掃一掃頁(yè)面，桌面端跳轉(zhuǎn)到首頁(yè)；
6. 當(dāng)操作“取消登錄”，移動(dòng)端回到掃一掃頁(yè)面，桌面端的二維碼立即失效。

一、如何實(shí)現(xiàn)上下移動(dòng)掃描的效果

提前準(zhǔn)備一個(gè)掃描的圖片，確定好移動(dòng)的最高點(diǎn)和最低點(diǎn)。想讓它不停的移動(dòng)就要設(shè)置一個(gè)觸發(fā)點(diǎn)，觸發(fā)某個(gè)事件就會(huì)移動(dòng)。這里我常用的就是文本輸入框（Text Field），因?yàn)樗幸粋€(gè)交互叫文本改變時(shí)。

當(dāng)頁(yè)面切換到掃描中的頁(yè)面時(shí)，我們?cè)O(shè)置一個(gè)文本的text，使它的文本進(jìn)行改變，然后再設(shè)置這個(gè)文本改變時(shí)的交互如下，就可以實(shí)現(xiàn)不停的掃描狀態(tài)了。

二、如何判斷當(dāng)前的二維碼狀態(tài)

當(dāng)頁(yè)面跳轉(zhuǎn)到掃描中的狀態(tài)，就設(shè)置開(kāi)始掃描，我也是利用了文本改變時(shí)的交互。當(dāng)需要掃描的時(shí)候設(shè)置文本為“掃描中”，利用文本框內(nèi)容的判斷，當(dāng)文本框text是掃描中，去判斷二維碼當(dāng)前的狀態(tài)。二維碼的當(dāng)前狀態(tài)，我也是用了一個(gè)文本框來(lái)存儲(chǔ)。

這里要注意幾個(gè)點(diǎn)，就是很多效果在頁(yè)面切換之前要設(shè)置回到初始狀態(tài)。不然流程走回來(lái)的時(shí)候沒(méi)有在初始狀態(tài)，會(huì)出現(xiàn)錯(cuò)誤效果。

三、如何設(shè)置二維碼失效時(shí)間

失效時(shí)間，當(dāng)?shù)褂?jì)時(shí)結(jié)束時(shí)就是二維碼失效之時(shí)。所以設(shè)置當(dāng)?shù)褂?jì)時(shí)的輸入框?yàn)椤?”的時(shí)候，顯示失效蒙層即可。

這其中還有一個(gè)加載中的效果——就是在掃描成功的時(shí)候，切換到確認(rèn)登錄頁(yè)面的時(shí)候，會(huì)有一個(gè)加載中的效果，來(lái)看一下慢動(dòng)作效果。

想要實(shí)現(xiàn)這個(gè)效果，首先要做如下準(zhǔn)備，畫(huà)出4個(gè)半圓。

因?yàn)榧虞d中這個(gè)元素本來(lái)就是要隱藏的，只有在需要的時(shí)候才顯示。所以就利用整個(gè)元素的“顯示時(shí)”的交互，首先就是半圓1旋轉(zhuǎn)180度，然后半圓4旋轉(zhuǎn)135度，注意每度旋轉(zhuǎn)時(shí)間要一樣。利用半圓2、3遮擋后面的半圓1、2，當(dāng)1、4到指定位置時(shí)，再一起旋轉(zhuǎn)。

注意在設(shè)置旋轉(zhuǎn)動(dòng)作的時(shí)候，有個(gè)更多選項(xiàng)，就是設(shè)置旋轉(zhuǎn)的中心點(diǎn)在什么位置，半圓1當(dāng)然是右邊的中心點(diǎn)，半圓4是左邊的中心點(diǎn)。

以上就是本原型的核心邏輯啦。

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

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