按钮设计（Button User Interface Design简称UI）是影响网站转化优化（Conversion Rate Optimization简称 CRO）的一个非常重要的因素。在日常生活中，以下谈到的按钮设计原理随处可见。
按钮是交互设计的常见元素，它传达了即将发生的动作。虽然看起来按钮是一个非常简单的UI元素，如果设计得当，它们可以大大提高您的转化率。在本文中，我们将分享按钮最佳实践（基于个人经验和一些不靠谱的数据）。
就这么一丢丢东西，他的术语和组成原属还真不少。
看起来像按钮
视觉提示可帮助用户确定哪些是可点击的内容。所以请务必在可点击元素上使用适当的视觉提示，以使其看起来像按钮。其他视觉提示还有比如下划线，不同颜色和鼠标光标等。
形状
具有圆角的按钮（rounded）比具有尖锐边缘的矩形在眼睛上更容易，因为它们在视觉处理上需要较少的认知。
the Barrow Neurological Institute 对拐角的科学研究发现，“锐角比圆角产生更强的幻觉”。意思是，拐角越尖，看起来越亮，越刺眼。
带有尖角和不带有尖角的极端例子
为什么圆形（是说rounded，不是round）按钮效果更好？另一种解释可以追溯到儿童时期的发展心理学，我们知道尖角伤害，而圆角更安全。这就是为什么当孩子玩球时，大多数父母并不担心，孩子玩叉子则担心。
最后，圆形按钮是更有效的内容容器，因为它们向内指向矩形的中心。带有尖角的矩形按钮指向外部，视觉焦点放在矩形内部的内容较少。所以，一般来说品牌用尖角可以造成一定的视觉压力和冲击性；而转化较高的是圆角（一般为4px或者0.3rem的圆角）
根据康定斯基的点线面理论，带有尖锐边缘的矩形按钮指向外部，而圆形按钮指向内部，从而将更多焦点放在按钮内部。
尺寸
当“轻按”是移动设备和平板电脑设备上的主要输入方法时，您要确保用户可以轻松点击到按钮。MIT Touch Lab触摸实验室研究的结果发现，指垫（finger pads）的平均值在10-14mm（38-52px）之间，指尖（fingertips ）的平均值在8-10mm（30-38px）之间，使10mm x 10mm（38px x 38px）成为最小的触摸目标尺寸。
图片来源：uxmag
苹果公司的《 iPhone人机界面指南》（iPhone Human Interface Guidelines）一直建议按钮的最小宽度为44px，高度至少为44px。但是，如果您使用的空间较小，建议您将按钮的高度设置在32像素至40像素之间。同时，Android的Material Design原则建议触摸目标的宽度至少应为36px x 36px，按钮之间的间距至少应为6px。
按钮之间的间距
与传统鼠标光标相比，紧凑包装的按钮使用户更难准确地敲打手机或平板电脑。为了防止用户因意外按下错误的按钮，按钮应与其他敲击目标保持一定距离，以使8-10毫米（30-38像素）的指垫（finger pads）不会意外地同时按下两个按钮。
确保按钮之间有足够的填充。（一般至少为6px）
图片来源：材料设计
颜色
多年来，按钮已经发生了天翻地覆的变化，但只有一点没有发生任何变化即：使用颜色和对比度来指导用户采取重要的行动（CTA）。
颜色在按钮中非常重要，它可以帮助用户更清晰地理解操作。对于患有色盲的用户，您永远不要同时使用红色和绿色，请选择绿色或红色任意一种作为号召性用语，但绝对不能同时使用。
图片来源：http：//
在数字接口上广为流行的一种颜色是橙色-橙色，仅次于红色。但是它并不能消除所有红色的负面情绪，例如“停止”，“危险”，“错误”，“错误”和“危险”。我们已经看到一些最大的零售品牌，例如耐克，J-Crew和亚马逊，使用不同的橙色调作为号召性用语以吸引用户并获得点击。
耐克使用橙色的号召性用语按钮引导用户。图片来源：
对比
除颜色外，还应使用对比度来帮助用户在不同按钮之间进行选择。对比的UI按钮设计规则很简单：
高对比度-积极行动。对比中等-消极行动。对比度低-中立行动。
例如结帐页面，你想通过赋予此按钮最高的颜色对比度，使用户参与积极的操作。旁边放置的任何中性或负面动作都应具有较低的颜色对比度，以免再强调它们。
字体大小
用户扫描文本，而不是逐字阅读，以快速吸收页面的要点。使字体变小会妨碍用户更快地浏览内容。Payame Noor大学和IBM / Google进行的研究表明，随着字体大小的增加，读者的阅读速度会略有加快。
我这里有一篇写给大家看的建站字体方案，探讨了适合您的字体大小的比例。无论您选择在按钮中放置什么字体大小，只要确保它足够大以供用户扫描即可。最佳Web字体大小为16像素，通常应为现代Web设计中正文复制的最小大小。
布局位置
一般来说，一个页面的左侧是目录或者信息的一侧，用于快速查找内容。一般是左对齐的list等。比如下图的导航，缩略图等。右侧是号召行动的一侧，比如购物车和按钮都是在最右侧。右侧的转化率更高。
一屏一个主要按钮
一个屏幕中应该只有一个主要按钮，这样我们的潜意识不会纠结应该点击哪一个。如果需要有多个功能不同的按钮，则非重点按钮尽量改为次要按钮样式。
如果不考虑内容，上面米课表格可以改为转置为右侧按钮；右侧是行动侧。为了避免同时出现多个按钮造成混淆，可以在pc端鼠标滑移hover后出现。另一种布局方式是每个课程一个屏幕。
常见应用
按钮配合文字，可以组成CTA元素。
配合表单，Contact Form中也必不可少按钮。
结论
上面所谈到的也是个人当前的认知，按钮的原理也时刻变化；不同的行业和网页不同需求，按钮的原理也不尽相同；为了找到适合不同行业的按钮样式，最好的方式是实践和测试（Split test等）。总之按钮是创造流畅的用户体验的重要元素，值得关注。
