B端设计组件-按钮解析
现实世界是什么样，手机上就是什么样，这种沉浸感，自然会更令人舒适。也许这就是所谓的用户体验吧。
数字时代按钮的设计也应跟随现实世界中物理按钮的状态。
按钮指导用户完成界面流程，但是太多的方向性标志可能会引起混乱，而不是清晰明了。重要的是限制单个用户界面中按钮的使用，以避免认知超负荷-用户选择的次数越少，决策就越容易。
按钮是交互界面中必备的元素，如果一个界面中没有按钮，用户不知道接下来她将要做些什么。
「你只需要按一下按钮，剩下的交给我们。」—柯达相机通过这种醒目的标语吸引潜在的消费者。
所以一个界面中如果没有按钮，它将是不完整的设计。
什么是按钮？
在界面中，按钮是传达给用户一种可执行的操作。它们通常放置在整个UI中，例如：对话框，窗体，工具栏等。
设计按钮时最重要的规则是使其足够突出。使它看起来更应该像是一个按钮。
So按钮和链接之间的区别很重要：
引导用户到另一个地方时使用链接，例如：“查看更多”，等。
执行动作时使用按钮，例如：“提交”，“取消”，“创建”，“上传”等。
设计按钮时，请记住每一个按钮组成元素，以UI规范为基准，考虑到每一个细节，使它更贴合我们的UI规范，就是要注重视觉传达的一致性。
“一致性是最强大的可用性原则之一：当事物始终表现相同时，用户不必担心会发生什么。” —雅各布·尼尔森（Jakob Nielsen）
👇我们把按钮拆解：
按钮有各种样式
最常见的是带有圆角的矩形按钮，圆角按钮认为比直角按钮更友好且更容易识别。
这些样式将根据不同的场景的而使用。
样式主要用于区分较重要的动作和较不重要的动作。创建动作层次结构，该层次结构将指导用户进行多种选择。通常，您可以有一个突出的按钮（该样式通常称为“主要”按钮），以及几个中等的“次要”和弱感知按钮。
主要按钮
主按钮为页面中最核心的操作，在交互场景中，一般是“编辑”，“保存”这种正向操作。使页面中的核心功能显而易见。
在主按钮的使用中，要遵循以下两个原则：
1.在整个界面区域中，最好只有一个只有主按钮，否则对页面的主要功能会产生干扰。
2.并不是每个页面中都需要主要按钮，不要因为页面缺少主按钮，而强行添加，很多时候页面中的按钮都是平级关系，若强行添加，会造成页面层级混乱。
次要按钮
次要按钮在页面中出现最为频繁，出现频率最高，被人们广泛使用因此也叫标准按钮。
在次级按钮的设计形式中一般有2种：
1.字线型
此按钮以文字和边框的形式展示，此类按钮在视觉感知层面最弱，故适合几个按钮同时展示。故在B端字线性的展示最为频繁。
2.字面型
此按钮更适合表达按钮整体，更符合卡片的设计思路，故在移动端使用频率更高。
图标按钮
图标按钮是按钮中占位最小的按钮，在页面使用中也最为高效，但是没有了文字的解释说明，故在鼠标hover时通过Tooltip提示按钮的含义。
当页面中需要高效的展示一个或几个图标时，同时图标按钮的展示最为频繁时，当同时满足以上两点，使用图标按钮就是一个更优的解决方案方案。
文本按钮
文本按钮在页面中视觉层级较低，因而可以在页面中大面积的重复使用，文字链接与文本按钮的区别有机会再说。文本按钮重复的出现，以表格页面当中的操作列表最为突出，因为表格当中常用的操作最好能够直接展示出来，因此表格中基本都采取文字按钮的形式
例如时间选择时很多都用到文本按钮。
悬浮按钮（Floating Action Button）
是浮动在用户界面上方的图标。 它的形状，位置和颜色使它与界面的其余部分明显区分开来。
在2014年Google推出了Material Design之后，FAB作为一个用户界面元素，被广泛应用于网站设计和移动设计中。
虽然FAB可能被视为一个微小的，无关紧要的UI组件，但其效果是至关重要的。
FAB按钮在页面上的位置通常由高可见度因素决定，并且可以根据应用的一般设计概念而变化。 经验法则是每个页面仅使用一个FAB。
下拉按钮/按钮菜单（Split Button）
单击下拉按钮时，将显示项目的下拉列表。 您通常可以在设置按钮中遇到此类型。 当用户选择列表中的一个选项时，它通常被标记为活动。
举个例子，在搜索东西时，搜索可以分类检索。
切换按钮（Toggle Buttons）
切换按钮我个人理解为选择按钮。但是跟选择框是有区别的，有机会再说说Toggle与Checkbox的区别。使用场景一般是设置需要开/关，或者显示/隐藏来展示效果。用户选择后不必审核就可以执行生效。
多选按钮（Multiselect Buttons）
类似于多选框的小组件，使用场景当我们一个标签需要多项定义或者搜索时需要多项过滤时可使用。
按钮状态
正常-表示该组件是交互式的且已启用。
焦点/聚焦-使用键盘或其他输入法传达用户已突出显示元素的信息。主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎，我来讲他背后的原理，主要是方便一些键盘使用的用户，可以使用Tab键或者方向键来对网页进行访问输入,比如在Mac OS 以及 Windows的使用中，通过点击Tab，便展示出文件的Focus状态。就是在按钮外给它套一个“圈”。
聚焦状态和选中状态是不一样的，所以在设计时一定要注意，一个是使用键盘或者其他输入法（模拟键盘），一个是使用鼠标。
下图是我经常打开PS软件时自带了某个按钮的聚焦状态。知乎网站上的按钮也支持聚焦状态，大家可以去玩玩。
悬停/划过—当用户将光标置于交互式元素上方时进行通信。（移动端没有此操作）
按下-表示用户已轻按按钮。
进度/加载-用于异步操作等待反馈的时候，也可以避免多次提交。
已禁用-表示该组件当前处于非交互状态，但将来可以启用。
1.禁用状态在颜色上首先会给人灰色块的感觉，行业里也称之为置灰，在设计上，也需要注意光标移动时需要展示禁用光标。（绝对禁用）
2.禁用与激活状态的切换，比如在一个注册页面中，需要姓名与电话必填，当用户没有填写完成姓名与电话时，应该将按钮置灰，提示用户不可以点击，当用户填写完成必填字段后，将禁用按钮转变为激活按钮，提示用户可以点击登录。（相对禁用）
按钮还有以下几个属性：
危险按钮：
删除/移动/修改权限等危险操作，一般需要二次确认。
幽灵按钮：
通常以很细的边线，沒有填充色，里面紧包含文字，几乎透明又易于融入背景，因此被称做幽灵。使用幽灵按钮能够更好的维护界面的完整性。
幽灵按钮与次按钮有些区别，幽灵按钮边框粗细、字体大小等不受设计规范的约束。
看下图：
行为号召按钮（Call to Actiontion）
在界面中CTA按钮的功能在于，它是唯一可以单击的东西，如果在一个网站中进行多个CTA？用户如何知道要点击哪个？
但是在某些特定项目中它又和利益方相关联，例如消费场景中，其主要目的是诱使人们采取某些行为，为特定页面或屏幕提供转化，例如购买，联系，订阅等。这是间接影响消费者的行为模式，像是在提醒他们:「你是不是该买点什么呢?」
所以更多时候CTA按钮能够大大提升我们页面中的转化率，这涉及到我们的而商业目标。
按钮的实际使用案例
通过上文对于按钮的解释，大致明白按钮在设计中的作用，接下来我将结合我工作中的一个案例，来说明下按钮在界面中的运用。
项目背景：在PC端，我们需要对整个项目的交互流程和界面进行优化并且制定新的设计规范。
这里只简单说一下按钮，由于保密协议不放自家产品。
我们需要在界面上满足现有的业务功能，又要考虑后续的业务需求，这里精确搜索与搜索框业务逻辑都等同于过滤筛选，所以把这2个功能合并，新建任务在这里的感知层面太强，类似于主要按钮，而且同时有多个按钮显示，所以做成字线型按钮。并且根据用户的浏览习惯制定按钮顺序。
按钮的位置对其功能至关重要。如果它们位于用户的眼睛无法注意的区域，则这个按钮做的多么炫酷都是没有用的。当人们访问网站时，尤其是第一次访问时，他们不会仔细地浏览页面上的所有内容：他们对其进行扫描以找到吸引他们注意力的东西，并且愿意为他们在网站上花费一些时间。这里就要考虑到人眼的扫描模式。
目前流行的主要是“ F”和“ Z”模式。
Z模型：用户首先从左上角开始扫描页面顶部，查找重要信息，然后向下搜索到对角线的对角线，最后以页面底部的水平线结束，从左至右对。
另外一个模型是F模式，该模式由尼尔森团队研究得出。
1.用户首先通常在内容区域的上部水平移动。此初始元素形成F的顶部栏。
2.接下来，用户将页面向下移动一点，然后在第二个水平移动中进行阅读，该移动通常比上一个移动覆盖的区域更短。此附加元素形成F的下杠。
3.最后，用户以垂直移动的方式扫描内容的左侧。
下图为眼动追踪热图
上述模型都表明，用户遵循他们自己的习惯，眼球扫描过程将在网页的顶部水平区域开始。所以一般使用顶部来显示核心信息和品牌是一种对双方都友好的交互：读者可以快速看到核心信息，所以导航栏优化也应遵从这一规则。这就是导航设计对于设计师的重要性。
我想这不仅仅对于导航栏，页面上所有有关信息的设计都考虑这一点，根据信息层级的重要性再结合这一模型进行设计。
致力于标题设计的实践的作者Bogdan Sandu提到了一个应牢记的重要观点：“人们在短短几秒钟内就可以判断网站的质量，而第二印象是Internet上缺少的东西。总而言之，网站必须引人注目，否则就是一个巨大的失败。”
但这并不意味着每个网站都需要导航。因为设计是针对产品或服务的目标受众进行分析和研究。
最后当把组件，交给开发时，记得多和开发沟通，按照开发的思路进行标注，例如：宽度，padding值，字体宽高，字符数等，因为设计只是属于这个项目中的一个环节，我们要和我们的上下游人员做好沟通协作。
在实际工作中，每一处细节都值得我们去深入思考。
写的不好的地方欢迎大家来拍砖
参考资料：
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
https://tob.design/#/experience/detail/247
https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2
