注意事项

一、按钮要和超链接区分开

在扁平设计时代，类似MateriaI Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。

然而，从aichor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如：聚焦&按压状态，留白，对齐等。

二、当背景较复杂时，按钮用反色 深配浅 浅配深

在纯白背景下大多数样式的按钮还行得通，但如果你把按钮搁在照片背景上呢?或者是一个更深的不同颜色的背景?更伤脑筋的是，你的按钮也可

以放在浅色中性色的背景上吗?按钮可以用在(包括但不限于上面所提到的)任何情况下吗?主按钮的颜色可以随意改变吗?

三.设计并建立按钮的交互规范

按钮是最简单原始的交互，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样!”是不够的。不是开发者而是由设计者来决定状态切换的按钮是如何呈现的，包括：默认状态，鼠标悬停，点击状态/焦点获取(“光晕状态”)，被按住/激活，甚至旋转等待以及其他花

式秀进度的动画。

四、按钮是系统在视觉风格上最纯粹的表达方式 (3:1）留白

按钮把颜色、字体和图像这三个属性紧密地结合起来，彩成了一个不可分割的集体。按钮也同时引起了关于留白的讨论:内部填充（特别是，标签的左右）和外部边距(毗邻其他元素)。最终，按钮可以体现更多只有内行才懂的属性，例如圆角边框(通过调整border-radius)或上升(通过调整图层阴影效果属性box-shadow),重要的按钮需要做出强调，可以利用颜色，可以利用边框，可以利用不一样的显示方式

漂亮的按钮固然能赏心悦目，但是设计的与网站其它内容差异太大，就不是那么美观了。所以设计按钮的时候，要考虑该位智按钮的上下文内容,不能显得太唐突。按钮首先看功能，如果是跳转可以放在知识普及，一般需要填资料的放在介绍完之后，显示按钮，这样会让用户知道这样的按钮是什么用途。

要把按钮当作系统风格的主导代表元素。加分做法是，把按钮的定义和一整套快速发展的标记变量统一，这些标记变量规定了颜色，尺寸，空白和其他细节。按钮看起来很简单，其实包含了各式各样的属性。

五、按钮的位置

按钮应该放置在页面的哪些位置?页面中那些地方能够为页面带来更多的点击量?

绝大多数情况下，应该将按钮放置在一些特定的文职，如表单底部3、再出发行为操作的附近、在页面或屏幕的底部，在信息的正下方。

六、确保次要按钮≠禁用

没人会盼着灰色按钮出现，但是，你可能需要给醒目的颜色饱和的主选项旁边配上一个次要选项。得避免出现另一个同样饱和的颜色，不然那会导致两个颜色饱和

的按钮一个挨着一个，就像绿的“保存”和蓝的“提交”。不仅是你，而且要让用户也能知道哪一个更重要。

将次要按钮的颜色和它的禁用犬态方案匹配起来。确保所有选项的颜色和谐统一，没有谁是不易被发觉的。哪一个是禁用的?

七、良好的对比效果

几乎所有类型的设计都会要求对比度，在设计按钮时，不仅要让按钮的内容(图标、文本）能够与按纽本身形成良好的对比，而且按钮也要与北京周围元素形成对比效果，这样才能使按钮在页面中凸显出来。

八、使用标准形状(矩形、圆角矩形圆形)

尽量使用标准形状的按钮，矩形按钮(包括方形和圆角矩形)是最常见的按钮形状，也是大家认知当中按钮的默认形状，他符合用户的认知习惯。当用户看到他时，

会立即明白应该如何与之进行交互，至于使用圆角矩形还是直角矩形，就需要根据整体风格决定。

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

每个按钮都会包含按钮文本，他会告诉用户该按钮的功能。所以，按钮上的文本要尽量简介、只管，并且符合整个网站的风格调性。用户单击按钮时，按钮指示的

内容和结果应该合理、迅速的呈现在用户眼前，无论是提交表单、跳转到新的页面，用户单机该按钮都应该获得预期的结果。