滑動輸入條的定義及應用場景
滑動輸入條是一種滑動型輸入器，展示當前值和可選範圍。當用戶需要在數值區間/自定義區間內進行選擇時，可使用滑動輸入條，選擇的值可為連續值或離散值。滑動輸入條的使用方法很簡單，只需要拖動滑桿上的滑塊便可以選擇輸入值，一般運用在多媒體播放器中，可用來調節音量大小或視頻進度等具有固定範圍值的輸入場景。本期內容主要分享如何利用Axure製作滑動輸入條這一交互組件。
演示地址（點擊右側藍色文字） ：
打開頁面後，點擊左側目錄“滑動輸入條”，查看演示效果。
連續型滑動輸入條
連續型示意圖
繪製線框圖
上圖為滑動輸入條的示意圖，使用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基礎教程、交互案例以及經驗技巧，並不定期贈送各種資源福利，包含：系統組件庫、頁面模板、實戰案例等。
閱讀更多 Axure原型設計 的文章
