编者指南：按钮在我们的日常生活中非常常见。结合按钮，用户可以知道如何进行下一个操作。但是，如果按钮设计不当，可能会导致用户错误操作，降低用户的产品体验。本文对按钮设计进行了总结和梳理。让我们看看。
说到按钮，许多设计合作伙伴都很熟悉它们，再也不熟悉它们了。它是设计界面时最常用和最重要的组件之一，也是容易被忽略的元素之一。因此，在设计之前对按钮组件有很好的了解是非常必要的。
由于我们有记忆和认知能力，按钮一直在与我们打交道。墙上的电灯开关、电视的调节按钮、遥控器的按钮等等。这些物理按钮不仅仅是现在用户界面按钮组件的前身，不会消失。仍将有许多非数字产品、机器和设备继续被使用。无论它们如何演化，它们都不会与物理参照分离。
按钮最吸引人的地方在于，它们可以通过简单的触摸轻松满足自己的行为需求。按钮设计的直观性和易用性将影响人们完成一件事情的意愿和效率。
停留用户界面设计设计师需要考虑如何避免设计中的每一个问题。按钮设计的质量将直接关系到用户排水、触发动作、产品转化率等关键问题。
此外，精致的按钮还将提高整个页面的视觉质量。本文将对按钮进行分析，介绍设计按钮时需要考虑的因素和设计标准，并将理论应用于实践。
在UI设计中，按钮是一个明确指示交互行为的组件。主要用于触发即时操作。很多时候，我们需要通过按钮执行下一步或返回上一步（在某些场景中可以使用手势交互）。
在视觉层面上，按钮的组成看起来非常简单，可以由底色块/线框和一组文字组成。然而，如果你真的想设计好按钮，停留在视觉层面并不严格。每一个细节的处理，如大小、位置、颜色值和文案。。。与用户的操作体验有关。您必须遇到以下情况：
一般来说，在设计一个按钮之前，我们需要详细了解按钮的含义，在哪里添加，在哪里不添加，以及为什么要添加。我们主要从以下几点来反映按钮的功能：
1）功能性操作
这种按钮非常常见，如展开、折叠、下拉、加减等。按钮视觉较弱。它关注页面的功能，并突出显示主要信息。操作后会发生一些交互变化。这种按钮主要起功能形式的作用。
2）明确指导下一步行动
当用户完成页面的内容填充或信息确认时，他将失去视觉焦点，下一步按钮将聚焦视觉焦点，并通过文本告诉用户下一步要做什么。常见的有save、next、pay、confirm等。
此外，用户需要完成一项任务，但在同一个任务过程中有多种信息。此时将采用分步分页的方式，并在每一步结束时增加一个可上下连接的按钮，以清晰地引导用户进入下一步操作，从而提高完成整个任务的成功率。
3）养成行为习惯
如果你在操作一个按钮后获得了一些好处，并且可以继续为用户带来价值，那么你不妨设计一个更引人注目的按钮，在同一级别但不同的地方保持视觉统一，并继续培养用户的点击习惯。当用户下次看到这样的按钮时，惯性思维会引导点击。
在大多数认知中，最常见的按钮是背景色块和副本。然而，一个好的按钮需要在很多细节上加以控制，才能发挥最大的作用。
例如，副本的长度/边距、容器的大小/圆角、填充颜色的主要/次要划分。。。让我们看看按钮由哪些属性和元素组成。
- 圆角：传达按钮的气质，决定用户的视觉感受。最常见的是小圆角。还有更严谨、有力的全直角、卡通可爱、年轻风格的全圆角；
- 图标：用于按钮含义的图形抽象表达，如加载和编辑；
- 容器：整个按钮的载体，包含文案、图标等元素；
- 边框：确定按钮的边框，常用于辅助按钮的笔划；
- 文案：用文字表达按钮的意思，简化文案；
- 背景：为了表达按钮的当前状态，合理使用按钮的主色可以有效传播品牌气质；
- 投影：使按钮具有层次感，可以用渐变背景反映微观纹理的效果。
根据功能属性的分类，按钮类型可分为过程控制和功能选项操作。
- 流程控制：常见的传统按钮，如付款、下一步、确认、保存等。容器中有图标、图标+文案和文案。
- 功能选项：切换/加减控制、标签栏/分类、状态切换等，操作后只对当前页面进行属性调整，不涉及流程变更。
视觉风格不同，不同页面上的权重可能相同。
- 通用按钮：最常见的按钮。当同一页面上有多个通用按钮时，会有主按钮和次按钮；
- 虚线按钮：常用于添加、上传等操作；
- 文本按钮：只使用文本作为触发点，一些将通过主颜色、右箭头、下划线等突出显示。
- 高重量：主操作按钮带有填充色。当同一页面上有多个按钮时，只允许一个高权重（主操作）按钮；
- 中等重量：带有边框轮廓的概述按钮。同一页面上可以存在多个中等重量的按钮；
- 低重量：纯文本按钮和轻填充+轻文本按钮。同一页面上可以有多个低重量按钮。
在设计按钮时，为了体现按钮的不同具体含义以及后续设计与开发的统一性，明确按钮交互风格是设计过程中不可或缺的重要部分。设计师需要在不干扰界面视觉的情况下明确定义每个按钮的样式和状态，并将其与其他元素和布局区分开来，以确保按钮的可用性。
常见情况如下：
- 待激活状态：只有在某些操作完成或有多个必要的前提条件后，才允许交互；
- 正常状态：按钮的正常显示状态，可交互操作；
- 单击状态：触摸效果，表示按钮正在交互且未完成。将在正常状态的基础上添加不透明度为10%的纯黑色遮罩。交互完成后，会触发此按钮的真实效果；
- 加载状态：交互后没有立即执行，或者系统需要一定时间才能完成执行；
- 禁用状态：系统默认暂时不允许操作，或者用户需要离开此页面完成某些前提条件后才能使用。
在设计PC端的按钮时，由于鼠标的精确点击，我们通常会将按钮设计得更小。同时，它可以使整个界面看起来更加精致。只要不影响操作，36px~48px范围内的按钮更常见。
然而，对于移动端的按钮设计，我们应该更多地考虑物理尺寸，即手指（指尖）在操作过程中占据的实际范围。
在IOS设计规范中，按钮的最小点击区域指定为44pt。一旦小于该值，操作过程中的精度将很低，导致误操作或无效。
在实际的IOS界面中，许多应用程序在设计按钮时没有严格遵循最小44磅的标准。例如，主界面和次界面的许多次功能入口，其中一些小于30pt，对用户没有太大影响，这可能是因为功能权重和用户点击频率非常低。
还有一些文本按钮，它们永远无法达到最低触摸标准（触摸热点区域可以增加），因此按钮的大小不是很严格。
菲茨定律告诉我们，“目标越大，移动到目标的时间越短”。因此，在满足手指触摸范围的同时，应根据相应功能的重量比例适当调整按钮的大小。
不难理解，元素的大小越大，越引人注目，就越容易被视觉捕捉和“点击”。在降低精度的同时，降低了用户的运营成本。
我们以8像素网格系统和IOS的双图像为例。更常见的按钮有小型64px、中型80~88px、大型98px和超大随机按钮。
在UI设计中，几乎每个页面上都有按钮，有许多样式和类型，但只有几种常见的设计样式，如扁平化、微纹理、准物化、新模仿（概念）
1）扁平按钮
通常，容器中填充纯色，没有多余的视觉干扰，易于操作。这种类型的按钮通常在大多数应用中使用。例如：工具应用、b端应用等。
2）微纹理按钮
与扁平化相比，填充渐变色和浅投影不仅可以保持信息内容的简洁性，让用户有更强的操作欲望，而且可以让页面有质感和更好的外观。例如：年轻应用程序、娱乐应用程序、儿童应用程序等。
3）准物化按钮
大多数设计都是三维的，具有丰富的三维纹理和属性样式。指现实世界中的事物或吸收应用场景中的一些元素，使其更真实，具有强烈的替代感。例如：游戏应用程序、H5主题、操作横幅等。
4）新模仿按钮
2021是很受欢迎的，几乎没有人知道。然而，着陆是不现实和不切实际的，因此它只能在飞机草案中成为焦点。随着时间的推移，它逐渐消失了，我不知道有一天经过改善后是否会再次推出（这套公寓经过几次波折才出来，经过多年的改善后逐渐被公众接受）。目前，只有少数工具应用程序使用新的模拟，如计算器、AI设备控制、有道云笔记等。
当同一页面上出现多个按钮时，只允许一个主操作按钮，其他按钮不需要特别设置。当然，如果有很多次操作，并且没有太多次按钮，它们可以根据权重降级，并以小图标或文本按钮的形式呈现。
主/辅操作按钮应采用统一样式。当用户需要操作时，应尽可能减少他们的思考和选择时间。按钮应迎合用户固有的认知和惯性思维，节省时间和成本，提高操作效率。
在大多数情况下界面设计在中，我们通常看到的大多数按钮都是小圆角和全圆角，有些按钮是完全直角的。我们需要根据产品的行业属性和气质选择最合适的圆角类型。在任何情况下，尽量避免使用大圆角（卡片除外）按钮，这些按钮既不是方不圆的，也不是不伦不类的，看起来不成熟、丑陋。
1）小鱼片
小圆角按钮的圆角值通常控制在高度的1/5和1/6。还有1/4（更大）用于儿童应用，这不是绝对值。如果习惯使用8像素网格，可以根据按钮的大小直接将圆角值固定在8px、16px和24px（更大），这样可以减少设计组件的数量，方便后续组件封装的调用。
2）全圆角
“完全圆角”按钮的圆角值固定为高度的1/2，或者直接将该值拉到软件圆角设置中的限制。
3）直角
没有设置圆角值，这在PC端很常见，一些更严格的移动端应用程序使用直角按钮。
按钮中的文字应便于用户理解，不得过于生疏或绕口。用户在遇到不易理解的信息时会感到困惑，甚至误导用户，造成误操作和损失。此外，文字还需要简洁，不要太多或断线，并能合理引导用户完成操作。
上图文案的模糊性显而易见。认为自己聪明的设计师想留住用户，故意改变主按钮和次按钮的样式，希望用户的操作不会成功。当用户需要取消订单时，他会感到困惑。可以还是取消？也许稍加思考，用户就可以做出反应，但这无疑增加了选择的难度、思考时间和运营成本。
按钮中的文本太大或太小，会影响用户接收信息的效率。尺寸比例需要适中。文字太大，感觉很拥挤（和你买小衣服时一样）。你没有呼吸感。你应该在课文周围留出足够的空间。同时，文本太小，会显得吝啬和困难，这不利于信息的接收。
设计按钮组件后，页面中的其他组件或元素应与按钮明显不同，以避免不必要的误解。
在弹出窗口中，主按钮在左侧？还是在右边？
这是一个有争议的问题，所以我们不要争论。在移动终端的弹出窗口设计中，主按钮位于右侧。这不一定绝对正确，但绝对没有错。根据调查数据，使用右手操作手机的用户数量高于使用左手的用户数量，用户也有一定的意识。左侧为上一步，右侧为下一步，左上角为返回，右侧为保存或确认。
可访问性是按钮设计最重要的目标之一。它不仅要在风格上统一，还要符合用户的认知，这样用户才能快速知道这个元素是否可以点击？点击后会发生什么？甚至有一种似曾相识的感觉。如果按钮样式设计与用户认知之间存在较大偏差，用户不容易理解。
在表单设计中，大多数用户需要完成一定的任务才能正常操作“下一步”按钮。在完成之前，他们需要使用更少的禁用按钮。在前面，我们讨论了“待激活”，即用浅色主色填充按钮，等待用户完成任务激活。
一般情况下，系统默认不允许操作或有时间限制，将使用灰色填充的禁用按钮。即便如此，系统也应该试图隐藏它。如果绝对必要，则有必要解释按钮附近的情况，以避免用户因使用不当而产生负面情绪。
向按钮添加投影时，选择灰色或纯黑色，并调整不同的亮度以满足基本效果。但是，如果想要更好的视觉体验，可以根据按钮本身的颜色值进行调整，使投影效果看起来更舒适，与页面更兼容。
此外，不要过度使用投影。与其过分，不如缺席。如果按钮的投影太深，看起来粗糙凌乱，最好不要使用它。颜色较浅的按钮尽量不要使用投影，否则可能会影响按钮的识别，使页面看起来不够新鲜。
对于设计师来说，按钮作为设计组件之一，有许多容易被忽略的细节。我们需要深入思考每一个小问题。例如，对于任何尺寸的组件，我们都需要不断改进，以便为用户带来更好的使用体验。
一篇文章不足以揭示按钮设计的本质，我们需要共同挖掘更多。我希望这篇文章能给我的朋友们一些启发。下一篇“图标”文章见。
沙漠鹰；公众号：能量眼球，每个人都是产品经理的专栏作家。我们致力于推动产品需求，挖掘产品体验，用设计手段给受众用户带来更好的体验，即美观易用。
这篇文章最初由每一位产品经理发表。未经允许不得转载
题图来自unsplash，基于cc0协议
最新评论