摘要：无法想象没有按钮的页面是什么滋味，那定会像没有方向盘的汽车，让人不知所措吧？也无法想象按钮设计不恰当，会给用户带来怎样的困扰？面对十万火急的任务需求，如果需要调动全部理性脑，深呼吸三秒，才能找到想要执行操作的按钮入口，我想这样的产品设计是失败的，是会被用户所唾
无法想象没有按钮的页面是什么滋味，那定会像没有方向盘的汽车，让人不知所措吧？也无法想象按钮设计不恰当，会给用户带来怎样的困扰？
面对十万火急的任务需求，如果需要调动全部理性脑，深呼吸三秒，才能找到想要执行操作的按钮入口，我想这样的产品设计是失败的，是会被用户所唾弃的。
本文将详细剖析按钮的神秘面纱，了解它、研究它，让按钮设计成为产品的得力助手，为我们的产品赋能，为我们的工作提效，下面就让我们开启这场神秘之旅吧!
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
按钮在我们生活中起着很大的作用，它就像我们的小助手一样，帮我们一键开启想要的任务，凡事都能一键触达。
按钮在UI界面中，是一种界面交互控件，通常以矩形、圆形或其他几何形状呈现，具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作，如提交表单、执行命令、导航页面、切换状态等。
按钮一般包含文字标签、图标或两者的组合，以清晰传达其功能。同时，按钮在不同状态下会呈现出不同的视觉效果，如默认状态、按下状态、悬浮状态、禁用状态等，为用户提供操作反馈和引导。
1. Antdesign对按钮的种类划分❶ 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
❷ 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
❸ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如下面的站酷活动页就用了很多的文字按钮，只有当按钮被选中时，按钮才会高亮选中。
❹ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，让页面看起来更加的简洁。
❺ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
按钮的样式可以从多个方面进行分类和设计，以下是一些常见的样式分类：
❶ 按颜色划分
单色按钮：按钮背景为单一颜色，如蓝色、绿色、红色等，常用于强调按钮的主要功能或操作。渐变色按钮：按钮背景为渐变色，可以是线性渐变或径向渐变，通常用于增加视觉吸引力和现代感。透明按钮：按钮背景透明或半透明，通常用于与背景融合或突出按钮上的文本和图标。彩色边框按钮：按钮背景透明或浅色，但有彩色边框，常用于需要突出按钮边界的场景。❷ 按形状分
矩形按钮：这种是最常见的按钮形状，适用于大多数界面设计。圆形按钮：按钮形状为圆形，通常用于表示播放、暂停等操作，或用于具有特定功能的图标按钮。圆角按钮：按钮形状通常为圆角矩形，常用于需要柔和视觉效果的场景。自定义形状按钮：根据设计需求，按钮可以是任意自定义形状，如星形、心形等，常用于创意设计或特定主题的界面。❸ 按边框分
无边框按钮：按钮没有边框，背景和文本直接显示，常用于简洁的界面设计。细边框按钮：按钮有细边框，常用于区分按钮与周围元素，同时保持界面的简洁性。粗边框按钮：按钮有粗边框，常用于强调按钮或与背景形成强烈对比。虚线边框按钮：按钮边框为虚线，常用于表示辅助操作或非主要功能。❹ 按图标分
图标按钮：按钮上只有图标，没有文本，常用于表示通用操作或节省空间的场景。图标+文本按钮：按钮上既有图标又有文本，图标通常位于文本左侧或上方，常用于清晰表达按钮功能的场景。❺ 按阴影样式分
无阴影按钮：按钮没有阴影，常用于简洁或平面风格的界面设计。轻微阴影按钮：按钮有轻微的阴影效果，常用于增加按钮的立体感和层次感。明显阴影按钮：按钮有明显的阴影效果，常用于突出按钮或与背景形成强烈对比。动态阴影按钮：按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化，常用于增加交互体验的趣味性。❻ 按动画种类分
无动画按钮：按钮没有动画效果，常用于简洁或传统的界面设计。悬停动画按钮：当鼠标悬停在按钮上时，按钮会有动画效果，如颜色渐变、边框变化、图标旋转等，常用于增加交互体验的趣味性和吸引力。点击动画按钮：当点击按钮时，按钮会有动画效果，如缩放、震动、波纹等，常用于增加交互体验的反馈感。马蜂窝的功能主按钮，在点击的时候都会产生动画，交互感十足。
加载动画按钮：
当按钮处于加载状态时，按钮会有加载动画效果，如旋转图标、进度条等，常用于告知用户操作正在进行中。
3. 按钮的几种状态3.1 默认按钮
按钮的初始状态，通常具有正常的颜色、形状和文字显示，等待用户操作。
3.2 待激活状态按钮
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用，用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态，并引导用户进行下一步操作。
3.3 点击状态按钮
当用户点击按钮时，按钮会呈现按下的状态，通常通过改变颜色、形状或添加阴影等方式来表示。
3.4 禁用按钮
在某些情况下，按钮会处于禁用状态，无法进行操作，通常会以灰色或半透明的方式显示，提示用户当前操作不可用。
3.5 加载状态按钮
加载状态按钮通常用于指示某个过程正在进行中，例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理，而不是卡住或出现错误。
3.6 危险提示状态按钮
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果，例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性，以避免误操作。
下边这两组弹框就是运用了危险按钮，来提示客户未来即将面临的风险，警示作用非常的明显。
在Web端，按钮尺寸没有固定标准。不过，一般来讲，按钮的高度常在32px-48px之间，宽度可根据内容灵活设置，但最好不要小于48px，这样方便用户用手指（触屏设备）或鼠标点击。
像一个简单的“提交”按钮，宽度可能是80px左右，高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适，易于交互。
2. 麻省理工触摸实验对按钮尺寸的指导麻省理工触摸实验室通过对人类指尖的研究，得出了关于界面按钮大小设计的一些重要参考数据。
对于食指，平均宽度在16至20毫米，指腹触摸区域尺寸为10至14毫米，指尖触摸区域尺寸为8至10毫米；对于拇指，平均宽度为25毫米，指腹触摸区域尺寸为12至16毫米，指尖触摸区域尺寸为10至12毫米。
由此建议，食指触摸的按钮应保证在8毫米×8毫米以上，且控件间距应保证至少在1毫米以上；拇指触摸的按钮应保证在10毫米×10毫米以上，且控件间距应保证至少在2毫米以上。
该研究还指出，大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
3. iOS对按钮尺寸大小的规范从按钮图标尺寸来看，根据苹果官方设计指南，iOS中按钮图标有不同标准。小图标尺寸为24×24pt，用于小型按钮，如导航；标准图标为32×32pt，用于普通按钮，适合次要操作按钮；大图标是 40×40pt，用于宽大按钮；特大图标则为48×48pt，用于特大按钮。
不同设备屏幕尺寸也有对应的建议图标尺寸，如iPhoneSE建议24pt，iPhone14及iPhone14Pro建议32pt，iPad 建议40pt 。
在最小触摸区域方面，iOS规定最小触碰区域为44×44pt，这种尺寸一般适合主要操作按钮。
四、按钮的构成UI按钮的组成主要包括以下几个关键元素：
1. 圆角圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮，如4px圆角；圆角越大，越有亲和力，人眼往往不喜欢非常锋利的物体，所以通常不建议使用0圆角的按钮样式，根据我大量的体验，我发现市面上确实也是带圆角的按钮居多些。
图标用于直观表达按钮的功能或状态，如加载中、编辑等。图标的设计应与整体页面风格一致，并确保其含义明确易懂。
3. 内间距内边距能够扩大按钮的可点击范围，帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然，你也可以根据你设计的实际情况做适当调整，规矩不是死的。
容器是包含所有视觉和交互元素的框架，包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
5. 边框边框定义了按钮的边界，常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
6. 文案文案是按钮上的文字描述，用于表达按钮的含义和功能。文案应简洁明了，易于理解，同时具有一定的吸引力。
7. 背景背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
投影用于凸显层级关系，帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用，以打造更好的视觉体验。
佐糖首页为了促进转化，特意将“开通会员”的按钮用投影凸显处理，带投影的按钮明显有向前走的感觉，比没有投影的按钮看起来更加显眼。
小小投影在页面中不仅起到增加空间感的作用，还起到了业务强调的作用，已经不仅仅是样式的一个承载了。
这些元素共同作用，不仅提升了按钮的功能性，还增强了其美观性和用户体验。在设计UI按钮时，应综合考虑这些因素，以确保按钮既美观又实用。
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动，并帮助用户防错。
1.1 提交与确认
在表单填写场景中，如用户注册、登录、信息提交等，按钮用于触发提交或确认操作，将用户输入的信息发送给系统进行处理。
1.2 执行功能
在各类软件中，按钮是执行具体功能的主要方式，如在图像编辑软件中，“裁剪”“旋转”“调整颜色”等按钮，可让用户快速实现相应功能。
2. 导航跳转2.1 页面切换
在多页面的应用或网站中，按钮可实现页面之间的切换，如网站的首页、产品页、关于我们页等，通过点击按钮，用户能方便地浏览不同页面内容。
2.2 菜单展开与收起
用于控制导航菜单的展开与收起，节省页面空间，提高界面的整洁度和易用性。
3. 状态控制3.1 显示与隐藏
来源：人人都是产品经理