这是我第二次尝试写文章，做总结。非大厂非科班，在努力学习的路上，望大家多多指教。

最近看了好几篇怎样设计界面中某个小细节的文章，恰巧工作中正在搭建新的组件库，费了不少时间在整理按钮上，所以就选择了界面中按钮来做下总结，自己学习的同时，希望能帮到有需要的小伙伴们。

首先，按钮是什么？界面中的按钮是什么？

生活中，按钮是随处可见的，比如电梯里的楼层按钮、电饭煲上的开始/暂停按钮、电脑的开关按钮等。

而在UI界面中，按钮是必有交互元素，它是一个操作命令，也能反馈用户的操作行为。用户只需轻按一下即是操作该命令，并能得到相对应的结果。

按钮在整个设计体系中，它一直都扮演着一个十分重要的位置，影响到点击率及转化率。

那我们在工作中，怎样才能将按钮设计好呢？本文将会从下面几个方面对按钮进行梳理和总结：

1、按钮的类型

2、按钮的状态

3、按钮的设计原则

4、怎样与开发交付

 一、按钮的类型 

我们主要将按钮分为五种类型：主要按钮、次要按钮、图标按钮、图标加文字按钮、文字按钮。

1.1 主要按钮

在界面中，主按钮即主要操作按钮，是一个强大的视觉指示器，强调页面中最为核心的功能。它的作用是让用户一看到主按钮，即可明白在当前界面中该如何操作，可以帮助用户完成他们的旅程。如：登录注册页的登录按钮，支付页面的支付按钮。

设计主按钮时，我们主要要遵循2个原则：

1、主按钮是独立存在的 —— 在一个界面中，最好只有一个主按钮，不然会对用户的操作产生干扰；

2、主按钮不是必需存在的 —— 在一个界面中，不是每个界面都需要主按钮的，我们要根据需求的需要来判定界面是否需要主按钮；

1.2 次要按钮

次要按钮也叫标准按钮、辅助操作按钮，是我们为用户提供主要操作的备选方案。相比较主按钮，视觉感知层面相对弱一些，但在界面中出现的频率相对高一些。次要按钮主要有2种设计样式：

第一种形式：字线型

以文字+边框的形式展示，最常见的次按钮设计样式，常用于多个按钮同时展示；

第二种形式：字面型

以文字+浅色背景的形式展示。

1.3 图标按钮

以图标的形式展示，没有标签。因为它们没有标签，所以它们在界面中节省了一定的空间，常用于移动端界面、B端表单界面中。缺点是，因无标签说明，对图标形状的样式要求很高。

1.4 文本按钮

以文本的形式展示，是一种最简单的按钮形式，在页面中视觉感知层面最低，所以在页面中可大面积的重复使用。

1.5 悬浮按钮

悬浮按钮是浮动在用户界面上的按钮，在页面中视觉感知层面最高，常见的展现形式是图标、图标+文本。主要展示产品的核心功能，比如现在短视频中的发布视频、编辑文章页面中的编辑等。

 二、按钮的状态 

每次设计完一张图后，是不是就觉得自己的界面非常完美，工作圆满完成呢？

其实呢？当然不！！！

因为，我们在设计按钮的时候，常常会遗漏按钮的状态。项目经验丰富一点细心一点的开发会在写界面时发现问题，找我们补图。但经验稍浅的开发常常直接按照设计稿写完，无论怎么操作都只有一个状态，严重影响后期的用户体验。

常见的按钮状态，主要可分为以下几种：

2.1、正常状态

按钮的正常状态，就是正常页面中的显示效果。

2.2、悬浮状态（适用于web）

按钮的悬浮状态，一般只会出现在使用鼠标的时候。当鼠标滑过或停留在按钮时，按钮所展示的效果，则为悬浮状态。此状态通常是在web场景中出现，所以我们在设计移动端时，可以不用考虑此状态。

设计悬浮状态，一般是在正常状态下，加上透明度为10%的黑色（#000000）即可：

2.3、点击状态（适用于移动端）

按钮的点击状态，就是按钮在被点击后的状态，此状态通常是在APP界面中出现。设计此状态，一般是在正常状态下，加上透明度为20%的黑色（#000000）或者20%的白色（#FFFFFF）。

加透明度20%#000000，适用于亮色按钮

加透明度20%#FFFFFF，适用于暗色按钮

2.4、加载状态

按钮的加载状态，用于异步操作等待反馈的时候。加载状态的存在，也可以避免用户多次提交，提高用户体验。

2.5、禁用状态

按钮的禁用状态，即非交互状态/不可点击状态，比如常用于当必填项信息未填写完整，活动时间未到、无库存或者是其他某类条件未达到时，按钮会出现禁用状态。

在设计中，我们会设计一些视觉感知层面低的按钮样式，例如按钮背景色为#DDDDDD，#999999的按钮样式。

当然，这个不是绝对的，具体的色值，我们要根据各场景去搭配。

  三、按钮的设计原则 

上面我们讲了按钮的分类和按钮的状态，那我们在设计按钮时，需要注意什么呢？

3.1、按钮的样式 - 用户看到时就知道这是个按钮

在一个界面中，友好的交互是，当用户进入到界面时，就知道哪些是可点击的，哪些是不可点击的。如果按钮和界面内容没有区分，会对用户产生困扰，影响产品的用户体验。

所以，我们在设计按钮时，首先在样式上要告诉用户，这就是一个按钮。我们要基于用户习惯，选择合适的视觉符号（比如尺寸、形状、颜色、阴影等）来设计按钮，增强产品的易用性。

3.2、按钮的位置 - 把按钮放在用户易操作的位置

按钮的位置也是非常重要的，如果按钮的位置，位于用户不太能注意的区域，或者打破了用户习惯，那不管这个按钮的样式做的多精致多炫酷都是没用的。

我们要坚持一个原则，当用户访问界面时，不要让用户满世界的找按钮，要将按钮放在用户容易操作的位置。因为用户找不到按钮，用户就不知道这个按钮的存在，无法达到产品期望，也会影响产品的易用性。所以，我们在设计按钮时，尽可能使用传统的布局和标准的UI模式。

知识拓展

我们在设计按钮的时候，可以参考人眼的扫描模式：

目前流行的主要是“F”模式和“Z”模式。

“F”模式：

“F”模式是由尼尔森团队提出，是新闻平台、博客等文字为主的网站布局所采取的阅读模式。

这个研究中记录了超过200位用户浏览网页时，用户的主要阅读行为在许多网站和场景中表现得相当一致。

这个阅读模式看起来有点像字母F，因此也被叫做F型浏览模式。

（“F”模式文章链接：https://zhuanlan.zhihu.com/p/26232148，感兴趣的童鞋可查看哇~~~）

图片来源网络

“Z”模式：

“Z模式”是扫描滚动的网站的典型模式：

“z”型模式的布局遵循字母Z的形状。“Z”型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下：

首先，人们从左上角到右上角进行扫描，形成一条水平线

接下来，向页面的左下侧扫描，链接成一条对角线

最后，再次向右转，形成第二条水平线

当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形

图片来源于网络

（“Z”模式文章链接：https://www.ui.cn/detail/252379.html，感兴趣的童鞋可查看哇~~~）

3.3、按钮的内容-按钮标签的内容要简单明确

按钮文本标签的内容要写的简单明确，如果写的通用，写的是带有误解的内容，会让用户感到迷惑，影响用户体验。

因此，要想用户体验理想，标签上的内容应该尽量简单且明确的描述这个按钮的作用。

让用户明白他们点击这个按钮之后，会发生什么，会产生什么结果。

比如，举个简单的例子，如下，日常中最常见的支付页面，需要关闭支付页面时，提示弹窗上按钮的标签内容，就非常重要。

如下图，哪个弹窗上的标签内容会更友好呢？图01是某购物APP离开支付页面的提示弹窗，图02是京东离开支付页面的提示弹窗。

我们看图01，弹窗上的【取消】按钮是什么意思呢，似乎并没有明确说明按钮的作用。点击【取消】到底是取消这个弹窗上的内容？还是取消上一步的支付步骤呢？是不是会让用户产生误会？

让我们再看看图02，弹窗上的标签内容是简单明确的，清楚的描述了这个按钮的作用，用户清晰的明白他们点击这个按钮之后，会发生什么，会产生什么结果。点击继续支付是继续支付，不离开上一步操作的界面，点击确认离开就是离开此页面，不再支付。

3.4、按钮的尺寸-按钮要有合理的尺寸

问题一：怎样使重要的按钮看起来是重要的？

1、增大它的尺寸（按钮更大对用户来说就是更重要）；

2、使用对比色来吸引用户的注意力；

按钮大小反映该按钮在屏幕上的优先级，大按钮、普通按钮、小按钮分别意味着最重要、重要，不太重要的等级。

所以，在设计界面时，为了让更重要的按钮在视觉上体现它的重要性，我们可让主要的按钮更加突出，增大它的尺寸，或者使用对比度大的色彩来吸引用户的注意力。京东

问题二：怎样设计小按钮，才容易操作？

在设计中，除了大按钮设计，小按钮也是需要我们注意的。

我们要避免设计的小按钮的偏小，导致用户误触。所以我们在设计按钮的时候，要考虑到人的手指宽度。麻省理工学院的实验室曾就研究指出，人的手指垫宽度的平均值在10~14mm 之间，指尖的平均值在8-10mm 之间。所以说，在设计按钮尺寸的时候，10X10mm的尺寸是比较合理的。我们在设计最小按钮时，可参照这个数值。

3.5、按钮的顺序-按钮在界面中要有合理的顺序

按钮的顺序反映用户和界面之间交互的属性，在着手设计之前，我们先要问问自己用户期望在屏幕上看到什么样的顺序，或者说什么样的顺序更合理，再去进行相应的设计。

根据用户习惯，当一个界面中有多个按钮时，我们常将用户最常操作，以及重要级最高的按钮放置在界面的最右侧，最不常操作的以及重要级最低的按钮放置在界面的最左侧。

京东

3.6、按钮的数量-避免界面按钮（操作）太多

工作中，常常会遇到一个问题，在一个界面当中，各种业务方都想加入口。导致一个界面按钮太多，没有主次关系，当用户进入界面时，不知道该操作什么。

所以在设计APP或者网站的界面时，应该多想想：

a、用户最希望操作什么？

b、或者和需求方确认，当用户进入到该界面时，我们最希望用户操作什么？

3.7、按钮的反馈-为按钮交互提供视觉或听觉反馈

在交互设计中，为了避免用户反复操作或者多次提交，当用户点击按钮时，应当给予用户操作反馈。

这种反馈可以是视觉，也可以是听觉，反馈的目的是告诉用户操作了什么。

在UI设计中，我们常常用到的点击反馈表现形式，主要有：

1、按钮背景颜色变化

2、按钮背景透明度变化

4、按钮文字颜色变化

5、按钮文字透明度变化

6、按钮文字内容变化

7、其它位置出现提示文字

8、语音提示

9、震动提示

10、高度、阴影

 四、怎样与开发交付 

在工作中，我们常常会有一些苦恼。什么苦恼呢？开发写的按钮，与设计稿差别太大。按钮的尺寸不是更胖一点，就是更瘦一点；按钮的圆角不是更大一点，就是更小一点。

所以，针对按钮，作为设计师的我们，应该怎样与开发们进行交付呢？

4.1、Padding思维

我们想要开发还原我们的设计稿，就要先去了解开发实现的思维方式，我们针对开发的思维方式去进行相应的思考。

首先，我们和开发要同时具备padding思维，那么Padding思维是指什么呢？

简单理解 Padding 就是文字与按钮之间的距离，主要适用于考虑的文字变多时，按钮的宽度。如下图：

Padding指文字与按钮的间距

一个按钮的长度=Padding+文字的长度+Padding。我们与开发交付的第三方工具中，以及我们使用的Sketch，PS等软件中，都是无padding这个属性可供开发查看的。

所以，我们在和开发交付时，应当标明按钮的Padding值，这样开发能很好的还原设计稿。

4.2、Min-Width思维

上面说到了Padding思维，我们再来说说Min-Width思维，Min—Width 就是指按钮的最小宽度。

Min-width指按钮的最小宽度

我们在设计按钮的时候，除了考虑到按钮上文字变多时的一个情况，也要考虑到按钮的最小宽度。

通常设计中，按钮最小宽度一般的设定为 4 个文字的长度，假设字体大小为 16px，左右的 Padding为 24px，那么这个按钮的最小宽度为：112px。

我们在和开发交付时，也应当标明。

4.3、按钮的边框；

最后，我们来说说按钮的边框。边框也是在工作中需要注意的细节。

设计中，按钮的边框主要有内边框、居中边框、外边框三种，sketch中设计按钮的边框时，正常情况下默认为居中边框。

但是开发，他们是不分内边框、外边框、居中边框的（采访了下某位开发小哥哥～）。因为代码中开发写边框时，默认是内边框，没有居中边框一说。如果是外边框，我们需要在UI图交付时在设计稿中标明。

所以说，我们在设计按钮边框时，要注意尺寸以及调整边框的模式。如有特殊的情况，需在设计稿中标明。

4.3、按钮的圆角大小

按钮的圆角大小，也是我们在工作中需要重点注意的问题。因为，开发写出来的圆角，不是比设计稿更大一点，就是更小一点。

我们在设计按钮时，应当严格遵守设计规范，条件允许的情况下，可和开发童鞋们共享设计规范，这样能大大增加工作效率。

在某些特殊场景使用特殊的圆角样式时，在设计稿中标注出来。

总结

写到最后啦～

按钮虽然作为一个最基础的元素，但是在整个设计体系中，它一直都扮演着一个十分重要的位置。我自己踩了很多坑，也在网上看了很多文章，因此想总结分享给大家，希望对大家有帮助。

文章参考了很多大佬的文章，主要有：

优设网：

1、《你知道按钮设计的7个基本原则吗》 作者：Nick Babich

链接：https://www.uisdc.com/7-basic-rules-button-design

2、《上万字干货！超全面的B端按钮设计指南》作者：CE青年

链接：https://www.uisdc.com/b-end-button-design-guide#

人人都是产品经理：

1、《如何正确设计「按钮」，看完这些公式你就知道！》作者：UX小学

链接：http://www.woshipm.com/pd/4186042.html

Powered by Froala Editor