网站建设之移动端网站按钮要怎么设计更加直观用户体验比较好

点击或不点按 – 这是用户在看到号召性用语按钮时的想法。

按钮越多，他们做出决定所需的时间就越长。他们必须检查每个按钮，以确定哪个最符合他们的目标。对按钮的任何不确定或怀疑可能导致他们不采取任何行动或采取错误行动。

您可以通过使每个操作的优先级直观来防止这种情况。当用户可以看到哪个按钮对他们的任务很重要时，他们就可以立即采取行动。您可以使用一些UX技术来对呼叫操作按钮的直观性产生重大影响。

根据扫描模式的订单按钮

在应用程序上犯的一个常见错误是将按钮放置在偏离用户自然扫描模式的顺序中。他们首先放置最高优先级按钮，因为他们希望用户首先注意它。但是只要具有视觉重量，用户就会注意到按钮而不管顺序。

按钮顺序不是为了提高可视性，而是为了提高效率。首先放置高优先级按钮会使用户将扫描方向从上到下翻转到自下而上，这会破坏其自然流动。

而不是强制用户重新扫描按钮，允许他们通过单向扫描获得高优先级操作。这允许用户在做出决定之前按顺序扫描每个按钮选项。

通过将高优先级动作置于底部，它处于最小视觉阻力的路径中，这使得它可以快速轻松地进行挖掘。此外，底部位置是手指最容易到达的位置，这进一步提高了效率。

用文本区分文本中的按钮

在应用程序上犯的另一个错误是仅使用文本来表示按钮。设计人员使用文本按钮来显示哪些操作的优先级较低。但这对于调用操作来说是一个糟糕的选择，因为文本没有按钮的外观。这可能会导致用户忽略这些操作，只能看到主要操作。

通过让用户想知道文本是按钮还是信息，文本按钮也会引起混淆。这种不确定性会导致他们跳过这些按钮。

文本按钮不仅令人困惑，而且它们也是较小的点击目标。将文本标签放置在按钮形状内使得号召性用语更容易被注意到并点按。

按钮形状是比文本按钮更好地控制低优先级动作的更好方法。它们使每个选项都易于识别，以便用户以他们喜欢的方式实现目标。

为渐进动作添加颜色

高优先级操作最容易识别 – 这是直接导致用户目标的操作。如果您对剩余的操作不确定，请考虑哪一个用户朝着他们的目标前进，哪一个让他们退步。

在该示例中，“checkout”具有高优先级，因为它将用户带到他们的目标。但不清楚哪种行动具有中等优先级 – “观看购物车”或“继续购物”。

“查看购物车”操作会让用户查看他们添加到购物车中的商品，然后结帐。“保持购物”操作将用户带回到远离结账选项的产品页面。

通过检查操作，很明显“查看购物车”具有中等优先级，“保持购物”具有低优先级。很容易看出哪个动作可以使用户朝着他们的目标前进，哪个动作可以从中回归。

渐进式行动总是优先于倒退行动。因此，它们应该具有更多的视觉重量和更高的色彩对比度。

颜色是表示渐进动作的有效方式，因为它从文本颜色中脱颖而出并吸引用户的注意力。当按钮的颜色与文本颜色相同时，信号不强。为渐进式操作添加不同的颜色表示用户应采取的操作。

如果对每个渐进式操作使用相同的颜色，则用户将不知道哪个具有更高的优先级。并且每种颜色使用不同的颜色只会使用户更加困惑，并使他们想知道不同的颜色意味着什么。不仅如此，它还会给每个按钮提供相同的视觉重量。

诀窍是使用相同的色调，但在中等优先级操作上改变饱和度和亮度，使其看起来比高优先级操作更轻。现在按钮的重量不再竞争，而且有明显的赢家。

要进一步增强对比度，可以反转显示极性。在深色背景上使用浅色文本作为主要按钮，在浅色背景上使用浅色文本作为次要按钮。这为高优先级操作提供了更明亮的文本标签和最高对比度。

改变文本标签的大胆性

应用当前技术足以区分优先级，但您可以做更多。每个按钮越直观，用户就越少思考。

在每个文本标签上使用相同的粗体对它们进行相同的强调。最好根据优先级不同地强调每个文本标签。改变文本标签的大胆性，使高优先级按钮是最大胆的按钮，低优先级按钮是最不大胆的按钮。这样，文本标签的权重甚至表示用户阅读它们时的优先级。

该示例显示了“结帐”标签如何比其他标签更大胆，更亮。“查看购物车”标签是semibold，“保持购物”标签是中等。因此，文本标签反映了每个动作的视觉权重。“查看购物车”标签中指示“3项”的文本未加粗，因为它是不代表所采取行动的补充信息。

为高优先级操作提供一个图标

最后一种技术是顶部的樱桃，它将使您的按钮可供盲人用户使用。色盲用户将无法区分按钮的重量。他们需要的不仅仅是颜色，还可以作为视觉提示。

给予高优先级操作一个图标会增加额外的重点，使其分开。当用户扫描时，他们通常比文本更注重视觉元素。该图标确保所有用户比其他用户更加关注高优先级操作。

如果您删除了颜色和标签，用户仍然可以识别结帐按钮。图标传达结帐以及文本。

你的按钮直观吗？

如果用户在操作屏幕上花费很长时间，或者您的点击率较低，则您的按钮不直观。如果是这种情况，请使用这些技术来提高您的号召性用语按钮的用户体验。您会看到之前和之后的版本之间存在很大差异。