按钮是最常用的组件之一，而在与人交流的时候，你仍然认为自己有很多误区，所以本文将分析如何使用按钮，希望能给你带来一些新的思考。
按钮是任何用户界面（无论是桌面还是联通用户界面）中必不可少的交互元素：甚至可以说，如果页面中没有按钮，整个页面设计将是不完整的。 在日常生活中，纽扣随处可见。 一个电灯开关、一个遥控按钮，以及现实生活中重复出现的按钮，也可以帮助我们不断了解屏幕世界中的按钮应该如何操作，进而衍生出屏幕世界中的按钮。 具体形式。
人机交互最重要的就是将我们从小到大对世界的认知映射到屏幕世界，比如苹果最经典的iOS滑动解锁。
在屏幕世界中，控制设计应该与化学世界相对一致，这也是按钮设计中特别重要的一个环节。
最近我经常问同学，按钮是什么？
大多数人的回答是：“按钮就是按钮，能是什么~”
因为对于他们来说，按钮不仅仅是一个操作区域加文字，没有什么特别的，也正因为如此，他们对按钮的具体结构也不太了解。 本文主要根据自己的工作经验，结合目前对按钮设计的理解，来分析一下如何做出更加合理的按钮设计。
说说按钮的痛点
按钮对于每个设计师来说都不陌生。 在每天晚上的设计中，都会用到按钮来进行页面设计，但并不是每个设计师都能设计好按钮，因为它具有三个方面的复杂性：
因此，虽然一个看似很小的按钮常常让我们感到困惑，但如果你一开始就没有将按钮作为一个整体进行梳理，那么在你的设计过程中，按钮往往会打断你的设计思维。 为了对按钮有更深入的了解，我会对按钮进行系统的拆解，结合实际案例，让按钮更加宽泛易懂。
在文章中对按钮类型的分析中，我将按钮分为两大类和十个小类。 对它们进行分类的目的是为了更好地为您分析每个按钮所涉及的状态。 在我们了解按钮之前，您需要了解其内部工作原理。
钥匙类型
首先，我想问你一个问题。 右图中，有几种按钮模式？ 他们是哪一个？ 给你五秒钟的时间考虑一下。
如果你还没有完全理解上图中的按键，建议你拿个小本子记下来~
在开始讨论常见的按钮类型之前，我们必须先明确一个重要的知识点：按钮状态。
1. 按钮状态是什么？
按钮的状态可以让用户知道按钮当前正在进行何种操作，方便用户做出判断。
常见按钮状态分为：正常状态（Normal）、焦点状态（Focus）、悬停状态（Hover）、激活状态（Active）、加载状态（Loading）、禁用状态（Disabled）。 状态已被分解。
正常状态（Normal）：不仅其他五种状态都是正常状态，而且是按钮最常见的状态模式，也是设计者必须设计的状态。
焦点状态（Focus）：主要用于显示当前笔记本光标的具体位置。 听起来有点唬人，不过我还是说一下背后的原理，主要是为了方便一些使用鼠标的用户，可以使用Tab键或者方向键来访问和输入网页。
例如，在MacOS和Windows的使用中，通过点击Tab，就会显示文件的Focus状态。
Focus状态是一个非常重要的交互方式，很多设计师都会忽略它。 甚至在很多网站上，这种风格都是直接清除的，很难通过Tab键获得集中反馈。 例如常见的百度、谷歌以及各种大型操作系统都会有这种反馈。 去掉这种反馈将会导致用户很难用方向键控制光标位置，从而大大降低了用户使用的可能性。
悬停状态（Hover）：在桌面端的设计中，虽然用户知道可以点击，但仍然需要设计悬停状态来表明键盘现在在按键上。 平板笔记本和联通设备上永远不会显示悬停状态，因为你的手臂很难悬停在屏幕上（尽管iPadOS更新到13.4版本后，会有悬停状态，并且通过键盘，所以这里不讨论）。
活动状态（Active）：由于名称不同，有的地方将活动状态称为Press状态。 它的表现是按下按钮使颜色变暗并涉及出现内阴影等效果。
禁用状态（Disable）：按钮的禁用状态是最难设计的状态之一。 主要在于禁用状态的表达以及如何在禁用状态和激活状态之间切换。 我来详细分析一下两个难点。
用超全面的文章解读“按钮”的禁用状态
在这篇文章中，我从“召唤按钮”和“工具按钮”两个角度详细拆解了其内部逻辑，希望能帮助大家更好地理解按钮设计的逻辑。
难点一：禁用状态的颜色首先会给人一种黑块的感觉，业内称之为变灰。 设计上，还需要注意光标连接时禁用光标的显示，即让后端小姐姐将光标的悬停状态改为不允许，并且您可以在前锥体前面放置一个X。
难点2：禁用和激活状态之间的切换。 例如，在注册页面中，需要姓名和电话号码。 当用户没有填写姓名和电话号码时，该按钮应呈灰色，以提醒用户不要点击。 当用户完成填充所需的数组后，将禁用的按钮变成激活的按钮，提示用户点击登录。
加载状态（Loading）：按钮加载需要时间的状态，一般被用户忽略，而在B端产品中，Loading状态尤为重要。 这里有很多细节和技巧，展开太长了。 在文章4.3（按钮详情）中会详细解答。
2. 主按钮
主按钮是页面按钮区域的核心操作。 在日常场景中，主按钮通常是创建、编辑、保存等正面操作，指出页面中最核心的功能，让用户听到主按钮就会大致知道页面如何操作。
但在主按钮的使用中，必须遵守以下两个原则：
页面中，按钮区域最好只有一个主按钮，否则会干扰页面的主要功能。
并不是每个页面都需要有主按钮，不要因为页面缺少主按钮而强行添加。 因为在实际使用中，经常会遇到key之间的关系是相等的，强行添加很容易导致页面层次混乱。
在主按钮中，按钮状态的设计也会与化学世界进行相应的映射，因此设计时需要考虑现实生活中的状态。
例如，当用户悬停时，通常会抬起按钮并降低色温。 目的是提醒用户可以点击，并且当用户按下时用黑色表示用户按下按钮的状态，与现实生活中按钮的状态不同。 同样，关键国家也应该绘制数学世界的地图。
3.此按钮/标准按钮（DefaultButton）
第二个按钮在页面上出现最频繁。 日常使用中，如果你不确定该用哪个按钮，大概率是使用没有问题。 由于它使用广泛且出现频率最高，因此也被称为标准按钮。
在这个按钮的设计方法上，我们团队将设计方法分为两类：
第一行样式
该按钮整体采用文字+边框的形式。 这种方式视觉感受较弱，适合同时显示多个按钮。 在B面项目中，字线式也是最常用的方式。
第二个文字类型
字面类型更倾向于表达按钮的整体，常见于各种联通终端的按钮。 整体表现也比较适合联通等屏幕规格较少的设备。 比较符合卡片式设计的思想，但不太适合桌面设计。 。
4. 文本按钮/链接（TextButton/Link）
文本按钮是页面中视觉层次较低的按钮，因此可以在页面上大面积重复使用。 文本按钮和链接（Link）基本相同，没有太大区别。 因此，从设计上来说，文字按钮和链接基本是一样的。
文字按钮重复出现，表格页中的操作列表最为突出。 由于表格中常用的操作最好直接显示，所以表格中基本都使用文本按钮。
5. 图标按钮（IconButton）
图标按钮是页面上占用空间最小的按钮，因此也是页面上使用效率最高的。 因为没有文本元素，所以会导致用户对图标的理解出现错误。 为了解决这个问题，Tooltip提示按钮的含义主要由用户在Hover时显示。 同时，建议图标按钮使用高频且易于理解的图标。
让我举一个简单的例子。 在桌面产品中，帮助文档一定是一个非常重要的入口。 当用户对页面中的功能有疑问时，可以以此来帮助用户理解。 一般来说，大多数页面都需要包含它。 显示帮助中心的入口，其中图标按钮最合适。
由此我们可以得出，图标按钮的应用场景一般是：当页面上需要高效显示一个或多个图标，且图标按钮的显示最为频繁时，满足以上两点时同时，使用图标按钮是一个更好的解决方案。
6. 按钮菜单（MenuButton）
按钮菜单是页面上许多操作的集合。 一般是由高频操作和一些低频操作组成的按钮菜单。 这样可以降低页面元素的复杂度，同时满足业务的功能需求。
举个反例，在表单页面中，B端设计者最常看到的按钮菜单就是新建按钮。 虽然这种新的按钮必不可少，但同时业务需求也需要多个业务按钮来展示。 按钮菜单的出现是为了帮助用户组织按钮，同时满足业务需求。
7.为按钮添加图标（IconaddButton）
这显然是主按钮的衍生，并且通过图标来解释主按钮的含义，从而帮助用户增强这个按钮的辨识度。 如果你想让某个按钮比主按钮更响亮，可以在按钮上添加图标，这样不仅可以强化图标的含义，还可以加深用户对按钮的印象。
在六种常见的按钮方式中，我们按照重要性的优先级对常用按钮进行简单的排序：
图标按钮-按钮菜单-主按钮-次按钮-文本按钮-图标按钮
特殊钥匙类型
1. 危险按钮（DangerButton）
危险键在删除操作中最常见。 一般用于警告用户删除的数据无法恢复，请用户慎重考虑。 在常见的删除操作中，需要用户进行两次确认，以防止用户误操作。
其实，在实际业务中，不应该有太多危险的按钮。 如果业务中难以避免，需要显示多个删除按钮，建议使用图标按钮进行显示或Hover后调出。
2.幽灵按钮（GhostButton）
幽灵按钮，看它的名字，就能想到它的作用：像幽灵一样，平时是透明存在的。
它没有使用复杂的颜色和款式，而是用腰线来代表外部轮廓，证明它仍然是一颗纽扣。 同时，内部仅使用文本显示按钮名称。 它只出现在按钮背景复杂的页面中，如渐变颜色、纹理、动态图片背景等，使幽灵按钮能够完美融入环境。
现在，传统意义上的幽灵按钮已经很少了。 虽然现在的官网已经不再流行幽灵按钮，但更多的是出现在复杂页面上的“实心按钮”。 从某种意义上来说，这种类型的按钮就是幽灵按钮的当前状态。
幽灵按钮和辅助按钮有什么区别？
从形式上来说，幽灵按钮和第二个按钮看起来是一样的，所以大家都有很多疑问，那么什么时候应该使用幽灵按钮，什么时候应该使用第二个按钮呢？
首先，幽灵按钮属于特殊按钮系统，所以不会被整个按钮系统禁锢。 比如在一个设计系统中，我将常规按钮的规格定义为24px、32px、40px，登陆到了一个官网。 页面中需要出现一个46px的按钮，而这个按钮完全不合适。 其次，幽灵按钮的边框粗细和字体大小与常规按钮系统不同，因此幽灵按钮与此按钮不同。
第二个方面是，在二级按钮的设计方法中，屏蔽按钮的方法并不只有一种，所以幽灵按钮和二级按钮可能会重叠，属于两种不同类型的场景，所以不能混合使用。 。
3.浮动按钮（FloatingActionButton）
在Material Design出现之初，浮动按钮就受到了很多人的青睐，它也是Android设计的代名词。 主要用于页面最常用的操作，是整个APP中的核心按钮，可以代表这个产品的核心功能，比如在记账软件中添加记账记录，在印象笔记（Android）中添加笔记等。 ）。
但沉浸式设计的出现，让联通终端需要固定按钮的地方越来越少。
在B端的设计过程中，逐渐衍生出了B端行业特有的方法。
在B端场景中css3立体按钮，悬浮按钮主要用于帮助用户进行辅助咨询功能。 例如，在一些用户需要帮助的页面中，可以利用浮动按钮让用户对有疑问的页面快速提问，从而快速帮助用户。在飞书的应用列表中，虽然存在一定的理解成本，用户一开始了解应用列表，可以通过浮动按钮来显示。
4. 动作调用按钮（CalltoActiontion）
Call to action 按钮缩写：CTA 按钮，主要目的是呼吁人们在特定页面上使用此按钮来提高转化，例如立即订购、联系我们、立即订阅等...
大多数时候，CTA 按钮成对出现。 “是或否”、“登录注册”、“确认与取消”等。为此，在分析清楚CTA按钮后，设计一个具有合理视觉层次的页面就显得尤为重要。 在设计中通常会使用渐变色、主题色、主题色的补色等，它们往往独立出现。
在B端软件场景中，官网是最重要的出现CTA按钮的页面。 通常，在官网上，CTA按钮用于引导用户从潜在客户到付费客户（点击后通常有一个联系表格来填写信息），这在B端产品中也是一个非常重要的指标：将潜在客户转变为付费客户。 它可以引导用户进入下一阶段。 如果CTA按钮设计不好，人们只会浏览官网，而没有任何转化。
为此，在设计CTA按钮的方式和位置时，需要与产品、设计、运营等方面共同确定和讨论，你站在不同的立场，希望得到一个完美的解决方案，因为设计一个清晰的方案结构层面将直接引导用户走向理想的使用路径，从而大大提高转化率。
按钮细节1.按钮文案
在我们日常的设计中，经常会遇到一些比较难的文案问题：登录、登录、确认、确认、发送、发布。 在很多很多的工作场景中，我们对于在按钮上使用哪种文案犹豫不决，这也是为什么我们需要通过具体的案例场景来展示对应的文案。
这种详细的文案是为了帮助用户理解页面所传达的真实含义，并且在场景中放置更多的文字，文案可以更好地辅助他们做出选择
2.按钮圆角
圆角在每个软件中都随处可见。圆角的大小不仅带来视觉表现，还会影响用户体验和产品的整体观感。 如果在开始设计之前没有对按钮的圆角进行具体规划的话，会很困难很容易踩坑，圆角如何设计，我们来系统分析一下
下面我们将按钮的圆角尺寸分为以下三类：直角、圆角、半圆。
直角：
按钮的四个角的方向很有引导性，看起来会比较刺眼，会减慢页面中的注意力。 同时，直角在按钮排列上看起来更加统一，同样的东西在视觉上更不容易吸引我们的注意力。
鱼片：
与直角按钮相比，圆角按钮在视觉上总是给人一种柔和、亲切的感觉。 当排列几个圆角按钮时，你会感觉圆角按钮更容易点击。 因此，在使用的按钮中，建议添加圆角细节元素。
为什么直角的物体感觉更严肃——每个人都认为圆角更好，但并不是每个人都能回答为什么圆角更好。
巴罗神经学研究所对角的科学研究发现css3立体按钮，“角的感知程度随角度线性变化。锐角比钝角产生更大的幻觉突出”。 换句话说，角越尖，看起来就越亮。 角越多，就越难看。
对于圆角还有另一种解释，这是因为具有圆角的物体在现实生活中感觉更友好。 从小我们就知道尖角会伤人，圆角更安全。 这就是当孩子在玩球和刀的时候，家长的反应是完全不同的。
当小学生玩刀时，父母会非常紧张，很快就会让儿子失望； 当小学生们玩球的时候，家长们特别放心。 这唤起了神经科学所说的尖锐的“回避反应”。 因此，我们倾向于“避免锋利的边缘，因为它们可能在自然界中造成危险”。
鱼片越大越好吗？
一般在联通端场景中，半圆形按钮随处可见，中指在联通端的触摸操作对圆角影响不大； 但在桌面端场景下，使用键盘时，半圆形按钮就会不太合适。
如果在同一区域内减少按钮的圆角，则相应按钮的可操作区域就会大幅减少。 在相同规格的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。
事实上，麻烦不仅仅局限于操作区域。 结合实际业务，我们的按钮常常被当作原子（原子设计理论），形成下拉菜单进行联动。 在下拉菜单的设计中，半圆按钮也会因半圆而出现。 限制使得下拉菜单的设计变得更加困难。 同样，在设计方面，半圆角与下拉菜单的契合也会显得相当突兀。 因此，在考虑这样的设计时，需要更多地思考未来的业务场景。
3. 重要的加载状态
在按钮的状态中，Loading状态一般不会直接显示给用户，因为大多数情况下，Loading状态在一秒内发生，而B端场景中有很多重要的操作，并不会显示在长时间的等待加载状态下，会导致用户在使用时出现错误。
