Axure教程:旋轉驗證原型

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

Axure教程:旋轉驗證原型

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

Axure教程:旋轉驗證原型

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

一、製作材料

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

Axure教程:旋轉驗證原型

1。 驗證彈窗

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

背景框:使用矩形制作,陰影預設選擇有;

圖片:圓形的圖片,預設不是正向擺放的;

關閉按鈕:x的按鈕;

滑動條:包括滑動按鈕、滑動條、提示文字。滑動按鈕需要轉為動態面板的形式,因為只有動態面板可以拖動,需要自適應內容,預設選擇一個動態面板背景色。

2。 驗證按鈕

普通按鈕製作而成。

3。 成功提示彈窗

這裡我們用矩形制作,製作完成之後轉為動態面板,固定在螢幕中部,預設隱藏。

二、製作思路

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

滑鼠鬆開時(即拖動結束時),判斷圖片是否為正,如果是正的,驗證成功;否則則為驗證失敗,需要重新驗證。

三、製作教程

1。 滑動按鈕拖動時

移動:

拖動活動按鈕時,滑動按鈕跟隨滑鼠水平移動,移動的界限左側為0,右側為下面灰色條的寬度;

旋轉:

拖動活動按鈕時,旋轉圖片,旋轉的角度為[[LVAR1。x*360/(LVAR2。width-LVAR1。width)+180]],LVAR1是滑動按鈕,LVAR2是整個滑動條。

Axure教程:旋轉驗證原型

2。 滑動按鈕拖動結束時

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

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

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

情況1:驗證成功

即滑動距離在擺正距離的區間內,本案例的擺正區間為158-168,然後我們做一下互動:

設定文字——在區間內將拖動至圖片擺正的文字設定為驗證成功;

等待0。5秒;

顯示成功提示彈窗;

觸發關閉按鈕滑鼠單擊時的事件——這裡後面後詳細講,其實就是將驗證彈窗裡的元件復原並且隱藏。

Axure教程:旋轉驗證原型

情況2:驗證失敗

即滑動距離不在在擺正距離的區間內,然後我們做一下互動:

設定文字:這裡我們需要新建一個空白文字記錄滑動按鈕在拖動結束時的位置,後面需要這個值來計算旋轉的角度(圖片旋轉回初始狀態的角度),LVAR1。x就是滑動按鈕所在的橫座標;

旋轉:將圖片復位,所以需要逆時針旋轉[[LVAR1*360/(LVAR2。width-LVAR3。width)]],LVAR1就是上面記錄的滑動按鈕的x座標,LVAR2。width是整個滑塊的寬,LVAR3。width是滑動按鈕的寬;

移動:將滑動按鈕移動回0。0的初始位置。

Axure教程:旋轉驗證原型

3。 關閉按鈕滑鼠單擊時事件

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

隱藏驗證彈窗;

移動滑動按鈕到達(0。0);

旋轉圖片到達180度,因為案例初始是180度,所以就是到達180度,如果你們是其他度數就填對應的初始度數即可;

設定文字,因為之前驗證成功的時候把驗證文字更改成驗證成功,所以復原的時候,需要把文字設定為原來的文字,即拖動至圖片擺正。

Axure教程:旋轉驗證原型

4。 驗證按鈕

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

Axure教程:旋轉驗證原型

5。 成功提示彈窗

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

Axure教程:旋轉驗證原型

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

本文由 @做產品但不是經理 原創釋出於,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

頂部