帮你完全掌握界面中的按钮设计

一、按钮的作用

1. 什么是按钮

按钮（Button）是一种用户界面元素，通常用于在图形用户界面（GUI）中触发特定的事件或操作。按钮允许用户通过点击或触摸来与应用程序或网页进行交互，执行如打开新窗口、提交表单、播放视频、执行搜索、加载新页面、关闭程序等操作。

按钮的设计和功能可以非常多样化，根据应用场景的不同，它们可以具有不同的形状、大小、颜色、图标和文本标签。例如，在网页上，按钮可能以简单的矩形形状出现，上面印有“提交”、“搜索”、“登录”等文字；在移动应用中，按钮可能会更加图形化，包含图标和少量文字，以更好地适应触摸屏设备的操作习惯。

按钮，在日常生活中随处可见，从家用电器到公共场所的电梯，从办公设备到各种遥控装置，几乎无处不在。按钮的基本功能是通过人的简单操作，实现对电子设备的控制，无需复杂的操作过程，简单直观。

总的来说，按钮作为一种基础且普遍的控制元件，在人们的生活和工作中扮演着重要角色。无论是物理形式的按钮还是界面设计中的虚拟按钮，良好的设计都能显著提升操作的效率和体验。

2. 按钮的作用

按钮是用户界面中不可或缺的组件，它们通过提供直观、可点击的界面元素，帮助用户与系统进行交互，并引导用户完成各种任务和操作。

1. 引导用户行为：UI 设计师通过按钮的设计（包括位置、大小、颜色、文本标签等）来引导用户进行特定的操作。例如，将“注册”和“登录”按钮放置在页面显眼的位置，鼓励用户进行账户创建或登录。
2. 提高可用性：按钮的设计需要考虑到用户的操作习惯和心理预期。合理的按钮布局、清晰的标签文字、以及直观的交互反馈，都能提高界面的可用性，减少用户的认知负担和操作错误。
3. 强化视觉层次：按钮在界面设计中往往具有独特的视觉风格，如鲜明的颜色、清晰的边界、或特定的形状。这种设计不仅使按钮在界面中脱颖而出，还能帮助建立视觉层次，引导用户的视线流动，从而提升整体的设计美感。
4. 提供即时反馈：当用户点击按钮时，系统应给予即时的反馈，如按钮颜色的变化、加载动画的显示等。这种反馈机制能够增强用户的控制感，并让用户知道他们的操作已被系统接收和处理。UI 设计师需要确保这些反馈元素与整体设计风格相协调，同时保持足够的可见性和清晰度。
5. 塑造品牌形象：按钮的设计也是品牌传达的一部分。通过统一的色彩、字体和图标风格，按钮能够强化品牌的识别度，并在用户心中建立一致的品牌形象。UI 设计师需要深入理解品牌的核心价值和视觉语言，将其融入到按钮的设计中。
6. 适应不同场景：在不同的使用场景和设备上，按钮的设计也需要做出相应的调整。例如，在移动设备上，由于屏幕尺寸较小，按钮需要设计得更加紧凑且易于点击；而在桌面应用中，则可以有更大的空间来展示按钮的详细信息。UI 设计师需要根据具体场景来制定合适的设计策略。

按钮的核心作用是以驱动用户产生点击行为为目的，而不是仅仅追求视觉上的美观。

为了实现这一目标，我们需要深入理解用户点击行为的底层逻辑。这就需要我们运用福格行为模型（Fogg Behavior Model，FBM）来进行深入分析。

① 福格行为模型（Fogg Behavior Model，FBM）

福格行为模型认为，一个行为的发生是由三个要素共同作用的结果，即表示为 B=MAT，行为（Behavior）、动机（Motivation）、能力（Ability）和触发因素（Triggers）。具体来说：

动机（Motivation)：用户需要有足够的动机去执行某个操作。在 UI 设计中，这可能意味着通过颜色、文案、位置等元素吸引用户的注意力，并激发他们的兴趣或欲望。例如，使用鲜明的颜色或限时优惠的信息可以增加用户的购买动机。

能力（Ability)：用户需要有能力轻松完成这个操作。设计的简便性、直观性在这里扮演着关键角色。确保按钮的尺寸适中、标签清晰，减少用户操作的复杂性，如简化流程、提供清晰的指引等。

触发因素（Triggers)：设计中需要有明确的触发因素促使用户行动。这可能包括明显的按钮设计、及时的提示信息、或者特定情境下的交互反馈。

通过对这三个要素的优化，我们可以更有效地引导用户进行点击操作。例如，通过提高按钮的视觉吸引力（增加动机），优化界面的导航效率（提升能力），以及适时出现的行为召唤（触发因素），都有助于增加用户的点击率。

在实际的按钮设计中，可以将动机、能力和触发三个要素综合应用，以达到最佳的设计效果。

例如设计一个“立即抢购”按钮：

1. 动机：使用醒目的红色背景和“抢购”二字作为文案，激发用户的购买欲望。
2. 能力：将按钮放置在页面显眼位置，并使用大字体和明显的图标，确保用户易于点击。
3. 触发：在商品库存紧张时显示该按钮，并使用倒计时等元素增强紧迫感，引导用户立即行动。

3. 按钮的构成

深入探讨按钮设计的精妙之处时，我们往往发现，一个看似简单的按钮背后，实则蕴含了诸多精心雕琢的细节，这些元素共同协作，以最大化按钮的功能性和吸引力。一个好的按钮设计，远不止于底色块与单一文案的简单结合，而是对文案的精炼度、布局的边距考量、容器形态的精细调整、圆角处理的圆润度，以及色彩搭配的层次感等多方面的综合考量。

移动端按钮的组成元素主要包括以下几个方面：

1. 文本：核心指令，直观传达按钮功能。如“提交”、“取消”，简洁明了，引导用户行动。
2. 图标：视觉辅助，强化功能认知。与文本相辅相成，提升界面整洁度，直观示意操作意图。
3. 容器：承载主体，塑造按钮形态。形状、大小、颜色精心设计，影响整体视觉效果与用户体验。
4. 边框：界定边界，强化区域感。实线、虚线或创意形状，区分元素，特定场景下强调按钮重要性。
5. 背景：色彩与图案，展现状态与风格。根据按钮状态调整颜色，与整体设计和谐统一，传递品牌特色。
6. 阴影：增强层次，营造立体感。通过精细调整，提升按钮视觉深度，吸引用户注意。
7. 圆角：圆角的设计不仅仅是形状的变化，更是情感与风格的传递者。

二、按钮的尺寸

1. 基本尺寸规范

① 最小尺寸

iOS：在 Apple 的设计规范中，最小的点击目标尺寸是44x44 像素，这主要是基于用户手指的平均尺寸和触摸精度来设定的。

Android：Android 平台也定义了其最小点击区域，通常以 dp 为单位。Android 的最小点击区域尺寸建议为 48x48dp，但在某些高分辨率设备上，这可能会转换为更大的物理像素尺寸。

② 推荐尺寸范围

在实际设计中，按钮的尺寸可能会根据具体的应用场景和用户界面布局进行调整。但一般来说，移动端按钮的高度建议在35px-50px之间（web 端或其他终端则需根据实际使用场景调整），字号在13pt-17pt之间，圆角在4-8之间。这些数值可以作为设计时的参考。

2. 设计考虑因素

① 用户体验

按钮的尺寸应足够大，以确保用户能够轻松点击并减少误触。过小的按钮会增加用户的操作难度和误操作率。

同时，按钮的布局和间距也需要合理设计，以避免用户在点击时误触其他功能。

② 设备特性：

不同设备的屏幕尺寸和分辨率不同，因此在设计按钮时需要考虑设备的特性。例如，在高分辨率设备上，可能需要使用更大的物理像素尺寸来保持按钮的视觉清晰度和可点击性。

③ 设计规范：

遵循所在平台的设计规范是确保应用一致性和用户体验的重要手段。iOS 和 Android 等平台都有自己的设计指南和最佳实践，设计时应尽量遵循这些规范。

在实际设计中，可以根据具体的应用场景和用户界面布局对按钮尺寸进行调整。例如，在导航栏或工具栏中的按钮可能需要更小的尺寸以节省空间；而在表单或列表页面中的按钮则可能需要更大的尺寸以提高点击的准确性和便利性，如下图盯潮底部“导航栏”、iTranslate Lingo 的语言“选择列表”。

三、按钮的形状样式

1. 按钮的形状

移动端按钮的样式丰富多样，旨在提升用户体验和界面的美观性。以下是一些常见的移动端按钮样式：

① 矩形按钮

直角矩形：具有严谨、力量、高端的特点，适用于金融类、奢侈品类产品中，能给人严谨安全、高端的感觉，符合产品调性，如下图京东金融。

圆角矩形：圆角矩形按钮的圆角度数可以根据设计需求调整，从轻微圆角到全圆角不等。小圆角矩形按钮具有稳定、中性的感觉，适用于用户跨度较大的常规类产品中，如下图微信“零钱”。全圆角适用于儿童类、年轻化、娱乐类、购物类的产品中，具有亲和力，拉近与用户之间的距离，例如下图斑马 AI 学“课程”。

② 圆形按钮

圆形按钮具有活泼、年轻的特点，常用于需要吸引用户注意或执行重要操作的场景，如下图 Gofun 出行“路线”、ofo 共享单车“扫码用车”。

③ 自定义形状按钮

随着设计技术的发展和用户需求的多样化，越来越多的应用开始采用自定义形状的按钮。这些按钮的形状可以根据产品的品牌调性、界面风格以及用户操作习惯进行设计，以达到更好的用户体验效果。

2. 按钮的样式

按钮样式：按钮样式主要分为面形、线性、图标+文字、文字按钮、图标按钮
等。视觉优先级：面性>线性>图标+文字>文字>图标

① 面形按钮

面形按钮以其突出的颜色填充和明显的边界而著称，这种按钮因其较大的视觉重量而容易被用户首先注意到。它通常用于表示主要操作，如“购买”或“开通”例如下图马蜂窝“会员中心”页面

视觉优先级：由于其显著的颜色对比和面积，面形按钮在视觉上的优先级是最高的，能够迅速吸引用户的目光并鼓励互动。

② 线性按钮

线性按钮使用细线来勾勒其形状，中间可能搭配图标或简洁的文字。这种按钮较为简约，适合现代、干净的风格设计。

视觉优先级：线性按钮在视觉层级上位列面形按钮之后，适用于次要功能或较少干扰的场景，如“更多”或“收藏”，例如下图 Tripadvisor“收藏”页面。

③ 图标+文字按钮

这种按钮结合了图标的直观表达和文字的具体说明，使得功能指示更为明确，用户理解起来更无歧义，例如下图高德底部“操作按钮”

视觉优先级：图标加文字的按钮在视觉上的重要性位于线性按钮之后，因其信息量大，适合需要解释说明的功能按钮。

④ 文字按钮

这类按钮主要由文字构成，缺乏图形元素，使得界面保持简洁。文字按钮通常用在辅助操作或对整体界面干扰小的功能上，如“跳过”或“取消”，例如下图美团打车“点击重试”文字按钮。

视觉优先级：文字按钮的视觉优先级较低，因为它们缺少吸引注意的视觉元素，适合用于不频繁操作或较不重要的功能。

⑤ 图标按钮

图标按钮仅包含图标而无文字说明，依赖于用户对图标识别的熟悉度。这类按钮节省空间，适合操作频繁且直观的功能，如“添加”、“收藏”和“点赞”等，例如下图盯潮“点赞”、“表情”和“图片上传”按钮。

视觉优先级：图标按钮的视觉优先级最低，因为仅靠图标表达功能可能导致一部分用户理解困难，因此通常用于普遍认知的简易操作。

3. 按钮的状态

在移动端设计中，按钮的状态是提升用户体验和交互效果的关键因素之一。常见的移动端按钮状态主要包括以下几种：

① 正常状态

按钮在未被用户直接操作且没有特殊条件影响其可用性时的基本状态。这是用户第一次看到按钮或按钮未被任何外部事件（如点击、悬停、加载等）影响时的显示状态。

通常表现为标准的颜色、形状和大小，无特殊效果。按钮的外观可能会以半透明或者灰色的形式呈现，以明确告知用户当前按钮不可用。

② 待激活状态

待激活状态通常指的是按钮在某种条件下尚未达到可点击或可交互的状态，但用户可以通过完成某些前置操作来使其变为激活状态。

待激活状态的按钮在外观上可能更加接近正常状态，会通过文字提示、进度条等方式告知用户当前状态。

③ 点击状态

当用户点击按钮时的状态。

按钮的外观会有明显的变化，如颜色变深、出现下沉效果（也称为“按下效果”）等，以给用户明确的反馈，表明按钮已被激活或正在被操作。

为了提升用户体验，许多应用都在努力简化操作流程，减少不必要的点击和等待时间。在这种背景下，按钮点击状态的变化（如按下、松开等）可能被视为一种额外的视觉负担，因此被逐渐淡化或取消。

④ 禁用状态

禁用状态的按钮完全不可用，用户无法进行任何交互。

禁用状态的按钮通常会有明显的视觉变化（如变灰、半透明等）以表明其不可用性。

⑤ 加载状态

在某些情况下，当按钮触发某项需要较长时间处理的操作（如数据加载、提交表单等）时，按钮会进入加载状态。

通常通过旋转的图标、进度条或其他动画效果来表示按钮正在处理中，以避免用户重复点击。

了上述常见状态外，根据具体的应用场景和设计需求，按钮还可能具有其他特定状态，如：

1. 成功状态：表示操作已成功完成，如提交表单后显示的“成功”按钮。
2. 警告状态：用于需要用户注意或确认的操作，如删除操作前的警告提示。
3. 特殊样式按钮：如幽灵按钮（常用于背景色复杂的地方）、虚线按钮（常用于添加操作）等，这些按钮的状态可能会根据其特定样式和设计需求有所不同。

移动端按钮的状态设计旨在为用户提供清晰的反馈和交互体验。在实际设计中，应根据应用的具体需求、用户习惯以及设计风格来选择合适的按钮状态和外观表现。

四、按钮的位置

在移动端设计中，按钮的位置摆放对于提升用户体验至关重要。在设计按钮的位置时候我们可以遵循古腾堡原则，它们可以帮助设计师更有效地决定按钮的最佳位置。

1. 古腾堡原则

古腾堡原则，又称对角线平衡法则，由报纸设计师埃德蒙·阿诺德提出。它描述了用户在阅读页面时的自然视线移动模式，即从左上角开始，沿对角线向下移动，最终到达右下角。

古腾堡原则基于人类从左至右的阅读习惯，将页面划分为四大视觉区域以优化信息布局：

1. 首要视觉区（左上）：用户首先且频繁关注的区域，适合放置核心内容或主要功能，确保信息一目了然。
2. 行动号召区（右下）：浏览流程的终点，适合放置按钮或行动点，引导用户完成最终操作，提升转化率。
3. 次要视觉区（右上）：相对较少被注意，不宜放置重要操作项，以免分散注意力或影响流畅体验。
4. 信息辅助区（左下）：用户关注度最低，适合放置次要信息或提示，不影响主要阅读路径。

在移动端设计中，可以将主要操作按钮放置在用户视线的自然落点处，即屏幕的右下角或底部中央。例如下图有道精品课“课程报名”界面，左上角为课程 banner 主文案，“立即报名”按钮放在左下角最终视觉区域。又或者站酷的个人“中心页面”，左上角为个人信息，“上传作品”按钮放在用户视线自然落点处，这样设计可以确保用户在完成内容阅读后，能够迅速找到并执行下一步操作。

当然，除了古腾堡原则，在按钮的设计上还可以遵循“菲茨定律”、“F 型视觉模型”、“z 型视觉模型”等设计原则。这些方法论相互补充，共同指导设计师创造出既美观又实用的用户界面。

五、按钮的布局

按钮的布局设计在移动端和网页端都至关重要，它直接影响到用户的操作体验和界面的整体美观性。一般来说，按钮的布局可以归纳为导航栏布局、跟随内容布局、偏向底部布局、 底部悬浮布局、水平多按钮布局五种常规布局。

1. 导航栏布局

特点：按钮通常放置在页面的顶部导航栏中，便于用户快速访问主要功能或页面。

适用场景：常见于各种应用的首页或主要操作页面，如下图脉脉的“发布”按钮，微信的“功能操作”按钮。

注意事项：确保导航栏中的按钮数量适中，避免过多导致拥挤，同时要考虑按钮的优先级和用户的操作习惯。

2. 跟随内容布局

特点：按钮紧随内容区域下方或旁边，与用户当前操作的内容紧密相关。

适用场景：登录注册、表单填写、评论提交等需要用户输入内容的场景，如下图唱吧“个人信息”界面，Scoot 的“卡片详情”界面。

注意事项：当内容区域需要调起键盘时，要确保键盘不会遮挡操作按钮，或者通过合理的布局调整避免这一问题。

3. 偏向底部布局

特点：按钮放置在页面的底部区域，用户无需滚动页面即可找到并执行操作。

适用场景：内容区域不需要调起键盘的场景，如引导页、结果页等。入下图知乎的“引导页”、拍拍严选的“说明”页面。

注意事项：底部按钮应设计得醒目且易于点击，避免与页面其他元素混淆。

4. 底部悬浮布局

特点：按钮固定在页面底部，随着页面的滚动而保持位置不变。

适用场景：非填写内容超过一屏或需要用户随时进行操作的场景，如斑马 AI 学的“课程购买”按钮，boss 直聘的“立即沟通”按钮。

注意事项：底部悬浮按钮应设计得简洁明了，避免过于复杂或占用过多空间。

5. 水平多按钮布局

特点：将多个按钮横向排列在一起，适用于需要同时操作多个功能的场景。可依据古腾堡法则，目标按钮置底部右侧，利用视觉终点效应，提升操作效率与体验。

适用场景：移动端各类弹窗、电商立即购买、工具栏、操作面板等需要集中展示多个操作按钮的区域，如下图得物“立即购买”、皮皮的“提示”弹窗。

注意事项：那些正向的、鼓励性质的、高优先级的按钮往往被放置在右下角。

六、按钮的功能类型

设计按钮时，我们需要考虑其功能类型，因为这将决定按钮的设计方式。例如，
如果一个按钮的功能是引导用户进行某个操作，那么它的设计可能需要强调，以便吸引用户的注意力。相反，如果一个按钮的功能只是提供信息，那么它的设计可能需要弱化，以避免分散用户的注意力。

此外，我们还需要考虑按钮的文案。如果一个按钮的功能是引导用户进行某个操作，那么文案可能需要强引导，以激励用户点击。而如果一个按钮的功能只是提供信息，那么文案可能只需要直接阐述功能。

按钮根据功能的不同，可以分为不同的类型，主要有行为召唤按钮、悬浮按钮、命令按钮、开关按钮等。

1. 召唤按钮

召唤按钮，它通常被设计为引导用户执行特定操作的按钮，这种操作能够
促使用户达成某种目的或完成某项任务。召唤按钮也被称为 CTA（Call To Action）按钮，即行为召唤按钮。

根据功能和目的的不同，召唤按钮可以分为多种类型，如：诱导购买、订阅关注、利益诱导等。

① 诱导购买

通过颜色、形状、样式等设计元素，突出购买按钮，引导用户进行购买操作，让用户进来第一眼就能知道该按钮的用途。如下图淘宝的“购买页面”，在按钮上加上倒计时，或者下图优酷“会员”界面在主按钮上标注“已节省 9 元”，刺激用户购买欲望。

② 订阅关注

在内容型应用中，引导用户订阅或关注内容，以便持续获取更新，如下图波点音乐和咸鱼的“关注”。

③ 利益诱导

通过展示优惠信息、积分奖励等利益点，吸引用户点击按钮。如下图支付宝的“积分兑换”和拼多多的“省钱月卡”。

2. 悬浮按钮

移动端的悬浮按钮是一种在用户界面中常见的元素，它通常用于执行主要或高频次的操作，如创建、分享、编辑等。悬浮按钮有以下特点：

1. 显眼：悬浮按钮在视觉上往往色彩鲜明，能够迅速吸引用户的注意力。
2. 高效：它鼓励用户执行单一的、集中的行动，是用户可能会采用的最常用路径。
3. 灵活：可以根据需要调整大小和位置，以适应不同的屏幕尺寸和布局。

如下图站酷的“作品详情”界面，收藏、点赞、评论采用了悬浮按钮样式置于界面底部，方便用户实时操作，或果壳“发布”按钮采用悬浮样式，方便用户进行发布操作。

3. 命令按钮

命令按钮通常出现在弹框中，具有明确的指令性质。它们大多包含一个或两个文字命令，其设计要求文字的语义必须清晰无误。在布局上，命令按钮通常遵循用户的操作习惯，采用“左回退右行进”的设计原则，即左侧的命令按钮通常用于返回或撤销操作，而右侧的命令按钮则用于前进或确认操作。这种设计有助于用户直观理解各命令的功能，从而提升操作的直观性和准确性。

在命令按钮的设计中，按钮的外观（如颜色、形状和大小）应与周围元素形成对比，以便用户快速识别。如下图花虾的“隐私设置”和站酷的“退出登录”。

4. 开关按钮

开关按钮是用户界面中常见的一个组件，用于表示两种对立状态之间的切换，典型应用场景是功能的开启与关闭。当开关按钮被激活时，可能会触发一系列的后续操作。这种按钮在手机的设置菜单中尤为常见，不过它也广泛应用于许多应用程序的界面中，用以控制各种功能的激活状态。

开关按钮的设计不仅需要注重其基本的切换功能，还需要考虑其在不同场景下的视觉表现和交互反馈。例如，在开启状态下，按钮可以采用鲜明的颜色或图标来强调其激活状态，如站酷的“通知设置”界面和苹果系统里“日期设置”界面。

写在最后

按钮设计是 UI 设计中一个既基础又重要的环节。通过明确功能与目的、保持视觉风格一致、合理安排尺寸与布局、提供及时有效的交互反馈以及考虑无障碍设计等因素，我们可以设计出既美观又实用的按钮，为用户带来更加流畅和愉悦的操作体验。

转载自：https://www.uisdc.com/button-design-10