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

作者分享了制作進度條、進度環和滑動條的簡單方法，希望能給大家帶來一定的收獲。

畫原型的目的之一是為了給開發人員看功能的實現效果，同時也可以打包制作成Demo給相關人員了解產品的完成形態，是產品人員的必備技能之一。除了畫原型，產品人員還要做需求分析和文檔編寫等工作，所以不能花太多時間在此環節上。

畫原型所需時間與實現方法有關，以提高效率為目的，本文盡可能詳細的介紹了進度條、進度環和滑動條三種原型的最簡單實現方法，在介紹方法的過程中與大家分享自定義函數和常用math函數的使用以及元件操作的一些小技巧，希望能幫助大家在畫原型的時候更加得心應手。

一、進度條

進度條常見于頁面載入過程中，用于向用戶展示當前的進度情況，配合上有趣的動畫效果可減少用戶的等待焦慮。

1. 準備元件

在畫板中拖入等寬等高的灰色矩形和藍色矩形，灰色矩形命名【進度槽】，藍色矩形轉換為動態面板后設置寬度為1，命名【進度條】，拖入開始按鈕和文本標簽，設置文本標簽文本為“0%”，命名【進度】。

2. 原理分析

1）實現原理

把藍色矩形轉換成動態面板【進度條】后，藍色矩形成為【進度條】默認面板內的一個元件。通過把【進度條】的初始寬度設置為1，暫時只顯示一點點的藍色矩形，使整個進度槽看起來是空的。隨著【進度條】寬度不斷變大，藍色矩形被顯示出來的區域也不斷增多，直至當【進度條】的寬度等于【進度槽】的時候，藍色矩形就全部被顯示出來了，使整個進度槽看起來被填充完成。期間進度條和進度是關聯進行的，根據【進度條】的寬度計算出【進度】的數值，用于表示當前的進度情況。

2）邏輯流程

改變【進度條】寬度

改變【進度條】的寬度是通過【設置尺寸】動作來實現的，Axure支持在用例中設置改變元件的尺寸。【進度條】的初始寬度為1，我們要修改設置它的尺寸為【進度槽】的寬度，設置動畫為“線性”，時間為整個進度的時間。

自定義的函數中，LVAR1.width指局部變量LVAR1的寬度，LVAR1指代【進度槽】，故LVAR1.width即為【進度槽】的寬度。

設置【進度】

根據“ 進度 = 進度條的寬度 / 進度槽的寬度 % ”，轉換成原型中的函數為：

[[ math.ceil ( 100 * LVAR1.width / LVAR2.width ) ]] %

math.ceil(x)函數為向上取整函數，返回大于或等于參數x，并且與之最接近的整數。

（tips：文章結尾還會與大家分享更多常用的math函數。）

LVAR1.width是【進度條】的寬度，LVAR2.width是【進度槽】的寬度。兩者相除后乘以100，再向上取整后得到百分比數制的整數數值部分，再添加“%”號組成百分比數制的文本。

3、設置用例

【開始按鈕】鼠標點擊時用例：

1. action1：設置【進度條】尺寸；
2. action2：隱藏【進度】；
3. action3：顯示【進度】。

【進度】顯示時用例：

1. action1：設置【進度】；
2. action2：隱藏【進度】；
3. action3：顯示【進度】。

注意，在完成設置【進度】的動作后，需要添加一個“等待0ms”的動作讓程序“暫時等待一下，然后再繼續”，否則沒有設置等待的話會形成“設置-隱藏-顯示-設置-隱藏-顯示-設置-隱藏……”的死循環，在運行原型的時候會造成網頁奔潰（有興趣的讀者可以嘗試一下，網頁崩潰了可別怪我^_^）。

全部搞定后就可以預覽原型了，附上原型演示地址：

簡易進度條原型演示

二、進度環

進度環是進度條的一種擴展，只是兩者的展現形式不同，前者為環形，后者為條形。

1、準備元件

1）半圓環的制作方法

step1：畫兩個半徑不同的同心圓（大圓450半徑藍色，小圓300半徑灰色），選中兩個圓后右鍵 –【改變形狀】–【去除】，便可得到圓環。

step2：畫一個矩形，使它的一邊與圓環的直徑重合，選中兩者后右鍵 –【改變形狀】–【去除】，得到半圓環，將半圓環右鍵 –【改變形狀】–【水平翻轉】便可得到另一半半圓環。

2）制作元件

按照上面的方法在畫板中畫四個半圓環、拖入開始按鈕和文本標簽，設置文本標簽文本為“0%”，命名【進度】。

把各個元件組合排列成下圖，其中四個半圓環自上往下的排列層級依次為：【右槽】、【右環】、【左槽】、【左環】

2、原理分析

1）實現原理

初始時四個半圓環的排列位置從上往下依次為【右槽】、【右環】、【左槽】、【左環】，由于右槽和左槽分別蓋住了右環和左環，所以在視圖上我們只能看到右槽和左槽，也就是空的環形槽。動作開始后，右環旋轉至左側后蓋住了左槽，然后左環上升到頂層（于右槽之上），接著頂層的左環旋轉至右側后蓋住了右槽，所以在視圖上只能看到右環和左環，也就是填充后的環形。整個過程進度環和進度是關聯進行的，根據進度環旋轉過的弧度計算出進度，用于表示當前的進度情況。

2）邏輯流程

進度環的邏輯方法跟進度條相似，區別是進度的計算公式不同。

順時針旋轉半圈【右環】

旋轉【右環】是通過【旋轉】動作來實現的，Axure 8支持在用例中對元件進行旋轉其位置的操作。設置旋轉位置為相對位置，角度為180，順時針方向，錨點為左側（沿著左側旋轉），旋轉動畫設置為線性，設置好旋轉時間。

【左環】的旋轉動作設置與【右環】相似，把錨點改為右側（沿右側旋轉）即可。

設置【進度】

根據“ 進度 = 進度環旋轉過的弧度 / 360 % ”，轉換成原型中的函數為：

[[ math.ceil ( 100 * ( LVAR1.rotation + LVAR2.rotation ) ?/ ?360 ) ]] %

LVAR1.rotation是【右環】旋轉過的弧度，LVAR2.rotation是【左環】旋轉過的弧度。兩者相加后為整個進度環旋轉過的弧度，除以360，然后乘以100再向上取整后得到百分比數制的整數數值部分，再添加“%”號組成百分比數制的文本。

3、設置用例

【開始按鈕】鼠標點擊時用例：

1. action1：【右環】順時針旋轉半圓；
2. action2：【左環】置于頂層；
3. action3：【左環】順時針旋轉半圓。

用例中執行【左環】置于頂層動作之前設置的等待時間與我們設置的【右環】旋轉所需時間相同，這么做是為了讓【右環】旋轉結束后才置【左環】于頂層。否則不添加等待時間的話在原型的演示過程中，【右環】還在旋轉的時候就被【左環】置頂后遮蓋住了，看不到進度環的旋轉動畫。

【進度】顯示時用例：

1. action1：設置【進度】；
2. action2：隱藏【進度】；
3. action3：顯示【進度】。

注意在完成設置【進度】的動作后，需要添加一個“等待0ms”的動作，否則運行原型時會陷入死循環而造成網頁奔潰。

全部搞定后就可以預覽原型了，附上原型演示地址：簡易進度環原型演示

三、滑動條

滑動條常見于數值選擇器（調節音量、修改數值等），也用于滑動解鎖和滑動登錄。

1、準備元件

1）初始化元件

寬400、高20的灰色矩形【滑動槽】，跟滑動槽等寬等高的藍色矩形【滑動條矩形】，寬15、高30的紅色矩形【滑動塊】置于【滑動條矩形】右側，拖入文本標簽，設置文本標簽文本為“0”，命名【滑動數】。

注：【滑動塊】的寬不應設置太大、高略大于【滑動條矩形】即可。

2）設置元件

選中【滑動條矩形】和【滑動塊】將它們一起轉換為動態面板【滑動條】，將【滑動槽】轉換為動態面板，設置寬為415（【滑動條】的寬）、高為40（大于【滑動塊】的高），將【滑動條】拖入【滑動槽】的動態面板中，拖放至【滑動槽】左側直至只露出紅色的【滑動塊】部分。

所有元件設置完成后，在首頁中視圖如下

2、原理分析

隨著我們在原型中不斷拖動【滑動塊】，【滑動條】在【滑動槽】中的位置是不斷改變的。在整個過程中，滑動條和滑動數進行關聯操作，根據進度條矩形已經顯示的寬度計算出滑動數。

移動【滑動條】

移動方式設置成“水平拖動”，必須添加界限，否則原型會無限制拖動。設置左側邊界的X軸坐標大于等于-400（-【滑動條矩形】的寬度）、右側邊界的X軸坐標小于等于415（【滑動條】的寬度）

設置【滑動數】

根據“ 滑動數 = （ 滑動槽的寬度 – 滑動條矩形已經顯示的寬度 ） / ?滑動槽的寬度 ”，轉換成原型中的函數為：

[[ ?math.ceil ( 100 * ( LVAR2.width – math.abs (LVAR1.x ) ) / LVAR2.width ) ?]]

math.abs(x)函數為絕對值函數，返回參數x的絕對值。

LVAR2.width是【滑動框】的寬度，LVAR1.x是【滑動條】的x軸坐標數值，它的絕對值在原型中即是【滑動條矩形】已經顯示的寬度。自定義函數中的“100”是我們所要設計的整個滑動條的最大數值。

3、用例設置

【滑動條】拖動時用例：

1. action1：移動【滑動條】；
2. action2：設置【滑動數】。

全部搞定后就可以預覽原型了，附上原型演示地址：簡易滑動條原型演示

分享幾個常用的math函數：

1. math.abs(x)：絕對值函數，返回參數x的絕對值。math.abs(-2)=2。
2. math.ceil(x)：向上取整函數，返回大于或等于參數x，并且與之最接近的整數。math.ceil(1.2)=2；math.floor(x)：向下取整函數，返回小于或等于參數x，并且與之最接近的整數。math.floor(1.2)=1。
3. math.random()：隨機數函數，返回介于0到1之間的隨機數。
4. math.max(x,y)：最大值函數，返回參數x和y中最大的值。math.max(1,2)=2；math.min(x,y)：最小值函數，返回參數x和y中最小的值。math.min(1,2)=1。
5. math.pow(x,y)：冪運算函數，返回參數x的y次方的值。math.pow(2,3)=8；math.sqrt(x)：平方根函數，返回參數x的正數平方根。math.sqrt(4)=2。

寫在后面

也許有讀者會問，有沒有更簡單的方法實現上述的原型呢？答案是肯定有的，同時也很歡迎讀者們與我討論交流更簡單的方法。我們做原型的目的是為了表達功能需求和表現產品形態，采用簡單的方法只是為了盡可能提高畫原型的效率。希望讀者們能在工作或者學習中養成自己的原型風格，只要是我們覺得最得心應手的方法，就是最簡單的方法。

本文由 @Jenskee 原創發布于人人都是產品經理。未經許可，禁止轉載