滑動輸入條的定義及應用場景
滑動輸入條是一種滑動型輸入器，展示當前值和可選範圍。當用戶需要在數值區間/自定義區間內進行選擇時，可使用滑動輸入條，選擇的值可為連續值或離散值。滑動輸入條的使用方法很簡單，只需要拖動滑桿上的滑塊便可以選擇輸入值，一般運用在多媒體播放器中，可用來調節音量大小或影片進度等具有固定範圍值的輸入場景。本期內容主要分享如何利用Axure製作滑動輸入條這一互動元件。
演示地址（點選右側藍色文字） ：AxureShop原型演示
開啟頁面後，點選左側目錄“滑動輸入條”，檢視演示效果。
連續型滑動輸入條
連續型示意圖
繪製線框圖
上圖為滑動輸入條的示意圖，使用Axure快速完成線框圖的繪製。拖動一個矩形，設定填充色為灰色，尺寸為500x10，圓角半徑設定為250，該矩形作為滑動條的背景，滑動範圍取決於此背景的長度。複製矩形，將其填充色設定為藍色，並將其轉換為動態面板，與背景進行左對齊，上下居中對齊。第二個矩形作為輸入條，視覺上反應了輸入值的大小，類似於進度條。預設情況下將輸入條的寬度設定為1。
拖動一個圓，設定半徑為21，邊框線寬度設定為2個畫素，邊框線顏色設定為藍色，將圓轉換為動態面板，作為拖動的滑塊，拖動這個滑塊可以控制輸入的值。拖動一個矩形至滑塊的上方，矩形尺寸設定為40x35，將矩形變換為上圖中一邊帶有三角形的不規則形狀。此形狀用於顯示輸入的數值，我們稱之為輸入值，在形狀中輸入預設值0。
製作互動效果
01 拖動滑塊
當拖動滑塊時，會發生以下幾個互動效果：
滑塊在背景範圍內移動
輸入條長度發生變化
輸入值生變化，輸入值與滑塊同步水平移動
使用者拖動滑塊這個動作可以利用“拖動時”事件來完成，首先為滑塊新增“拖動時”事件。
效果1：我們可以利用left和right函式來控制滑塊的移動範圍，使得滑塊的移動範圍不會超出背景的左右兩側。方法已經找到了，下面我們開始設定互動。為拖動事件新增動作“
移動
”，設定滑塊為跟隨水平拖動，設定移動邊界為大於背景的左側，小於背景的右側。互動配置如下圖所示。
控制移動範圍
效果2：為滑塊拖動事件新增第二個動作“
設定尺寸
”，設定輸入條的寬度為［［LVAR1。right-LVAR2。left-2］］，其中變數LVAR1為滑塊，LVAR2為輸入條。高度保持不變，表示式為Target。height，Target意為動作物件。
補充說明：設定寬度的時候為什麼要減去2個畫素呢？因為滑塊是圓形，如果這裡不減少2個畫素，視覺上會造成輸入條寬度超出了滑塊右側邊緣。
輸入條寬度
輸入條高度不變
效果3：為滑塊拖動事件新增第三個動作“
設定文字
”，設定輸入值的表示式為［［Math。ceil（LVAR1。width/LVAR2。width*100）］］%，其中變數LVAR1為輸入條、LVAR2為背景，Math。ceil為向上取整函式，獲取大於或者等於指定數值的最小整數。這裡我們假設輸入的值為百分比。
設定輸入值
新增第四個動作“移動”，水平移動輸入值至滑塊上方，互動設定如下圖所示，This為事件物件，Target為動作物件。
移動輸入值
滑塊拖動事件的完整互動配置如下圖所示：
滑塊拖動時互動配置
02 滑鼠移入與移出
滑鼠移入至滑塊時，顯示輸入值；滑鼠從滑塊移出時，隱藏輸入值。
這兩個互動實現起來就比較容易了。選中滑塊，為滑塊新增滑鼠移入事件，新增動作“顯示/隱藏”，顯示輸入值；為滑塊新增滑鼠移出事件，新增動作“顯示/隱藏”，隱藏滑塊。互動配置如下圖所示。
輸入值的顯示與隱藏
到這裡，一個基礎的連續型滑動輸入條原型就製作完成了，預覽下，驗證我們配置的互動效果吧！
離散型滑動輸入條
離散型示意圖
繪製線框圖
離散型的特點是輸入的值是非連續的，是事先定義好的幾個固定值。上圖為離散型輸入條的示意圖，使用Axure快速完成線框圖的繪製。
拖動一個矩形，設定填充色為灰色，尺寸為500x10，圓角半徑設定為250，該矩形作為滑動條的背景，滑動範圍取決於此背景的長度。複製矩形，將其填充色設定為藍色，並將其轉換為動態面板，與背景進行左對齊，上下居中對齊。第二個矩形作為輸入條，視覺上反應了輸入值的大小，類似於進度條。預設情況下將輸入條的寬度設定為1。
拖動一個圓，設定半徑為21，邊框線寬度設定為2個畫素，邊框線顏色設定為藍色，將圓轉換為動態面板，作為拖動的滑塊，拖動這個滑塊可以控制輸入值。在背景上新增5個小圓，圓半徑為10，邊框線寬度設定為2個畫素，邊框線顏色設定為灰色，注意邊框線的灰色與背景的灰色不同。將這5個圓等距離分佈在背景上方，這5個圓作為輸入的節點，每一個節點都代表了一個固定的輸入值。
拖動一個矩形至滑塊的上方，矩形尺寸設定為40x35，將矩形變換為上圖中一邊帶有三角形的不規則形狀。此形狀用於顯示輸入的數值，我們稱之為輸入值，在形狀中輸入預設值0。
製作互動效果
拖動滑塊時，有以下幾個互動效果：
滑塊移動至附近的節點處
輸入條長度發生變化
輸入值生變化，輸入值與滑塊同步水平移動
下面我們來分析如何實現這幾個效果，這幾個效果是同步發生的，滑塊的位置同時也影響了後面的兩個效果。所以我們需要統籌綜合考慮這三個效果。
首先我們需要判斷滑塊當前所處的位置，然後才能知道附近的節點是哪一個。根據滑塊移動後的節點位置，就可以方便的計算出輸入條的長度以及輸入值。滑塊拖動後的位置也與拖動方向有關，所以使用者的拖動動作可以拆分為兩個，一個是向右拖動，另一個是向左拖動。
01 向右拖動滑塊
向右拖動滑塊，我們可以利用動態面板的向右拖動結束事件，首先為滑塊新增“向右拖動結束時”事件。示意圖中有5個節點，拖動滑塊時將會停靠在這5個位置。假設滑塊處於背景的最左側，這個時候向右拖動滑塊時，滑塊移動至節點1的位置，輸入條的長度也延伸至節點1位置，輸入值為20%，輸入值元件水平移至滑塊的上方。互動配置如下圖所示。
情行條件中變數LVAR1位節點1。第一個“移動”動作配置中，LVAR1為滑塊，LVAR2為節點1，表示式［［LVAR2。x-（LVAR1。width-LVAR2。width）/2］］主要用來將節點1與滑塊進行居中對齊；“設定尺寸”動作中的變數LVAR1為節點1，LVAR2為背景。
滑塊處於背景左側
新增第二個情形，當滑塊處於節點1與節點2中間時，移動滑塊至節點2位置，輸入條的長度延長至節點2位置，輸入值為40%，輸入值水平移至滑塊上方，互動配置如下圖所示。情形條件中的第一個變數LVAR1為節點2，第二個LVAR1為節點1。“移動”動作中的變數LVAR1為滑塊，變數LVAR2為節點2。“設定尺寸”動作中的變數LVAR1為節點2，變數LVAR2為背景。
滑塊位於節點1與節點2中間
以此類推，滑塊處於節點2與節點3之間時，移動滑塊至節點3位置，輸入條的長度延長至節點3位置，輸入值為60%，輸入值水平移至滑塊上方；滑塊處於節點3與節點4之間時，移動滑塊至節點4位置，輸入條長度延長至節點4位置，輸入值為80%，輸入值水平移至滑塊上方；滑塊處於節點4與節點5之間時，移動滑塊至節點5位置，輸入條長度延長至節點5位置，輸入值為100%，輸入值水平移至滑塊上方。這3種情況的互動設定如下面三幅圖所示。
滑塊位於節點2和節點3之間
滑塊位於節點3和節點4之間
滑塊位於節點4和節點5之間
02 向左拖動滑塊
剛才我們分析了向右拖動操作，下面再來分析向左拖動操作，向左拖動這一操作可以利用動態面板的“向左拖動結束時”事件，首先為滑塊新增“向左拖動結束時”事件。
如果滑塊處於節點4的右側，則滑塊移動至節點4位置，輸入條的長度縮短至節點4位置，輸入值為80%，輸入值水平向左移動至滑塊上方，互動設定如下圖所示。
情形表示式中的變數LVAR1為節點4；第一個“移動”動作當中的變數LVAR1為節點4；“設定尺寸”動作當中的變數LVAR1為節點4，變數LVAR2為背景。
滑塊位於節點4右側
新增第二個情形，當滑塊處於節點3與節點4中間時，移動滑塊至節點3的位置，輸入條的長度縮短至節點3位置，輸入值為60%，輸入值水平向左移至滑塊上方。互動配置如下圖所示。情形條件中的第一個變數LVAR1為節點3，第二個LVAR1為節點4。“移動”動作中的變數LVAR1為節點3。“設定尺寸”動作中的變數LVAR1為節點3，變數LVAR2為背景。
滑塊位於節點3和節點4之間
以此類推，滑塊處於節點2與節點3之間時，移動滑塊至節點2位置，輸入條的長度縮短至節點2位置，輸入值為40%，輸入值水平移至滑塊上方；滑塊處於節點1與節點2之間時，移動滑塊至節點1位置，輸入條長度縮短至節點1位置，輸入值為20%，輸入值水平移至滑塊上方；滑塊處於背景左側與節點1之間時，移動滑塊至背景左側位置，輸入條長度為1，回到背景左側起始位置，輸入值為0，輸入值移至滑塊上方。這3種情況的互動設定如下面三幅圖所示。
滑塊位於節點2和節點3之間
滑塊位於節點1和節點2之間
滑塊位於背景左側和節點1之間
03 滑鼠移入與移出
滑鼠移入至滑塊時，顯示輸入值；滑鼠從滑塊移出時，隱藏輸入值。
選中滑塊，為滑塊新增滑鼠移入事件，新增動作“顯示/隱藏”，顯示輸入值；為滑塊新增滑鼠移出事件，新增動作“顯示/隱藏”，隱藏滑塊。互動配置如下圖所示。
輸入值的顯示與隱藏
好了，到這裡離散型滑動輸入條的互動原型已經制作完成，點選預覽檢視原型互動效果。
思考小結
滑動輸入條的互動看似步驟繁多，但梳理清楚實現思路，還是比較容易製作的。遇到這類複雜的互動效果，首先我們要分析使用者做了幾個操作，使用者的操作通常都會對應一個事件或多個事件的配合。使用者的每一個操作，觸發幾個互動效果，這裡就需要我們抽絲剝繭，進行更細緻的分析。觀察到的每一個互動效果，都可以透過Axure當中的某一個動作實現。
看完上面的內容，希望對大家能夠有所幫助，你的收穫就是我的滿意。在這裡給大家出一個思考題，如果這個滑動輸入條，支援手動輸入值，那麼該如何實現呢？
關注並轉發後，可
私信關鍵字“滑動輸入”可獲取本節課案例的原始檔。
【Axure原型設計】專注分享Axure基礎教程、互動案例以及經驗技巧，並不定期贈送各種資源福利，包含：系統元件庫、頁面模板、實戰案例等。
