如何在视觉感官上突出按钮信息

142018/8 如何在视觉感官上突出按钮信息

飞鸟哥从4个方面讲解按钮设计原则全面、详尽

在网站设计中，经常涉及到按钮。你的按钮设计，必须考虑到如何让它更加醒目，并且更容易点击，而为了达到这个目的，你就必须从按钮的大小和视觉反馈来进行处理，以帮助用户可以更方便地使用你的网站。

1、按钮大小和颜色填充

在做页面设计的时候，你必须要考虑按钮相对于页面上的其他元素有明显区别。同时，保证您设计的按钮足够大，以供人们点击。

根据美国MIT触摸实验室的研究发现，手指垫的平均尺寸在10-14mm之间，指尖的尺寸为8-10mm，这就使得10mm x 10mm成为了按钮设计的一个参考标准。当然如果是用鼠标键盘操作，可以减少按钮尺寸以适应密集的UI设计的。

另外在进行按钮设计时，还需要注意按钮之间的间距，因为适当的间距有助于将按钮分离，并为用户提供足够的使用范围。

2、提供视觉上的反馈

这个要求不是页面美观上的问题，而是考虑到用户体验。通常，一个按钮并不只是单纯的一个状态，而是会遇到多种不同情况下的点击，而在这时你就需要有不同的视觉反馈来表达它现在的具体状态。下面这个插图清楚地表达了不同的按钮显示状态：

3、从视觉上突出显示最重要的按钮

在进行页面设计的时候，使用显眼的颜色，并将按钮放置在用户最有可能注意到的显着位置。比如我们看一下微信的聊天界面，它就非常简单，几乎是单色的，除了“发送”按钮。一旦用户写完信息，他们立即注意到这个漂亮的绿色按钮。

同样的规则也适用于网站上面。如果您看一下下面的腾讯官网示例，首先会引起注意的就是“立即下载”这个按钮。在这种情况下，颜色和位置比文字本身要更重要。

4、主按钮和辅助按钮的视觉区别

在很多的网站和软件上面，使用对话框中的选择按钮来吸引用户的注意力。当他们在主要和次要行动之间进行选择时，视觉差异是帮助他们作出选择的有效方法：

*把你想要他做的选择，增加更有分量的视觉重量，让它成为视觉主导按钮。

*次要行为（例如继续退出选项）应该具有较弱的视觉重量，因为减少次要行为的视觉突出性可以减小用户继续退出的概率，进一步让用户跟着你的想法去做。

热门点击