本文約3500字烈掠，適合對(duì)Axure有一定了解的同學(xué)閱讀羞秤，可跟著文中的教程同步動(dòng)手操作，建議閱讀20分鐘左敌。

寫在前面

畫原型的目的之一是為了給開(kāi)發(fā)人員看功能的實(shí)現(xiàn)效果瘾蛋，同時(shí)也可以打包制作成Demo給相關(guān)人員了解產(chǎn)品的完成形態(tài)，是產(chǎn)品人員的必備技能之一矫限。除了畫原型哺哼，產(chǎn)品人員還要做需求分析和文檔編寫等工作，所以不能花太多時(shí)間在此環(huán)節(jié)上叼风。畫原型所需時(shí)間與實(shí)現(xiàn)方法有關(guān)取董，以提高效率為目的，本文盡可能詳細(xì)的介紹了進(jìn)度條无宿、進(jìn)度環(huán)和滑動(dòng)條三種原型的最簡(jiǎn)單實(shí)現(xiàn)方法茵汰，在介紹方法的過(guò)程中與大家分享自定義函數(shù)和常用math函數(shù)的使用以及元件操作的一些小技巧，希望能幫助大家在畫原型的時(shí)候更加得心應(yīng)手孽鸡。

一蹂午、進(jìn)度條

進(jìn)度條常見(jiàn)于頁(yè)面載入過(guò)程中，用于向用戶展示當(dāng)前的進(jìn)度情況彬碱，配合上有趣的動(dòng)畫效果可減少用戶的等待焦慮豆胸。

1、準(zhǔn)備元件

進(jìn)度條的元件

在畫板中拖入等寬等高的灰色矩形和藍(lán)色矩形巷疼，灰色矩形命名【進(jìn)度槽】晚胡，藍(lán)色矩形轉(zhuǎn)換為動(dòng)態(tài)面板后設(shè)置寬度為1，命名【進(jìn)度條】嚼沿，拖入開(kāi)始按鈕和文本標(biāo)簽估盘，設(shè)置文本標(biāo)簽文本為“0%”，命名【進(jìn)度】伏尼。

2忿檩、原理分析

1）實(shí)現(xiàn)原理

把藍(lán)色矩形轉(zhuǎn)換成動(dòng)態(tài)面板【進(jìn)度條】后尉尾，藍(lán)色矩形成為【進(jìn)度條】默認(rèn)面板內(nèi)的一個(gè)元件爆阶。通過(guò)把【進(jìn)度條】的初始寬度設(shè)置為1，暫時(shí)只顯示一點(diǎn)點(diǎn)的藍(lán)色矩形沙咏，使整個(gè)進(jìn)度槽看起來(lái)是空的辨图。隨著【進(jìn)度條】寬度不斷變大，藍(lán)色矩形被顯示出來(lái)的區(qū)域也不斷增多肢藐，直至當(dāng)【進(jìn)度條】的寬度等于【進(jìn)度槽】的時(shí)候故河，藍(lán)色矩形就全部被顯示出來(lái)了，使整個(gè)進(jìn)度槽看起來(lái)被填充完成吆豹。期間進(jìn)度條和進(jìn)度是關(guān)聯(lián)進(jìn)行的鱼的，根據(jù)【進(jìn)度條】的寬度計(jì)算出【進(jìn)度】的數(shù)值理盆，用于表示當(dāng)前的進(jìn)度情況。

2）邏輯流程

進(jìn)度條的邏輯流程

改變【進(jìn)度條】寬度

改變【進(jìn)度條】寬度

改變【進(jìn)度條】的寬度是通過(guò)【設(shè)置尺寸】動(dòng)作來(lái)實(shí)現(xiàn)的凑阶，Axure支持在用例中設(shè)置改變?cè)某叽缭彻妗！具M(jìn)度條】的初始寬度為1宙橱，我們要修改設(shè)置它的尺寸為【進(jìn)度槽】的寬度姨俩，設(shè)置動(dòng)畫為“線性”，時(shí)間為整個(gè)進(jìn)度的時(shí)間师郑。

自定義的函數(shù)中环葵，LVAR1.width指局部變量LVAR1的寬度，LVAR1指代【進(jìn)度槽】宝冕，故LVAR1.width即為【進(jìn)度槽】的寬度张遭。

設(shè)置【進(jìn)度】

設(shè)置【進(jìn)度】

根據(jù)“ 進(jìn)度 = 進(jìn)度條的寬度 / 進(jìn)度槽的寬度 % ”，轉(zhuǎn)換成原型中的函數(shù)為：

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

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

（tips：文章結(jié)尾還會(huì)與大家分享更多常用的math函數(shù)湿刽。）

LVAR1.width是【進(jìn)度條】的寬度的烁，LVAR2.width是【進(jìn)度槽】的寬度。兩者相除后乘以100诈闺，再向上取整后得到百分比數(shù)制的整數(shù)數(shù)值部分渴庆，再添加“%”號(hào)組成百分比數(shù)制的文本。

3雅镊、設(shè)置用例

【開(kāi)始按鈕】鼠標(biāo)點(diǎn)擊時(shí)用例：

action1：設(shè)置【進(jìn)度條】尺寸襟雷；

action2：隱藏【進(jìn)度】；

action3：顯示【進(jìn)度】仁烹。

點(diǎn)擊【開(kāi)始按鈕】

【進(jìn)度】顯示時(shí)用例：

action1：設(shè)置【進(jìn)度】耸弄；

action2：隱藏【進(jìn)度】；

action3：顯示【進(jìn)度】卓缰。

【進(jìn)度】顯示時(shí)

注意计呈，在完成設(shè)置【進(jìn)度】的動(dòng)作后，需要添加一個(gè)“等待0ms”的動(dòng)作讓程序“暫時(shí)等待一下征唬，然后再繼續(xù)”捌显，否則沒(méi)有設(shè)置等待的話會(huì)形成“設(shè)置-隱藏-顯示-設(shè)置-隱藏-顯示-設(shè)置-隱藏……”的死循環(huán)，在運(yùn)行原型的時(shí)候會(huì)造成網(wǎng)頁(yè)奔潰（有興趣的讀者可以嘗試一下总寒，網(wǎng)頁(yè)崩潰了可別怪我^_^）扶歪。

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

簡(jiǎn)易進(jìn)度條原型演示

二摄闸、進(jìn)度環(huán)

進(jìn)度環(huán)是進(jìn)度條的一種擴(kuò)展善镰，只是兩者的展現(xiàn)形式不同妹萨，前者為環(huán)形，后者為條形炫欺。

1眠副、準(zhǔn)備元件

1）半圓環(huán)的制作方法

step1：畫兩個(gè)半徑不同的同心圓（大圓450半徑藍(lán)色，小圓300半徑灰色）竣稽，選中兩個(gè)圓后右鍵 --【改變形狀】--【去除】囱怕，便可得到圓環(huán)。

制作圓環(huán)

step2：畫一個(gè)矩形毫别，使它的一邊與圓環(huán)的直徑重合娃弓，選中兩者后右鍵 --【改變形狀】--【去除】，得到半圓環(huán)岛宦，將半圓環(huán)右鍵 --【改變形狀】--【水平翻轉(zhuǎn)】便可得到另一半半圓環(huán)台丛。

制作半圓環(huán)

2）制作元件

按照上面的方法在畫板中畫四個(gè)半圓環(huán)、拖入開(kāi)始按鈕和文本標(biāo)簽砾肺，設(shè)置文本標(biāo)簽文本為“0%”挽霉，命名【進(jìn)度】。

所需元件

把各個(gè)元件組合排列成下圖变汪，其中四個(gè)半圓環(huán)自上往下的排列層級(jí)依次為：【右槽】侠坎、【右環(huán)】、【左槽】裙盾、【左環(huán)】

排版好的元件

2实胸、原理分析

1）實(shí)現(xiàn)原理

環(huán)旋轉(zhuǎn)原型截面動(dòng)圖

初始時(shí)四個(gè)半圓環(huán)的排列位置從上往下依次為【右槽】、【右環(huán)】番官、【左槽】庐完、【左環(huán)】，由于右槽和左槽分別蓋住了右環(huán)和左環(huán)徘熔，所以在視圖上我們只能看到右槽和左槽门躯，也就是空的環(huán)形槽。動(dòng)作開(kāi)始后酷师，右環(huán)旋轉(zhuǎn)至左側(cè)后蓋住了左槽讶凉，然后左環(huán)上升到頂層（于右槽之上），接著頂層的左環(huán)旋轉(zhuǎn)至右側(cè)后蓋住了右槽窒升，所以在視圖上只能看到右環(huán)和左環(huán)缀遍，也就是填充后的環(huán)形。整個(gè)過(guò)程進(jìn)度環(huán)和進(jìn)度是關(guān)聯(lián)進(jìn)行的饱须，根據(jù)進(jìn)度環(huán)旋轉(zhuǎn)過(guò)的弧度計(jì)算出進(jìn)度，用于表示當(dāng)前的進(jìn)度情況台谊。

2）邏輯流程

進(jìn)度環(huán)邏輯

進(jìn)度環(huán)的邏輯方法跟進(jìn)度條相似蓉媳，區(qū)別是進(jìn)度的計(jì)算公式不同譬挚。

順時(shí)針旋轉(zhuǎn)半圈【右環(huán)】

選擇半圓環(huán)

旋轉(zhuǎn)【右環(huán)】是通過(guò)【旋轉(zhuǎn)】動(dòng)作來(lái)實(shí)現(xiàn)的，Axure 8支持在用例中對(duì)元件進(jìn)行旋轉(zhuǎn)其位置的操作酪呻。設(shè)置旋轉(zhuǎn)位置為相對(duì)位置减宣，角度為180，順時(shí)針?lè)较蛲孳^點(diǎn)為左側(cè)（沿著左側(cè)旋轉(zhuǎn)）漆腌，旋轉(zhuǎn)動(dòng)畫設(shè)置為線性，設(shè)置好旋轉(zhuǎn)時(shí)間阶冈。

【左環(huán)】的旋轉(zhuǎn)動(dòng)作設(shè)置與【右環(huán)】相似闷尿，把錨點(diǎn)改為右側(cè)（沿右側(cè)旋轉(zhuǎn)）即可。

設(shè)置【進(jìn)度】

設(shè)置【進(jìn)度】

根據(jù)“ 進(jìn)度 = 進(jìn)度環(huán)旋轉(zhuǎn)過(guò)的弧度 / 360 % ”女坑，轉(zhuǎn)換成原型中的函數(shù)為：

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

LVAR1.rotation是【右環(huán)】旋轉(zhuǎn)過(guò)的弧度填具，LVAR2.rotation是【左環(huán)】旋轉(zhuǎn)過(guò)的弧度。兩者相加后為整個(gè)進(jìn)度環(huán)旋轉(zhuǎn)過(guò)的弧度匆骗，除以360劳景，然后乘以100再向上取整后得到百分比數(shù)制的整數(shù)數(shù)值部分，再添加“%”號(hào)組成百分比數(shù)制的文本碉就。

3盟广、設(shè)置用例

【開(kāi)始按鈕】鼠標(biāo)點(diǎn)擊時(shí)用例：

action1：【右環(huán)】順時(shí)針旋轉(zhuǎn)半圓；

action2：【左環(huán)】置于頂層瓮钥；

action3：【左環(huán)】順時(shí)針旋轉(zhuǎn)半圓衡蚂。

點(diǎn)擊【開(kāi)始按鈕】

用例中執(zhí)行【左環(huán)】置于頂層動(dòng)作之前設(shè)置的等待時(shí)間與我們?cè)O(shè)置的【右環(huán)】旋轉(zhuǎn)所需時(shí)間相同，這么做是為了讓【右環(huán)】旋轉(zhuǎn)結(jié)束后才置【左環(huán)】于頂層骏庸。否則不添加等待時(shí)間的話在原型的演示過(guò)程中毛甲，【右環(huán)】還在旋轉(zhuǎn)的時(shí)候就被【左環(huán)】置頂后遮蓋住了，看不到進(jìn)度環(huán)的旋轉(zhuǎn)動(dòng)畫具被。

【進(jìn)度】顯示時(shí)用例：

action1：設(shè)置【進(jìn)度】玻募；

action2：隱藏【進(jìn)度】；

action3：顯示【進(jìn)度】一姿。

顯示【進(jìn)度】

注意在完成設(shè)置【進(jìn)度】的動(dòng)作后七咧，需要添加一個(gè)“等待0ms”的動(dòng)作，否則運(yùn)行原型時(shí)會(huì)陷入死循環(huán)而造成網(wǎng)頁(yè)奔潰叮叹。

全部搞定后就可以預(yù)覽原型了艾栋，附上原型演示地址：

簡(jiǎn)易進(jìn)度環(huán)原型演示

三、滑動(dòng)條

滑動(dòng)條常見(jiàn)于數(shù)值選擇器（調(diào)節(jié)音量蛉顽、修改數(shù)值等）蝗砾，也用于滑動(dòng)解鎖和滑動(dòng)登錄。

1、準(zhǔn)備元件

1）初始化元件

初始化元件

寬400悼粮、高20的灰色矩形【滑動(dòng)槽】闲勺，跟滑動(dòng)槽等寬等高的藍(lán)色矩形【滑動(dòng)條矩形】，寬15扣猫、高30的紅色矩形【滑動(dòng)塊】置于【滑動(dòng)條矩形】右側(cè)菜循，拖入文本標(biāo)簽，設(shè)置文本標(biāo)簽文本為“0”申尤，命名【滑動(dòng)數(shù)】

注：【滑動(dòng)塊】的寬不應(yīng)設(shè)置太大癌幕、高略大于【滑動(dòng)條矩形】即可。

2）設(shè)置元件

選中【滑動(dòng)條矩形】和【滑動(dòng)塊】將它們一起轉(zhuǎn)換為動(dòng)態(tài)面板【滑動(dòng)條】昧穿，將【滑動(dòng)槽】轉(zhuǎn)換為動(dòng)態(tài)面板勺远，設(shè)置寬為415（【滑動(dòng)條】的寬）、高為40（大于【滑動(dòng)塊】的高）粤咪，將【滑動(dòng)條】拖入【滑動(dòng)槽】的動(dòng)態(tài)面板中谚中，拖放至【滑動(dòng)槽】左側(cè)直至只露出紅色的【滑動(dòng)塊】部分。

【滑動(dòng)條】在【滑動(dòng)槽】中只露出紅色的【滑動(dòng)塊】部分

所有元件設(shè)置完成后寥枝，在首頁(yè)中視圖如下

元件設(shè)置完成后的首頁(yè)視圖

2宪塔、原理分析

滑動(dòng)塊邏輯流程

隨著我們?cè)谠椭胁粩嗤蟿?dòng)【滑動(dòng)塊】，【滑動(dòng)條】在【滑動(dòng)槽】中的位置是不斷改變的囊拜。在整個(gè)過(guò)程中某筐，滑動(dòng)條和滑動(dòng)數(shù)進(jìn)行關(guān)聯(lián)操作，根據(jù)進(jìn)度條矩形已經(jīng)顯示的寬度計(jì)算出滑動(dòng)數(shù)冠跷。

移動(dòng)【滑動(dòng)條】

移動(dòng)【滑動(dòng)條】

移動(dòng)方式設(shè)置成“水平拖動(dòng)”南誊，必須添加界限，否則原型會(huì)無(wú)限制拖動(dòng)蜜托。設(shè)置左側(cè)邊界的X軸坐標(biāo)大于等于-400（-【滑動(dòng)條矩形】的寬度）抄囚、右側(cè)邊界的X軸坐標(biāo)小于等于415（【滑動(dòng)條】的寬度）

設(shè)置【滑動(dòng)數(shù)】

設(shè)置【滑動(dòng)數(shù)】

根據(jù)“ 滑動(dòng)數(shù) = （ 滑動(dòng)槽的寬度 - 滑動(dòng)條矩形已經(jīng)顯示的寬度 ） / ?滑動(dòng)槽的寬度 ”，轉(zhuǎn)換成原型中的函數(shù)為：

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

math.abs(x)函數(shù)為絕對(duì)值函數(shù)橄务，返回參數(shù)x的絕對(duì)值幔托。

LVAR2.width是【滑動(dòng)框】的寬度，LVAR1.x是【滑動(dòng)條】的x軸坐標(biāo)數(shù)值蜂挪，它的絕對(duì)值在原型中即是【滑動(dòng)條矩形】已經(jīng)顯示的寬度重挑。自定義函數(shù)中的“100”是我們所要設(shè)計(jì)的整個(gè)滑動(dòng)條的最大數(shù)值。

3棠涮、用例設(shè)置

【滑動(dòng)條】拖動(dòng)時(shí)用例：

action1：移動(dòng)【滑動(dòng)條】谬哀；

action2：設(shè)置【滑動(dòng)數(shù)】。

拖動(dòng)【滑動(dòng)條】

全部搞定后就可以預(yù)覽原型了严肪，附上原型演示地址：

簡(jiǎn)易滑動(dòng)條原型演示

分享幾個(gè)常用的math函數(shù)：

1）math.abs(x)：絕對(duì)值函數(shù)史煎，返回參數(shù)x的絕對(duì)值谦屑。math.abs(-2)=2；

2）math.ceil(x)：向上取整函數(shù)劲室，返回大于或等于參數(shù)x伦仍，并且與之最接近的整數(shù)结窘。math.ceil(1.2)=2很洋；

math.floor(x)：向上取整函數(shù)，返回小于或等于參數(shù)x隧枫，并且與之最接近的整數(shù)喉磁。math.floor(1.2)=1；

3）math.random()：隨機(jī)數(shù)函數(shù)官脓，返回介于0到1之間的隨機(jī)數(shù)协怒；

4）math.max(x,y)：最大值函數(shù)，返回參數(shù)x和y中最大的值卑笨。math.max(1,2)=2孕暇；

math.min(x,y)：最小值函數(shù)，返回參數(shù)x和y中最小的值赤兴。math.min(1,2)=1妖滔；

5）math.pow(x,y)：冪運(yùn)算函數(shù)，返回參數(shù)x的y次方的值桶良。math.pow(2,3)=8座舍；

math.sqrt(x)：平方根函數(shù)，返回參數(shù)x的正數(shù)平方根陨帆。math.sqrt(4)=2曲秉；

寫在后面

也許有讀者會(huì)問(wèn)，有沒(méi)有更簡(jiǎn)單的方法實(shí)現(xiàn)上述的原型呢疲牵？答案是肯定有的承二，同時(shí)也很歡迎讀者們與我討論交流更簡(jiǎn)單的方法。我們做原型的目的是為了表達(dá)功能需求和表現(xiàn)產(chǎn)品形態(tài)纲爸，采用簡(jiǎn)單的方法只是為了盡可能提高畫原型的效率亥鸠。希望讀者們能在工作或者學(xué)習(xí)中養(yǎng)成自己的原型風(fēng)格，只要是我們覺(jué)得最得心應(yīng)手的方法缩焦，就是最簡(jiǎn)單的方法读虏。

- END -

讀完文章如果覺(jué)得有收獲，記得關(guān)注和點(diǎn)贊哦～

我是南良熊袁滥，期待在產(chǎn)品的成長(zhǎng)路上與你共同進(jìn)步盖桥。