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

導語：評分控件是原型中常用的控件，主要有星級評分控件和評分條控件，由于axure自帶的元件庫里并沒有高保真的評分條控件，所以本期教程主要介紹如果制作評分條控件，方便我們日后的使用。

一、制作完成后的評分條控件應具備以下效果：

• 滑塊可以在評分區域內左右滑動
• 隨著滑塊滑動，根據元快所在位置，自動計算分數
• 點擊滑條，讓元快到達點擊的位置，并自動計算分數
• 根據分數的高低，整個評分條控件變色，低分區變成紅色，正常去為藍色，高分區為綠色。

二、制作材料

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

• 灰色滑條：背景滑條，使用矩形制作，圓角設置為最大，位置置底
• 藍色滑條：使用矩形制作，圓角設置為最大，交互樣式選中時為綠色，禁用時為紅色，稍后我們通過選中和禁用的交互令其變色。位置位于灰色滑條上方
• 透明滑條：僅用于交互處理，使用矩形制作，圓角設置為最大，選擇透明顏色，需要和灰色滑條大小一致，放置在藍色滑條上方
• 滑塊：使用圓形制作，調整邊框線大小，設置邊框線為藍色，交互樣式選中時邊框線為綠色，禁用時邊框線為紅色。
• 分值：使用矩形制作，右鍵變換形狀為成提示框形狀，交互樣式選中時為綠色，禁用時為紅色。
• 動態面板：將滑塊和分值放置在動態面板內，因為只有動態面板才能實現拖動效果，將動態面板置于頂層。

如下圖所示擺放：

三、制作交互

1）滑動效果——移動事件

拖動動態面板時，跟隨鼠標水平移動動態面板，這里需要設置左右邊界，左側邊界要大于灰色滑條的x坐標值-滑塊的坐標值-滑塊寬度的一半；右側邊界要小于灰色滑條的x坐標值+灰色滑條的寬度+滑塊的坐標值+滑塊寬度的一半，這樣滑塊就可以在滑條內水平拖動了。

2）調整藍色滑條的寬度——設置尺寸

拖動動態面板時，我們需要根據滑塊的位置，設置藍色滑條的尺寸，高度是不變的，所以設置為target.height；寬是改變的，所以設置為藍色滑條的寬=動態面板的坐標值-藍色滑條的x坐標值+滑塊的坐標值+滑塊寬度的一半。

3）計算分值——設置文本

拖動動態面板時，我們還需要根據滑塊的位置，計算分值，首先我們要計算滑塊所在位置占滑條的比例=動態面板的x坐標值+滑塊的坐標值+滑塊寬度的一半-灰色滑條的x坐標值，然后除以灰色滑條的寬度。

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

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

計算分數完成后，我們根據不同的分值，設置藍色滑條的顏色。

案例中是低于33分邊紅色，33-66是藍色，66以上為綠色，你們可以根據實際需要設置交互，具體交互如下：

如果分值<33，禁用分值、滑塊、藍色滑動條，因為前面設置了這三個的禁用顏色為紅色，所以滿足這個條件就會變紅，如果不滿足該條件，啟用分值、滑塊、藍色滑動條，啟用后將恢復原樣。

如果分值>66，選中分值、滑塊、藍色滑動條，因為前面設置了這三個的選中顏色為綠色，所以滿足這個條件就會變綠，如果不滿足該條件，取消選中分值、滑塊、藍色滑動條，取消選中后將恢復原樣。

5）點擊滑條移動滑塊到指定位置

先移動動態面板到鼠標點擊的地方，這里就要用到Cursor.x，就是鼠標所在位置的x坐標，再減去動態面板一半的寬度。

在設置藍色滑條的尺寸，藍色滑條的寬=動態面板的坐標值-藍色滑條的x坐標值+滑塊的坐標值+滑塊寬度的一半。

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

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

如果分值<33，禁用分值、滑塊、藍色滑動條，因為前面設置了這三個的禁用顏色為紅色，所以滿足這個條件就會變紅，如果不滿足該條件，啟用分值、滑塊、藍色滑動條，啟用后將恢復原樣。

如果分值>66，選中分值、滑塊、藍色滑動條，因為前面設置了這三個的選中顏色為綠色，所以滿足這個條件就會變綠，如果不滿足該條件，取消選中分值、滑塊、藍色滑動條，取消選中后將恢復原樣。

以上就是高保真滑動評分條的制作方法了，感興趣的同學們可以動手試試，謝謝您的閱讀。

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

題圖來自 Unsplash，基于CC0協議