中山高端建站：移动设计模式之基于库存的离散滑块

滑块很酷。当他们做得好时，客户喜欢与他们互动。当他们做得不好时，他们可以通过站在客户和他们想要的东西之间来引起很多挫折（更不用说失去销售）了。让他们错了是非常容易的。中山高端建站

在本文中，我们将提供一个解决方案，包括设计和代码，用于解决常见问题的新型Android滑块，以及可供下载的Android迷你应用程序供您试用。根据Android设计模式中的一章，它深入探讨了滑块。我们将看到的实验性基于库存的滑块可以在任何应用中寻找价格，尺寸或广泛分布范围内的任何其他分面输入。

为何选择滑块？

滑块非常直观。它们提供可供性，一种能够控制特定任务的质量。他们只想在一个范围内拨打一个值。滑块从物理世界很好地转换为触摸屏，它们看起来很棒并且易于操作，而不会占用大量空间。特别是双滑块非常适合限制搜索过滤器并将值形成为设定范围。

在物理世界中，滑块具有类似扭转旋钮的功能。然而，旋钮在触摸屏上难以“转动”，并且它们通常占用比滑块更多的空间。对于触摸屏，滑块更好。

滑块的类型

滑块有两种类型：单滑块和双滑块。单个滑块最适合输入一个值。双滑块非常适合在一系列值内进行搜索。

还有两种调整：连续和离散。连续调整是针对某个范围内的不确定值，例如价格或温度。离散调整适用于预定义值（例如衣服尺寸）。单个滑块和双滑块都可以进行任何一种调整。我们来看一些例子。

Zillow的客户使用两个单独的滑块连续调整以设定价格范围。

这个房地产应用程序Trulia使用两个双滑块连续调整：

价格的持续调整是有道理的。为什么？因为价格范围是连续的。但它们确实比大多数购物者更关心。（1美分的价格差异不大可能使客户重新考虑购买。）

离散调整是不同的。它们允许您选择值，但仅限于预定义（即离散）增量。像鞋子一样的小平面由离散值组成; 在美国和西欧，鞋子通常以半尺寸增加：6,6.5,7等等。你买不到尺寸为6.25的鞋子，所以提供这种精度的控制是没有意义的。

理解差异的一种方法是具有低离散值计数的单个滑块类似于步进控件：您可以拨打所需的值，但只能从预定义的集合中拨打。

实验滑块模式

具有基于库存计数的直方图和滑块的滑块是两个很好的实验模式，它们是标准滑块的变体。不幸的是，它们并不常见，因为它们解决了滑块可能给用户带来的许多问题。我们在下面的“注意”部分解释了常规滑块的问题，并详细介绍了“超级滑块”部分（“注意”之后）的实验解决方案。

所以，在这一点上，你可能会想，“滑块听起来很棒。有什么缺点？“很高兴你问道。

警告

即使是最好的模式也会变坏。就像曾经是蝙蝠侠和高谭市无可挑剔的道德地区检察官的忠诚盟友哈维·登特一样，大多数事情都有一个黑暗的一面。喜悦和沮丧之间有一个滑坡，就像Dent成为的Two-Face角色一样，滑块可能是有帮助的或可恨的。这一切都取决于它们的实施方式。

以下是如何避开滑块问题并让客户满意的方法。

确保合理的价值可以轻松输入

Kayak有一个连续的双滑块用于过滤酒店价格（见下面的截图）。要想在洛杉矶找到一家便宜的移动用户体验设计顾问的工资，你必须将钉子放在彼此的顶部。这种调整不过是精确的。对于宽范围，请考虑使用基于库存计数的滑块，如“超级滑块”部分所述。

显示范围

说到范围，显示整个系列中可用的实际价格范围是一个好主意，如上面的Kayak截图所示（$ 38至$ 587），而不是使用任意数字，如$ 0和max。Zillow和Trulia都没有显示与当地房屋库存相关的真实最大值和最小值。

想象一下，如果他们从一开始就说这些滑块的价格在476,000美元到3,234,700美元之间，那么这些滑块会有多大用处。显示范围也有助于避免死区，例如当您在旧金山寻找价格低于476,000美元的房屋时，这将导致零结果。请注意过滤如何影响库存; 在不应用过滤器的情况下设置整个集合的范围是最好的。

不要覆盖数字

当客户调整滑块时，值应显示在栓钉上方，用户的手指不会覆盖它们。将数字放在滑块下方或侧面不是很有用。Kayak的滑块（如上所示）在这方面很不错：当客户调整滑块时，范围被覆盖，但过滤器的实际值不是，这是您在移动设备上可以做的最好的。

选择具有离散位置的滑块

连续滑块原则上是性感的，因为您可以拨打确切的号码并获得您想要的库存。但实际情况是，滑块很难精确调整 - 无论是在物理世界还是在触摸设备上。这就是为什么你几乎从未在立体声上看到用于音量调节的滑块的原因。具有讽刺意味的是，设备越大，精确调整滑块的难度就越大。这是菲茨的法律实践：行动所需的时间取决于目标的距离和大小。换句话说，调整大型平板电脑中间的小钉是很困难的。

无论屏幕尺寸如何，在火车上碰撞时精确调整连续滑块都很困难。（如果您愿意，您有权将此后的内容称为Nudelman法律。）

连续双滑块还可以轻松过度约束范围。例如，创建一个连续的滑块，使客户能够拨打45.50美元到46.10美元的价格，这可能会产生零结果，并且无法很好地为客户服务。另一方面，具有离散位置（即停止）的滑块更容易调整。拨打范围太小的机会也少。

超级滑块节省了一天

如何实现双滑块，以便用户能够输入价格范围，而不会遇到上面“注意”部分中提到的零结果的可怕问题？这是前面讨论的实验模式的用武之地。这些就像常规的滑块略微加强 - 超级滑块，如果你愿意的话。让我们解释一下。

常规滑块

滑块可以使用根据库存计数排列的离散值。这种类型的滑块通常以线性图案布置，这意味着滑块轴上的一定移动距离表示相等的绝对值变化。例如，在五个位置的滑块中，价格将从$ 0增加到$ 100，增量为20美元：

虽然这很直观，但设计使客户很容易空手而归，特别是如果范围很广且库存不均匀分布。

正如“警告”部分所述，购买超级英雄斗篷的顾客可能会选择库存为零的范围 - 比如说，40美元到60美元 - 不知道在62美元到65美元的范围内有一整套的斗篷 - 字面意思，少了几美元。（向Clint Eastwood和西部各地的爱好者致歉。）

超级滑块（零结果战斗直方图）

这是带有直方图的滑块（如下所示）很有用的地方。这个实验模式背后的想法很简单：固定位置滑块上方50到100个像素是一个直方图，代表线性价格范围特定部分的库存。高条表示大量项目，而比例短条表示较少数量的项目。而已。

使用带直方图的滑块时，您仍然可以拨打低库存的部分范围; 但是意外地犯这个错误很困难，因为直方图中清楚地显示了库存计数。您可以使用带有直方图的滑块，其中将使用标准离散位置滑块; 它只占用更多的垂直空间，以换取更令人满意的客户体验。

没有直方图的空间？

在不使用直方图的情况下实现滑块的另一种方法是根据库存计数排列滑块的间隔。要做到这一点，将整个库存（比如100个斗篷）分成五个间隔，每个间隔你将得到20个披肩。现在，扫描价格区间以计算出与大概库存数量20相对应的价格（四舍五入到最接近的美元）。假设前19个海角花费在0到60美元之间（请记住我们假设40美元没有库存）至60美元的范围内，第二个21个披肩的价格在61美元到65美元之间，依此类推。这是一个这样的滑块可能是这样的：

您应该选择哪种实施方案？这取决于任务。大多数人不介意在预算之外支付几美元，但他们绝对不喜欢零结果。对于大多数任务，给定间隔中少于20个项目的库存不是令人满意的结果，因此使用其他方法之一来提供更好的体验。具有直方图的滑块和基于库存计数的滑块都远远优于传统滑块。根据价格细分间隔是一种更灵活的方法，因为它清楚地显示了分布，而从不产生零结果。如果客户的价格范围大于单个20项间隔的价格范围，那么他们可以使用双滑块选择更大的间隔。

在我们为一家大型零售商进行的研究中，两个实验滑块都超出了常规滑块。亲自尝试一下。创建一个快速原型并做一些“走廊可用性”。要求用户找到大约70美元左右的项目，并比较他们如何处理直方图版本，基于库存的版本和常规版本。

平板电脑应用

滑块在平板电脑应用中表现良好。请务必注意“警告”部分中的警告; 特别是，选择具有离散值的滑块以确保精度，而不是连续滑块（在大型设备上精确调整连续滑块更难）。考虑设备的人体工程学设计，避免将滑块放在屏幕中间。相反，将滑块放置在靠近屏幕顶部，靠近右边距或左边距的位置，优化单手操作用拇指，同时手指握住平板电脑的背面。

根据应用程序的设计和目的，通过在屏幕的左侧和右侧设置两组滑块进行实验，分别由左手和右手进行调整。这在音乐合成器等应用中特别有趣。最后，尝试将滑块垂直放置在平板电脑的边缘（从上到下），而不是从左到右水平放置，这是用拇指精确调整的最简单方向，同时手指握住平板电脑的背面。

试试看

要查看滑块应用程序的感受，可以使用完整的滑块迷你应用程序下载并试用。如果您是开发人员，可以在自己的项目中免费使用它（请参阅“代码”部分）。要安装它，请考虑使用应用程序安装程序，例如FunTrigger制作的应用程序安装程序，您可以在Play市场上免费获得。这是它的工作原理。将Android设备连接到计算机。您应该会看到Android文件传输窗口自动打开。如果没有，您可能需要在计算机上安装软件，例如Android文件传输（Mac用户，请注意）。下载APK源文件，并将其放在“App Installer”目录中（您可能必须创建该目录）。

现在，您将能够在您的设备上启动应用程序安装程序。导航到正确的目录，然后点击要安装的APK文件的图标。

在一些惯用的Android免责声明之后，该应用程序将安装在您设备上的正常应用程序区域中，您可以从那里启动它。

码

我们为您提供Java代码和一个带有离散停止的简单双滑块的演示。

这个演示在最小值和最大值之间有五个间隔，我们可以任意设置为47美元和302美元。它以线性模式排列，这意味着滑块轴上的一定移动距离表示相等的绝对值变化，使增量值为$ 51。在真实的应用程序中，值很可能是从数据库派生的。

private static final int RANGE_MIN_VALUE = 47;private static final int RANGE_MAX_VALUE = 302;private static final int[] RANGE_STEPS = new int[] {47, 98, 149, 200, 251, 302};

虽然原则上五个是一个很好的数字，但您可能需要尝试使用七个或九个的间隔，具体取决于屏幕的大小。

我们建议您使用MOD功能来确定每个间隔中需要多少个斗篷。然后，走一段时间以确定每个范围内的价格细分。最后，如果MOD产生一个余数，你可以将它添加到最后一个间隔，或者你可以变得更加漂亮并循环通过它来为每个间隔添加一个或多个“多余”的斗篷。例如，如果您有103个披肩，则间隔为21,21,21,20,20。这样可以更均匀地分配库存。

您可以将该应用程序用于您自己的项目，也可以作为更高级用户的起点。我们可以建议一个带直方图或库存盘点的滑块吗？

如果你确实使用了代码，我们很乐意看到你用它做了什么。

此代码免费提供，并在GNU通用公共许可证v3下分发。有关README_LICENSE详细信息，请参阅文件

• 下载该应用程序的完整源代码。

结论

• 跟我们说吧，“做得好，滑块很高兴。”滑块可以让您的客户成为有能力的探险家和即时物品定位器。不要让好的模式变坏：记住这些规则，并避开滑块问题。

• 确保可以轻松输入合理的值，并且不包括数字。对于在大范围内以小增量进行脂肪指责的摸索说不。说到范围......

• 显示范围。。删除无用的标签，如“$ 0”和“无限制”。相反，显示客户可以在其中搜索的实际最小值和最大值。

• 离散。。连续范围滑块并不总是最佳选择。对于小的预定义值集合，例如鞋子尺寸（和斗篷尺寸），离散停止更好。最后......

• Zap零结果。。打败令人沮丧的徒劳无功的搜索。想为您的客户提供忍者导航能力吗？添加直方图，或根据您的库存使用智能间隔。

这里的所有都是它的。使用滑块并不是一件很神奇的事。你知道模式。你已经抓住了代码。现在没有什么可以阻止你尝试滑块了。

中山高端建站