1.6.2 如何设计出色的网页按钮

在设计按钮时，深入洞察用户的交互场景与需求显得尤为关键，需要设想用户将在何种情境下与按钮相遇，是急需寻找信息的搜索页面，还是完成交易流程的支付环节？这些场景不仅决定了按钮的外观设计（如颜色、形状、大小），以吸引用户的注意，更影响了按钮的功能定位与行为反馈设计。

按钮在整个交互与反馈的闭环中扮演着信息传递的核心角色。它们不仅仅是触发动作的开关，更是向用户传达状态变化、操作结果及下一步指示的重要媒介。接下来深入设计细节当中，讲解如何才能够设计出出色的交互按钮。

1.按钮需要看起来可点击

图1-34所示为网页UI中的按钮看起来可点击。用户看到网页UI中可点击的按钮会有点击的冲动。想要使页面中所设计的按钮看起来可点击，注意下面的技巧：

（1）增加按钮的内边距，使按钮看起来更加容易点击，从而引导用户点击。

（2）为按钮添加微妙的阴影效果，使按钮看起来“浮动”出页面，更接近用户。

（3）为按钮添加鼠标悬浮或点击操作的交互效果，例如色彩的变化等，提示用户。

2.按钮的色彩很重要

按钮作为用户交互操作的核心，在页面中应该使用特定的色彩进行突出强调，但是按钮色彩的选择需要根据整个网页UI的配色来进行搭配。

网页中按钮的色彩应该是明亮而迷人的，这也是为什么那么多UI设计者喜欢采用明亮的黄色、绿色和蓝色的按钮设计的原因。想要使按钮在页面中具有突出的视觉效果，最好选择与背景色形成色相对比的色彩作为按钮的色彩进行设计。图1-35所示为突出而明亮的按钮色彩。

3.按钮的尺寸

只有当按钮的尺寸够大的时候，用户才能在刚进入页面的时候就被它所吸引，这里所说的大不仅仅是尺寸上的“大”，在视觉重量上同样要“大”。图1-36所示为大尺寸的网页按钮。

4.按钮的位置

按钮应该放置在页面的哪些位置？

在绝大多数情况下，应该将按钮放置在一些特定的位置，例如表单的底部、触发行为操作的信息附近、页面或者屏幕的底部、信息的正下方。因为无论是在PC端还是移动端的页面中，这些位置都遵循了用户的习惯和自然的交互路径，使得用户的操作更加方便、自然。图1-37所示为将按钮放置在网页界面中合适的位置。

5.良好的对比效果

在设计的广阔领域中，对比度是一项至关重要的原则，它几乎贯穿于所有类型的创作之中。特别是在按钮设计这一关键环节，巧妙地运用对比度不仅能确保按钮内容的（包括图标与文本）清晰可读，与按钮本身形成和谐而鲜明的对比，还能使按钮与背景及其周围元素产生强烈的视觉分离，从而在页面布局中脱颖而出，成为引导用户注意力的焦点。图1-38所示为与页面形成良好对比效果的按钮设计。

6.使用标准形状

在页面中，尽量选择使用标准形状的按钮。

矩形按钮（包括方形和圆角矩形）是最常见的按钮形状，也是大家认知中按钮的默认形状，它符合用户的认知习惯。当用户看到它的时候，立刻会明白应该如何与之进行交互。至于是使用圆角矩形还是直角矩形，需要根据页面的整体设计风格来决定。图1-39所示为矩形的网页按钮设计。

7.明确告诉用户按钮的功能

每个按钮都会包含按钮文本，它会告诉用户该按钮的功能。所以，按钮上的文本要尽量简洁、直观，并且要符合整个网页UI的设计风格。

当用户点击按钮的时候，按钮所指示的内容和结果应该合理、迅速地呈现在用户眼前，无论是提交表单还是跳转到新的页面，用户通过点击该按钮应该获得他所预期的结果。图1-40所示为通过按钮文本明确告诉用户按钮的功能。

8.赋予按钮更高的视觉优先级

几乎在每个页面中都会包含众多不同的元素，按钮应该是整个页面中独一无二的控件，它在形状、色彩和视觉重量上都应该与页面中的其他元素区分开。试想一下，如果在页面中所设计的按钮比其他控件都要大，色彩在整个页面中也是鲜艳突出的，它绝对是页面中最显眼的那一个元素。图1-41所示为按钮赋予更高的视觉优先级。