按钮设计都有哪些常见注意事项

栅格化设计方法在网页设计中是使用非常普遍的一种设计方式，而今天我们就一起来了解一下，在按钮设计方面都有哪些设计要求是需要我们遵守的。

1.网格基数的设置

这里的网格不是平面设计中的网格系统，是包含在绘图工具中的网格功能，虽然它俩在本质上是相同的，但现在先不要给它俩做过多的区分。用绘图工具绘制网格能帮助我们约束模块，使模块的比例存在一定的关系。例如我就拿尺寸大小为137×31的按钮A，和尺寸大小为128×32的按钮B举例，尺寸大小为137×31的按钮A是不规范的，宽137和高31是不存在比例关系的。而尺寸大小为128×32的按钮B就是规范的，宽128和高32不仅是倍数关系(128/32=4倍)，而且两个数都可以整除我们在全局中设的基数4(32/4=8，128/4=32，这里的4为基数)。

2.按钮的基础规范

当我们会运用绘图工具中的网格功能，设置基数来绘制按钮，用熟练了就会相当讲究，每一个细小的间距都应该符合倍数关系，不仅物理位置上能得到统一，视觉上也能满足一定的美感。

3.按钮的字符限制

一个按钮包含和“无图标”和“有图标”两种形式，无图标比较好处理，直接把相应文本放在按钮中水平、垂直居中就可以了，然后再算清文本与边框之间的距离就可以了。

4.按钮的交互状态

一个按钮的交互状态有四种，分布是：无状态、hover(触碰)、点击后、禁止。采用的配色可以递增(由浅到深)，也可以递减(由深到浅)。按钮交互状态的配色深浅也是根据整体页面有关的。如果整体的调性偏深，配色可以递减(由深到浅)，如果整体的调性偏浅，配色可以递增(由浅到深)。

作者：Lawrence_V

节选：站酷

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!