滑桿的指導方針

滑桿控制項 (也稱為範圍控制項) 可讓使用者透過在軌道上點選—或來回擦選—的方式,設定指定範圍內的值。

滑桿控制項

垂直滑桿控制項

範例

說明標準滑桿控制項的螢幕擷取畫面

這是正確的控制項嗎?

如果您希望使用者能夠設定既定且連續的值 (例如音量或亮度),或是某個範圍的離散值 (例如螢幕解析度設定),可以使用滑桿。

當您知道使用者將值視為相對數量而不是數字值時,滑桿是很好的選擇。例如,使用者想要將音訊音量設定為低或中,而不是設定值為 2 或 5。

請不要為二元設定使用滑桿。請改用切換開關

這裡是決定是否使用滑桿時的一些其他考量因素:

  • 設定看起來是否像是相對數量?如果不是,請使用選項按鈕選取控制項
  • 設定是確實的已知數值嗎?如果是,請使用數值文字方塊
  • 使用者需要在變更設定時取得效果的即時回應嗎?如果是,請使用滑桿。例如,立即看到色調、飽和或光度值變更後的效果,能讓使用者更易於選擇色彩。
  • 設定的範圍是四或多個值嗎?如果不是,請使用選項按鈕
  • 使用者可以變更值嗎?滑桿適用於使用者互動。如果使用者無法變更值,請改用唯讀文字。

如果您正在決定使用滑桿或數值文字方塊,則在下列情況下請使用數值文字方塊:

  • 螢幕空間很小。
  • 使用者似乎慣於使用鍵盤。

如果是下列情況,請使用滑桿:

  • 使用者可受益於立即回應。

建議

  • 調整控制項的大小,方便使用者設定想要的值。 設定分散值時,確定使用者可輕鬆地使用滑鼠選取任何值。確定滑桿的端點永遠在檢視邊界內。
  • 在使用者選取時或選取後提供立即回饋 (可行的話)。例如,Windows 音量控制項發出嗶聲,指示所選取的音訊音量。
  • 使用標籤顯示值的範圍。 例外:如果滑桿是垂直方向,而頂端標籤為最大、高、多或對等值,則您可以省略其他標籤,因為意思已經很清楚了。
  • 停用滑桿時,也會停用所有相關聯的標籤或視覺回饋。
  • 設定滑桿的滑動方向和 (或) 方向時,請考慮文字的閱讀方向。有些語言中的指令碼是從左至右閱讀,有些語言則是右至左。
  • 不要使用滑桿做為進度指示器。
  • 不要變更預設的滑桿縮圖大小。
  • 如果值的範圍很大而且使用者很可能從範圍中的數個具有代表性的值選擇時,請不要建立連續滑桿。 而是將這些值做為允許選擇的間距。例如,如果時間值可能長達 1 個月,但使用者只需要從 1 分鐘、1 小時、1 天或 1 個月中挑選,那麼請建立只有 4 個間距點的滑桿。

其他用法指導方針

選擇正確的配置:水平或垂直

您可以將滑桿的方向設定為水平或垂直。使用這些指導方針來決定要使用哪種配置。

  • 使用原有的方向。例如,如果滑桿表示真實世界中通常會垂直顯示的值 (例如溫度),請使用垂直方向。
  • 如果控制項是用來在媒體 (如視訊應用程式) 進行搜尋,請使用水平方向。
  • 在可以朝某個方向 (水平或垂直) 平移的頁面中使用滑桿時,滑桿的方向應該與平移方向不同。 否則,使用者可能在嘗試移動瀏覽頁面時撥動到滑桿而不小心變更到值。
  • 如果您仍然不確定要使用哪個方向,請使用最適合您頁面配置的方向。

範圍方向的指導方針

範圍方向是指您從目前值將滑桿滑動到最大值時,移動滑桿的方向。

  • 若是垂直滑桿,無論讀取方向為何,請在滑桿頂端放入最大值。例如音量滑桿,永遠將最大音量設定放在滑桿的頂端。至於其他類型的值 (例如每週的天數),請按照頁面的閱讀方向。
  • 若是水平樣式,在從左到右的頁面配置中,請將較低值放在滑桿的左側,在從右到左的頁面配置中則放在滑桿右側。
  • 上述指導方針的一個例外是媒體搜尋列:永遠將較低的值放置在滑桿的左邊。

階段和刻度標記的指導方針

  • 如果您不希望在滑桿的最小值和最大值之間允許任意值,請使用間距點。例如,如果您使用滑桿來指定要購買的電影票張數,請不要允許浮點數值。請將間距值指定為 1。
  • 如果您指定間距 (也稱作貼齊點),請確認最後一個間距對齊滑桿的最大值。
  • 當您想要對使用者顯示主要或重要值的位置時,請使用刻度標記。例如,控制縮放的滑桿可以包含 50%、100% 及 200% 的刻度標記。
  • 當使用者需要知道設定的近似值時,請顯示刻度標記。
  • 當使用者需要知道所選擇設定的確實值,不需與控制項互動時,請顯示刻度和值標籤。或者,使用者可以使用值工具提示查看確實值。
  • 當間距點不明顯時,請一律使用刻度標記。例如,如果滑桿的寬度為 200 像素且具有 200 個貼齊點,您可以隱藏刻度標記,因為使用者不會注意到貼齊行為。但是如果僅有 10 個貼齊點時,請顯示刻度標記。

標籤的指導方針

  • 滑桿標籤

    滑桿標籤指示滑桿的用途。

    • 使用標籤,但不包含結尾標點符號 (這是所有控制項標籤慣例)。
    • 如果滑桿將其大部分的標籤放在控制項上方,則將標籤放置在滑桿上方。
    • 如果滑桿將大部分標籤放在控制項的旁邊,則將標籤放置在滑桿兩側。
    • 避免將標籤放置在滑桿下方,因為使用者在觸控滑桿時,手指有可能會誤觸標籤。
  • 範圍標籤

    範圍或填滿標籤描述滑桿的最小值及最大值。

    • 在滑桿範圍的兩端建立標籤,如果是垂直方向,則不需要建立標籤。
    • 如果可能的話,每個標籤僅使用一個字。
    • 請勿使用結束標點符號。
    • 確定這些標籤為描述性文字,而且平行放置。範例:最大/最小、多/少、低/高、小聲/大聲。
  • 值標籤

    值標籤顯示滑桿目前的值。

    • 如果您需要值標籤,請將它顯示在滑桿下方。
    • 把文字放在與控制項相對的位置中間並包括單位 (例如像素)。
    • 因為擦選時會蓋住滑桿的捲動方塊,所以請考慮以其他方式 (使用標籤或其他視覺物件) 來顯示目前的值。滑桿設定文字大小可以在滑桿旁呈現一些正確大小的範例文字。

外觀和互動

滑桿是由軌道和捲動方塊組成。軌道是一個列 (可選擇性顯示各種樣式的刻度記號),代表可以輸入的值範圍。捲動方塊則是選取器,使用者點選軌道或在上面來回擦選即可定位。

滑桿具有大型觸控目標。為了維持觸控存取性,滑桿應該放置在離顯示邊緣夠遠的距離。

設計自訂滑桿的時候,請考慮以盡可能不擁擠的方式為使用者呈現所有的資訊。如果使用者需要知道單位才能了解設定,請使用值標籤;找出充滿創意的方式用圖形呈現這些值。例如,控制音量的滑桿可以在滑桿的音量最低處顯示沒有音波的喇叭圖形,而在音量最高處顯示有音波的喇叭圖形。

相關主題

適用於設計者
切換開關的指導方針
適用於開發人員 (XAML)
Slider class
適用於開發人員 (HTML)
input type=range element | input type=range object

 

 

顯示:
© 2015 Microsoft