用户界面中滑动条设计指南

滑动条可以在许多用户界面上成为受欢迎的景象。他们确实有些动态,即使他们有时无法击败常规输入字段。多年来,用户越来越习惯于在特定情况下看到滑动条,其受欢迎程度也随之飙升。

但是为什么它们很受欢迎呢?当然,它不仅仅是一个简单的滑动条,用户可以用手指拖动?在这篇文章中,我们将研究如何以及何时在您的产品中使用UI滑动条设计,以获得最佳的用户体验,并提供一些真实的例子。

UI设计中的滑动条是什么?

滑动条是代表模拟无线电调谐或音量控制表盘的UI组件。它允许用户从左到右滑动旋钮、手柄或栏,反之亦然。UI 滑动条非常适合用户快速同时探索许多不同的选项或值。最重要的是,当数量或值不需要精确时,它们对于用户来说是实用的组件。

UI 滑动条设计可帮助用户选择一系列值或调整亮度或音量等设置,以及其他用途。他们从 Youtube、Vimeo 或 Netflix 等典型的视频播放控制中汲取灵感,尽管它们有多种不同的风格。

滑动条可以是单点或双点(双滑块),后者我们经常在价格或预算范围选择器中看到。在运动方面,它们可以是快速的或连续的,即它们沿着轨道捕捉到不同的点,或者它们滑动平稳。

UI滑动条设计都是关于实用性和效率的。此外,除了作为一个实用的组件,这些 UI 控件还为用户在网站或应用中实现目标呈现了更具视觉吸引力和互动性的方式。

交互性有助于保持用户参与,而事实上,他们可以与值范围配合使用,而不是将固定值输入到输入字段中,这意味着认知负荷的降低。

但稳定!在让用户选择值方面,UI 滑动条设计并不总是正确的解决方案。虽然他们可以有很多好处,当我们得到他们的权利,让他们错了,他们可以打破你的设计。

何时在UI中使用滑动条

紧迫的问题是何时在您的网站原型工具中使用UI滑动条。首先,让我们专注于 UI 滑动条设计的主要目标:帮助用户尽可能快、轻松地完成任务,同时提高交互性。

那么,哪些任务最适合滑动条呢?毕竟,滑动条可以执行许多任务,远远超出了简单的音量滑动条控制范围。它们可以是帮助用户缩小搜索范围而不进入细小细节的方便方法。例如,您可能遇到滑动条控制,允许您选择按揭付款或电家居项目均匀尺寸的价格范围。

但是,虽然UI滑动条具有多种多功能控制,具有许多可能的应用,但确定完美的使用比做起来容易。

毕竟,UI 滑动条往往是设计界有争议的组件。使用它们执行任务的机会不如切换开关、下拉器和无线电按钮等元素时那么丰富。如果您在错误的情况下应用 Ui 滑动条, 它们可能会破坏您的数字产品的 Ux 。不过, 把它们弄对了, 你真的可以增强它。

以下是您可能需要使用UI滑动条设计时:

  • 提出许多选项时
  • 让用户快速探索/限制大量选项
  • 当值不需要精确时
  • 用于解释选项
  • 放大缩小字体功能 放大缩小字体功能
  • 用于音量控制
  • 调整亮度、对比度和饱和/透明度控制
  • 旋转 3D 对象
  • 当走过一组选项时

最后,切勿在设计中使用UI滑动条控制,您可以轻松使用替代UI设计元素。例如,想象一下,您必须使用户能够从选项列表中进行选择。如果可能,如果有空间这样做,它始终是最好的做法,从一开始就显示所有可用的选项。

考虑交付规范,用户必须选择四个选项,从标准到表达。对于这是否是对滑动条的良好使用,存在一些争议,因为大多数经典的滑动条设计不允许用户立即看到所有可用的选项。一个更好的选择是一个简单的无线电按钮设计。

移动与网络滑块设计

事实上,许多适用于 Web 滑动条的经典准则也适用于移动滑块。但是,与 UI 设计的其他方面一样,移动设计意味着还有其他因素需要考虑。在讨论移动滑动条设计与网站上使用的滑动条设计有何不同时,需要记住的最关键因素是用户的触摸和可用空间较小。

这里有两件事需要考虑:用户手指的大小及其对用户体验的影响。最终,用手指处理的 UII 滑动条设计需要为滑块手柄自由移动留出足够的空间。

此外,旋钮需要对停止格外敏感,即当用户抬起手指时。由于不够敏感或过于敏感,许多滑动条控制容易轻推。这意味着抬起手指意味着旋钮被推入不同的位置。这往往不是一个问题,在网站滑动条设计这么多,因为鼠标比手指更精确。

移动滑动条设计的另一个实际效果是,标签必须正确放置在可用的空间中。当用户为了完成任务而处理滑动条时,重要的是他们的手指不覆盖相关标签。这意味着标签需要在滑动条的两侧或上方。这样,用户在与组件交互时即可看到所有内容。

总结

滑动条可以更改界面的初始印象,并更改与设计交互所需的努力。它使一个典型的用户用户已经习惯了,我们大多数人知道如何使用它,当我们看到它。当然,UI 设计的任何方面都没有自己的规则和准则。

幸运的是,滑动条设计既是一个简单的组件,也是为产品增添天赋的机会。这是所有关于发现正确的机会,在设计中使用滑动条!

原作者:Rebeka Costa

本页面最后更新于 2021年05月28日 11:08