鑒于國內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一，很多設(shè)計(jì)師不知道如何用專業(yè)術(shù)語稱呼一個(gè)控件，因此我開了《這個(gè)控件叫什么》專題，梳理控件的名稱和使用事項(xiàng)，希望能為推動(dòng)交互設(shè)計(jì)發(fā)展，做出一點(diǎn)微小的貢獻(xiàn)。
Stepper（步進(jìn)器）由一個(gè)增加按鈕、一個(gè)減少按鈕和一個(gè)由按鈕控制的數(shù)值組成。每次點(diǎn)擊增加按鈕（或減少按鈕）數(shù)字增長(zhǎng)（或減少）的數(shù)量是恒定的。
如何使用
適用于數(shù)值精確的小范圍調(diào)整
在移動(dòng)端，iOS普遍用Picker（拾取器/波輪選擇器）解決多選一的問題，Android則是用Dropdown menu（下拉菜單）或者Dialog（對(duì)話框）。但對(duì)于數(shù)值型數(shù)據(jù)（商品數(shù)量、投資比率、人數(shù)等等）的精確小范圍調(diào)整，Stepper優(yōu)于其他控件。國外有用戶測(cè)試結(jié)果顯示：相比Dropdown menu，用戶更喜歡在機(jī)票預(yù)訂App里用Stepper選擇乘客人數(shù)，因?yàn)镾tepper更直觀用起來更快更簡(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ān)資料
- Sliding Stepper（滑動(dòng)式步進(jìn)器）
在PC端Stepper的點(diǎn)擊區(qū)域非常小不易操作，而且Stepper每次點(diǎn)擊后數(shù)字變化太小，如果要調(diào)整數(shù)值遠(yuǎn)不如直接改輸入框來得方便。國外有案例將Stepper和Slider（滑塊/滾動(dòng)條）相結(jié)合為Sliding Stepper，加和減被合并為一個(gè)按鈕，點(diǎn)擊按鈕后出現(xiàn)垂直滾動(dòng)條，通過操作垂直滾動(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以外的其他設(shè)計(jì)規(guī)范都將Stepper 定義為步進(jìn)器，因此我覺得Material Design的稱呼方法不是主流，建議大家用Step Indicator來稱呼步驟指示器。
《這個(gè)控件叫什么》專題
這個(gè)控件叫：Badge/徽標(biāo)/小紅點(diǎn)
這個(gè)控件叫：A-Z index/字母索引導(dǎo)航
這個(gè)控件叫：Segment Controls/分段控件（附錄與Tabs的區(qū)別）
這個(gè)控件叫：Skeleton Screen/加載占位圖
這個(gè)控件叫：Page Indicator/Page Controls/頁面指示器
這個(gè)控件叫：Switch/開關(guān)/滑動(dòng)開關(guān)/切換開關(guān)
Toast（吐司提示）的曾經(jīng)、現(xiàn)在與未來
這個(gè)控件叫：Picker/選擇器/拾取器
這個(gè)控件叫：Action Sheet/動(dòng)作菜單/動(dòng)作面板/行動(dòng)列表
這個(gè)控件叫：Popover/氣泡彈出框/彈出式氣泡/氣泡
這個(gè)控件叫：Text fields/輸入框/文本框
這個(gè)控件可能叫：Notice Bar/通告欄
