B端设计之按钮

一、按钮类型

1.1按钮状态

1.2主按钮

1.21在页面当中，按钮区域的主按钮最好只有一个，否则会对页面的主要功能造成干扰

1.22并不是每一个页面都需要有主按钮，不要因为页面缺失主按钮而强行加上。因为在实际使用中，时常遇到按钮之间为平级的关系，强行添加，容易造成页面层级混乱

1.33按钮状态设计

次按钮在页面中出现最为频繁，在日常使用中，如果你不太确定使用何种按钮时，那使用它，大概率没有错。因为它运用广泛，出现频率也最高，因此也被人们称为标准按钮在次按钮的设计形式中，我们团队将设计形式分为两类：
第一类 字线型
此按钮整体以文字+边框的形式，这类形式在视觉层面上感知较弱，适合几个按钮同时展示，在B端项目中，字线型也是在使用中最为频繁的形式
第二种 字面型
字面型更偏向表达按钮整体，常见于各类移动端的按钮当中，整体的表达也更适合移动端这类屏幕尺寸较少的设备当中，更符合卡片化设计的思路，反而不太适合桌面端的设计

1.4 文字按钮/链接（Text Button/Link）

表格中最为常见（操作列表）

1.5 图标按钮（Icon Button）1.5 图标按钮（Icon Button）

用户在Hover时使用展示Tooltip提示按钮的含义，同时建议在图标按钮的使用上多为高频且易理解的图标

1.6 按钮菜单（Menu Button）

按钮菜单为页面中许多操作的集合，通常是将高频的操作以及一些低频的操作进行整合，组成的按钮菜单。这样既能够减少页面元素的冗杂，同时也能够满足业务对于功能的需求

按钮优先级排序

二、特殊按钮类型

2.1 危险按钮（Danger Button）

在实际业务中，危险按钮不宜过多，如果业务当中无法避免，需要展示多个删除按钮时，推荐采取图标按钮进行展示或者Hover过后将其呼出

2.2 幽灵按钮（Ghost Button）

幽灵按钮，看它的名字就能想到它的作用：像幽灵一般透明的存在
它没有使用复杂的颜色、样式，而是用线条表示外部轮廓，证明它还是一个按钮。同时内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面当中，比如：渐变色、纹理、动态图片背景的情况下，幽灵按钮能够完美融入到环境当中
而现如今，传统意义上的幽灵按钮已经很少，毕竟在现如今的官网当中，幽灵按钮已经不再流行，更多的是出现在复杂页面的“实心按钮”，而在某种意义上讲，这类按钮才是幽灵按钮现在的状态
幽灵按钮和次按钮有何不同？
在形式上，幽灵按钮和次按钮看起来没有并什么不同，因此会有很多疑惑，那我什么时候用幽灵按钮什么时候用次按钮呢？
首先幽灵按钮是属于特殊按钮体系中，因此它不会受整个按钮体系的束缚，比如我在一个设计系统中，分别定义了常规按钮的尺寸分别是24px、32px、40px，但是我在一个官网落地页当中需要有一个46px的按钮出现，次按钮就完全不合适。其次幽灵按钮边框粗细、字体大小都是和常规按钮体系不同，因此幽灵按钮就和次按钮有所不同
第二个方面在次按钮的设计形式中，不仅仅只有描边按钮这一种形式，因此幽灵按钮与次按钮它们可能会有交集，但是属于两种不同类型的场景，因此也不能将它们混用

2.3 悬浮按钮（Floating Action Button）

主要是用于页面当中最常用的操作，是整个APP中最核心的按钮，能够代表这个产品的核心功能，比如记账软件的添加账单记录，印象笔记的新增笔记（安卓），悬浮按钮在B端场景中，主要是帮助用户进行辅助咨询的功能，例如在一些用户需要得到帮助的页面中，可以通过悬浮按钮，使用户的又疑问的页面进行快速提问，帮助用户能够进行快速的跳转

2.4 行为号召按钮（Call to Actiontion）

CTA 是英文 “call-to-action”的简写，又名行为召唤按钮

1. 按钮文案上有清晰简洁,可以使用带有紧迫感、即时性、利益点的文案
   
2. 页面中按钮过多时，需要根据层级作出明确区分，减少用户决策时间
   
3. 按钮在操作后需要及时给出用户不同状态的反馈
   
4. 应用对比色。颜色的选择我们可以考虑如下因素——如主视觉色，以及目标受众的潜在偏好和心理特征，在为 CTA 按钮选择颜色时有一个条件非常重要：按钮和背景颜色应该足够反差，以便 CTA 能够从其他 UI 元素中脱颖而出。例如，如果设计师在布局中使用蓝色调色板，那么为CTA按钮使用红色或黄色将是一个好主意。
   

三、按钮细节

3.1 按钮文案

在弹窗文案中详解

3.2按钮圆角

圆角会有收缩感，直角会有往外的延伸感
但圆角并非越大越好，通常在移动端场景中，半圆按钮随处可见，移动端手指触摸操作上，对于圆角的影响小之又小，而到了桌面端的场景下，鼠标的使用，半圆按钮就会有所不妥
如果相同面积中，按钮的圆角增大，相应的对于按钮的可操作区域就会随之减小，在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作

3.3 重要的Loading状态

当按钮响应时间小于1秒时，通常正常反馈即可当按钮响应时间长于1秒时，我们通常会采取加载动画，减缓用户等待的焦虑感
举个例子：比如一个确认提交的按钮，由于网络或者服务器等原因，需要长时间加载资源，而用户不知道我刚才按下的按钮是否有效，这时用户慌张，想要多按下几次这个按钮，系统就会不停提交数据，最后网络变好时，窗口就会一瞬间疯狂展示，导致用户体验下降
为了防止这类事情的发生，需要在设计师考虑到按钮在加载一秒以后的状态，应当提示用户在网页已经收到请求，正在加载，同时在按钮状态中应该为不可操作状态。同时会给出加载转圈的动画，缓解用户的焦虑

四、按钮的前端开发思维

4.1Padding思维

在按钮当中，通俗的理解Padding就是文字与按钮之间的间距因为Sketch等软件在按钮的设计中，只有图形位置的概念，没有内间距Padding的概念，因此需要对按钮还原要明确的描述
前端眼中的按钮：按钮宽度＝2*padding+文字宽度
对于前端而言，Padding通常都是统一且固定的。

4.2min-width

想要实现两个文字按钮长度和四个字的一样怎么办，需要去设定按钮的最小宽度
按钮最小宽度的设定一般为4个字文字的长度，假设字体大小为16px，左右的Paddung为24px
最小宽度为：88px，因此在按钮的标注中，需要展示最小间距为12px，方便前端进行CSS开发

4.2按钮边框

在我们的sketch中，按钮边框有三种，内边框、居中边框、外边框，默认为居中，但是在前端的CSS代码中没有居中边框，默认为内边框，如果需要调整为外边框，最好能够标注