導(dǎo)語：評(píng)分控件是原型中常用的控件，主要有星級(jí)評(píng)分控件和評(píng)分條控件，由于axure自帶的元件庫里并沒有高保真的評(píng)分條控件，所以本期教程主要介紹如果制作評(píng)分條控件，方便我們?nèi)蘸蟮氖褂谩?/p>

一、制作完成后的評(píng)分條控件應(yīng)具備以下效果：

• 滑塊可以在評(píng)分區(qū)域內(nèi)左右滑動(dòng)
• 隨著滑塊滑動(dòng)，根據(jù)元快所在位置，自動(dòng)計(jì)算分?jǐn)?shù)
• 點(diǎn)擊滑條，讓元快到達(dá)點(diǎn)擊的位置，并自動(dòng)計(jì)算分?jǐn)?shù)
• 根據(jù)分?jǐn)?shù)的高低，整個(gè)評(píng)分條控件變色，低分區(qū)變成紅色，正常去為藍(lán)色，高分區(qū)為綠色。

二、制作材料

制作材料全部都是用axure原生的的材料，具體包括以下材料：

• 灰色滑條：背景滑條，使用矩形制作，圓角設(shè)置為最大，位置置底
• 藍(lán)色滑條：使用矩形制作，圓角設(shè)置為最大，交互樣式選中時(shí)為綠色，禁用時(shí)為紅色，稍后我們通過選中和禁用的交互令其變色。位置位于灰色滑條上方
• 透明滑條：僅用于交互處理，使用矩形制作，圓角設(shè)置為最大，選擇透明顏色，需要和灰色滑條大小一致，放置在藍(lán)色滑條上方
• 滑塊：使用圓形制作，調(diào)整邊框線大小，設(shè)置邊框線為藍(lán)色，交互樣式選中時(shí)邊框線為綠色，禁用時(shí)邊框線為紅色。
• 分值：使用矩形制作，右鍵變換形狀為成提示框形狀，交互樣式選中時(shí)為綠色，禁用時(shí)為紅色。
• 動(dòng)態(tài)面板：將滑塊和分值放置在動(dòng)態(tài)面板內(nèi)，因?yàn)橹挥袆?dòng)態(tài)面板才能實(shí)現(xiàn)拖動(dòng)效果，將動(dòng)態(tài)面板置于頂層。

如下圖所示擺放：

三、制作交互

1）滑動(dòng)效果——移動(dòng)事件

拖動(dòng)動(dòng)態(tài)面板時(shí)，跟隨鼠標(biāo)水平移動(dòng)動(dòng)態(tài)面板，這里需要設(shè)置左右邊界，左側(cè)邊界要大于灰色滑條的x坐標(biāo)值-滑塊的坐標(biāo)值-滑塊寬度的一半；右側(cè)邊界要小于灰色滑條的x坐標(biāo)值+灰色滑條的寬度+滑塊的坐標(biāo)值+滑塊寬度的一半，這樣滑塊就可以在滑條內(nèi)水平拖動(dòng)了。

2）調(diào)整藍(lán)色滑條的寬度——設(shè)置尺寸

拖動(dòng)動(dòng)態(tài)面板時(shí)，我們需要根據(jù)滑塊的位置，設(shè)置藍(lán)色滑條的尺寸，高度是不變的，所以設(shè)置為target.height；寬是改變的，所以設(shè)置為藍(lán)色滑條的寬=動(dòng)態(tài)面板的坐標(biāo)值-藍(lán)色滑條的x坐標(biāo)值+滑塊的坐標(biāo)值+滑塊寬度的一半。

3）計(jì)算分值——設(shè)置文本

拖動(dòng)動(dòng)態(tài)面板時(shí)，我們還需要根據(jù)滑塊的位置，計(jì)算分值，首先我們要計(jì)算滑塊所在位置占滑條的比例=動(dòng)態(tài)面板的x坐標(biāo)值+滑塊的坐標(biāo)值+滑塊寬度的一半-灰色滑條的x坐標(biāo)值，然后除以灰色滑條的寬度。

計(jì)算出比例以后我們乘以滿分值（例如100），最后用tofixed的函數(shù)取整數(shù)就可以。

4）變色效果——選中、禁用事件

計(jì)算分?jǐn)?shù)完成后，我們根據(jù)不同的分值，設(shè)置藍(lán)色滑條的顏色。

案例中是低于33分邊紅色，33-66是藍(lán)色，66以上為綠色，你們可以根據(jù)實(shí)際需要設(shè)置交互，具體交互如下：

如果分值<33，禁用分值、滑塊、藍(lán)色滑動(dòng)條，因?yàn)榍懊嬖O(shè)置了這三個(gè)的禁用顏色為紅色，所以滿足這個(gè)條件就會(huì)變紅，如果不滿足該條件，啟用分值、滑塊、藍(lán)色滑動(dòng)條，啟用后將恢復(fù)原樣。

如果分值>66，選中分值、滑塊、藍(lán)色滑動(dòng)條，因?yàn)榍懊嬖O(shè)置了這三個(gè)的選中顏色為綠色，所以滿足這個(gè)條件就會(huì)變綠，如果不滿足該條件，取消選中分值、滑塊、藍(lán)色滑動(dòng)條，取消選中后將恢復(fù)原樣。

5）點(diǎn)擊滑條移動(dòng)滑塊到指定位置

先移動(dòng)動(dòng)態(tài)面板到鼠標(biāo)點(diǎn)擊的地方，這里就要用到Cursor.x，就是鼠標(biāo)所在位置的x坐標(biāo)，再減去動(dòng)態(tài)面板一半的寬度。

在設(shè)置藍(lán)色滑條的尺寸，藍(lán)色滑條的寬=動(dòng)態(tài)面板的坐標(biāo)值-藍(lán)色滑條的x坐標(biāo)值+滑塊的坐標(biāo)值+滑塊寬度的一半。

然后設(shè)置分值，和之前計(jì)算分值的方式是一致的，先計(jì)算滑塊所在位置占滑條的比例=動(dòng)態(tài)面板的x坐標(biāo)值+滑塊的坐標(biāo)值+滑塊寬度的一半-灰色滑條的x坐標(biāo)值，然后除以灰色滑條的寬度。計(jì)算出比例以后我們乘以滿分值（例如100），最后用tofixed的函數(shù)取整數(shù)就可以。

最后同樣是根據(jù)分值來變色，條件、交互和上面完全一致，我們直接復(fù)制過來即可：

如果分值<33，禁用分值、滑塊、藍(lán)色滑動(dòng)條，因?yàn)榍懊嬖O(shè)置了這三個(gè)的禁用顏色為紅色，所以滿足這個(gè)條件就會(huì)變紅，如果不滿足該條件，啟用分值、滑塊、藍(lán)色滑動(dòng)條，啟用后將恢復(fù)原樣。

如果分值>66，選中分值、滑塊、藍(lán)色滑動(dòng)條，因?yàn)榍懊嬖O(shè)置了這三個(gè)的選中顏色為綠色，所以滿足這個(gè)條件就會(huì)變綠，如果不滿足該條件，取消選中分值、滑塊、藍(lán)色滑動(dòng)條，取消選中后將恢復(fù)原樣。

以上就是高保真滑動(dòng)評(píng)分條的制作方法了，感興趣的同學(xué)們可以動(dòng)手試試，謝謝您的閱讀。

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

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