按钮设计几个基本原则指南

在网页设计中，按钮是一个必不可少的元素，它不仅仅是用户操作的入口，还直接关系到用户体验和界面美感。所以，按钮设计的重要性不言而喻。本文将介绍按钮设计的七个基本原则，从颜色、形状、大小等方面，为你提供按钮设计的指南和灵感。

一、按钮必须得看起来像按钮

涉及到用户界面交互的时候，用户需要知道哪些是可点击的，而哪些不是。面对着UI界面中的每个元素，用户都需要对它们进行辨别和判断，而这个过程越长，可用性其实就越差。

那么，用户是如何判读哪个元素是可交互的呢？通常，用户是基于以往的经验和视觉来对UI元素进行判断，这就是为什么需要通过合适的视觉符号来帮助用户理解（比如尺寸、形状、颜色、阴影等），使得元素看起来像是按钮。视觉符号为界面提供可供性。

不幸的是，在许多界面当中，按钮的可发现性和指示性并不强，这使得交互发生的机率有所降低，用户会纠结于哪些可点击，而哪些不可点击，这个时候设计是否炫酷，就显得不那么重要了。即使视觉上界面设计得足够突出，可用性很弱，会让用户陷入沮丧，产品也就不再具备可用性了。

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

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

在很多情况下，设计师会有意识地不将某些元素的交互性凸显出来，因为他们会认为这些东西是显而易见的。但是事实并非如此，在设计UI的时候，应该牢记下面的事情。

作为设计师，是很容易搞清楚UI中哪些元素可交互，哪些不可交互，但是用户并不清楚。

尽量在按钮中采用用户熟悉的设计。

以下是绝大多数用户都熟悉的按钮样式：

1、带有矩形边框的、填充有色彩的按钮；

2、带有圆角矩形边框的、填充色彩的按钮；

3、带有阴影有色彩和内容填充的按钮；

4、幽灵按钮。

在这几种常见的模式当中，带有阴影和色彩填充的按钮，对于用户来说是比较清晰的，因为它在视觉上是有三个维度的，用户会感知到这是一个可按下去的元素。

二、将按钮放在用户希望看到的地方

用户对于页面交互其实是有基本的感知和期望的，也就是说用户对于按钮的位置是有个基本的认知的。不要让用户到处找按钮，它比较好在用户所期望的位置出现。

尽可能使用传统的布局和标准的UI模式

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

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

三、按钮应该拥有合理的尺寸

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

按钮优先级

让更重要的按钮在视觉上就足以体现它的重要性。始终尝试让主要的按钮更加突出，增加它的尺寸，并且使用高对比度的色彩来吸引用户的注意力。

让按钮适配用户的手指

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