糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

交互设计-组件-滑块(Sliders)

交互设计-组件-滑块(Sliders)

原创 新闻资讯

于 2023-09-08 11:05:35 发布

20013 浏览

滑块

滑块是一个水平轨道,带有一个称为拇指(thumb)的控件,人们可以在最小值和最大值之间进行调整。


1.jpg


当滑块的值发生变化时,最小值和滑块之间的轨迹部分将填充颜色。滑块可以选择显示左图标和右图标,以说明最小值和最大值的含义。


最佳实践

自定义滑块的外观(如果有意义的话)。您可以调整滑块的外观 - 包括轨道颜色、拇指的图片和色调颜色以及左右图标 - 以与应用程序的设计融为一体并传达意图。例如,调整图像大小的滑块可以在左侧显示一个小图像图标,在右侧显示一个大图像图标。


使用熟悉的滑块方向。人们期望滑块的最小和最大边在所有应用程序中保持一致,最小值位于前侧,最大值位于后侧(对于水平滑块),最小值位于底部,最大值位于顶部(对于垂直滑块)。例如,人们期望能够将表示百分比的水平滑块从前侧的 0% 移动到后侧的 100%。


考虑用相应的文本字段和步进器作为滑块的补充。特别是当滑块表示的数值范围很广时,人们可能会喜欢看到滑块的确切数值,并能够在文本字段中输入特定的数值。添加步进器为人们提供了一种方便的方式来增加整数值。


2.jpg


iOS、iPadOS

不要使用滑块来调节音量。如果您需要在应用程序中提供音量控制,请使用音量视图,该视图是可自定义的,包括音量滑块和用于更改活动音频输出设备的控件。

滑块

滑块让用户可以从一系列数值中进行选择


3.png


•  滑块应显示所有可用的选择范围

•  两种类型:连续和离散

•  滑块应立即反映用户所做的任何输入


4.jpg


结构


5.jpg


1. 活动轨道

2. 活动刻度线

3. 标签文字

4. 标签容器

5. 手柄

6. 状态层

7. 非活动轨道

8. 非活动刻度线


轨道

轨道显示可供用户选择的范围。对于从左到右 (LTR) 语言,最小值出现在轨道的最左端,最大值出现在最右侧。对于从右到左 (RTL) 语言,此方向相反。




6.jpg



刻度线(可选)

沿着轨道的刻度线代表用户可以选择的预定值。


7.jpg



手柄

手柄是一个位置指示器,可以沿着轨道移动,显示其位置的选定值。

当滑块有两个手柄时,它们指示范围内的最小值和最大值。


8.jpg


重叠手柄

最后移动的手柄位于第二个手柄的顶部。顶部的手柄和标签使用 1dp 白色边框(仅当两个手柄重叠时才可见)。


9.jpg



值标签(可选)

值标签显示与手柄位置相对应的特定值。

选择手柄时会出现该标签。对于范围滑块,选择任一手柄时会出现标签。


10.jpg


滑块可以通过以下方式控制:

1. 选择并拖动

2. 选择跳跃

3. 选择+键盘

选择并拖动

通过拖动手柄选择一个值。


11.jpg


选择跳跃

通过选择轨道的一部分来选择一个值。


12.jpg


选择+键盘

聚焦后通过键盘(箭头或者tab键)来调节值的大小。


用法

滑块可用于实时调整某个值,例如图像属性。


13.jpg


滑块允许用户沿着轨迹查看和选择值(或范围)。它们非常适合调整音量和亮度等设置或应用图像滤镜。

滑块可以使用图标或标签来表示数字或相对比例。


14.jpg


即时效果

使用滑块所做的更改是立即的,允许用户在确定选择时进行滑块调整。如果提供给用户的反馈有延迟,则不应使用滑块来调整设置。


当前状态

滑块反映其控制的设置的当前状态。

滑块有两种类型:

1. 连续滑块 允许用户在主观范围内选择一个值

2. 离散滑块 允许用户从预定范围中选择特定值。刻度线可用于指示可用值。

15.jpg


总结

滑块可用于单个值或者范围值的选择与调整。中间的调整控制圆点,iOS叫thumb,MD叫handle。都是表达可以拖动的概念。

滑块的反馈是即时的,也就是状态随着调节而实时变化,所以MD中表示,如果调整后的效果没有办法实时看到,不建议使用滑块。

iOS建议不要用滑块来调节音量(Don’t use a slider to adjust audio volume.),个人理解是不建议在应用中设置一个滑块来单独调节单个应用的音量,而是要依靠物理按键来调节整个系统的音量。但是也有一些APP并没有遵守这个规范,比如QQ音乐就有一个单独的音量调节滑块,只是调节时也是影响系统的全局音量。

交互设计

组件

网页设计

网站开发

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 3. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情