@龍爪槐守望者 ：鑒于國內交互設計名詞混亂不統一，很多設計師不知道如何用專業術語稱呼一個控件，因此我開了《這個控件叫什么》專題，梳理控件的名稱和使用事項，希望能為推動交互設計發展，做出一點微小的貢獻。

往期回顧：

1. 《「這個控件叫什么」系列之小紅點+索引導航+分段控件》
2. 《「這個控件叫什么」系列之加載占位圖+頁面指示器》

這個控件叫：Stepper/步進器

Stepper（步進器）由一個增加按鈕、一個減少按鈕和一個由按鈕控制的數值組成。每次點擊增加按鈕（或減少按鈕）數字增長（或減少）的數量是恒定的。

△ Stepper

如何使用

適用于數值精確的小范圍調整

在移動端，iOS普遍用Picker（拾取器/波輪選擇器）解決多選一的問題，Android則是用Dropdown menu（下拉菜單）或者Dialog（對話框）。但對于數值型數據（商品數量、投資比率、人數等等）的精確小范圍調整，Stepper優于其他控件。國外有用戶測試結果顯示：相比Dropdown menu，用戶更喜歡在機票預訂App里用Stepper選擇乘客人數，因為Stepper更直觀用起來更快更簡單。（http://lukew_img.s3.amazonaws.com/LukeW_FlightBooking.pdf）

注意默認值和上限與下限

如果Stepper默認值離用戶目標的數值越遠，需要的點擊次數越多。選擇一個合理的默認值能幫助用戶減少點擊次數提升操作效率。此外，要注意考慮數值的上限與下限，在到達限制后禁用相關按鈕。

△ 下限與上限

數字快捷修改

如果對數值有大幅度調整的需求，可將數字改造成輸入框，通過鍵盤快捷大幅度精確修改。

△ 淘寶截圖

相關資料

Sliding Stepper（滑動式步進器）

在PC端Stepper的點擊區域非常小不易操作，而且Stepper每次點擊后數字變化太小，如果要調整數值遠不如直接改輸入框來得方便。國外有案例將Stepper和Slider（滑塊/滾動條）相結合為Sliding Stepper，加和減被合并為一個按鈕，點擊按鈕后出現垂直滾動條，通過操作垂直滾動條，調整數值會更快幅度更大，且可以觀察數值對應的事物產生連續變化，非常適合圖形設計軟件。

詳情可閱讀：http://uxmovement.com/forms/sliding-stepper-an-end-to-the-painful-clicking/

△ Sliding Stepper

爭議

Google在Material Design里把Stepper 定義為步驟指示器。（詳細請閱讀：https://material.io/guidelines/components/steppers.html ）

△ Material design中的Stepper

考慮到除Material Design以外的設計規范都將Stepper 定義為步進器，因此我覺得Material Design的稱呼方法不是主流，建議大家用Step Indicator來稱呼步驟指示器。

Switch/開關/滑動開關/切換開關

Switch（開關/滑動開關/切換開關）有兩個互斥的選項（例如開/關、是/否、啟動/禁用），它是用來打開或關閉選項的控件。選擇其中一個選項會導致立即執行操作。

△ Switch

如何使用

準確的Label（標簽）

由于Switch控件本身就能表現當前的開/關狀態，因此相關文案只需表示所控制內容，千萬不要在Lable中加入一些邏輯詞語。典型的反面教材就是Android 7.0的通知設置，雙重否定表示肯定，大多數人都把左圖的狀態當做當前App的通知是關閉的，實際上右圖才是關閉通知后的狀態。

△ Android 7.0 通知設置

清晰的開關狀態

Switch可以根據App視覺風格進行樣式修改，但一定要清晰的表示開關狀態，下圖的釘釘PC版，由于加了顯眼的顏色，很難第一眼分辨出這表示關的狀態。

△ 釘釘PC版

立即執行操作

Switch與RadioButton（單選按鈕）、CheckBox（復選框）最大的區別是：Switch操作后，程序立即執行相關操作。而RadioButton和CheckBox一般用在表單里，僅反映當前的選擇狀態，如果要執行操作并生效，需要點擊額外的提交按鈕。

△ Switch與RadioButton、CheckBox

危險操作二次確認

正是由于按下Switch后立即執行操作，如果操作比較危險，請在點擊開關后加入二次確認流程，避免造成嚴重損失。

△ iCloud

注意加載狀態

如果Switch所執行的操作需要與服務器交互，就必須考慮加載狀態了，例如剛進入頁面時，獲取Switch的狀態需要加載。如果改變Switch的狀態，需要與服務器交互，必須等待服務器返回成功指令后才能改變Switch的狀態，傳統的做法是為初次加載和操作后等待準備特定的樣式。

△ 加載等待

另外一種目前比較流行的策略是使用Optimistic UI（樂觀派UI，請參考http://colachan.com/post/3531 ），用戶操作Switch之后，Switch視覺上立即響應改變，然后再向服務器交互。微信朋友圈的點贊就是用的這個策略。Optimistic UI帶給用戶更流暢的體驗，當然，采取這一策略最好保證服務器在97%到99%以上的狀況下返回成功指令。

△ Optimistic UI

相關資料

Google Inbox的Pin樣式

Google Inbox右上角的Pinned樣式上很像Switch，實際上這是一個篩選工具，圖釘豎直表示只顯示Pin過的郵件。這給了我們啟發，可以在Switch的按鈕上增加視覺效果，表現Switch當前狀態所代表的含義。

△ Google Inbox Pin

QQ音樂Android版的流暢度設置

QQ音樂Android版的設置項中有流暢度設置，關閉相關效果可提升流暢度和減少耗電。通常來說Switch打開有啟用的含義，帶有一點正面的褒義效果。QQ音樂卻反過來了，Switch關閉有褒義的鼓勵含義——關閉更流暢。

△ QQ音樂Android版，流暢度設置

本節先更新2個小科普，后面優設會持續更新，想提前學習的可以關注作者的微信公眾號：

「新人科普好文系列」

1. 交互原型丨《術語小科普！聊聊線框稿、視覺稿與原型的區別》
2. 移動端尺寸丨《通俗易懂！超全面的移動端尺寸基礎知識科普指南》
3. 字體規范丨《界面設計必備！全方位科普常用的字體規范（附神器）》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com