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

往期回顧：

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

這個控件叫：Stepper/步進(jìn)器

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

△ Stepper

如何使用

適用于數(shù)值精確的小范圍調(diào)整

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

注意默認(rèn)值和上限與下限

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

△ 下限與上限

數(shù)字快捷修改

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

△ 淘寶截圖

相關(guān)資料

Sliding Stepper（滑動式步進(jìn)器）

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

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

△ Sliding Stepper

爭議

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

△ Material design中的Stepper

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

Switch/開關(guān)/滑動開關(guān)/切換開關(guān)

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

△ Switch

如何使用

準(zhǔn)確的Label（標(biāo)簽）

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

△ Android 7.0 通知設(shè)置

清晰的開關(guān)狀態(tài)

Switch可以根據(jù)App視覺風(fēng)格進(jìn)行樣式修改，但一定要清晰的表示開關(guān)狀態(tài)，下圖的釘釘PC版，由于加了顯眼的顏色，很難第一眼分辨出這表示關(guān)的狀態(tài)。

△ 釘釘PC版

立即執(zhí)行操作

Switch與RadioButton（單選按鈕）、CheckBox（復(fù)選框）最大的區(qū)別是：Switch操作后，程序立即執(zhí)行相關(guān)操作。而RadioButton和CheckBox一般用在表單里，僅反映當(dāng)前的選擇狀態(tài)，如果要執(zhí)行操作并生效，需要點擊額外的提交按鈕。

△ Switch與RadioButton、CheckBox

危險操作二次確認(rèn)

正是由于按下Switch后立即執(zhí)行操作，如果操作比較危險，請在點擊開關(guān)后加入二次確認(rèn)流程，避免造成嚴(yán)重?fù)p失。

△ iCloud

注意加載狀態(tài)

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

△ 加載等待

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

△ Optimistic UI

相關(guān)資料

Google Inbox的Pin樣式

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

△ Google Inbox Pin

QQ音樂Android版的流暢度設(shè)置

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

△ QQ音樂Android版，流暢度設(shè)置

本節(jié)先更新2個小科普，后面優(yōu)設(shè)會持續(xù)更新，想提前學(xué)習(xí)的可以關(guān)注作者的微信公眾號：

「新人科普好文系列」

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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