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

往期回顧：

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

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

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

△ Stepper

如何使用

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

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

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

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

△ 下限與上限

數(shù)字快捷修改

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

△ 淘寶截圖

相關(guān)資料

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

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

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

△ Sliding Stepper

爭(zhēng)議

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

△ Material design中的Stepper

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

Switch/開(kāi)關(guān)/滑動(dòng)開(kāi)關(guān)/切換開(kāi)關(guān)

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

△ Switch

如何使用

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

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

△ Android 7.0 通知設(shè)置

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

Switch可以根據(jù)App視覺(jué)風(fēng)格進(jìn)行樣式修改，但一定要清晰的表示開(kāi)關(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í)行操作并生效，需要點(diǎn)擊額外的提交按鈕。

△ Switch與RadioButton、CheckBox

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

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

△ iCloud

注意加載狀態(tài)

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

△ 加載等待

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

△ Optimistic UI

相關(guān)資料

Google Inbox的Pin樣式

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

△ Google Inbox Pin

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

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

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

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

「新人科普好文系列」

1. 交互原型丨《術(shù)語(yǔ)小科普！聊聊線框稿、視覺(jué)稿與原型的區(qū)別》
2. 移動(dòng)端尺寸丨《通俗易懂！超全面的移動(dòng)端尺寸基礎(chǔ)知識(shí)科普指南》
3. 字體規(guī)范丨《界面設(shè)計(jì)必備！全方位科普常用的字體規(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"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com