Button
B端按钮设计
痛点
1.使用场景过多，比如在登录页面，登录和注册就是使用不同的按钮形式。B端产品中，业务在每个步骤中需要突出和强调的点不同，不是每个场景都需要相同的按钮。
2.出现频率太高
3.按钮形式太多
image.png
按钮拆解
image.png
按钮类型
1.按钮状态：帮助用户判断这个按钮当前处在
什么状态
常见的六大状态：正常（default）、聚焦（focus）、悬停（hover）、按下/激活（press/active）、加载（loading）、禁用（disable）
image.png
聚焦状态（focus）：主要是用于展示当前电脑光标所在的具体位置，方便一些键盘使用的用户，可以使用Tab键或方向键来对网页进行访问输入。容易被忽略，甚至很多网站直接将这个样式去除，导致用户无法使用方向键控制光标位置，很大程度上降低用户使用的可能性。
image.png
悬停状态：平板电脑和移动设备在手动输入时无需展示悬停状态。
禁用状态：难点在于禁用状态的表现形式以及禁用状态与激活状态之间如何的切换。
难点一：置灰要注意光标移动时需要展示禁用光标，让前端将cursor的hover状态更改为not-allowed。
难点二：禁用与激活状态的切换。
image.png
加载状态：常被用户忽略，但在B端产品中，loading很重要。
2.主按钮
image.png
同时需要遵循两个原则
a.按钮区域的主按钮最好只有一个，否则会对页面的主要功能造成干扰
image.png
b.并不是每个页面都需要有主按钮。实际使用中，按钮之间为平级的关系，强行添加，容易造成页面层级混乱。
image.png
3.次按钮（二级&三级）
页面中出现最频繁，也叫标准按钮。两大类：
a.字线型：文字+边框。适合几个按钮同时展示，在视觉层面上感知较弱。B端使用最频繁的形式
b.字面型：常见各类移动端按钮中，整体偏向表达按钮整体，适用于移动端卡片化设计思路。
image.png
4.文字按钮/链接
属于页面中视觉层级较低的按钮形式，可以在页面中大面积重复使用，文字按钮与链接基本一致。场景多用于表格页面的操作列表，因为表格中常用的操作做好能直接展示出来，多采用文字按钮形式。
image.png
5.图标按钮
image.png
使用场景通常为当页面中需要高效地展示一个或几个图标时，同时图标按钮展示最为频繁时，同时满足两点，就更适合选择图标按钮。
image.png
6.按钮菜单
页面中许多操作的集合，通常是将高频的操作以及一些低频的操作进行整合，组成的按钮菜单，目的减少页面元素的冗余，同时也能够满足业务对于功能的需求。比如表格页面中，常见的按钮菜单是新建，同时业务需要，还要多个按钮进行展示。使用按钮菜单，帮助用户进行按钮整理，同时满足业务需求
image.png
7.按钮中加图标
主按钮的衍生，通过图标对主按钮的含义进行解释，从而帮助用户提高按钮的识别性。比如想要增加一个比主按钮更强调的按钮，可以加一个图标强化语义。
image.png
总结：根据重要的优先级来排列：图标加按钮-按钮菜单-主按钮-次按钮-文字按钮-图标按钮
特殊按钮类型
1.危险按钮
在删除操作中最为常见，为了警告用户，这个数据删除不可恢复，让用户谨慎考虑，通常需要弹出对话框，让用户进行二次确认，避免用户误操作。实际业务中，危险按钮不宜过多。如果无法避免，推荐采取图标按钮展示或Hover过后呼出
image.png
2.幽灵按钮（Ghost Button）
线条表示外部轮廓，内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面中，比如：渐变色、纹理、动态图片背景的情况下，融入环境中。现如今传统的幽灵按钮在复杂页面已经被实心按钮取代了。
image.png
注意：幽灵按钮与次级按钮的区别
幽灵按钮属于特殊按钮体系中，因此不会受整个按钮体系的束缚。比如在一个设计体系中，定义了常规按钮的尺寸是24、32、40px，但如果在官网落地页中需要一个46px的按钮出现。次按钮就不适合。总之幽灵按钮单独定义，样式上与次级按钮有一定交集。
image.png
3.悬浮按钮（详见下方）
image.png
注意沉浸式设计的出现，让移动端寸土寸金的地方，需要固定一个按钮的情况变得少见。在B端设计场景中，主要是帮助用户进行辅助咨询的功能，例如一些用户需要得到帮助的页面，可以通过悬浮按钮，使用户对有疑问的页面进行快速提问。
image.png
4.行为号召按钮（CTA）
主要目的是为了号召人们在某些特定页面中使用此按钮来提高转化，比如立即购买，联系我们，立即订阅等
大多数时候，CTA是成对出现。“是与否”、“登录与注册”、“确认和取消”。因此分析清楚CTA按钮后设计出视觉层级合理的页面成为非常重要的点，设计中一般会采取渐变色、主题色、主题色的互补色等，它经常独立出现。
在B端场景中，官网是CTA按钮出现最为重要的页面，一般在官网中，使用CTA按钮将用户引导从潜在客户向付费客户进行转变（点击后一般是一个联系表单进行信息的填写），这也是B端产品中非常重要的指标：潜在客户向付费客户的转变。可以引导用户进入到下一个阶段，如果CTA按钮设计不好，很难产生转化。
在设计CTA按钮的形式与位置时，需要与产品、设计、运营等共同确定并讨论使用，设计出清晰地结构层次将直接引导用户朝理想的使用路径前进，提高转化率。
image.png
按钮细节
1.文案：文字放置在场景中辅助用户做出选择
确认（Confirm）：带有一些不可逆操作的提示，用于用户配置、选项等。
确定（Yes）:询问用户是否进行某项不可逆的操作，一般为一个单独操作。
2.按钮边角：直角、圆角、半圆
直角：强引导性，使得按钮在页面中的注意力会减弱。直角在按钮排列中看上去统一，相同的东西视觉上会不易察觉
圆角：相比较直角，圆角的按钮柔和亲近，几个圆角圆角按钮进行排列时，能够感受到圆角按钮更容易被点击。
衍生：尖锐边缘会产生“回避反应”。但圆角不是越大越好，在移动端场景中，圆角影响很小。桌面端场景中，圆角越大，相对于按钮的可操作区域越小。
image.png
结合开发落地，半圆按钮在下拉菜单中，会因为半圆局限，使得下拉菜单设计与适配变得更加困难。
image.png
3.Loading
需要在合理的时间进行反馈按钮状态，1s后提示用户系统已经收到请求，正在加载，同时按钮状态应该为不可操作状态，提供加载转圈动画，缓解用户焦虑。
a.当按钮响应时间小于1s，正常反馈
b.当按钮响应设计长于1s，采取加载动画
注意避免因为按钮无反馈造成用户的反复点击，出现多个弹窗
image.png
思考：想想按钮的状态中，是否额能够帮助用户进行体验上的提升？
对用户操作的适当反馈是用户界面设计的最基本准则，让用户了解当前状态、位置、是否成功、进度如何，减少不确定性，并引导他们在正确的方向上交互，而不是浪费精力在重复操作上。
比如loading加载过程中，用进度状态缓解用户等待的焦虑情绪，用户在等待中，清楚自己目前处于何种状态，大概还需要等待多久。方案符合尼尔森可见性原则，提升体验。
image.png
按钮的实际使用场景（顶部右侧导航优化）
image.png
第一步：根据用户浏览模式确定按钮顺序
桌面端的浏览模式大致分为两类：F型浏览模式、Z型浏览模式。结合案例，导航在页面顶部，两种模式下均为从左到右的浏览顺序。初步确定好按钮的重要层级排序。
image.png
第二步：交互路径优化
对按钮层级进行划分，由于导航在浏览器窗口的顶部右侧。左侧的第一个按钮为鼠标交互操作路径最短的区域，桌面端移动鼠标的长短直接决定了用户是否愿意点击这个按钮，所以左一是最常用高频的操作。中间为整个按钮区域的内部，可以放一些必须要有，但相对低频的按钮（如帮助中心、通知中心等....）。右侧为按钮重要层级最弱的区域，同时也是右手鼠标操控最容易定位的区域，用户可以快速精准选择。
image.png
竞品分析
结合页面中信息层级高，同时需要精准定位的按钮会将个人中心放置在最右侧，方便用户快速定位，最终得到
image.png
第三步：信息整合优化按钮结构
通过亲密性原则，对中间区域按钮进行简单分类，将有关联的按钮进行组合，形成按钮之间的关联性。
image.png
第四步：视觉调整
将一部分重要按钮突出，一部分按钮弱化，达到想要的层级效果。结合案例，将新增按钮定位CTA按钮，因为它关联整个系统使用，属于高频操作按钮。
image.png
衍生:
F型浏览模式是新闻平台、博客等文字为主的网站布局所采取的阅读模式。由尼尔森团队的眼动追踪研究结果从而进行普及，首先用户以水平方向进行阅读，通常是在阅读区域的上半部分。接下来，他们在屏幕左侧垂直浏览，寻找段落开篇几句中感兴趣的内容，然后在第二个水平方向上快速浏览，通常这块内容比上一个内容区更短小、简洁。这部分元素形成了F的下半部分。
image.png
Z型浏览模式是扫描滚动的网站的典型模式-从左到右，从上到下。
image.png
按钮设计中与开发还原细节
1.Padding（内间距）思维
按钮对于前端来说，padding统一且固定的，只会根据按钮文字长度进行相应调整
image.png
2.Min-Width思维
设置按钮的最小宽度。按钮最小宽度的设定一般为4个字文字的长度，假设字体大小是16px，左右padding为24px，最小宽度是88px。
image.png
3.按钮的边框
css代码中没有居中边框，默认内边框。
整体按钮注意點
1.每个按钮只有一种样式
相同的动作类型使用一种按钮样式。标准的按钮类型包括：呼叫行动（CTA），主要，次要，三级，成功，危险，链接等。
image.png
2.包含事件状态和提供视觉反馈
按钮状态，如悬停，按下，保存，禁止。为用户提供所需的视觉反馈。
image.png
3.差异化按钮类型
按钮类型应该在风格上进行区分，以提供其层次结构的视觉提示。一个主要的操作按钮应该比次要的或三级的操作按钮更加突出，并且设计出具有额外意图的不可逆结果的行动。
image.png
4.保持按钮风格一致
只要你保持整体风格一致，任何设计风格都可以使用。如果你使用4px的边框半径，微妙的渐变和阴影，确保你所有的按钮类型都采用这样的风格。
image.png
5.非按钮不应该看起来像按钮
按钮（尤其是圆角矩形按钮）通常样式类似于标签。如果在设计中同时使用了这两个组件，请确保添加足够的视觉差异以防止混淆。避免用户愤怒地点击了一个元素，却误以为是一个可操作的按钮。
image.png
6.保持大小写一致
无论使用的是全大写，标题大小写，句子大小写，还是小欧写，确保不同的按钮类型是一致的。
image.png
7.知道何时使用图标
按钮堆叠在一起看起来很糟糕，就像长表格的每一行一样。考虑一种更微妙的视觉风格--比如图标--用于具有重复内容的上下文中的操作。
image.png
8.避免长标签
image.png
9.标签应该清晰传达它代表的操作行为
不要让用户猜测按钮的作用，特别是如果它是不可逆转的。清晰简洁地解释行动的后果。像“是”、“不是”和“取消”这样的标签可能会被误解。在上面的例子中，用户可以将“cancel”解读为确认取消了该位置，而不是取消了它的删除。
image.png
10.在链接之间添加间距
不要忽视链接类型的操作按钮，当它们一起出现时，确保为它们添加足够的间距。
image.png
11.不要换行标签文本
按钮标签的换行降低了可读性--看起来很糟糕，确保文本在一行之内显示。
image.png
12.标签不应该长于一个按钮的宽度
image.png
FAB悬浮按钮
FAB到Android中的一个控件，漂浮于用户界面上但圆形图标，将用户的可能操作归结为一个最突出的功能，最核心的按钮，能够代表整个产品的核心功能，比如记账软件的添加账单记录，印象笔记的新增笔记。
1.什么时候使用FAB？
a.标志性操作
FAB强调相关或经常使用的操作，适用于具有很强特性操作的app中，理想状况下，应该代表整个APP的核心功能。
在此屏幕上暂停或回复播放会告诉用户他是一个音乐app
b.作为找到方法的工具
FAB是告诉用户下一步做什么的自然提示。研究表明，当面对不熟悉的屏幕时，许多用户依赖用FAB来导航，因此，FAB作为重要的路标非常有用。
image.png
c.不是每个屏幕都需要FAB
FAB是丰富多彩且可被破坏的，因为他们设计的很突出，发现这些按钮非常容易。但不是每个屏幕都应该使用FAB，因为不是每个人屏幕都需要这一重要性的操作。“为了促进操作，不要一味使用FAB”
image.png
google photos app是一个很好的例子，搜索是大多数用户的额外操作。主要任务是照片浏览，因此，不需要FAB。FAB的存在可以分散用户的注意力，让用户远离主要内容（照片）。
提示：如果你在屏幕搜索主要的操作超过了5分钟，很明显这里不需要FAB。
2.FAB的最佳实践
a.避免mystery meat导航
“mystery meat导航”指的是用户必须利用按钮和链接来查找接下来做的事情。
FAB是一个仅图标的按钮，问题是普遍认可的图标很少见。在你点击之前，你一定不知道确切含义。如果用户需要猜测，那么你的按钮就是mystery meat。虽然通过点击它可以在短时间内了解图标的含义，但有一个认知负担“用户必须记住他的含义”。将所有的mystery meat图标叠加在你所有的app页面中，这就是一个很大的工程。
保证用户与相关语境的清晰。语境帮助用户解释图标按钮和其他操作。例如，如果你有一个笔记应用程序，很明显，程序的主要目的是采取和查看-“注释”。“笔”图标将在这种情况下的作用非常大。
b.每屏幕只能使用使用一个FAB
FAB是突出且有侵入性，FAB 在页面上应该使用一次，或者根本不使用。
b.仅使用FAB进行积极的操作
因为FAB是有特色的，所以通常是一个积极的操作，如创建、分享等。FAB不要用在具有破坏的，警告的，有限的，或者工具栏中进行的操作，如删除或归档，剪切和粘贴文本，改变音量等。
image.png
MD中指出：FAB应该是一个让用户对使用FAB后感到开心的操作，而不用担心会发生错误。
3.FAB和动画
虚浮按钮的设计具有灵活性，FAB可以扩展，变形或发生反应
a.扩展一组操作
Evernote中点击后，旋转出来并暴露其他几个选项。FAB可以用一系列更加具体的操作来替代自己，并且可以将他们设计为用户的语境。注意这些操作必须与FAB本身所表达的主要操作相关联。包括FAB，数量控制在3-6个。
FAB也可以转变成新的页面，帮助用户从一个屏幕到另一个屏幕。改善屏幕之间的转换。悬浮按钮可以转换作为应用程序结构部分的视图。当FAB变形时，以逻辑方式在开始和结束位置之间转换。例如动画可以维护用户的方向感，并帮助用户了解试图布局中刚刚发生的更改。
b.滚动时可以隐藏FAB
当向下滚动（如果阻碍用户阅读内容），FAB可以被隐藏，以最大化专注于列表的视图区域。FAB需要可以移出方式，以便列表项的所有部分实际上都可以访问。
按钮位置
一.“确认”、“下一步”页面位置对产品的影响
1.固定于顶部
当“下一步”或者“确认”等按钮固定于页面底部时，全局角度，页面布局是清晰的，不同页面之间的整体性是一致，符合设计的统一性原则。
image.png
问题：当页面的列表要填写或者编辑时，底部的按钮会被弹出的键盘遮挡，导致无法点击。产品开发需要注意将键盘上的“done”或“完成”与页面的下一步做联动，但部分键盘没有这两个键，开发成本增加。重点是对于一些用户，录入完成后，很少直接点击键盘上的完成键，而是点击键盘的隐藏或者页面空白处，等待键盘下去，显示出“下一步按钮”。所以这样的操作体验不好。
总结：产品列表属于查看不可编辑是，置底可以接受，如果需要填写，不应该使用。
2.固定于底部并且跟随键盘运动
按钮与键盘绑定，开始固定于底部，进行编辑时，键盘上弹，将按钮一起带上来。
image.png
问题：极端情况下，列表过长，导致键盘上移后，按钮 置于列表的下方，完全遮挡或者露出一点。在填写完后，用户不会想着先把键盘隐藏或者点击键盘的确认键，而是点按钮漏出的部分，经常点错。
3.跟随列表移动
避免不了遮挡现象。但相较于键盘移动的好处是：符合用户的操作体验。
设计师会步入一种误区，希望将页面元素尽可能的统一化，包括图标，按钮，位置等。忽略了其实每个页面都是一个单独的个体，我们需要的是让用户在每个页面都能顺利的完成操作，而不是从设计者的角度来说“页面布局”的统一性。所以根据列表的阅读顺序，用户从第一行读到最后一行，从视觉流的角度，按钮在接近列表下面的位置时，对用户来说接收的最快。
4.是否将确认按钮置于右上角的方案
image.png
用户是否需要确认列表信息使非常重要的评判标准。右上角只有在内容不重要的情况下才会设计。
拓展
古登堡原则
Edmund C.Aronld认为人的阅读方式应该遵循某种习惯进行的，除了从左到右，还有从上到下。
古登堡图
古登堡图将显示介质分为四个象限：左上角的“第一视觉落点区”，也叫“主光学区域”，类似自然光的落点。读者很自然从“主光学区域”开始，在显示介质上来回移动，到达终端区域。阅读方式从左到右前进，读者倾向于关注整个页面的开始于结束区域，至于段落的起始与结尾较少被关注到，也就是休闲区。这个原则的支撑点为“阅读重心”，由人们阅读习惯形成。
将图表的设计与阅读的重心相协调，能帮助读者梳理阅读逻辑。例如，遵循古登堡图的布局把关键元素放在左上角（标题）、中间（图像）和右下角（联系信息）
image.png
古登堡图将设计元素的重量与它们的布局和组成进行协调，以知道眼睛的运动规律。对信息和媒介的熟悉程度也会影响眼球运动。例如，经常以一致的方式呈现给读者，不仅让读者更容易理解，可信度也会提升，一致性的由来。
用户的浏览视线，影响了界面信息的布局。
image.png
评论的视觉流也是这样设计：
image.png
甚至可以根据这个页面的布局，去判断这个产品功能的评论和点赞的排列顺序为什么是这样的。即使是整个页面模块的评论展示，从小到大也都是按照类似的视觉流进行设计。
image.png
如果只是纯粹地觉得按钮位置占用了屏幕空间，而把本末倒置。这样无论在操作还是阅读上，都会影响用户的使用路径。
image.png
而且顶部按钮尺寸较小，因为它所占据空间有限，因此在操作上相对来说不便于点击。所以这类顶部的按钮更适合用于“编辑页面”，需要用户谨慎操作。
image.png
在这样的情况下，使用顶部按钮，可以让用户在注意到应用栏中的状态更改后更快地采取操作行为。按钮与状态标题的接近意味着用户的眼镜不必偏离太远。
所以从古登堡原则来看，需要注意顶部按钮的设计，关键还在于可编辑内容区域，而不是按钮本身。而底部按钮的核心在于按钮本身，而非内容。
水平按钮的设计思路
弹窗中，设计师通常用来让用户确认某种操作行为。需要遵循古登堡原则的视觉终点说明-让用户最快地看到主要操作内容。
image.png
“继续”和“结束”并排放置，结束放右边，完全符合“取消”和“退出”的排列逻辑，也符合古登堡原则。keep在结束按钮设置了点击持续时长，用来防错。
类似的
购物产品.png
余额宝.png
朋友圈&知乎
有转化需求的按钮排列选择更多要看他们之间的逻辑关系、业务的重要程度。
当主要动作在左侧时，用户眼镜想要向右下方移动，而左边的主按钮需要用户的视线来回移动，增加用户的阅读时间。所以当产品希望用户进行什么操作时，就把主按钮放在右边。同时也要结合“左边取消，右边行进”
垂直按钮的设计思路
如果一个界面上同时存在两个按钮，虽然优先级不同，但设计师希望用户单独关注每个操作，那么垂直拜访就是最理想的选择。垂直摆放的按钮虽然在样式上做了区分，但用户同样会停留一段时间进行对比思考。垂直按钮比水平按钮更突出，全屏宽度占据更多空间。
image.png
例：微信零钱页面
image.png
“充值和体现”，对于第一次进入这个页面的用户，会花时间思考按钮代表的含义。所以竖向拜访可以让用户更好理解。同时，通过样式区分，来区别此刻用户进入这个页面最可能操作的行为。按照古登堡原则。下面的提现是视觉终点。但是按照样式，充值才应该是终点。
image.png
说明微信清楚这个界面提现会是用户想要的操作。但是，在弱化了提现，并加强了充值，来提倡用户的理财操作。当业务与原则出现矛盾的时候，业务还是占据高优先级的。
