这个控件叫: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来称呼步骤指示器。








《这个控件叫什么》专题

这个控件叫:Badge/徽标/小红点
这个控件叫:A-Z index/字母索引导航
这个控件叫:Segment Controls/分段控件(附录与Tabs的区别)
这个控件叫:Skeleton Screen/加载占位图
这个控件叫:Page Indicator/Page Controls/页面指示器
这个控件叫:Switch/开关/滑动开关/切换开关
Toast(吐司提示)的曾经、现在与未来
这个控件叫:Picker/选择器/拾取器
这个控件叫:Action Sheet/动作菜单/动作面板/行动列表
这个控件叫:Popover/气泡弹出框/弹出式气泡/气泡
这个控件叫:Text fields/输入框/文本框
这个控件可能叫:Notice Bar/通告栏

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,786评论 25 709
  • 朝朝起严妆,暮暮心寂凉。 君情无定所,妾心日日伤。 东君辞旧颜,西风纳新凉。 脂粉掩细纹,鬓发染微霜。 思君笑入眠...
    箬薏阅读 336评论 20 3
  • 镜中花 美 水中月 多美 是吗 恐怕只把美好映出 恐怕虚幻而且残缺 纷杂的人世啊 何尝不是
    海曲三少阅读 147评论 0 0
  • 我是风儿你是沙
    补喜欢阅读 206评论 0 0