• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 「这个控件叫什么」系列之步进器+Switch

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

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI控件,交互设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

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

往期回顾:

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》

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

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

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

△ Switch

如何使用

准确的Label(标签)

由于Switch控件本身就能表现当前的开/关状态,因此相关文案只需表示所控制内容,千万不要在Lable中加入一些逻辑词语。典型的反面教材就是Android 7.0的通知设置,双重否定表示肯定,大多数人都把左图的状态当做当前App的通知是关闭的,实际上右图才是关闭通知后的状态。

△ Android 7.0 通知设置

清晰的开关状态

Switch可以根据App视觉风格进行样式修改,但一定要清晰的表示开关状态,下图的钉钉PC版,由于加了显眼的颜色,很难第一眼分辨出这表示关的状态。

△ 钉钉PC版

立即执行操作

Switch与RadioButton(单选按钮)、CheckBox(复选框)最大的区别是:Switch操作后,程序立即执行相关操作。而RadioButton和CheckBox一般用在表单里,仅反映当前的选择状态,如果要执行操作并生效,需要点击额外的提交按钮。

△ Switch与RadioButton、CheckBox

危险操作二次确认

正是由于按下Switch后立即执行操作,如果操作比较危险,请在点击开关后加入二次确认流程,避免造成严重损失。

△ iCloud

注意加载状态

如果Switch所执行的操作需要与服务器交互,就必须考虑加载状态了,例如刚进入页面时,获取Switch的状态需要加载。如果改变Switch的状态,需要与服务器交互,必须等待服务器返回成功指令后才能改变Switch的状态,传统的做法是为初次加载和操作后等待准备特定的样式。

△ 加载等待

另外一种目前比较流行的策略是使用Optimistic UI(乐观派UI,请参考http://colachan.com/post/3531 ),用户操作Switch之后,Switch视觉上立即响应改变,然后再向服务器交互。微信朋友圈的点赞就是用的这个策略。Optimistic UI带给用户更流畅的体验,当然,采取这一策略最好保证服务器在97%到99%以上的状况下返回成功指令。

△ Optimistic UI

相关资料

Google Inbox的Pin样式

Google Inbox右上角的Pinned样式上很像Switch,实际上这是一个筛选工具,图钉竖直表示只显示Pin过的邮件。这给了我们启发,可以在Switch的按钮上增加视觉效果,表现Switch当前状态所代表的含义。

△ Google Inbox Pin

QQ音乐Android版的流畅度设置

QQ音乐Android版的设置项中有流畅度设置,关闭相关效果可提升流畅度和减少耗电。通常来说Switch打开有启用的含义,带有一点正面的褒义效果。QQ音乐却反过来了,Switch关闭有褒义的鼓励含义——关闭更流畅。

△ QQ音乐Android版,流畅度设置

本节先更新2个小科普,后面优设会持续更新,想提前学习的可以关注作者的微信公众号:

「新人科普好文系列」

  1. 交互原型丨《术语小科普!聊聊线框稿、视觉稿与原型的区别》
  2. 移动端尺寸丨《通俗易懂!超全面的移动端尺寸基础知识科普指南》
  3. 字体规范丨《界面设计必备!全方位科普常用的字体规范(附神器)》
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

您可能想查找下面的文章:

  • 超全面!底部动作栏设计总结
  • 如何做好提示设计?我从3个角度完成了这篇超全面的总结!
  • 「这个控件叫什么」系列之Notice Bar/通告栏
  • 超全面的分享功能设计总结
  • 「这个控件叫什么」系列之输入框/文本框/Text fields
  • 轻松看懂规范!详解组件控件结构体系之单元控件类
  • 从设计指南说起,详解iOS系统组件分类体系
  • 超实用!Apple 官方的图层命名方法之控制器篇
  • 高手帮你学规范!iOS版和安卓的规范解析之底部标签导航
  • 「这个控件叫什么」系列之动作菜单/动作面板

相关文章

  • 2018-08-23吃透这10个网站,你就明白了网页中留白的技巧
  • 2017-08-06优秀的网页前端设计的一些指标
  • 2018-08-23用这个设计方案,成功解决了为色盲设计的难题
  • 2017-08-06设计参考 漂亮和原创的博客设计
  • 2018-08-23单身设计狗春节自救指南!速看!
  • 2018-08-23赶紧收下!连BAT设计师都在使用的视觉动线技巧(上)
  • 2018-08-23交互设计师如何突破职业瓶颈?网易高手给你3个选择!
  • 2017-08-06Facebook互联网所有服务近乎完美改版过程
  • 2018-08-23用一个实战案例,教你学会复杂界面的布局设计
  • 2018-08-23Facebook 产品设计师:如何提高自己的设计审美?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 交互基础小课堂!移动端的导航设计模式
    • 进阶实例教程!如何通过设计提升产品的增值服务?
    • 涨姿势!全球顶尖的设计团队都有哪些设计原则?
    • 关于极简主义设计,这篇文章帮你安排得明明白白
    • 如何让一个网站前端有气质可以吸引住用户
    • 如何解决外边距margin叠加的问题探讨
    • 网站维护页面的列表制作技巧
    • 高手的平面课堂!版式设计里的轮廓化技法
    • 如何找到改版的切入点?我用「品牌探索」这个方法!
    • 不是所有弹窗都是流氓 关于网站弹窗的设计技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有