區(qū)間評(píng)分條是Axure原型中頻繁使用的一種表示工具，但這個(gè)簡單的效果內(nèi)，包含了很多交互，我們來看看作者是怎么做的。

區(qū)間評(píng)分條是一種圖形化的表示工具，用于展示某一范圍內(nèi)的數(shù)值或分?jǐn)?shù)，并將其劃分成不同的區(qū)間。這種評(píng)分條通常用于直觀地顯示數(shù)據(jù)的分布或某個(gè)指標(biāo)的表現(xiàn)。常用于產(chǎn)品評(píng)價(jià)、調(diào)查和反饋、學(xué)術(shù)評(píng)價(jià)、健康評(píng)估、績效評(píng)估、滿意度調(diào)查等場景。

所以今天作者就教大家怎么在Axure里制作區(qū)間評(píng)分條的原型模板，具體效果如下所示：

一、效果展示

1、在滑塊條區(qū)域可以左右拖動(dòng)滑塊，根據(jù)兩個(gè)滑塊所在的位置，自動(dòng)計(jì)算出對(duì)應(yīng)的區(qū)間

2、通過過程中左側(cè)滑塊不能超過右側(cè)滑塊，兩個(gè)滑塊之間自動(dòng)變藍(lán)，區(qū)間外的為灰色

二、制作教程

1. 材料裝備

• 滑塊：我們用圓來制作，設(shè)置邊線顏色為藍(lán)色，邊線可以設(shè)置粗一點(diǎn)，然后將圓轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才有拖動(dòng)的事件，復(fù)制這個(gè)滑塊，我們需要左右兩個(gè)滑塊命名為開始和結(jié)束；
• 滑條：我們用矩形來制作，將矩形的圓角拉滿，我們需要灰色和藍(lán)色兩個(gè)滑條，藍(lán)色的在上方；
• 區(qū)間：區(qū)間我們用兩個(gè)文本標(biāo)簽和一個(gè)~符號(hào)制作，分別對(duì)應(yīng)開始和結(jié)束滑塊；
• 滿分值：用文本標(biāo)簽制作，里面填寫分?jǐn)?shù)的最大值，例如滿分100就填100，滿分是10就填10，默認(rèn)隱藏即可，只用于后續(xù)邏輯運(yùn)算。

如下圖所示擺放即可

2. 交互制作

鼠標(biāo)拖動(dòng)左側(cè)開始滑塊時(shí)，我們首先用移動(dòng)的交互，將滑塊跟隨鼠標(biāo)水平移動(dòng)，我們要增加一個(gè)移動(dòng)的邊界，左側(cè)開始滑塊的話邊界應(yīng)該是條形左側(cè)的x值，以及右側(cè)結(jié)束滑塊的位置，那這里我們有兩種不同的邏輯，看看是否需要留空隙，如果不需要留控制，右側(cè)邊界就是結(jié)束滑塊最右側(cè)的坐標(biāo)值，如果需要留間隙，右側(cè)邊界可以調(diào)整為借宿滑塊左側(cè)的坐標(biāo)值。

鼠標(biāo)拖動(dòng)有色結(jié)束滑塊的交互也是一樣的，只不過左右邊界變成左邊開始滑塊的坐標(biāo)值以及滑條最右邊的坐標(biāo)值。

如果不留間隙的話，這代表兩個(gè)滑塊可以重疊，重疊的時(shí)候就會(huì)出現(xiàn)有可能擋住下方滑塊，例如右側(cè)在左側(cè)滑塊的上方，我們先移動(dòng)了左側(cè)到達(dá)最右側(cè)和結(jié)束滑塊重疊，松手后，因?yàn)橛覀?cè)在上方，我們只能拖動(dòng)右側(cè)滑塊，因?yàn)檫吔绲南拗?，右?cè)滑塊就沒法移動(dòng)了，導(dǎo)致想移動(dòng)左側(cè)滑塊也不行，所以我們?cè)谕蟿?dòng)時(shí)，要將拖動(dòng)的滑塊置頂，這樣就可以避免這樣的問題了。

這樣就完成了兩個(gè)滑塊的移動(dòng)，接下來我們要根據(jù)兩個(gè)滑塊移動(dòng)的位置，設(shè)置藍(lán)條的位置和尺寸，我們分別用移動(dòng)事件和設(shè)置尺寸事件來完成。藍(lán)色滑條的高度是不變的，寬度就是開始和結(jié)束兩個(gè)滑塊之間的距離；位置就是開始滑塊的x坐標(biāo)值。

我們還要根據(jù)滑塊的位置設(shè)置對(duì)應(yīng)的分值區(qū)間，我們用設(shè)置文本的交互就可以，拖動(dòng)的是開始滑塊我們就設(shè)置左側(cè)分值區(qū)間，拖動(dòng)的是右側(cè)滑塊，我們?cè)O(shè)置右側(cè)的分值區(qū)間。按對(duì)應(yīng)比例設(shè)置就可以了，簡單來說就是滑塊的x坐標(biāo)值-滑條的x坐標(biāo)值和滑條長度的比值在乘以滿分值，例如滿分是100分，滑條長200，滑塊移動(dòng)到100的中間位置，此時(shí)的分值就是(200-100)/200*100=50分。這里面的結(jié)果有可能不是整數(shù)，我們就用tofixed四舍五入函數(shù)取整即可。

設(shè)置完分值之后，基本就完成了，但是我們需要考慮的是如果滿分值較小，例如是10分，因?yàn)槲覀兦懊嬗玫乃纳嵛迦耄院艽笠粋€(gè)方位會(huì)是同一個(gè)值，所以我們要根據(jù)數(shù)值，反推會(huì)對(duì)應(yīng)的分值的中心點(diǎn)位置。我們用移動(dòng)的交互，將開始滑塊和結(jié)束滑塊移動(dòng)回對(duì)應(yīng)的位置即可，這里的公式和上面的其實(shí)是一直的，上面是已知滑塊的x坐標(biāo)值求分值，現(xiàn)在是已知分值求滑塊的x坐標(biāo)值，我們移項(xiàng)就能解出來了。

最后我們還要考慮的是，滑塊一開始不在兩邊的情況，這里相當(dāng)于已經(jīng)拖動(dòng)過了，所以我們?cè)谳d入時(shí)，我們要根據(jù)兩個(gè)滑塊的位置，設(shè)置分值，以及藍(lán)條的尺寸和位置，這里和前面是一樣的，我們?cè)谳d入時(shí)觸發(fā)前面滑塊移動(dòng)的交互就可以了

這樣我們制作完成了，下次使用時(shí)，我們只需要根據(jù)實(shí)際需要修改滿分值里的數(shù)字，就可以自動(dòng)生成對(duì)應(yīng)的區(qū)間評(píng)分條，是不是很方便呢？

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。