目录
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
一、按钮的定义
按钮在我们生活中起着很大的作用，它就像我们的小助手一样，帮我们一键开启想要的任务，凡事都能一键触达。
按钮在UI界面中，是一种界面交互控件，通常以矩形、圆形或其他几何形状呈现，具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作，如提交表单、执行命令、导航页面、切换状态等。
按钮一般包含文字标签、图标或两者的组合，以清晰传达其功能。同时，按钮在不同状态下会呈现出不同的视觉效果，如默认状态、按下状态、悬浮状态、禁用状态等，为用户提供操作反馈和引导。
二、按钮设计的种类
1. Antdesign对按钮的种类划分
❶ 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
❷ 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
❸ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如下面的站酷活动页就用了很多的文字按钮，只有当按钮被选中时，按钮才会高亮选中。
❹ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，让页面看起来更加的简洁。
❺ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
2. 按钮的样式种类
按钮的样式可以从多个方面进行分类和设计，以下是一些常见的样式分类：
❶ 按颜色划分
- 单色按钮：按钮背景为单一颜色，如蓝色、绿色、红色等，常用于强调按钮的主要功能或操作。
- 渐变色按钮：按钮背景为渐变色，可以是线性渐变或径向渐变，通常用于增加视觉吸引力和现代感。
- 透明按钮：按钮背景透明或半透明，通常用于与背景融合或突出按钮上的文本和图标。
- 彩色边框按钮：按钮背景透明或浅色，但有彩色边框，常用于需要突出按钮边界的场景。
❷ 按形状分
- 矩形按钮：这种是最常见的按钮形状，适用于大多数界面设计。
- 圆形按钮：按钮形状为圆形，通常用于表示播放、暂停等操作，或用于具有特定功能的图标按钮。
- 圆角按钮：按钮形状通常为圆角矩形，常用于需要柔和视觉效果的场景。
- 自定义形状按钮：根据设计需求，按钮可以是任意自定义形状，如星形、心形等，常用于创意设计或特定主题的界面。
❸ 按边框分
- 无边框按钮：按钮没有边框，背景和文本直接显示，常用于简洁的界面设计。
- 细边框按钮：按钮有细边框，常用于区分按钮与周围元素，同时保持界面的简洁性。
- 粗边框按钮：按钮有粗边框，常用于强调按钮或与背景形成强烈对比。
- 虚线边框按钮：按钮边框为虚线，常用于表示辅助操作或非主要功能。
❹ 按图标分
- 图标按钮：按钮上只有图标，没有文本，常用于表示通用操作或节省空间的场景。
- 图标+文本按钮：按钮上既有图标又有文本，图标通常位于文本左侧或上方，常用于清晰表达按钮功能的场景。
❺ 按阴影样式分
- 无阴影按钮：按钮没有阴影，常用于简洁或平面风格的界面设计。
- 轻微阴影按钮：按钮有轻微的阴影效果，常用于增加按钮的立体感和层次感。
- 明显阴影按钮：按钮有明显的阴影效果，常用于突出按钮或与背景形成强烈对比。
- 动态阴影按钮：按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化，常用于增加交互体验的趣味性。
❻ 按动画种类分
- 无动画按钮：按钮没有动画效果，常用于简洁或传统的界面设计。
- 悬停动画按钮：当鼠标悬停在按钮上时，按钮会有动画效果，如颜色渐变、边框变化、图标旋转等，常用于增加交互体验的趣味性和吸引力。
- 点击动画按钮：当点击按钮时，按钮会有动画效果，如缩放、震动、波纹等，常用于增加交互体验的反馈感。
马蜂窝的功能主按钮，在点击的时候都会产生动画，交互感十足。
加载动画按钮：
当按钮处于加载状态时，按钮会有加载动画效果，如旋转图标、进度条等，常用于告知用户操作正在进行中。
3. 按钮的几种状态
3.1 默认按钮
按钮的初始状态，通常具有正常的颜色、形状和文字显示，等待用户操作。
3.2 待激活状态按钮
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用，用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态，并引导用户进行下一步操作。
3.3 点击状态按钮
当用户点击按钮时，按钮会呈现按下的状态，通常通过改变颜色、形状或添加阴影等方式来表示。
3.4 禁用按钮
在某些情况下，按钮会处于禁用状态，无法进行操作，通常会以灰色或半透明的方式显示，提示用户当前操作不可用。
3.5 加载状态按钮
加载状态按钮通常用于指示某个过程正在进行中，例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理，而不是卡住或出现错误。
3.6 危险提示状态按钮
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果，例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性，以避免误操作。
下边这两组弹框就是运用了危险按钮，来提示客户未来即将面临的风险，警示作用非常的明显。
三、按钮设计的尺寸
1. Web端的按钮尺寸建议
在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圆角的按钮样式，根据我大量的体验，我发现市面上确实也是带圆角的按钮居多些。
2. 图标
图标用于直观表达按钮的功能或状态，如加载中、编辑等。图标的设计应与整体页面风格一致，并确保其含义明确易懂。
3. 内间距
内边距能够扩大按钮的可点击范围，帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然，你也可以根据你设计的实际情况做适当调整，规矩不是死的。
4. 容器
容器是包含所有视觉和交互元素的框架，包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
5. 边框
边框定义了按钮的边界，常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
6. 文案
文案是按钮上的文字描述，用于表达按钮的含义和功能。文案应简洁明了，易于理解，同时具有一定的吸引力。
7. 背景
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
8. 投影
投影用于凸显层级关系，帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用，以打造更好的视觉体验。
佐糖首页为了促进转化，特意将“开通会员”的按钮用投影凸显处理，带投影的按钮明显有向前走的感觉，比没有投影的按钮看起来更加显眼。
小小投影在页面中不仅起到增加空间感的作用，还起到了业务强调的作用，已经不仅仅是样式的一个承载了。
这些元素共同作用，不仅提升了按钮的功能性，还增强了其美观性和用户体验。在设计UI按钮时，应综合考虑这些因素，以确保按钮既美观又实用。
五、按钮设计的作用
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动，并帮助用户防错。
1. 触发操作
1.1 提交与确认
在表单填写场景中，如用户注册、登录、信息提交等，按钮用于触发提交或确认操作，将用户输入的信息发送给系统进行处理。
1.2 执行功能
在各类软件中，按钮是执行具体功能的主要方式，如在图像编辑软件中，“裁剪”“旋转”“调整颜色”等按钮，可让用户快速实现相应功能。
2. 导航跳转
2.1 页面切换
在多页面的应用或网站中，按钮可实现页面之间的切换，如网站的首页、产品页、关于我们页等，通过点击按钮，用户能方便地浏览不同页面内容。
2.2 菜单展开与收起
用于控制导航菜单的展开与收起，节省页面空间，提高界面的整洁度和易用性。
3. 状态控制
3.1 显示与隐藏
可用于控制某些元素的显示与隐藏，如在电商网站中，点击“查看更多商品详情”按钮，可展开隐藏的详细商品信息。
飞书中的这个小小按钮，它承载着隐藏折叠的功能，让页面看起来更加的简洁有序。
3.2 启用与禁用
在某些功能需要满足一定条件才能使用时，按钮可用于表示该功能的启用或禁用状态，如在未填写完必填项时，“提交”按钮处于禁用状态，无法点击。
中国移动云盘的登录页就是这么设计的，当前面信息没有填完，后面的登录按钮始终是禁用的状态，只有当信息填完，且填写正确，按钮才会亮起。
4. 提供反馈
4.1 操作反馈
当用户点击按钮后，按钮会通过颜色、形状、动画等方式的改变，向用户提供操作反馈，告知用户系统已接收到操作指令。
4.2 引导提示
在一些复杂操作或新功能引导时，按钮可作为引导提示的一部分，告知用户下一步操作，如在新手引导流程中，突出显示“下一步”按钮。
心岛日志的新手指引中就是这样设计的，按钮在其中起了很重要的指引作用。
5. 数据交互
5.1 数据筛选
在数据展示界面，如表格、列表等，按钮可用于对数据进行筛选，方便用户快速找到所需信息。
钉钉打卡这个界面中，多亏有了日、周、月的筛选按钮，才让数据筛选变得如此便捷。
5.2 数据排序
通过点击“按时间排序”“按销量排序”等按钮，用户可对数据进行重新排序，以满足不同的查看需求。
6. 品牌传达
很多产品的按钮颜色都是与它的品牌色高度一致的，它既是按钮，又是品牌色的传递大使。
网易云音乐的按钮色用的网易红，钉钉打卡的按钮用的腾讯蓝，都是在传递自己的品牌色，同时也是在进行指令的传达。
六、按钮的位置
在日常设计中，页面无疑少不了按钮位置的摆放，那么按钮放置在什么样的位置合适，这也是一个值得深思的问题，也许我们已经司空见惯了按钮的位置摆放，但是我们知道它为什么要放这里或者那里吗？下面我们来看下这几种设计模型，让它告诉我们，为什么，在特定场景下，按钮位置要这么放？
1. 设计依据 – Z型视觉模型
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状，指用户的浏览路线——从左到右，从上到下的的视觉运动轨迹。
首先，人们从左上角到右上角进行扫描，形成一条水平线；第二步，向页面的左下侧，创建一条对角线；最后，再次向右转，形成第二条水平线，当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形。
1.2 视觉区域
- 区域1：位于页面左上角，是用户视线最先关注的区域，通常放置最重要的信息，如网站标志、导航栏等，能第一时间吸引用户的注意力并让用户对页面内容有初步的整体认知。
- 区域2：在区域1的右侧，用户的视线在水平移动时会经过该区域，可放置一些与区域1相关的辅助信息或次要的导航元素等。
- 区域3：位于页面中部偏左，当用户视线继续向下移动时会关注到该区域，通常用来展示页面的核心内容，如产品介绍、文章主体等。
- 区域4：在页面的右下角，是用户视线的终点区域之一，可放置一些重要的操作按钮或补充信息等，以吸引用户在浏览完主要内容后进行进一步的操作或获取更多信息。
1.3 应用案例
在电商网站中，商家会把热门推荐或主打产品放在区域1和区域3，以吸引用户的注意力。
在产品详情页面，将“加入购物车”“立即购买”等按钮放在区域4，方便用户在浏览完产品信息后进行购买操作。
天猫商城就是这样做的，把网站的LOGO图放置在左上角（区域1），把产品图放置在左下角（区域3），最后在用户浏览了全部页面之后，在右下角（区域4）放置购买按钮，引导用户下单。
在这个带有销售场景的页面设计中，购买按钮放置在右下角符合用户浏览习惯，也符合Z型视觉模型。
在B端应用软件中，可能运用的功能比较多，按钮也比较多，通过大量分析和观察发现，它们大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
腾讯云是这样处理的，中国移动网盘是这么处理的，看似巧合，其实也有它合情合理的一面，因为每一个动作的开始和结束都会更加的引人注意。
这就跟人们每次入职一个新公司一样，刚进去时会特别卖力、小心，后面时间长了，也就形成免疫，习惯了，但是当最后要离开这家公司的时候，最后心情又会特别复杂，回想起自己在这里成长的岁月，就会心生很多的感慨，也会特别的记忆深刻。
也许这也是为啥很多页面设计，喜欢把重要的按钮放置在每次视觉运动线的起点或者终点吧！
七、按钮的颜色
按钮的颜色在界面中不仅起到视觉点缀的作用，同时也是按钮状态的一种呈现和反馈。
按钮颜色不是千篇一律的品牌色，它也经常需要根据业务场景的不同，更换颜色，比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮，不同的按钮在颜色设计上都会有所区别。
此外，在设计按钮颜色时，有一些基本规范。
首先，从功能角度看，主要按钮通常会使用比较突出的颜色，像鲜艳的蓝色，这是因为蓝色醒目又不会过于刺眼，能引导用户去点击。次要按钮（如取消、返回）的颜色会稍淡一些，比如浅灰色，让用户知道这是相对次要的操作。
从颜色搭配来说，按钮颜色要和背景色有足够的对比度，方便用户识别。比如背景是白色，深色按钮就会很清晰；如果背景颜色较深，那按钮可以用浅色或者高亮度颜色。
另外，颜色的选择也要考虑产品的风格和使用场景。例如，在一个游戏软件里可能会使用更活泼的色彩，像红色、橙色；而在办公软件里，通常会采用比较沉稳的色调，如蓝色、黑色。
八、按钮在UI界面的设计原则
1. 可识别性
1.1 视觉清晰
按钮应采用用户熟悉的设计样式，如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
1.2 文字明确
按钮上的标签应准确、简明直接地介绍其功能，避免使用过于通用或模糊的表述，让用户清楚点击后会发生什么。
2. 易操作性
2.1 位置合理
将按钮放在用户期望看到的地方，如遵循F型或古腾堡原则，在页面的视觉焦点区域放置重要按钮。
2.2 尺寸适宜
按钮大小应反映其在屏幕上的优先级，更大的按钮用于更重要的操作，同时要适配用户的手指，避免误触。
3. 一致性
3.1顺序得当、逻辑一致
按钮的顺序应反映用户与界面之间交互的逻辑，如“上一步”按钮通常在左边，“下一步”按钮在右边。
3.2 状态样式一致
按钮应具有一致的状态样式，如默认、按下、聚焦、禁用等，一个产品中，这些状态样式要高度的一致，不能在这个页面按钮样式是这样的，跑到另一个页面，样式又发生了改变。
著名的格式塔心理学也是这么认为的，它强调人对事物的理解是基于整体的、有组织结构的，如果按钮设计做到一致性，对提高产品的整体性是有非常大的改进的。
4. 简洁性
4.1 避免过多
避免在一个界面中使用过多的按钮，以免让用户感到无所适从，应优先考虑最重要的操作。
4.2 功能单一
每个按钮应尽量只执行一个主要功能，避免一个按钮承载过多复杂的操作，降低用户的认知成本。
希克定律指出，人的决策时间会随着选择的增加而增加。在按钮设计中，简洁的设计能减少用户的选择和认知负担，使用户能更快地做出决策并执行操作。
5. 美观性
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致，包括颜色、形状、字体等方面，形成统一的视觉体系。
5.2 对比协调
在保持整体协调的基础上，通过对比突出重要按钮，如使用高对比度的颜色、较大的尺寸等，吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息，增强用户和产品的情感连接。
6. 要符合习惯
奥斯卡·王尔德说过：“习惯一旦养成，便很难改变。”
所以我们在设计按钮的时候，一定要符合人性的习惯，而不是试图改变人们的习惯。
九、按钮设计的注意事项
1. 按钮设计要有分组意识
带有分组的按钮摆放，让人看起来总是更加的有序，也更利于用户进行操作，面对同类型的功能操作点无需跳跃着去寻找，能很快在相似功能操作区域找到。
360的分组意识很强烈，三个不同区域的图标按钮样式都做了明显的区分，让界面看起来更加有序，操作起来也更加的便捷。
2. 按钮排列视觉上要有主次
切不可一行按钮中出现多个高强调的按钮，Antdesign对这个也做了诠释，会对用户的行为进行错误的引导，也不利于聚焦。
通义这个页面虽然有多个选中的按钮，但是没有全部用高强调的按钮，只有强推荐的操作“开始录音”才用了强按钮。
其它通过相对浅的颜色做了弱按钮选中处理，视觉上主次分明，信息主次表达上也清晰可见。
3. 不要在按钮中放置两个图标
当一个按钮同时兼顾两个交互动作的时候，一定要区分设计，不能赤裸裸的展示在一个按钮中，而不做任何区分。
4. 返回按钮宜放置在左边
具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。
5. 按钮文字不宜太长
简短的文字更易被用户阅读和记住，在一个按钮上最多不超过5个文字，重要的按钮一般使用2~4个字。
十、按钮弱化设计的六种方式
❶ 用纯灰色文字的弱化按钮
❷ 用灰色边框＋灰色文字的弱化按钮
❸ 用颜色边框+颜色文字的弱化按钮
❹ 用灰底+灰色文字的弱化按钮
❺ 用浅色底+颜色文字的弱化按钮
❻ 用纯颜色的弱化按钮
十一、总结
通过本篇文章的探讨，我们深入了解了B端按钮设计的九大核心要素。
从按钮的基本定义到Antdesign的分类，再到尺寸、构成、作用、位置和颜色等细节，每一部分都是提升用户体验的关键。
按钮设计不仅关乎美观，更影响着用户的操作效率和满意度。在UI界面中，遵循设计原则和注意事项，确保按钮既实用又具有吸引力，是每位设计师的职责。
希望本文能为设计师们提供有价值的参考，激发更多创新灵感，共同推动B端产品的交互设计向更高水平发展。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
