发布时间：2021-7-3 分类： 电商动态
在滑块设计中，您需要注意“做什么”和“不该做什么”？本文将在以后讨论，享受〜
价格范围滑块，360度视图滑块，时间线滑块和hellip;…
在所有这些示例中，滑块很有用，因为它们可以减少用户的输入并推动用户探索更多选项，以帮助他们做出明智的决策。
那么，在滑块设计中，你需要注意“做什么”和“不该做什么”？让我们一起分析：
文章大纲：
我们什么时候需要滑块？
有哪些类型的滑块组件？
哪种情况不应该使用滑块？
滑块设计需要考虑的问题列表
关于滑块设计问题的具体讨论
总结
1.我们什么时候需要滑块？
并非每个页面都可以从滑块中受益。但是，如果我们想要设置多个选项或帮助用户快速限制多个选项，或者如果用户对输入相对模糊或不准确，则可以考虑使用滑块。
例如，用户选择抵押的预付范围或机场离开的时间范围。在这种情况下，用户选择最后一分钟的数量，或者实际上不需要到最后一秒的出发时间。
例如，在探索度假目的地时，用户可能希望通过他们喜欢的活动来过滤他们的选项。在这种情况下，您可以使用滑块为各种活动分配权重，以便最终选择的选项根据其兴趣进行精确定制。或者在处理地图时，滑块可以帮助用户限制或扩展搜索的地理范围。
例如：购物中的一个例子：当您选择快递时，您可以选择快递方式来查看快递费用。当然，您可以使用下拉菜单，但显然单选按钮更直观，选择直接暴露给用户。此时，只要添加相应的价格提示，滑块自然适用。此外，每个选择上方的价格提醒更有针对性，右滑价格更高，左滑价格更低，这使得它更清晰。
通常，只要您想添加“模糊”按钮，滑块就是一个值得选择的选项。过滤或指示界面上选项之间的关系。然而，缓慢，笨重的滑块比可预测的通用按钮更令人沮丧。为了有效，滑块必须非常易于操作，并且必须快速且连续地响应变化。
2.有哪些类型的滑块组件
2.1单连续滑块
如果滑块的主要目标是从一系列值中选择一个值，那么我们可以使用连续滑块。
2.2单个离散滑块
如果连续滑块允许客户连续更改滑块上的值，则离散滑块仅允许选择一组预定义的值。
2.3两点滑块（两个连续的滑块）
过滤或划分间隔
3.哪些情况不应使用滑块
滑块组件之间应该存在元素的交互关联。无论何时从左到右操作滑块，最终值都应与先前的值相关联。它就像一个音量控制器。右边是增长，左边是值减少。
反例1：滑块不包含进度，线性关系
反例2：滑块不适用于有限的选项
反例3：未突出显示值变化
只要不满足其中一个条件，这可能是滑块而不是问题的完美解决方案。但是，如果在您的情况下有意义，那么您必须考虑很多设计因素，以便为您的设计找到最佳解决方案。
4.滑块设计需要考虑的问题列表
滑块是否是解决此问题的正确方法，还是我们应该使用单选按钮还是复选框？
我们可以为滑块提供多少空间，以及如何使它在小屏幕和大屏幕上正常工作？
我们使用单滑块还是双滑块？
滑块应该是连续的还是离散的？
我们如何设计滑块，轨道和标签？
我们如何选择滑动标尺：线性还是非线性？
我们需要多少个刻度点，我们如何设计它们？
我们如何标记滑块的下边界和上边界？
如果是这样，我们用于滑块的图标是什么？
我们如何以及在何处显示当前值？
滑块是否需要精确输入（例如输入字段）？如果是这样，我们如何表明数字输入是可编辑的？
我们是否需要将常用值或值范围用作预设，以便将用户推向“最佳”选项？
我们如何表明可以避免死路？
滑块轨道应如何随拇指移动而改变？
使用双滑块，如果用户将结束拇指移动到左拇指，或反之亦然会发生什么？如果用户点击或点击两个拇指之间的区域会发生什么？ UI应该调整下限还是上限？该行动是否应完全禁用？
滑块上是否有任何不应被接受的值？
我们应该接受选择太多还是太少的范围？
用户可以恢复以前的滑块操作状态吗？
我们应该添加动画还是过渡到互动？
我们有相互依赖的滑块。滑块的输入是否取决于先前的输入？用户是否应该“锁定”某些值？
5.关于滑块设计问题的讨论
5.1滑块所需的区域空间
滑块组件虽然只是一个过滤选项，但不需要太多空间，但为了高效和简单的操作，滑块仍然需要大量的水平空间。滑块按钮必须足够大，以使轨道必须足够宽以便单击。
如果滑块的宽度仅为200~300px，则用户很难做出探索选择。例如，Google字体大小滑块很难获得正确的值。
对滑块组件空间要求有很大影响的重要变量是滑块上的关键刻度标记。如果需要更多的关键尺度，则需要更多的空间。由于滑块也必须具有响应性，因此这些刻度线必须足够大，以至于它们不需要太高的精度。
那么，有多大，关键刻度线之间的水平间距至少为65px。滑块按钮必须为32x32px。那么相应的布局呢？刻度线之间的间距将随着尺寸的变化而缩放。因此，您还需要在滑块上设置最大宽度，并设置最小间距。一旦确定了间距约束，就可以设置周围的组件。
5.2显示刻度线和当前值
假设在非常接近轨道的未知状态下显示大量刻度线。一旦用户在用户上，滑动按钮将被遮挡。此时，垂直分界线可用于指示滑块的值与位置之间的关系。
5.3设置滑块范围比
滑块的定位是一回事，但选择比例来准确反映所选范围是另一回事。就像一家拥有数百种商品的服装店，价格从50美元到15,000美元不等。如何设置滑块范围的比率？在轨道中间设置了多少个值？
默认情况下，我们假设合适的滑块范围刻度应该是线性的，将整个范围分成一组等距线段。但是，与上面的示例一样，轨道的中间设置为7,500美元，但这将非常无效，因为50％的轨道用于控制1％的产品。换句话说，大多数代表过滤器没有变化，一小部分代表过滤器的巨大变化。实际产品中有很多种情况。当这种情况发生时，用户将承受很大的压力。
好的解决方案：用户可以使用预定义的预设进行跳转
示例2：带有直方图的线性价格滑块提供了更多信息
这种方法不仅可以帮助用户浏览滑块上的范围，还可以减少死角（令人沮丧的无结果页面）。
5.4消除零结果过滤
避免零结果页面的策略：
示例1：根据内容分布定义比例值。将整个范围划分为多个部分，每个部分具有相同数量的结果。
示例2：Airbnb的直方图滑块显示价格分布
5.5视觉增强指标范围
提供范围值以及可视指向
5.6视觉选择结果
在某些情况下，视觉动画是个好主意。
5.7平滑滑动响应
如果滑动响应很慢，则可能很麻烦。当用户与滑块交互时，必须确保交互的连续性。
设计人员和开发人员希望用户能够抓住滑块按钮水平滑动。但是，它不一定是大多数用户喜欢的交互，用户可以选择单击以跳转到轨道上的任何值。这意味着水平轨道必须易于点击。
我们还可以放大滑块按钮，更改颜色，添加一些阴影，甚至可以更改轨道的颜色。
5.8准确的内部编辑以增强滑块体验
要使用滑块提供精确输入的快捷方式，我们可以使用预定义的预设（经常选择的值或值范围）或使用文本输入字段来回退以增强滑块。预设和输入字段都可以逐步显示–通过单击按钮或单击滑块上的当前值。
5.9光标视觉反馈，增强滑块体验
5.10提供额外的“滑块”
对于相互依赖的滑块，滑块更改可能会限制后续滑块的选项。建议扩大“rdquo;扩展滑块上的区域，用于指示更改的范围。
如果其中一个滑块中的值发生变化，则会提示其他滑块向上或向下缩放。我们还可以“锁定”滑块，旁边有一个挂锁图标。
总结
如果您的界面只接受几个输入选项，那么使用滑块可能是多余的操作。一组单选按钮，复选按钮或预定义选项可能更好。但是如果对用户的输入是一种鼓励探索而不是精确的机制，那么滑块绝对是一个不错的选择。
与滑块交互的重要一点是快速显示结果。这意味着您不必强制用户单击按钮以查看结果，也不必等待结果显示。反馈应该是平滑和连续的，没有明显的滞后。
按钮滑块通常不需要任何特殊的可视图像，但需要适当的视觉指示处理，平滑和动画以增强用户参与度。刻度标记不仅可以帮助用户定位滑块，还可以指示可以跳转的离散值。请记住，算法比例通常优于线性比例。
当用户移动轨道上的滑块时，我们可以放大悬停滑块，添加一些阴影，以及更改轨道的颜色。最后，精美的可编辑性可以在一定程度上增强滑块体验。
原作者：维塔利弗里德曼
原文地址：https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
