1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

「这个控件叫什么」系列之步进器+Switch--九分科技

时间:2020-06-25   分类:交互设计    作者:网络   来源:网络整理   点击:67

「这个控件叫什么」系列之步进器+Switch copyright 9fen.net

本文来自九分网络

@龙爪槐守望者 :鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

copyright 9fen.net

往期回顾:

内容采集来自9fen.net

《「这个控件叫什么」系列之小红点+索引导航+分段控件》 www.9fen.net

《「这个控件叫什么」系列之加载占位图+页面指示器》 九分网络

这个控件叫:Stepper/步进器

Stepper(步进器)由一个增加按钮、一个减少按钮和一个由按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字增长(或减少)的数量是恒定的。

www.9fen.net

「这个控件叫什么」系列之步进器+Switch

九分网络

九分网络

△ Stepper

www.9fen.net

如何使用

适用于数值精确的小范围调整 本文来自九分网络

移动端,iOS普遍用Picker(拾取器/波轮选择器)解决多选一的问题,Android则是用Dropdown menu(下拉菜单)或者Dialog(对话框)。但对于数值型数据(商品数量、投资比率、人数等等)的精确小范围调整,Stepper优于其他控件。国外有用户测试结果显示:相比Dropdown menu,用户更喜欢在机票预订App里用Stepper选择乘客人数,因为Stepper更直观用起来更快更简单。(本文来自九分网络

注意默认值和上限与下限 copyright 9fen.net

如果Stepper默认值离用户目标的数值越远,需要的点击次数越多。选择一个合理的默认值能帮助用户减少点击次数提升操作效率。此外,要注意考虑数值的上限与下限,在到达限制后禁用相关按钮。 copyright 9fen.net

「这个控件叫什么」系列之步进器+Switch

copyright 9fen.net

△ 下限与上限

九分网络

数字快捷修改

九分网络

如果对数值有大幅度调整的需求,可将数字改造成输入框,通过键盘快捷大幅度精确修改。

内容采集来自9fen.net

「这个控件叫什么」系列之步进器+Switch copyright 9fen.net

内容采集来自9fen.net

△ 淘宝截图

内容采集来自9fen.net

相关资料

Sliding Stepper(滑动式步进器)

内容采集来自9fen.net

在PC端Stepper的点击区域非常小不易操作,而且Stepper每次点击后数字变化太小,如果要调整数值远不如直接改输入框来得方便。国外有案例将Stepper和Slider(滑块/滚动条)相结合为Sliding Stepper,加和减被合并为一个按钮,点击按钮后出现垂直滚动条,通过操作垂直滚动条,调整数值会更快幅度更大,且可以观察数值对应的事物产生连续变化,非常适合图形设计软件。

内容采集来自9fen.net

详情可阅读:

www.9fen.net

「这个控件叫什么」系列之步进器+Switch

内容采集来自9fen.net

内容采集来自9fen.net

△ Sliding Stepper 九分网络

争议

Google在Material Design里把Stepper 定义为步骤指示器。(详细请阅读:https://material.io/guidelines/components/steppers.html

copyright 9fen.net

「这个控件叫什么」系列之步进器+Switch

www.9fen.net

www.9fen.net

△ Material design中的Stepper 本文来自九分网络

考虑到除Material Design以外的设计规范都将Stepper 定义为步进器,因此我觉得Material Design的称呼方法不是主流,建议大家用Step Indicator来称呼步骤指示器。

copyright 9fen.net

Switch/开关/滑动开关/切换开关

Switch(开关/滑动开关/切换开关)有两个互斥的选项(例如开/关、是/否、启动/禁用),它是用来打开或关闭选项的控件。选择其中一个选项会导致立即执行操作。 内容采集来自9fen.net

「这个控件叫什么」系列之步进器+Switch

内容采集来自9fen.net

本文来自九分网络

△ Switch copyright 9fen.net

如何使用

准确的Label(标签)

本文来自九分网络

标签: 经验分享 优设 优设网 交互设计 UI控件

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----