编辑导语:纽扣在我们的日常生活中很常见。结合按钮，用户可以知道下一步该做什么。但如果按钮设计不当，可能会导致用户误操作，降低用户的产品体验。在这篇文章中，作者总结了按钮设计。让我们一起来看看吧。
说起按钮，很多设计师都很熟悉，熟悉的不能再熟悉了。它们是界面设计中最常用和最重要的组件之一，也是容易被忽视的元素之一。因此，在设计之前了解和理解按钮组件是非常必要的。
从我们记忆认知开始，按钮就一直在和我们打交道，比如墙上的电灯开关，电视机的调节按钮，遥控器的按键等等。这些物理按钮不仅是当前UI按钮组件的前身，而且也不会消失。仍然会有大量的非数码产品和机器设备被继续使用。无论它们如何进化，都不会脱离物理参照物。
按钮最吸引人的地方在于，通过简单的触摸就能轻松满足其行为需求。按钮直观易用的设计会影响人们完成一件事情的意愿和效率。
在UI设计中，如何完美的避免问题，更好的设计按钮，是每个设计师需要深入思考的问题。按钮设计的好坏会直接影响到用户引流、触发动作、产品转化率等至关重要的问题。
此外，精致的按钮也会提升整个页面的视觉质量。本文将对按钮进行分析，介绍设计按钮时需要考虑的因素和设计标准，并将理论付诸实践。
在UI设计中，按钮是明确表示交互行为和动作的组件，主要用于触发一个即时操作。很多情况下，我们需要采取下一个动作或者回到上一步，这些都是通过按钮完成的(有些场景可以通过手势进行交互)。
视觉层面上，按钮的构图看起来很简单，由一个背景块/线框加上一组文案组成。但是，如果真的想把按钮设计好，仅仅在视觉层面是不严谨的，它的大小、位置、色值、文案等每一个细节都是不严谨的。与用户的操作体验有关。你一定遇到过以下情况:
通常在设计按钮之前，我们需要详细了解按钮的含义，应该加在哪里，不应该加在哪里，为什么要加，主要从以下几点来体现按钮的功能:
1)功能操作
这种按钮很常见，比如展开、折叠、下拉、加减等。按钮视觉弱，强调页面的功能，突出主题信息。操作后会发生一些交互变化。这种按钮主要起到功能表单的作用。
2)明确指导下一步操作
当用户完成一个页面的内容填写或信息确认后，视觉焦点会丢失，下一步按钮会聚焦在视觉重心上，通过文案告诉用户下一步该怎么做，常见的有保存、下一步、支付、确认等。
另外，用户需要完成某个任务，但是在同一个任务流中有很多种信息。此时，在每一步的末尾以分步分页的方式添加一个可以上下连接的按钮，清晰地引导用户进入下一步，从而提高用户完成整个任务的成功率。
3)培养行为习惯
如果你操作了某个按钮后获得了一定的收益，并且能够持续的给用户带来价值，不妨将这个按钮设计的更加醒目，在同一级别的不同地方保持视觉上的统一，继续培养用户的点击习惯。当用户下次看到这样的按钮时，惯性思维会引导用户点击。
在大多数认知中，最常见的按钮是一个基色块和一个副本。但是，一个好的按钮需要在很多细节上把控，才能发挥最大的作用。
例如，副本的长度/边距、容器的大小/圆角、填充颜色的主次顺序等。让我们来看看按钮由哪些属性和元素组成。
按功能属性分类，按钮类型可分为过程控制和功能选项操作。
视觉风格不同，不同的页面可能会有相同的权重级别。
在按钮的设计中，为了体现按钮不同的具体含义和后续设计开发的统一性，明确按钮的交互风格是设计过程中不可或缺的重要一环。设计师需要在不干扰界面视觉的前提下，明确定义每个按钮的风格和状态，并与其他元素和布局区分开来，以保证按钮的可用性。
有以下几种常见状态:
在PC端设计按钮的时候，因为鼠标的精准点击，我们通常会把按钮做得更小，让整个界面看起来更精致。只要不影响操作，36px~48px范围的按键都是常见的。
但是在移动端的按键设计上，我们更应该关注的是物理尺寸，也就是手指(指尖)在操作时所占据的实际范围。
在iOS的设计规范中，按钮的最小点击面积定义为44pt。一旦小于该值，操作精度将会降低，导致操作错误或无效。
在实际的iOS界面中，很多应用在设计按钮时并没有严格遵循最小44pt的标准。比如很多主次界面的二级功能入口，有的不到30pt，对用户的影响很小，这可能就是对应的功能权重和用户点击频率很低的原因。
还有一些文字按钮，永远达不到最低触摸标准(只是增加触摸热点)，所以按钮的大小不是很死板。
菲茨定律告诉我们，“目标尺寸越大，移动到目标所需的时间越短”。所以在满足手指触摸范围的同时，要根据对应功能的重量比例适当调整按键大小。
可以理解，一个元素的尺寸越大，越醒目，越容易被视觉捕捉，也就越容易被“点击”。同时降低了准确率，也降低了用户的运营成本。
我们以iOS的8像素网格系统和2倍图像为例。常见的按钮有四种:小-64px，中-80~88px，大-98px，超大-随机。
在UI设计中，几乎每个页面上都有按钮，样式和类型也很多，但常见的设计风格只有几种，如扁平化、微纹理、拟态、新拟态(概念)...
1)平面按钮
通常用纯色填充容器就够了，没有不必要的视觉干扰，操作起来也很简单。这种类型的按钮通常在应用程序中使用最多。比如:工具应用、B端应用等。
2)微纹理按钮
相比扁平化，填充渐变和浅投影既能保持信息内容的简洁，又能让用户有更强的操作欲望，让页面更有质感，更耐用。比如:年轻应用、娱乐应用、儿童应用等。
3)要具体化的按钮
大部分都是三维设计，有丰富的3D纹理和属性样式。参考现实事务或者吸收应用场景中的一些元素，使其更加真实，代入感强。例如:游戏应用、H5话题、操作横幅等。
4)新的模拟按钮
2021年的时候风靡一时，几乎没人知道。但是如果要降落，不太现实，不太实用，只能在飞机稿里炫耀。随着时间的推移，它会逐渐消失。不知道有一天改进后会不会再出来。(当初扁平化是几经周折才出来的，经过多年的完善才逐渐被大众接受。)目前只有少数工具应用使用新拟态，如计算器、AI设备控制、带云笔记等。
同一个页面出现多个按钮时，只允许有一个主操作按钮，其他不特别设置。当然，如果二次操作较多，二次按钮过多也无益，可以根据权重降级处理，以小图标或文字按钮的形式呈现。
主/次操作按钮应风格统一。用户在需要操作的时候，要尽可能减少自己的思考和选择时间。按钮要迎合用户的固有认知和惯性思维，节省时间和成本，提高操作效率。
在大部分的界面设计中，我们通常看到的按钮多为小圆角和全圆角，有的按钮完全是直角，所以我们需要根据产品的行业属性和气质来选择最合适的圆角类型。无论如何，尽量避免圆角大的纽扣(卡片除外)，既不方也不圆，不伦不类，不够成熟也不美观。
1)小肉片
小圆角按钮的圆角值通常控制在高度的1/5或1/6，应用儿童字体的1/4(较大)不是绝对值。如果习惯使用8像素网格，根据按钮大小，可以直接将圆角值固定在8px、16px、24px(更大)，这样可以减少设计组件的数量，方便后续调用组件封装。
2)全圆角
全圆角按钮的圆角值固定在高度的1/2，或者直接在软件的圆角设置中将值拉到极限。
3)直角
没有圆角值在PC上很常见，一些比较严谨的移动应用使用的是直角按钮。
按钮里的文字要让用户容易理解，不能太生疏或者绕口。用户在遇到不易理解的信息时会感到困惑，甚至误导用户操作失误，造成损失。另外，文字需要简洁，不能太多或者断行，能够合理引导用户完成操作。
上图文案的歧义很明显。聪明的设计师想留住用户，故意改变主次按钮的样式，希望用户的操作不会成功。那么用户在需要取消订单的时候就很困惑。是确定还是取消，主要操作按钮，取消成功？或许稍加思考，用户就能反应过来，但无疑增加了选择的难度、思考时间和运营成本。
按钮中的文字过大或过小都会影响用户接收信息的效率，大小比例需要适中。文字太多会觉得拥挤(就像每个人的衣服都太小一样)，没有呼吸感。您应该在文本周围留出足够的空空间。同时，太小的文字会显得小气，显得吃力，不利于接收信息。
设计完按钮组件后，页面中的其他组件或元素应该与按钮有明显的区别，以避免不必要的误解。
在弹出窗口中，主按钮是在左边吗？还是在右边？
这是一个有争议的问题，所以没有争议。在移动终端的弹窗设计中，主按钮是恰到好处的，不一定绝对正确，但绝对没有错。调查数据显示，用右手单手操作手机的用户数量高于用左手操作手机的用户，用户也有一定的意识，上一步在左侧，下一步在右侧，返回在左上方，保存或确认在右侧。
易访问性是按钮设计最重要的目标之一，不仅要风格统一，还要符合用户的认知，让用户快速知道这个元素是否可以点击。点击后会发生什么？甚至有一种似曾相识的感觉。如果按钮风格设计和用户的认知有较大偏差，用户就不容易理解。
在表单设计中，大多数用户需要完成一定的任务才能正常操作下一步按钮。在完成之前，他们需要使用较少的禁用按钮。上一部分我们讲了“待激活”，也就是用浅主色填充按钮，等待用户完成任务激活。
通常系统默认不允许操作或者有时间限制，所以会使用灰色填充的禁用按钮。即便如此，系统也应该设法隐藏它。如果是迫不得已，就要说明按钮附近的情况，以免因使用不当造成用户的负面情绪。
在给按钮添加投影的时候，选择灰色或者纯黑加上调整不同的亮度就可以满足基本的效果，但是如果想要更好的视觉体验，可以根据按钮本身的颜色值进行调整，让投影效果看起来更舒服，更好的匹配页面。
另外，不要过度使用投射，宁可缺也不要滥用。如果按键凸起太深，看起来粗糙凌乱，还是不要用的好。如果尽量不使用颜色较浅的按钮，否则可能会影响按钮的识别，让这个页面看起来不够清爽。
对于设计师来说，按钮作为设计组件之一，有很多容易被忽略的细节。我们需要深入思考每一个微小的元素。比如任何尺寸的任何组件，我们都需要精益求精，才能给用户带来更好的体验。
一篇文章不足以展现按钮设计的精髓，还需要我们一起做更多的挖掘。希望这篇文章能给朋友们一些启发。下一篇“Icon”文章再见。
沙漠之鹰；微信官方账号:能量眼，人人都是产品经理专栏作家。致力于产品需求的驱动，产品体验的挖掘，运用设计手段给受众用户带来更好的体验，即好看又好用。
本文由人人作为产品经理原创发布，未经允许禁止转载。
图片来自Unsplash，基于CC0协议。
