你的按钮到底在帮助用户仍是在误导用户？

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://blog.bitsrc.io/do-your-buttons-lead-or-mislead-your-users-d5d83531238b

 

按钮是UI/UX最关键的组件之一，在不一样设备及平台上获得了普遍的应用。它们具备影响用户行为和体验的能力。假如按钮设计不合理，会令用户产生误解及障碍。按钮设计的目的是引导用户完成咱们在交互系统中预置的用户流程得以完成，但糟糕的按钮设计则可能会是你丢失你的用户。那么，如今是时候来研究该如何设计你的按钮了！因此今天咱们不聊开发相关的知识，咱们来看看这个在界面中小小而且重要的元素它的设计思路是怎样的吧。

1. 按钮要设计的让用户不假思索：

当用户同时看到好几个按钮，而且按钮的意义没有清晰地表述给用户，用户就会被你的“按钮阵”所误导，从而达不到预期的效果。因此具备清晰而合理的按钮层次结构，能促进用户可以直观、即时地分辨出你设计按钮的做用是什么。下面咱们来看看影响按钮层次结构的3个方面：

按钮类型

咱们先来介绍一下经常使用的4种类型按钮：

l  立体按钮：一个具备立体效果的按钮，使它引人注目。

l  平面按钮：没有任何花哨效果的常规平面按钮。

l  幽灵按钮：就像它的名字同样，幽灵按钮一般是透明的(没有背景色填充，和背景是融为一体的)，惟一的区别是这个按钮有一个边框勾勒出按钮的轮廓。

l  文本按钮：仅由文本组成的按钮

 

通常，这几种按钮类型在同一界面中能够如下顺序肯定视觉上的主次程度：

立体按钮 > 平面按钮 > 幽灵按钮 > 文本按钮

选择哪一种按钮的核心在于根据不一样厂家和用户需求来肯定类型，以便可以更好的引导用户。例如：

 

 

 

使用立体按钮或平面按钮突出显示主按钮，次要按钮则尽可能使用幽灵按钮或文本按钮以突出页面中不一样的层次结构。上图中的“免费注册”是主要按钮，由于引导用户注册是这个页面最重要的任务。

类似的按钮

通常外观相似的按钮能够看做是同一层次的按钮，这是由于具备相似视觉特征的元素会被认为更相关。以不一样的按钮类型实现不一样功能，以下降用户的理解成本，才不会误导用户，例如：

 

 

如上图，右侧的“UPDATE”按钮和“more”按钮具备不一样的视觉特征，用户可以很好的将它们区分开。

 

 

显然，从“Home”按钮到“More”按钮的视觉类型是相同的，处于相同的层级，“Tweet”按钮属于更高层级中的类型。

邻近的按钮

彼此紧密排列的元素每每更相关。邻近有助于你能进一步组织类似的按钮从而为用户带来相同的功能。因此邻近的重要性就像单词之间的空格和段落之间的回车同样重要。正确运用这一原则，对引导用户产生积极的影响。

 

 

在按钮之间添加空行以将其分为几种类型。放在一块儿的按钮会让人从视觉上就职务具备相似的功能。

 

 

“More”按钮和“Settings”按钮之间的空格巧妙的将按钮分为了两组，这代表从“All”到“More”是搜索结果的分类，而“Settings”和“Tools”按钮具备其余的做用。

2. 让按钮再醒目一点：

首先，正如《Don’t make me think》一书中提到的，用户永远不会在咱们网站上经过“阅读”了解内容，他们则是经过“扫视”来了解的。

 

 

若是他们错过了咱们指望他们按下的按钮，咱们就会错失让用户成为潜在客户的商机。因此，把按钮作的足够醒目，从而紧紧抓住用户的眼球是相当重要的！

要作到这一点，经过对比来突出按钮每每是颇有效的方法。不管你在什么状况下使用哪一种按钮类型，只要作到如下3点，就能使你的按钮最早被用户“捕获”：

负空间

负空间是摄影中常见的一种技巧，它经过画面中大量的留白，经过强烈的对比度来达到突出主体的目的，这个技法在网页设计中也常被用到。

尺寸

尺寸是产生对比度的最有效元素之一。大尺寸的按钮始终能够吸引用户的注意力。首先在按钮周围留出足够的负空间，以突出按钮，同时把调整按钮的大小调整到用户足以在界面上很容易关注到它们。

颜色

经过为按钮设置负空间和尺寸，为按钮添加颜色能够进一步加强对比度。若是能够的话，你能够在调色板中选择一个足够醒目的颜色，以使用户能下意识的点击。

 

 

 

 

3. 不要让用户去猜你的意图：

把每一个按钮的做用向用户传达准确是相当重要的。若是按钮的功能显示不清晰，则会引发用户的反感，由于他们不想去猜和承担测试按钮点击后的后果。因此为了更好帮助用户理解按钮，如下三种元素能够解决你的问题：文字，图标和标签。

文字

按钮上的文字简明扼要，有助于用户高效获取信息，确保友好的用户体验。

 

 

如上图，对于同一问题，不一样用户可能会对“是”和“不是”有不一样的判断。在选项中使用适当的描述，而不是单纯的“是”和“否”，能确保用户避免误解得到更好的用户体验。

 

 

再例如上图，不用“是”和“否”， “移除”选项就足够的清晰明了。

图标

图标是一种常见的UI元素，它简洁而清晰地以可视化的形式呈现按钮功能。用户能够一目了然地分辨出各类按钮的用途。

 

 

标签

对于具备特定或复杂功能的按钮，须要给按钮设置上标签，以简要说明其功能。显示方式为，当光标悬停在按钮上时出现。

 

 

 

 

结论：

按钮在任何交互系统中都是相当重要的。所以，按钮的设计的好坏直接影响用户的体验和操做的，为能正确引导咱们的用户，咱们能够：

l  按钮的设计富有层次

l  让按钮在页面中再醒目一点

l  不要让用户去猜按钮的用途

在各类场景下都应该要精心为用户设计按钮，让用户找到本身须要的按钮，直观地作出选择。

那么，但愿这篇文章能有所帮助。请随意分享这篇文章。