數值步進器和滑桿怎麼選?
一句話做出判斷
數值步進器會用固定幅度增加或減少數字。滑桿會在一段範圍中選擇位置。
少量又精確的調整,用數值步進器。大概位置比精確輸入重要時,用滑桿;仍要顯示數字並支援鍵盤。
看看每個介面模式會做什麼
先試試每個例子,再看它適合處理什麼工作。
macOS Stepper
↗ macOS 步進器
macOS 步進器(Stepper)有增加與減少兩個按鈕,會用固定幅度調整有上下限的數值。
版面檢閱器把網格從四欄改成五欄。使用者不必手動輸入數字。
- 什麼時候用
- 當數值有上下限、每次調整幅度小而有意義,而且使用者通常只改一兩步時使用。
- 什麼時候不要用
- 避免用於寬廣或連續範圍、快速大幅調整,或在沒有數字欄位輔助時要求精確輸入與比較。
- 程式裡的名稱
AppKit NSStepper / SwiftUI Stepper
macOS Slider
↗ macOS 滑桿
macOS 滑桿(Slider)由軌道與可移動的滑塊組成,用來在固定範圍內自由調整數值,或依設定步幅調整,也可以顯示刻度。
聲音編輯器把音量從靜音調到最大。VoiceOver 也會讀出數值。
- 什麼時候用
- 當拖曳範圍並立刻看到結果有助於操作時使用。可提供連續範圍,或搭配清楚刻度與鍵盤操作的固定步幅。
- 什麼時候不要用
- 避免用於任意類別選項、無上限範圍、安全攸關的精度,或必須精確重現卻沒有同步數字欄位的數值。
- 程式裡的名稱
AppKit NSSlider / SwiftUI Slider
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| macOS 步進器macOS Stepper | 當數值有上下限、每次調整幅度小而有意義,而且使用者通常只改一兩步時使用。 | 避免用於寬廣或連續範圍、快速大幅調整,或在沒有數字欄位輔助時要求精確輸入與比較。 | AppKit NSStepper / SwiftUI Stepper |
| macOS 滑桿macOS Slider | 當拖曳範圍並立刻看到結果有助於操作時使用。可提供連續範圍,或搭配清楚刻度與鍵盤操作的固定步幅。 | 避免用於任意類別選項、無上限範圍、安全攸關的精度,或必須精確重現卻沒有同步數字欄位的數值。 | AppKit NSSlider / SwiftUI Slider |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫,也要能取得相同資訊。
- 04
放入真實內容,並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時,可以複製這段需求。
請在 macOS 步進器(macOS Stepper)、macOS 滑桿(macOS Slider) 中,為真實使用流程選出最合適的介面模式。判斷規則:數值步進器會用固定幅度增加或減少數字。滑桿會在一段範圍中選擇位置。。請寫下任務、內容量和打斷流程的代價,並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由,再沿用專案的設計系統,做出最小且無障礙的版本。