你知道按钮设计的7个基本原则吗？

按钮是 UI 和交互设计基本元素，它们是用户交互时候，和系统进沟交流核心组件，也是图形化界，最早出现，也是最为常见交互象。在今天文章，我们将会回顾下按钮设计的7个基原则，希望它们能够在设计的时帮到你。

1. 按钮必须得看起来像按钮

涉及到用户界面交互的时候，用户需知道哪些可点击的，哪些不。面对 UI 界面中的每元素，用户都需对它们行辨别判断，这过程越，可用性其实就越差。

么，用户是何判读哪个元素是互的呢？通常，用户是基以往的经验和视来对 UI 元素进行判断，就是为什么需要通合适的视符号来帮助用户理（比尺寸、形状、颜、阴影等），使得元素看来像是按钮。视符号为界面提供供。

不幸是，在许多界，按钮可发现性和指示性并不强，这使交互发生率有所降低，用户会纠结于哪些可击，而哪些不可击，这个时候设计是否炫酷，显不那么要了。即使视觉上界设计足够突出，可用性很弱，会让用户陷入沮丧，品也不再具备可用性了。

为了确定按钮是否可，户在桌面端访问的时候，需要将光标移到元素上，检查元素状态是否会改变，才判断它是否是可点击的。而移端户就麻烦了，根本没有鼠标来执行这样的操作，元素否点击，只都试一次，没有他更好的方法了。

不要假定你的 UI 中的素对于用户是显而易见的。

很多况下，设师会意识不将某些元素的交互性凸显出，因他们会认这些东显易见的。但事实并非如此，设 UI 的时候，应该牢记下面的事。

为设计师，是很容易搞清楚 UI 中哪元素互，哪不互，但是用户并不清楚。

尽量在按钮采用用户熟悉设计。

是绝大多数户都熟悉的按钮样式：

• 带有矩形边框、填充有色按钮；
• 带有圆角矩形边框的、填充色彩的按钮；
• 带有阴有色彩和内容填充的按钮；
• 幽灵按钮。

在这几种见的模式当中，带有阴影和色彩填充的按钮，对于户来说是最清晰的，因为它在视觉上是有个维的，户会感知到这是一个可按的元素。

要忘记留白

按钮本身的视觉属性很重要，而按钮附的留白同样重要，他们按钮更容易被识别，更容易交互。在面的案例当中，户很可会将本容和幽灵按钮混淆。户在此无法判断它到是一个盒子元素，还是个按钮。

2. 将按钮放在用户希望看到的地方

用户于页交互其实是有基本感知和期望，也是说用户于按钮位是有个基本认知。不要让用户到处找按钮，它最好在用户所期望位出现。

尽可能使用传统布局和标准 UI 模

所谓传统布局也是贴合用户经验布局，用户在浏览时候会于这样「标准」 UI 布局有明确预期，在位看到了按钮，体更容易理解，自然也可以轻松和界进交互了。

想要确认设计的可性，只需要观察户在使过程中是否会通过操作抵达你希望他们到达的位置，并且到需要点击的按钮。

3. 按钮上应该加上相应操作的标签

当按钮的本标签上的容写的太过于宽泛，或者使带有误解的容，可会户感到迷惑。每个标签上的本标签都应该尽量准确，简明直接地介绍清楚它的真实功。

用户应该清楚点击按钮之后，会发生什。举个简的例，想象一下，你不心触发了一个删除按钮，现在你了下面的报错息：

在这个界面当中，「OK」是一个相当模糊的表述，并没有说按钮的作用。不论是「确定」还是「取消」，都没有说清楚这个操作的真实含义。尤其当删除是一个存在潜在危险的操作，这个操作就更加需要准的表述。所以，这个地方个按钮应该是「删除」和「取消」更适，而删除应该用红色进行标识，让用户识这个操作的重要性或者独性。

4. 按钮应该拥有合理的尺寸

按钮大小应该反映出屏幕上这元素优先级，更大按钮应该意味着更要交互。

按钮优先级

让更要按钮在视觉上足以体现它要性。始终尝试让主要按钮更加突出，增加它尺寸，并使用高比度色来吸引用户注意力。

在 Dropbox 界上，设计师是使用了大小和色比来创造优先级。

让按钮适配用户手指

在许多 APP ，按钮设计太小了，这可能会导致用户出现误触情况。

△ 左侧：正确按钮尺寸；右侧：按钮尺寸太小

麻省理工学院实验研究发现，手指垫宽度平均值在10~14mm ，指尖在8-10mm ，这使10×10 mm 按钮尺寸是比较合理。

5. 注意按钮的次序

按钮序应该反映出用户和界交互属性，问问自己用户期望在屏幕上看到什么样序，或者说什么样序更合理，然后进相应设计。

举个例子，如「上一步/一步」两个按钮应该如何置方位呢？通而言，「上一步」是卷操作，应该在左边，而「一步」则是前进操作，应该在右边。

6. 避免使用太多按钮

这是许多 APP 和中经现的一个问题。当你供太多的择的时候，户往往会无适从。无论是设计还是 APP，请务必尽量考虑最重要的操作，控制好优先级和复杂。

△ 太多的按钮

7. 为按钮交互提供视觉和音频反馈

当户点击按钮的时候，他们更希望界面够给予适当的反馈。基于同的操作，界面给予视觉或者音频的反馈。当户没有收获任何反馈的时候，他们可会觉得界面没有收到他们的操作，从而反复点击，执行多次必要的操作。

人类和物世界交互，获得反馈，然后执行更多的操作，这种机制是人类进中形成的认知，这种反馈可是视觉，可是听觉，这些反馈会告诉户发生了么。

对于某些操作，如载，仅要告诉户他们的操作执行成功了，而且要显示当前的进。