鑒于國內(nèi)交互設(shè)計名詞混亂不統(tǒng)一沪么，很多設(shè)計師不知道如何用專業(yè)術(shù)語稱呼一個控件，因此我開了《這個控件叫什么》專題寇漫，梳理控件的名稱和使用事項殉摔，希望能為推動交互設(shè)計發(fā)展，做出一點微小的貢獻(xiàn)逸月。
Stepper（步進(jìn)器）由一個增加按鈕碗硬、一個減少按鈕和一個由按鈕控制的數(shù)值組成。每次點擊增加按鈕（或減少按鈕）數(shù)字增長（或減少）的數(shù)量是恒定的肛响。
如何使用
適用于數(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以外的其他設(shè)計規(guī)范都將Stepper 定義為步進(jìn)器蚌吸，因此我覺得Material Design的稱呼方法不是主流，建議大家用Step Indicator來稱呼步驟指示器羹唠。
《這個控件叫什么》專題
這個控件叫：Badge/徽標(biāo)/小紅點
這個控件叫：A-Z index/字母索引導(dǎo)航
這個控件叫：Segment Controls/分段控件（附錄與Tabs的區(qū)別）
這個控件叫：Skeleton Screen/加載占位圖
這個控件叫：Page Indicator/Page Controls/頁面指示器
這個控件叫：Switch/開關(guān)/滑動開關(guān)/切換開關(guān)
Toast（吐司提示）的曾經(jīng)佩微、現(xiàn)在與未來
這個控件叫：Picker/選擇器/拾取器
這個控件叫：Action Sheet/動作菜單/動作面板/行動列表
這個控件叫：Popover/氣泡彈出框/彈出式氣泡/氣泡
這個控件叫：Text fields/輸入框/文本框
這個控件可能叫：Notice Bar/通告欄
