決策指南 · 02

數值步進器和滑桿怎麼選?

一句話做出判斷

數值步進器會用固定幅度增加或減少數字。滑桿會在一段範圍中選擇位置。

少量又精確的調整,用數值步進器。大概位置比精確輸入重要時,用滑桿;仍要顯示數字並支援鍵盤。

01

看看每個介面模式會做什麼

先試試每個例子,再看它適合處理什麼工作。

macOS Stepper

macOS 步進器

↗

macOS 步進器(Stepper)有增加與減少兩個按鈕,會用固定幅度調整有上下限的數值。

1 張票券
版面檢閱器把網格從四欄改成五欄。使用者不必手動輸入數字。
什麼時候用
當數值有上下限、每次調整幅度小而有意義,而且使用者通常只改一兩步時使用。
什麼時候不要用
避免用於寬廣或連續範圍、快速大幅調整,或在沒有數字欄位輔助時要求精確輸入與比較。
程式裡的名稱
AppKit NSStepper / SwiftUI Stepper
開啟完整指南
macOS Slider

macOS 滑桿

↗

macOS 滑桿(Slider)由軌道與可移動的滑塊組成,用來在固定範圍內自由調整數值,或依設定步幅調整,也可以顯示刻度。

聲音編輯器把音量從靜音調到最大。VoiceOver 也會讀出數值。
什麼時候用
當拖曳範圍並立刻看到結果有助於操作時使用。可提供連續範圍,或搭配清楚刻度與鍵盤操作的固定步幅。
什麼時候不要用
避免用於任意類別選項、無上限範圍、安全攸關的精度,或必須精確重現卻沒有同步數字欄位的數值。
程式裡的名稱
AppKit NSSlider / SwiftUI Slider
開啟完整指南
02

快速比較

介面模式最適合不適合程式裡的名稱
macOS 步進器macOS Stepper 當數值有上下限、每次調整幅度小而有意義,而且使用者通常只改一兩步時使用。 避免用於寬廣或連續範圍、快速大幅調整,或在沒有數字欄位輔助時要求精確輸入與比較。 AppKit NSStepper / SwiftUI Stepper
macOS 滑桿macOS Slider 當拖曳範圍並立刻看到結果有助於操作時使用。可提供連續範圍,或搭配清楚刻度與鍵盤操作的固定步幅。 避免用於任意類別選項、無上限範圍、安全攸關的精度,或必須精確重現卻沒有同步數字欄位的數值。 AppKit NSSlider / SwiftUI Slider
03

上線前檢查

  1. 01

    先寫下使用者要完成什麼事。

  2. 02

    測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。

  3. 03

    不用滑鼠停留或動畫,也要能取得相同資訊。

  4. 04

    放入真實內容,並在小螢幕和大螢幕上測試。

04

可以直接複製的比較需求

團隊還不知道該選哪一種介面模式時,可以複製這段需求。

請在 macOS 步進器(macOS Stepper)、macOS 滑桿(macOS Slider) 中,為真實使用流程選出最合適的介面模式。判斷規則:數值步進器會用固定幅度增加或減少數字。滑桿會在一段範圍中選擇位置。。請寫下任務、內容量和打斷流程的代價,並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由,再沿用專案的設計系統,做出最小且無障礙的版本。

自行複製

瀏覽器無法自動複製。請選取下方文字,再自行複製。