一.按钮类型
1.常用的几种按钮状态
正常状态 (Normal) ： 按钮最为常规的状态形式
聚焦状态 (Focus)： 主要是用于展示当前电脑光标所在的具体位置
（主要是方便一些键盘使用的用户，可以使用Tab键或者方向键来对网页进行访问输入）
去除这类反馈，会导致用户无法用方向键控制光标位置，在很大程度上降低用户使用的可能性
悬停状态 (Hover)：即使用户知道它是可以点击的，但是你还是需要设计悬停状态，表明鼠标现在正在按钮上。
激活状态 (Active)：有的地方也称之为Press状态，它的表现就是将按钮按压下，将颜色变深同时会涉及到内阴影等效果的出现
禁用状态 (Disable)：禁用状态在颜色上会给人灰色块的感觉，行业里也称之为置灰
加载状态 (Loading)：按钮需要时间进行加载的一种状态，通常会被用户忽略
**
1.主按钮 （Primary Button）
主按钮为页面中按钮区最为核心的操作，强调页面中最为核心的功能，能够让用户一看到主按钮就明白在页面中需要如何操作。
1.1在页面当中，按钮区域的主按钮最好只有一个，否则会对页面的主要功能造成干扰
1.2并不是每一个页面都需要有主按钮，不要因为页面缺失主按钮而强行加上。
1.3主按钮中，按钮状态的设计也会跟随物理世界进行相应的映射，因此在设计时需考虑现实生活中的状态
- 用户的Hover时，一般都将按钮抬起并亮度增加，其目的是为了提示用户可以点击
用户在按下时，用加黑来表示用户按下的状态
2.次按钮/标准按钮（Default Button）
次按钮在页面中出现最为频繁，在日常使用中，如果你不太确定使用何种按钮时，那使用它，大概率没有错。因为它运用广泛，出现频率也最高，因此也被人们称为标准按钮
2.1第一类 字线型
此按钮整体以文字+边框的形式，这类形式在视觉层面上感知较弱，适合几个按钮同时展示，在B端项目中，字线型也是在使用中最为频繁的形式
2.2第二种 字面型
字面型更偏向表达按钮整体，常见于各类移动端的按钮当中，整体的表达也更适合移动端这类屏幕尺寸较少的设备当中，更符合卡片化设计的思路，反而不太适合桌面端的设计
3.文字按钮/链接（Text Button/Link）
文字按钮为页面中视觉层级较低的按钮形式，因而可以在页面中大面积的重复使用
表格页面当中的操作列表最为突出
4.图标按钮（Icon Button）
图标按钮为页面中控件占比最小的按钮，所以在页面中的使用也是最为高效的。
没有了文字元素，会导致用户在图标的理解上出现偏差。为了解决这一问题，主要是通过用户在Hover时使用展示Tooltip提示按钮的含义，同时建议在图标按钮的使用上多为高频且易理解的图标
- 当页面中需要高效的展示一个或几个图标时，同时图标按钮的展示最为频繁时，当同时满足以上两点，使用图标按钮就是一个更优的解决方案
5.按钮菜单（Menu Button）
按钮菜单为页面中许多操作的集合，通常是将高频的操作以及一些低频的操作进行整合，组成的按钮菜单。这样既能够减少页面元素的冗杂，同时也能够满足业务对于功能的需求
6.按钮中加图标（Icon add Button）
通过图标对主按钮的含义进行解释，从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调，那便可使用在按钮中添加图标
二、特殊按钮类型
1.1危险按钮（Danger Button）
危险按钮在删除操作中最为常见，通常是为了警告用户，这个数据删除不可恢复
在实际业务中，危险按钮不宜过多，如果业务当中无法避免，需要展示多个删除按钮时，推荐采取图标按钮进行展示
1.2幽灵按钮（Ghost Button）
用线条表示外部轮廓，证明它还是一个按钮。同时内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面当
现如今，传统意义上的幽灵按钮已经很少，毕竟在现如今的官网当中，幽灵按钮已经不再流行，更多的是出现在复杂页面的“实心按钮”
幽灵按钮和次按钮有何不同？
1.它不会受整个按钮体系的束缚 比如我在一个设计系统中，分别定义了常规按钮的尺寸分别是24px、32px、40px，但是我在一个官网落地页当中需要有一个46px的按钮出现，次按钮就完全不合适
2.次按钮的设计形式中，不仅仅只有描边按钮这一种形式，因此幽灵按钮与次按钮它们可能会有交集，但是属于两种不同类型的场景，因此也不能将它们混用
1.3悬浮按钮（Floating Action Button）
在Material Design 出现之初，悬浮按钮受到了很多人的追捧，它也是安卓设计的代名词。主要是用于页面当中最常用的操作，是整个APP中最核心的按钮，能够代表这个产品的核心功能，比如记账软件的添加账单记录，印象笔记的新增笔记（安卓）**
悬浮按钮在B端场景中，主要是帮助用户进行辅助咨询的功能
**
1.4行为号召按钮（Call to Actiontion）
行为号召按钮简称：CTA按钮，主要目的是为了号召人们在某些特定的页面中使用此按钮来提高转化，比如立即购买、联系我们、立即订阅等等…
- 大多数时候，CTA按钮都是成对出现的。“是与否“ 、“登录与注册”、“确认与取消”等。因此，分析清楚CTA按钮后设计出视觉层级合理的页面称为非常重要的点。在设计中，一般会采取渐变色、主题色、主题色的互补色等等，它经常独立出现
- 一般在官网中，使用CTA按钮将用户引导从潜在客户向付费客户进行转变
设计CTA按钮的形式与位置时，需要与产品、设计、运营等共同确定并讨论使用，大家站在不同的立场希望得到一个完美的方案，因为设计出清晰的结构层次将直接引导用户朝着理想的使用路径前进，从而极大提高转化率
三.按钮细节
1 按钮文案
登陆（Land) ：这是网络中错别字最为频繁的用此，很多人都会把登陆放到登录页面中，其实是错的。这个词里的“陆”字，就是陆地的意思，其基本含义只是登上陆地而已，拓展出来还会有“登陆到某一个市场”，但登陆网站的说法是绝对错误的
- 登录（Login）：这是“登记记录、记载”的含义，我们正常输入账号密码就是为了去记录我们的一个信息，一般为官网登录页
- 确认（Confirm）：这是带有一些不可逆操作的提示，一般用于用户配置、选择项等
- 确定（Yes）：这是询问用户是否进行某项不可逆操作，一般为一个单独的操作
- 发送（Send）：这是尽快传递对方的聊天消息，一般为即时性的聊天发送
- 发布（Publish）：这是用于用户填写的观点、意见、文章等反馈信息发布到一些正式场合，如论坛、社区等
2 按钮圆角
我们将按钮的圆角大小，分为以下三类：直角、圆角、半圆
- 直角：具有很强烈的引导性，看上去也会更加刺眼，使得在页面当中注意力会减弱。同时，直角在按钮排列当中看上去更加统一，相同的东西在视觉上不太能引起我们的注意
- 圆角：相比与直角按钮，在使用圆角的按钮中，视觉上总是给人一种柔和亲近的感觉，当几个圆角按钮进行排列时，能够感受到圆角按钮更容易被点击。因此在使用的按钮中，建议添加圆角的细节元素
圆角是不是越大越好？ 通常在移动端场景中，半圆按钮随处可见，移动端手指触摸操作上，对于圆角的影响小之又小；而到了桌面端的场景下，鼠标的使用，半圆按钮就会有所不妥 如果相同面积中，按钮的圆角增大，相应的对于按钮的可操作区域就会随之减小，在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作
3 重要的Loading状态
需要在合理的时间进行反馈
当按钮响应时间小于1秒时，通常正常反馈即可
当按钮响应时间长于1秒时，我们通常会采取加载动画，减缓用户等待的焦虑感
为了防止这类事情的发生，需要在设计师考虑到按钮在加载一秒以后的状态，应当提示用户在网页已经收到请求，正在加载，同时在按钮状态中应为不可操作状态。同时会给出加载转圈的动画，缓解用户的焦虑
对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何，减少不确定性；并引导他们在正确的方向上交互，而不是浪费精力在重复操作上 在Loading的加载过程中，等待焦虑一直是用户想要了解到的，为了缓解类似情况，可以将等待的进度状态进行展示，使的用户在等待的过程中，能够清晰的清楚自己的按钮目前处于何种状态，我大概还需要等待多久，缓解用户在等待过程中的焦虑
CE青年
若有收获，就点个赞吧
0 人点赞
