国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導語：在驗證方式中，旋轉驗證是常見方式之一。本篇文章里，作者對旋轉驗證設計中的制作材料、思路和具體過程做了詳細展示，讓我們來看一下。

旋轉驗證是一種主流的驗證方式，所以今天作者就教大家如果在Axure制作一個高保真的旋轉驗證原型。

原型預覽地址：https://lu56id.axshare.com

一、制作材料

總共分成3大部分，如下圖所示依次為：驗證彈窗、驗證按鈕和成功提示彈窗。

1. 驗證彈窗

驗證彈窗主要包括以下元件：

• 背景框：使用矩形制作，陰影默認選擇有；
• 圖片：圓形的圖片，默認不是正向擺放的；
• 關閉按鈕：x的按鈕；
• 滑動條：包括滑動按鈕、滑動條、提示文字。滑動按鈕需要轉為動態(tài)面板的形式，因為只有動態(tài)面板可以拖動，需要自適應內容，默認選擇一個動態(tài)面板背景色。

2. 驗證按鈕

普通按鈕制作而成。

3. 成功提示彈窗

這里我們用矩形制作，制作完成之后轉為動態(tài)面板，固定在屏幕中部，默認隱藏。

二、制作思路

鼠標拖動滑動按鈕時，圖片根據滑動的距離旋轉對應的角度。

鼠標松開時（即拖動結束時），判斷圖片是否為正，如果是正的，驗證成功；否則則為驗證失敗，需要重新驗證。

三、制作教程

1. 滑動按鈕拖動時

• 移動：拖動活動按鈕時，滑動按鈕跟隨鼠標水平移動，移動的界限左側為0，右側為下面灰色條的寬度；
• 旋轉：拖動活動按鈕時，旋轉圖片，旋轉的角度為[[LVAR1.x*360/(LVAR2.width-LVAR1.width)+180]]，LVAR1是滑動按鈕，LVAR2是整個滑動條。

2. 滑動按鈕拖動結束時

我們事先需要計算圖擺正需要旋轉多少度，例如原來的圖是-180度，那么它要旋轉的距離應該就是一般的距離，直接有需要旋轉到正的角度/360，然后乘整個滑塊的寬度。

最后前后需要給一個誤差，如果不給誤差，那就很難達到那個點；如果誤差給得太大，那么就很容易驗證成功，經過多次測試最好是正負5。

拖動結束時需要分兩種情況。

情況1：驗證成功

即滑動距離在擺正距離的區(qū)間內，本案例的擺正區(qū)間為158-168，然后我們做一下交互：

1. 設置文本——在區(qū)間內將拖動至圖片擺正的文本設置為驗證成功；
2. 等待0.5秒；
3. 顯示成功提示彈窗；
4. 觸發(fā)關閉按鈕鼠標單擊時的事件——這里后面后詳細講，其實就是將驗證彈窗里的元件復原并且隱藏。

情況2：驗證失敗

即滑動距離不在在擺正距離的區(qū)間內，然后我們做一下交互：

1. 設置文本：這里我們需要新建一個空白文本記錄滑動按鈕在拖動結束時的位置，后面需要這個值來計算旋轉的角度（圖片旋轉回初始狀態(tài)的角度），LVAR1.x就是滑動按鈕所在的橫坐標；
2. 旋轉：將圖片復位，所以需要逆時針旋轉[[LVAR1*360/(LVAR2.width-LVAR3.width)]]，LVAR1就是上面記錄的滑動按鈕的x坐標，LVAR2.width是整個滑塊的寬，LVAR3.width是滑動按鈕的寬；
3. 移動：將滑動按鈕移動回0.0的初始位置。

3. 關閉按鈕鼠標單擊時事件

其實關閉按鈕就是復原和隱藏驗證彈窗，總共有以下四步：

1. 隱藏驗證彈窗；
2. 移動滑動按鈕到達（0.0）；
3. 旋轉圖片到達180度，因為案例初始是180度，所以就是到達180度，如果你們是其他度數就填對應的初始度數即可；
4. 設置文本，因為之前驗證成功的時候把驗證文字更改成驗證成功，所以復原的時候，需要把文本設置為原來的文本，即拖動至圖片擺正。

4. 驗證按鈕

其實驗證按鈕就是一個啟動驗證的開關，只需要顯示驗證彈窗即可，你們可以根據你們原型實際的觸發(fā)條件，顯示驗證彈窗。

5. 成功提示彈窗

在驗證成功后，會顯示成功提示彈窗。但是該彈窗不能一直顯示，而且這個提醒沒必要手動點擊關閉那么麻煩，就是一條簡單的輕提示，所以我們等待3秒然后設置自動隱藏即可。

以上就是本期旋轉驗證原型的全部內容了，你學會了嗎？

本文由 @做產品但不是經理 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。