中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

滑動條、進度條、進度環(huán)，是產(chǎn)品原型中比較常見的進度展示功能。今天筆者分享的是使用Axure原型工具實現(xiàn)兩種進度展示功能中相對復(fù)雜的交互效果。

效果一：

實現(xiàn)效果：可拖動、可顯示進度值、可計算多個頁面均值的滑動進度條

功能流程分析

因為會涉及多個頁面的值傳遞，我們使用Axure中的【全局變量】功能，來臨時存放每個進度條的值，這樣方便最后一步把5個進度值拿出來再次計算。

制作前分析

• 頁面：5個進度頁面，1個結(jié)果展示頁面；
• 拖動方向：進度可左右來回拖動；
• 主要元件（列出元件的同時可以提前想好元件命名）：進度底槽EvaluGap、進度按鈕EvaluSelect、進度值Score、下一步Next、全局變量EvaluScore、最后得分EvaluateScore；
• 計算邏輯1：進度值的取值范圍 = 從左到右為0-100分；
• 計算邏輯2：進度值 = （進度按鈕的橫向位置÷進度底槽的橫向?qū)挾龋?100；
• 計算邏輯3：最后得分 = 5個進度值的均值；

具體實現(xiàn)方法

1、新建頁面

直接點擊頁面區(qū)域的新增頁面按鈕，點6次，即可建好6個頁面。

2、制作進度條元件

①【進度底槽EvaluGap】

在Page1頁面中，將元件庫中的“矩形2”拖入編輯區(qū)左上角，設(shè)置寬度350*高度20，名稱命名為Evalu01Gap：

②【進度按鈕EvaluSelect】

將元件庫中的“橢圓形”拖入編輯區(qū)左上角，設(shè)置寬度20*高度20，名稱命名為Evalu01Select，可設(shè)置下顏色、與底槽做區(qū)別：

③【進度值Score】

④轉(zhuǎn)換為動態(tài)面板

全選這3個元件右鍵，點擊“轉(zhuǎn)換為動態(tài)面板”選項后，3個元件將一起生成為一個“動態(tài)面板”：

生成“動態(tài)面板”目的：在動態(tài)面板中，可以設(shè)置元件移動時的“水平拖動”效果。

3、設(shè)置進度條拖動事件

①雙擊動態(tài)面板屬性區(qū)域的【拖動時】，進入<拖動時>用例編輯頁面，點擊左側(cè)【移動】：

②勾選【進度按鈕EvaluSelect】，在右下方移動選項中選擇“水平拖動”，添加左右2個邊界，設(shè)置好后點確定：

進行到這一步，你可以預(yù)覽一下效果：左右拖動效果完成，且拖動范圍僅僅在進度底槽中。

4、設(shè)置進度條拖動時數(shù)值

①【進度值Score】默認值為“三級標題”，我們將雙擊它，將其改為“0”。

②雙擊動態(tài)面板“拖動時-Case1”再次進入<拖動時>用例編輯頁面，點擊左側(cè)【設(shè)置文本】，勾選【Score01】，點擊右下角【fx】按鈕：

③新打開的窗口，即編輯函數(shù)的窗口，我們先按照下圖，增加2個局部變量：

變量1（LVAR1）是“進度按鈕”，變量2（LVAR2）是“進度底槽”：

④把變量放進函數(shù)：

還記得我們制作前分析的“計算邏輯2”嗎：

計算邏輯2：

進度值 = （進度按鈕的橫向位置÷進度底槽的橫向?qū)挾龋?100

寫成Axure里的函數(shù)表達式就是：

進度按鈕的橫向位置：LVAR1.x

進度底槽的橫向?qū)挾龋篖VAR2.width

進度值 =[[math.ceil(100*(LVAR1.x)/(LVAR2.width-20))]]

注：因為進度按鈕的直徑是20，所以【進度底槽的橫向?qū)挾取窟@里要減20，這樣操作可以使【進度按鈕】拉到最右時，【進度值】正好是100。

設(shè)置完畢后，此時你可以再預(yù)覽一下效果：左右拖動效果完成，拖動同時顯示出進度值。

5、將【進度條拖動時數(shù)值】賦值給【全局變量】

①點擊【項目→全局變量】，新增一個全局變量，命名為Evalu01Score、確定：

②雙擊動態(tài)面板“拖動時-Case1”再次進入<拖動時>用例編輯頁面，點擊左側(cè)【設(shè)置變量值】，勾選全局變量【Evalu01Score】，將值設(shè)置為進度值【Score01】一樣即可：

6、復(fù)制Page1的操作到剩下4個頁面

略

7、設(shè)置最后得分EvaluateScore

①在Page6頁面中，將元件庫中的“矩形2”拖入編輯區(qū)，命名為EvaluateScore：

②點擊“右下角Page6→頁面載入時”進入用例編輯頁面，點擊左側(cè)【設(shè)置文本】、勾選矩形【EvaluateScore】，點擊右下角【fx】按鈕：

③函數(shù)編輯框中，輸入【5個進度值的均值】的函數(shù)：

[[Math.ceil(Evalu01Score+Evalu02Score+Evalu03Score+Evalu04Score+Evalu05Score)/5]]

8、設(shè)置頁面間的跳轉(zhuǎn)

①在Page1頁面中放置一個矩形，編輯文字為“下一步”：

②點擊“下一步”矩形的“鼠標點擊時”進入用例編輯頁面，點擊左側(cè)【打開鏈接】，選中Page2：

如法炮制，使Page1-Page5每個頁面都加一遍【下一步】。設(shè)置完畢后，此時你可以再預(yù)覽一下效果：

“可拖動、可顯示進度值、可計算多個頁面均值的滑動進度條功能”基本實現(xiàn)了。剩下只需要我們增加其他內(nèi)容元件、設(shè)置一些美化效果。

效果二：

實現(xiàn)效果：可倒計時、可暫停、暫停后可繼續(xù)的進度環(huán)

功能流程分析

制作前分析

• 頁面：1個展示頁面；
• 拖動方向：進度環(huán)形轉(zhuǎn)圈移動；
• 主要元件（列出元件的同時可以提前想好元件命名）：進度底槽bottom、遮蓋條coverLeft和coverRight、進度條left和right、倒計時時間Countdown、暫停pause、繼續(xù)播放go；

倒計時邏輯：

①倒計時的取值范圍 =從10秒減到0秒；

②倒計時的速度 = 1s = 1000ms；

③自動倒計時的實現(xiàn)方法：通過動態(tài)面板的【循環(huán)設(shè)置】實現(xiàn)；

④倒計時數(shù)字=10秒-已旋轉(zhuǎn)的時間 = 10-（已旋轉(zhuǎn)角度/360）*10

進度環(huán)邏輯：

①進度底槽bottom、左遮蓋條coverLeft、右遮蓋條coverRight、左進度條left、右進度條right，層級順序：

②倒計時未開始時：白色【左右遮蓋條】分別遮住紫色【左右進度條】，此時頁面無任何進度條顯示；

③倒計時開始：【左進度條】順時針旋轉(zhuǎn)，紫色進度條慢慢出現(xiàn)，直到轉(zhuǎn)180度到右邊完全出現(xiàn)；【右進度條】順時針旋轉(zhuǎn)（同時【左遮蓋條】消失）出現(xiàn)，直到轉(zhuǎn)180度到完全出現(xiàn)；

④進度環(huán)每秒旋轉(zhuǎn)角度=360°除以10秒=36°/s。即：若預(yù)設(shè)每250毫秒旋轉(zhuǎn)一下下，那么這一下下移動的角度應(yīng)該是9°。

暫停和繼續(xù)的邏輯：

①點擊【暫?！浚旱褂嫊r停止、暫停鍵隱藏、繼續(xù)播放鍵出現(xiàn)；

②點擊【繼續(xù)播放】：倒計時開始、繼續(xù)播放鍵隱藏、暫停鍵出現(xiàn)；

具體實現(xiàn)方法

1、新建頁面并制作各元件

注：【動態(tài)面板DoingLoop】和【開始go】2個元件默認設(shè)置為“隱藏”

圓環(huán)制作方法：2個圓形重疊放置后全選，點“排除”按鈕即可：

半圓環(huán)制作方法：矩形和半圓環(huán)重疊放置后全選，點“去除”按鈕即可：

同理，你可以制作出暫停鍵、播放鍵的形狀哦。

2、動態(tài)面板的【循環(huán)設(shè)置】

①設(shè)置自動轉(zhuǎn)動的時間（動態(tài)面板設(shè)置【顯示時】交互）

設(shè)置【動態(tài)面板狀態(tài)】→勾選動態(tài)面板→Next/向后循環(huán)/250毫秒：

②設(shè)置自動轉(zhuǎn)動的角度（動態(tài)面板設(shè)置【狀態(tài)改變時】交互）

先設(shè)置【左進度條】旋轉(zhuǎn)到右邊時的條件（【左進度條】旋轉(zhuǎn)角度<180°時）：

if “[[LVAR1.rotation]] ” < “180”

在該條件下，繼續(xù)設(shè)置【旋轉(zhuǎn)的方向/角度】：

根據(jù)之前的預(yù)計算：每循環(huán)一下是250毫秒，即每250毫秒旋轉(zhuǎn)一下下，這一下下移動的角度是9°。

③設(shè)置自動倒計時的數(shù)字（動態(tài)面板設(shè)置【狀態(tài)改變時】交互）

繼續(xù)在if “[[LVAR1.rotation]] ” < “180”的條件下，通過【設(shè)置文本】動作來設(shè)置【實時倒計時數(shù)字】：

還記得我們制作前分析的“倒計時邏輯”嗎：

實時倒計時數(shù)字=10秒-已旋轉(zhuǎn)的時間 = 10-（已旋轉(zhuǎn)角度/360）*10

寫成函數(shù)表達就是：

實時倒計時數(shù)字=[[Math.ceil(10-10*(LVAR1.rotation + LVAR2.rotation)/360)]]

④同上，設(shè)置【右進度條】旋轉(zhuǎn)

增加一個新用例 ?if “[[LVAR2.rotation]] ” < “180” ， 該條件下設(shè)置隱藏【左遮蓋條】、【旋轉(zhuǎn)的方向/角度】、【實時倒計時數(shù)字】：

⑤最后設(shè)置旋轉(zhuǎn)完成后的情況

增加一個新用例 Else If Ture ，該條件下設(shè)置動態(tài)面板狀態(tài)為停止循環(huán)、隱藏動態(tài)面板：

我們總結(jié)一下【動態(tài)面板DoingLoop】處理的邏輯順利（如下圖）：

當(dāng)【動態(tài)面板DoingLoop】顯示時
↓
【顯示時】交互設(shè)置生效
↓
自己開始Next循環(huán) → 于是自己的狀態(tài)改變了
↓
【狀態(tài)改變時】交互設(shè)置生效
↓
用例1開始執(zhí)行→進度條開始出現(xiàn)在右邊→進度條完全出現(xiàn)在右邊了
↓
用例4開始執(zhí)行→進度條開始出現(xiàn)在左邊→進度條完全出現(xiàn)在左邊了
↓
用例2開始執(zhí)行→【動態(tài)面板DoingLoop】停止循環(huán)

注意：用例的執(zhí)行順序是按照【用例排列順序】至上而下執(zhí)行的，和用例名稱數(shù)字沒關(guān)系。例如：【用例4】在【用例2】上方，【用例4】就會先執(zhí)行。用例可以鼠標按住直接拖動。

3、暫停鍵、繼續(xù)播放鍵的交互設(shè)置

4、啟動倒計時

因為倒計時的“250毫秒轉(zhuǎn)一下下”是靠【動態(tài)面板DoingLoop】在【顯示時】設(shè)置“Next向下循環(huán)”完成的，我們啟動倒計時就是要啟動【動態(tài)面板DoingLoop】顯示：

在第1步制作各元件時，我們已經(jīng)把【動態(tài)面板DoingLoop】設(shè)置為【隱藏】了，所以只要再對整個頁面設(shè)置一下【頁面載入時】的交互事件，讓動態(tài)面板由【隱藏】→【顯示】，就算啟動成功了。

到此設(shè)置已全部完成，預(yù)覽一下吧~

作者：葛曉玲，一個互聯(lián)網(wǎng)重度依賴者。

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

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