头条创作挑战赛#

本文同步本人掘金平台的文章：https://juejin.cn/post/7082241253819023397

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

Yeah，关注我的读者应该知道，上一篇文章了解 Angular 开发的内容，我们已经概览了 Angular 的相关内容。在自定义指令的部分，我们已经能够实现编写，但是，在实际场景中，我们还需要标准化的管理。

Angular 是 Angular.js 的升版

So，本文，我们就以 Tooltip 来讲解下自定义指令的内容。

线上效果图，如下：

目录结构

在上一篇文章的实现的代码项目基础上，执行命令行：

# 进入 directives 文件夹
$ cd directives

# 创建 tooltip 文件夹
$ mkdir tooltip

# 进入 tooltip 文件夹
$ cd tooltip

# 创建 tooltip 组件
$ ng generate component tooltip

# 创建 tooltip 指令
$ ng generate directive tooltip
复制代码

执行完上面的命令行之后，你会得到 app/directive/tooltip 的文件目录结构如下：

tooltip
├── tooltip                                           // tooltip 组件
│    ├── user-list.component.html                     // 页面骨架
│    ├── user-list.component.scss                     // 页面独有样式
│    ├── user-list.component.spec.ts                  // 测试文件
│    └── user-list.component.ts                       // javascript 文件
├── tooltip.directive.spec.ts                         // 测试文件
└── tooltip.directive.ts                              // 指令文件
复制代码

嗯，这里我将组件放在 tooltip 的同级，主要是方便管理。当然，这个因人而异，你可以放在公共组件 components 文件夹内。

编写 tooltip 组件

在 html 文件中，有：

<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div>
复制代码

在样式文件 .scss 中，有：

$black: #000000;
$white: #ffffff;
$caret-size: 6px;
$tooltip-bg: transparentize($black, 0.25); // transparentize 是 sass 的语法
$grid-gutter-width: 30px;
$body-bg-color: $white;
$app-anim-time: 200ms;
$app-anim-curve: ease-out;
$std-border-radius: 5px;
$zindex-max: 100;

// :host 伪类选择器，给组件元素本身设置样式
:host {
  position: fixed;
  padding: $grid-gutter-width/3 $grid-gutter-width/2;
  background-color: $tooltip-bg;
  color: $body-bg-color;
  opacity: 0;
  transition: all $app-anim-time $app-anim-curve;
  text-align: center;
  border-radius: $std-border-radius;
  z-index: $zindex-max;
}

.caret { // 脱字符
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid $tooltip-bg;
  position: absolute;
  top: -$caret-size;
  left: 50%;
  margin-left: -$caret-size/2;
  border-bottom-color: $tooltip-bg;
}
复制代码

嗯～，css 是一个神奇的东西，之后会安排一篇文章来讲解下 sass 相关的内容...

然后，在 javascript 文件 tooltip.component.ts 内容如下：

import { 
  Component, 
  ElementRef, // 元素指向
  HostBinding, 
  OnDestroy, 
  OnInit 
} from '@angular/core';

@Component({
  selector: 'app-tooltip', // 标识符，表明我这个组件叫做啥，这里是 app-tooltip
  templateUrl: './tooltip.component.html', // 本组件的骨架
  styleUrls: ['./tooltip.component.scss'] // 本组件的私有样式
})
export class TooltipComponent implements OnInit {

  public data: any; // 在 directive 上赋值
  private displayTimeOut:any;

  // 组件本身 host 绑定相关的装饰器
  @HostBinding('style.top')  hostStyleTop!: string;
  @HostBinding('style.left') hostStyleLeft!: string;
  @HostBinding('style.opacity') hostStyleOpacity!: string;

  constructor(
    private elementRef: ElementRef
  ) { }

  ngOnInit(): void {
    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }

    this.displayTimeOut = setTimeout((_: any) => {
      // 这里计算 tooltip 距离左侧的距离，这里计算公式是：tooltip.left + 目标元素的.width - (tooltip.width/2)
      this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'
      this.hostStyleOpacity = '1';
      this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'
    }, 500)
  }
  
  
  // 组件销毁
  ngOnDestroy() {
    // 组件销毁后，清除定时器，防止内存泄露
    if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }
  }
}
复制代码

编写 tooltip 指令

这是本文的重点，具体的说明，我在代码上标注出来～

相关的文件 tooltip.directive.ts 内容如下：

import { 
  ApplicationRef, // 全局性调用检测
  ComponentFactoryResolver, // 创建组件对象
  ComponentRef, // 组件实例的关联和指引，指向 ComponentFactory 创建的元素
  Directive, ElementRef, 
  EmbeddedViewRef, // EmbeddedViewRef 继承于 ViewRef，用于表示模板元素中定义的 UI 元素。
  HostListener, // DOM 事件监听
  Injector, // 依赖注入
  Input 
} from '@angular/core';

import { TooltipComponent } from './tooltip/tooltip.component';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  @Input("appTooltip") appTooltip!: string;

  private componentRef!: ComponentRef<TooltipComponent>;

  // 获取目标元素的相关位置，比如 left, right, top, bottom
  get elementPosition() {
    return this.elementRef.nativeElement.getBoundingClientRect(); 
  }

  constructor(
    protected elementRef: ElementRef,
    protected appRef: ApplicationRef,
    protected componentFactoryResolver: ComponentFactoryResolver,
    protected injector: Injector
  ) { }

  // 创建 tooltip
  protected createTooltip() {
    this.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // 绑定 tooltip 组件
      .create(this.injector);

    this.componentRef.instance.data = { // 绑定 data 数据
      content: this.appTooltip,
      element: this.elementRef.nativeElement,
      elementPosition: this.elementPosition
    }

    this.appRef.attachView(this.componentRef.hostView); // 添加视图
    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    document.body.appendChild(domElem);
  }
  
  // 删除 tooltip
  protected destroyTooltip() {
    if(this.componentRef) {
      this.appRef.detachView(this.componentRef.hostView); // 移除视图
      this.componentRef.destroy();
    }
  }
  
  // 监听鼠标移入
  @HostListener('mouseover')
  OnEnter() {
    this.createTooltip();
  }
    
  // 监听鼠标移出
  @HostListener('mouseout')
  OnOut() {
    this.destroyTooltip();
  }

}
复制代码

到这里，已经完成了 99% 的功能了，下面我们在页面上调用即可。

页面上调用

我们在 user-list.component.html 上添加下面的内容：

<p style="margin-top: 100px;">
  <!-- [appTooltip]="'Hello Jimmy'" 是重点 -->
  <span 
    [appTooltip]="'Hello Jimmy'" 
    style="margin-left: 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;"
  >Jimmy</span>
</p>
复制代码

TooltipDirective 这个指令我们已经在 app.module.ts 上进行声明，我们直接调用即可。目前的效果如下：

我们实现的 tooltip 是底部居中展示，也就是我们平常使用框架，比如 angular ant design 中 tooltip 的 bottom 属性。对于其他属性，读者感兴趣的话，可以进行扩展。

至此，我们可以很好的维护自己编写的指令文件了。

【完】✅

辑导语：一些复杂的B端系统，在用户用起来时会比较困难，总能听到用户说学不会，不会用，为了减低用户的使用成本，搭建一个全局的帮助系统是很有必要，本文从三大帮助系统类型出发，进行详细拆解。

一些复杂的B端产品，因为其特殊的业务属性和复杂度操作使用上门槛不低，总是会听到用户反馈不会用、学不会、记不住。为了降低用户使用成本，保证用户在一个大型业务系统的可用性，引入一个在全局系统层面用户帮助体系对于提升用户体验是非常有必要的。

Jakob Nielsen于1994年提出的十大可用性原则中，其最后一条原则Help and documentation（帮助性指导原则）是搭建B端用户帮助体系的核心准则，在理想情况下，没有帮助文档就可以使用系统是最好的，但在某些情况下（尤其是B端系统），提供一些引导性的帮助其实是必要的。本文从三种 B 端帮助体系的三种类型主动式帮助、被动式帮助、自动式帮助进行详细拆解说明。

一、主动式帮助

什么是主动式帮助呢？回归到生活的场景中，进入地铁站的方向指示牌，马路上的路标，都是让行人们可以根据指示找到想去的地方；刚刚参加工作，一般都会有前辈带着你学习工作流程，进行教学指导；机场和车站的展示大屏，告诉我们目前车次的检票口和车辆状况，这些都是我们生活中主动帮助的例子。

沿用到互联网产品中也是一样的，同样也是主动帮助向用户提供帮助，让用户尽快熟悉系统。

1. 在系统中的使用场景

对于第一次接触系统或者第一次接触系统中某个模块的新用户，刚开始使用产品的时候，需要快速熟悉并尝试系统中的某一功能，这个时候系统提供一些主动的功能介绍或者操作引导可以让用户快速了解。

下面是一款室内装修设计师画图使用的系统，属于操作复杂的工具类型，对于新用户来说在第一次进入系统主动出现一个弹窗介绍完成渲染出图的步骤，可以让用户快速学习到什么使用这款产品做一个设计效果图，也让用户清楚了解每个步骤之间的先后顺序。

对于老用户当系统新上线了功能需要告知哪里更新了，更新了什么内容。花瓣更新了点击头像下拉后展示更多信息的功能，在改版后第一次进入系统，出现了提示引导，引导用户快速点击进行体验，当然也可以选择关闭。

使用主动帮助有 2 个核心场景，「对新用户帮助教学」和「新功能上线后对老用户的提示」； 总结 5 种交互形式：引导页、模态弹窗、向导形式、工具提示、文字提示，需要设计师根据不同的场景，去适配不同的引导方式。

2. 引导页

在用户首次进入产品或者产品中某个独立功能的时候，将产品最核心的功能加入一些品牌基调展示给用户，可以加入一些插画或者视频吸引用户，另外需要注意在文字部分不要长篇大论，提炼最核心的内容传达给用户。

3. 模态弹窗

让用户聚焦当前内容，在用户第一次打开某个特定页面时出现，缺点是用户容易忽略或者无视，直接关掉，引导的效果差一点，所以弹窗教程建议保留二次进入的入口，当用户需要的时候可以顺利找到。应用场景有「版本更新提示」「新功能介绍」「常规通告」。

设计形式上可以在文本的基础上加入图片、插画、动画、视频讲解和实例演示等视觉表现形式，不管用什么形式，其目的都是帮助用户快速理解系统的功能特性。也可以使用一些视觉元素烘托氛围，并在文案上注入情绪化的表达，从而提升用户的关注度。

承载内容上可以师简单业务逻辑的功能说明或单页面功能，采用让用户一次性进行学习。复杂业务逻辑的功能说明或多页面功能联动，通常会进行分步讲解，通过循序渐进的形式将所有知识点逐渐披露出来，让用户有充裕时间进行信息的接收和理解。

4. 向导引导

在用户首次进入相关页面，且无操作时出现。有明确的指向性，提前告知用户具体功能的使用场景，因此它会具体指向界面中的某些特定区域，同时会随着具体操作的具体位置发生变化，让用户实际感知到功能的整个运转逻辑和流程。针对局部功能升级的提示说明，一般与元素绑定关系较强，可让用户直观了解关注点，提升功能触达率。

设计组成元素蒙层（可选）+ 文字 + 插图/GIF（可选）。向导主要围绕某个操作的引导说明，与元素绑定关系较强，核心功能和操作在视觉上突出显示。

为了让用户高效获取信息，一次仅显示一条。如果需要用户聚焦了解功能或说明，不被页面中其他元素干扰使用蒙层，注意蒙层的透明度要比弹窗蒙层浅，向导的蒙层需要用户可以看到元素在页面中的位置。具体使用过程中有三种交互方式随着提示强度由强到弱依次是：「分布引导」「气泡提示」「闪点提示」

分步式引导（重）：常用于页面多个功能升级的引导组。当页面有多个升级点，直接平铺会让页面臃肿不聚焦。通过「下一步」操作，逐步唤出剩余引导。为避免步骤过多导致用户疲劳，建议最多不超过5步。

气泡式（轻）：相对轻量的引导，有足够的提示性但不影响其他功能操作。

闪点提示（弱）：微辅助型提示，常与气泡引导配合使用。在需要关注的地方闪烁，点击闪点后唤出关联气泡提示。不对用户造成视觉干扰，又能引起一定的关注。

5. 文字提示

文字提示作为最直观的信息展示，一般会采用直接平铺的展示方式，针对一些功能较多逻辑较为复杂的页面，将对用户有帮助的信息直接放在页面上从而指导用户的行为不失为一种简单粗暴的设计方法。对重点或复杂功能提供直观描述或建议。

带有引导性的文案处理，会促进用户优化填写方案，输入更合适的内容。关于文案设计的详细延展查看https://www.zcool.com.cn/work/ZNjA3NzU1ODA=.html这篇文章非常详细的拆解了文案设计原则以及使用场景。具体的使用场景有：「页面功能辅助说明」「占位提示」。

6. 工具提示

工具提示比文字直接展示要更简洁降噪，没有直接进行展示，在用户需要的时候通过悬浮或者点击元素以气泡的形式呼出，Material Design在对工具提示（Tooltip）的官方定义是这样的：“When activated, tooltips display a text label identifying an element, such as a description of its function.”工具提示仅仅起到提示的作用，它会出现在当用户激活某一控件的时候，针对某一特定的元素通过简要的文字来阐述其功能特性。

在设计形式上有短暂性、匹配性、简明性的特点：短暂性指工具提示出现和消失的时机需要恰当和短暂；匹配性指工具提示需要出现在与之关联的元素附近；简明性则是对工具提示承载的文本内容提出了要求，要尽可能具备简短性和描述性。

二、被动式帮助

被动引导映射到我们生活中的场景下可以看作是手机地图导航软件，当你不知道该怎么走或者迷路的时候才会主动去打开地图软件进行导航。

另一个生活中的场景是产品说明书，在使用前或者再遇到不会用的功能的时候才会去查阅说明书，无论是导航软件还是说明书它不会自动把全部内容展示在你眼前，都需要你去进行查找。沿用到互联网产品中是指用户遇到问题的时候系统能够提供一些帮助，去指导用户接下来怎么做。

1. 在系统中的使用场景

被动式帮助一般会依托于主动式帮助，产品发展的初期阶段，主动式帮助是必须的，当产品发展到一定规模具备一定成熟度后，被动式帮助的引入就可以极大的提高整体产品的使用体验。常用的被动引导有：帮助中心/帮助文档、客服支持、全局常驻性功能。

2. 全局提示

重点信息的汇总或提示。此类提示完美融合于页面，醒目且对操作无干扰，用户可根据披露内容判断是否处理。常用的交互形式是全局提示、徽标，向用户传达信息的变化并提供快速触达的能力，无形中提升用户响应效率。

全局提示：不同颜色的提示条。常作为前置提示存在于页面或模块顶部，为用户顺利操作提供指引性帮助。既不打断用户当前操作，又足够明显，一般需手动关闭或事件结束后自行消失。不同颜色属性不同：一般蓝色代表消息通知、绿色代表成功、橙色代表警示、红色代表错误或异常等情况。

徽标：形态各异的小红点。常出现在图标、按钮右上角的红色圆点、数字或文字，简单且醒目。表示内容更新或有待处理的信息，此类提示符合用户心智，无需教育就能向用户精准传达提示意图。使用时注意无数字与有数字的应用场景。有数字的徽标给用户带来的心理压力会更大，也会更吸引用户注意力，同时需注意数字长度控制。

3. 客服中心

客服中心是B端产品的服务团队和客户建立联系的平台，目前大部分客服采用智能客服+人工客服的组合，通过智能客服先过滤已经在帮助中心的问题，可以解决 80%以上的共性简单的问题，剩下没有办法通过智能客服解决的问题会转接到人工客服。

在设计上通常悬浮在右下角以入口或者悬浮窗口的形式，可以加入品牌形象IP、情感化来提升存在感，吸引用户关注拉近平台与用户的距离。

4. 帮助中心

帮助中心是全平台信息文档的汇总，提供一个快捷入口，帮助用户了解他想了解的问题，在帮助文档中需要注意方便用户直接进行搜索。文档内容要针对用户的核心任务，描述要尽量步骤化和流程化，另外由于大部分用户实际上都不喜欢阅读大篇幅文字，如何在文档中直接传达重要的信息也很重要。

在设计上为保证用户高效获取信息，需突出内容本身，不要度装饰。框架设计清晰将页面氛围导航区和内容展示区，让用户通过导航快速定位到想要查找的内容。一般帮助中心会由三部分组成：产品介绍，产品入门和使用，常见问题的汇总。

三、自助式帮助

自助式帮助就就像我们去吃自助餐，不用自己买菜、处理食材、烹饪，饭店直接把我们可能会喜欢的食物准备好了，直接来选择自己喜欢的食物就可以了。在系统中也是一样提前预判用户的预期，直接为用户提供建议和帮助，或者直接帮用户自动执行一些任务，减少用户的决策压力，不过前提是需要产品设计师考虑非常周全并配合大量数据支撑。

1. 在系统中的使用场景

针对一些用户操作风险较小且系统能力能够支持的场景，可以直接交付系统来自动完成。一些用户操作风险较大且系统能力也能够勉强支持的场景，可以提供部分选项供用户进行选择，同时提供必要的容错能力。常用的自助式帮助引导有智能推荐、错误校验。

2. 智能推荐

系统自动提供内容供用户进行选择，帮助用户做出决策，不过这种设计的前提是平台有足够的数据积累，系统通过字段自动为用户预置内容。

3. 模版设计

用户新建每一个内容都需要从头到尾重新填写一遍内容，成本极高，可以把高频的类型变为模版进行选择。

4. 错误校验

当操作出现输入错误时，为用户展示明确的提示性消息，纠正和引导用户的修改内容。设计的时候需要注意反馈的时机做到及时反馈，将发生了什么，接下来怎么调整告知用户。常见的有以下类型：toast、表单错误校验、模态弹窗、根据不同的场景适配不同的交互方式。

最后

任何的引导都要注意任何事情都是过尤不及，适当的给用户提供帮助当然是好的，但是在用户不需的时候过多的进行引导和帮助反而会适得其反，我们在使用引导和帮助的时候一定要合理的进行判断，避免适得其反。

本文由@郭大毛毛设计笔记 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

钮是最常使用的组件之一，但是在与人交流时，还是会觉得大家存在很多误区，所以本文将围绕如何使用按钮展开分析，希望能给大家带来一些新的思考。

按钮是任何用户界面当中（无论是桌面还是移动用户界面）必备的交互元素：甚至可以说，如果页面中没有一个按钮，整个页面设计将是不完整的。在日常生活中，按钮也是随处可见的，一个电灯开关、遥控器按钮，现实生活中按钮反复的出现也可以帮助我们不断去理解屏幕世界中按钮应该如何操作，从而衍生出屏幕世界中的按钮的具体形态。

人机交互中最重要的就是把我们从小到大对于这个世界的认识映射到屏幕世界中，比如苹果最为经典iOS的滑动解锁。

而到了屏幕世界中，控件的设计更应该与物理世界保持相对的一致，这也是按钮设计中，尤为重要的一个环节。

最近常问身边的朋友，按钮究竟是什么？

他们多数的回答：“按钮就是按钮呗，还能是什么～”

因为对于他们而言，按钮不就是一个操作区域加上文字，没什么特别的，也正因如此，对于按钮的具体构造也不太了解。这篇文章主要是根据自身的工作经验，结合当下对于按钮设计的理解，去分析如何进行更合理的按钮设计。

聊聊按钮的痛点

对于每个设计师来说按钮并不陌生，在每天的设计中，都会使用按钮进行页面设计；但又不是每一个设计师都能够将按钮设计好，因为它存在三个方面的复杂性：

• 它使用的场景过多：不是每个场景都需要相同的按钮，比如在登录页当中，登录和注册就是使用不同的按钮形式。这些情况特别在B端产品中，业务在每个步骤中需要突出和强调的点不同，导致设计师很难通过具体场景进行按钮设计；
• 按钮出现的频率太高：B端产品中，每个页面当中都会有按钮不停的重复，而高频的出现会让我们感到麻木，导致很多设计师都将其忽略；
• 按钮形式太多：在我总结的按钮形式当中，一共分为10类，且情况多种多样，很多时候都没有意识到不同形式之间的差距，导致乱用混用。

因此一个看上去小小的按钮，其实经常会困扰着我们，如果刚开始没有将按钮进行整体的梳理，那么在你的设计过程中，按钮会经常打断自己的设计思维，为了让大家能够对按钮有更深的理解，我将按钮进行系统的拆解，结合实际案例，能够使按钮更浅显易懂。

在文章按钮类型的分析中，我将按钮分为两大类、十小类，将其分类也是为了更好的为大家去分析每一个按钮所涉及到的状态，当我们理解按钮之前，你需要了解它的内部构造。

一、按钮类型

首先，抛出一个问题给大家，下图中，共有几种按钮形式？分别是什么？给大家五秒钟时间思考。

如果你对上图的按钮形式并不完全了解，建议你拿好小本本，做好笔记～

在开始讲常见按钮类型前，我们必须要搞清楚一个重要的知识点：按钮状态。

1.1 什么是按钮状态？

按钮状态，可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断。

常见的按钮状态分为：正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)，下面分别对这六大状态进行拆解。

正常状态 (Normal)：除了其他五种状态外的情况都是正常状态，它是按钮最为常规的状态形式，也是设计师必须设计的一种状态。

聚焦状态 (Focus)：主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎，我来讲他背后的原理，主要是方便一些键盘使用的用户，可以使用Tab键或者方向键来对网页进行访问输入。

比如在Mac OS 以及 Windows的使用中，通过点击Tab，便展示出文件的Focus状态。

Focus状态是一个非常重要的交互形式，但是很多设计师都会忽略，甚至在很多网站，直接就是将这个样式所去除，导致使用Tab键无法获取聚焦的反馈，比如常见的百度、Google再到各大操作系统都会有这类反馈，去除这类反馈，会导致用户无法用方向键控制光标位置，在很大程度上降低用户使用的可能性。

悬停状态 (Hover)：在桌面端的设计当中，即使用户知道它是可以点击的，但是你还是需要设计悬停状态，表明鼠标现在正在按钮上。平板电脑和移动端的设备上用永远不会展示悬停状态，因为你的手指是无法在屏幕上进行悬停的（虽然IPad OS 更新了13.4版本后，会有Hover态的出现，但是是通过鼠标进行操作，因此这里不予以讨论）。

激活状态 (Active)：激活状态因为叫法不同，在有的地方也称之为Press状态，它的表现就是将按钮按压下，将颜色变深同时会涉及到内阴影等效果的出现。

禁用状态 (Disable)：按钮禁用状态作为最难设计的状态之一，主要在于禁用状态的表现形式以及禁用状态与激活状态之间如何的切换，我具体来分析一下两个难点。

难点一：禁用状态在颜色上首先会给人灰色块的感觉，行业里也称之为置灰，在设计上，也需要注意光标移动时需要展示禁用光标，即让前端大哥将Cursor的hover状态更改为not-allowed，你可以优雅的在前端面前装个X（之后会出一期，简单聊聊我与前端如何协作如何装X）。

难点二：禁用与激活状态的切换，比如在一个注册页面中，需要姓名与电话必填，当用户没有填写完成姓名与电话时，应该将按钮置灰，提示用户不可以点击，当用户填写完成必填字段后，将禁用按钮转变为激活按钮，提示用户可以点击登录。

加载状态/Loading：按钮需要时间进行加载的一种状态，通常会被用户忽略，但是在B端产品中，Loading状态尤为重要，这里有很多细节和小技巧，展开讲篇幅太大，在文中4.3（按钮细节）会详细解答。

1.2 主按钮 （Primary Button）

主按钮为页面中按钮区最为核心的操作，在日常场景中，主要按钮一般都为新建、编辑、保存这一类正向的操作，强调页面中最为核心的功能，能够让用户一看到主按钮就明白大致在页面中需要如何操作。

但在主按钮的使用中，要遵循以下两个原则：

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

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

在主按钮中，按钮状态的设计也会跟随物理世界进行相应的映射，因此在设计时需考虑现实生活中的状态。

比如用户的Hover时，一般都将按钮抬起并亮度增加，其目的是为了提示用户可以点击，而用户在按下时，用加黑来表示用户按下的状态，与现实生活中按钮的状态类似，因此按钮状态应该映射物理世界。

1.3 次按钮/标准按钮（Default Button）

次按钮在页面中出现最为频繁，在日常使用中，如果你不太确定使用何种按钮时，那使用它，大概率没有错。因为它运用广泛，出现频率也最高，因此也被人们称为标准按钮。

在次按钮的设计形式中，我们团队将设计形式分为两类：

第一类 字线型

此按钮整体以文字+边框的形式，这类形式在视觉层面上感知较弱，适合几个按钮同时展示，在B端项目中，字线型也是在使用中最为频繁的形式。

第二种 字面型

字面型更偏向表达按钮整体，常见于各类移动端的按钮当中，整体的表达也更适合移动端这类屏幕尺寸较少的设备当中，更符合卡片化设计的思路，反而不太适合桌面端的设计。

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

文字按钮为页面中视觉层级较低的按钮形式，因而可以在页面中大面积的重复使用，文字按钮与链接（Link）基本一致，且没有太多区分，所以在设计上，文字按钮与链接基本相同。

文字按钮重复的出现，以表格页面当中的操作列表最为突出，因为表格当中常用的操作最好能够直接展示出来，因此表格中基本都采取文字按钮的形式。

1.5 图标按钮（Icon Button）

图标按钮为页面中控件占比最小的按钮，所以在页面中的使用也是最为高效的。因为没有了文字元素，会导致用户在图标的理解上出现偏差。为了解决这一问题，主要是通过用户在Hover时使用展示Tooltip提示按钮的含义，同时建议在图标按钮的使用上多为高频且易理解的图标。

我举一个简单例子，在桌面端产品中，帮助文档一定是非常重要的一个入口，当用户对页面中的功能有所疑惑时，可以通过此来帮助用户进行理解，通常需要在大多数页面当中展示帮助中心的入口，这时图标按钮就变得最为合适。

因此，我们可以得出图标按钮的应用场景通常为：当页面中需要高效的展示一个或几个图标时，同时图标按钮的展示最为频繁时，当同时满足以上两点，使用图标按钮就是一个更优的解决方案方案。

1.6 按钮菜单（Menu Button）

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

举个例子，在表格页面当中，B端设计师最常见到的按钮菜单就是新建，这类新建按钮其实是必不可少的，同时业务需要，还需要多个业务按钮进行展示，按钮菜单的出现，帮助用户进行按钮的整理，同时也满足业务需求。

1.7 按钮中加图标（Icon add Button）

这其实是主按钮的一种衍生，通过图标对主按钮的含义进行解释，从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调，那便可使用在按钮中添加图标，这样既能够强化图标的含义，同时也加深了用户对于按钮的印象。

在六个常见按钮形式中，我们根据重要的优先级，给常见按钮进行一个简单的排序：

图标按钮-按钮菜单-主按钮-次按钮-文字按钮-图标按钮

二、特殊按钮类型

2.1 危险按钮（Danger Button）

危险按钮在删除操作中最为常见，通常是为了警告用户，这个数据删除不可恢复，让用户谨慎考虑。在常见的删除操作中，都需要用户进行二次确认，避免用户误操作。

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

2.2 幽灵按钮（Ghost Button）

幽灵按钮，看它的名字就能想到它的作用：像幽灵一般透明的存在。

它没有使用复杂的颜色、样式，而是用线条表示外部轮廓，证明它还是一个按钮。同时内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面当中，比如：渐变色、纹理、动态图片背景的情况下，幽灵按钮能够完美融入到环境当中。

而现如今，传统意义上的幽灵按钮已经很少，毕竟在现如今的官网当中，幽灵按钮已经不再流行，更多的是出现在复杂页面的“实心按钮”，而在某种意义上讲，这类按钮才是幽灵按钮现在的状态。

幽灵按钮和次按钮有何不同？

在形式上，幽灵按钮和次按钮看起来没有并什么不同，因此会有很多疑惑，那我什么时候用幽灵按钮什么时候用次按钮呢？

首先幽灵按钮是属于特殊按钮体系中，因此它不会受整个按钮体系的束缚，比如我在一个设计系统中，分别定义了常规按钮的尺寸分别是24px、32px、40px，但是我在一个官网落地页当中需要有一个46px的按钮出现，次按钮就完全不合适。其次幽灵按钮边框粗细、字体大小都是和常规按钮体系不同，因此幽灵按钮就和次按钮有所不同。

第二个方面在次按钮的设计形式中，不仅仅只有描边按钮这一种形式，因此幽灵按钮与次按钮它们可能会有交集，但是属于两种不同类型的场景，因此也不能将它们混用。

2.3 悬浮按钮（Floating Action Button）

在Material Design 出现之初，悬浮按钮受到了很多人的追捧，它也是安卓设计的代名词。主要是用于页面当中最常用的操作，是整个APP中最核心的按钮，能够代表这个产品的核心功能，比如记账软件的添加账单记录，印象笔记的新增笔记（安卓）。

但沉浸式设计的出现，使得移动端寸土寸金的地方，需要固定一个按钮的情况就变得更加少见。

而在B端的设计过程中，逐渐衍生出了B端行业特有的方式。

悬浮按钮在B端场景中，主要是帮助用户进行辅助咨询的功能，例如在一些用户需要得到帮助的页面中，可以通过悬浮按钮，使用户的又疑问的页面进行快速提问，帮助用户能够进行快速的跳转，在飞书的应用列表中，其实用户刚开始理解应用列表其实存在一个理解成本，就可以通过悬浮按钮进行展示（后面有机会聊聊B端改版厌恶时也会提到）。

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

行为号召按钮简称：CTA按钮，主要目的是为了号召人们在某些特定的页面中使用此按钮来提高转化，比如立即购买、联系我们、立即订阅等等…

大多数时候，CTA按钮都是成对出现的。“是与否“ 、“登录与注册”、“确认与取消”等。因此，分析清楚CTA按钮后设计出视觉层级合理的页面称为非常重要的点。在设计中，一般会采取渐变色、主题色、主题色的互补色等等，它经常独立出现。

在B端软件的场景中，官网是CTA按钮出现最为重要的页面，一般在官网中，使用CTA按钮将用户引导从潜在客户向付费客户进行转变（点击过后一般是一个联系表单进行信息的填写），这也是在B端产品中非常重要的指标：潜客向付费客户转变。可以引导用户进入到下一个阶段，如果CTA按钮设计不好，人们对于官网只是浏览，不会有任何转化。

因此，在设计CTA按钮的形式与位置时，需要与产品、设计、运营等共同确定并讨论使用，大家站在不同的立场希望得到一个完美的方案，因为设计出清晰的结构层次将直接引导用户朝着理想的使用路径前进，从而极大提高转化率。

三、按钮细节

3.1 按钮文案

在我们日常设计中，常常会遇到一些棘手的文案问题：登陆、登录、确认、确定、发送、发布，在许许多多的工作场景中，犹豫究竟应该在按钮上使用哪种文案，这就需要我们通过具体的案例场景进行展示相应文案。

• 登陆（Land)：这是网络中错别字最为频繁的用此，很多人都会把登陆放到登录页面中，其实是错的。这个词里的“陆”字，就是陆地的意思，其基本含义只是登上陆地而已，拓展出来还会有“登陆到某一个市场”，但登陆网站的说法是绝对错误的。
• 登录（Login）：这是“登记记录、记载”的含义，我们正常输入账号密码就是为了去记录我们的一个信息，一般为官网登录页。
• 确认（Confirm）：这是带有一些不可逆我操作的提示，一般用于用户配置、选择项等。
• 确定（Yes）：这是询问用户是否进行某项不可逆操作，一般为一个单独的操作。
• 发送（Send）：这是尽快传递对方的聊天消息，一般为即时性的聊天发送。
• 发布（Publish）：这是用于用户填写的观点、意见、文章等反馈信息发布到一些正式场合，如论坛、社区等。

这些细节的文案就是帮助用户去理解页面中所传达的真正含义，多将文字放置到场景中，文案也更好的辅佐他们作出选择

3.2 按钮圆角

圆角在每一个软件中，随处可见。圆角大小所带来的不仅仅是视觉表现，还更多影响着用户的使用体验以及对于产品而言的整体的认知，如果在开始设计之前，没有对按钮圆角有具体的规划，很容易踩坑，如何设计好圆角，我们来进行系统分析

在下文中我们将按钮的圆角大小，分为以下三类：直角、圆角、半圆。

直角：

按钮四角的方向，具有很强烈的引导性，看上去也会更加刺眼，使得在页面当中注意力会减弱。同时，直角在按钮排列当中看上去更加统一，相同的东西在视觉上不太能引起我们的注意。

圆角：

相比与直角按钮，在使用圆角的按钮中，视觉上总是给人一种柔和亲近的感觉，当几个圆角按钮进行排列时，能够感受到圆角按钮更容易被点击。因此在使用的按钮中，建议添加圆角的细节元素。

为何直角的物体会给人更严肃的感受——每一个人都认为圆角会更好，但是并不是每一个人都能够解答为什么圆角更好。

在巴罗神经病学研究所对拐角的科学研究发现，“拐角的感知程度随着角度线性变化。锐角比钝角产生更强的幻觉显着性”。换句话说，拐角越尖，则出现越亮。拐角越多，越难看。

圆角还有另一种解释，是因为现实生活中有圆角的物体会更友好。从小，我们就知道尖角的物体会让人受伤，圆角的物体会更安全。这就是小孩在玩皮球与刀的时候，家长的反应完全不同。

小朋友玩刀会让家长十分的紧张，赶紧让孩子放下；而小朋友玩皮球时，家长则是非常的放心。这激起了神经科学所谓的尖锐边缘“回避反应”。因此，我们倾向于“避免锋利的边缘，因为在自然界中它们可能会构成危险”。

圆角是不是越大越好？

通常在移动端场景中，半圆按钮随处可见，移动端手指触摸操作上，对于圆角的影响小之又小；而到了桌面端的场景下，鼠标的使用，半圆按钮就会有所不妥。

如果相同面积中，按钮的圆角增大，相应的对于按钮的可操作区域就会随之减小，在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。

当然，麻烦事还不仅仅于操作区域，在结合实际业务，我们的按钮常常作为原子（原子设计理论）用来组成为下拉菜单进行联动，半圆按钮在下拉菜单的设计中，也会因为半圆的局限，使下拉菜单的设计会更加困难，同样在设计上，半圆角对于下拉菜单的适配也会相当突兀，因此在考虑这方面设计时，需要你多去思考之后的业务场景。

3.3 重要的Loading状态

按钮的状态中，Loading状态通常不会对用户进行直接展示，因为大多数情况下，Loading状态就发生在一秒钟以内，但是对于B端场景中有很多重要操作，在长时间等待中不展示loading状态，会导致用户在使用时犯下错误。

需要在合理的时间进行反馈

• 当按钮响应时间小于1秒时，通常正常反馈即可。
• 当按钮响应时间长于1秒时，我们通常会采取加载动画，减缓用户等待的焦虑感。

举个例子：比如一个确认提交的按钮，由于网络或者服务器等原因，需要长时间加载资源，而用户不知道我刚才按下的按钮是否有效，这时用户慌张，想要多按下几次这个按钮，系统就会不停提交数据，最后网络变好时，窗口就会一瞬间疯狂展示，导致用户体验下降。

为了防止这类事情的发生，需要在设计师考虑到按钮在加载一秒以后的状态，应当提示用户在网页已经收到请求，正在加载，同时在按钮状态中应该为不可操作状态。同时会给出加载转圈的动画，缓解用户的焦虑。

当你完成了第一步的设计后，想想在按钮的状态中，是否更能够帮助用户进行体验上的提升呢？

这也是在面试某大型互联网公司时，被问到过的一个问题～敲黑板。

对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何，减少不确定性；并引导他们在正确的方向上交互，而不是浪费精力在重复操作上。

在Loading的加载过程中，等待焦虑一直是用户想要了解到的，为了缓解类似情况，可以将等待的进度状态进行展示，使的用户在等待的过程中，能够清晰的清楚自己的按钮目前处于何种状态，我大概还需要等待多久，缓解用户在等待过程中的焦虑。

以上两个方式均是尼尔森十大原则的内容，能够在按钮Loading状态中，缓解用户在按钮加载过程中、重复提交、等待焦虑的问题，通过一些设计小细节，帮助产品提升用户体验。

四、按钮实际的使用场景

通过上文对于按钮的解释，大致明白按钮在设计中的作用，接下来我结合一个工作中的实际案例，来看看我们应该如何优化常见按钮在页面当中的设计。

项目背景：在桌面端，我们需要对整个导航栏进行设计改版，但其中涉及到对于导航的一个整体优化，主要是由于业务功能发生变化，我们需要在导航栏上增加快捷添加入口和通知中心，来满足导航的后续的功能需求，由于保密协议的原因，就不放自家产品。

第一步根据用户浏览模式确定按钮顺序

在桌面端中，浏览模式大致分为两类，F型浏览模式、Z型浏览模式（下方知识拓展会有讲到）。

首先，因为导航在整个页面的顶部，结合两种浏览模式在顶部时统一都为从左到右的浏览顺序。

因此确定整个导航按钮初步的按钮重要层级排序。

第二步交互路径优化

我们对于用户的按钮层级有着明显的划分，因为在整个导航右侧，又因为其的特殊性，我们把操作空间分为三部分：

左侧为操作路径最短的区域，因为桌面端的产品需要通过鼠标进行交互操作，而其中移动鼠标的长短直接决定用户是否愿意点击这个按钮，因此，靠左的按钮适合放置用户最常使用的操作。

中部为按钮内部区，可以放置一些低频，但是又必须出现在这个区域的按钮操作（比如：帮助中心、通知中心等等…）。

右侧为按钮最为重要层级最弱的区域，同时它也有一些特殊性。

一般在浏览器的右侧，为用户最容易定位的操作区域，因为靠近边缘导致在用户定位当中能够帮助用户进行快速选择。

回到页面中信息层级较高、同时需要精准定位的按钮就会将个人中心放置在最右侧，方便用户进行快速定位。

因此我们讲导航当中按钮重要层级进行简单排序，得到下图：

第三步信息整合优化按钮结构

通过亲密性原则，我们将除去左右两侧确定好的按钮之外的按钮进行简单分类，将有关联的按钮进行组合，形成较强的关联性～

第四步视觉调整

视觉调整作为最重要的一步，主要是为了在最后的按钮重要层级上，将一部分按钮突出、一部分按钮弱化，达到我们想要的整个层级效果。

通过团队内部讨论，将我们的新增按钮定位CTA按钮，因为它关联到我们每个使用系统的人都会用到，属于最高频的操作按钮，也因此将其突出。

F型浏览模式：

是新闻平台、博客等文字为主的网站布局所采取的阅读模式。

该阅读模式由尼尔森团队的眼动追踪研究结果从而进行普及，在这个研究中记录了超过200位用户浏览网页时，发现用户的主要阅读行为在许多网站和场景中表现得相当一致。这个阅读模式看起来有点像字母F，因此也被叫做F型浏览模式。

首先用户以水平方向进行阅读，通常是在阅读区域的上半部分。

接下来，他们在屏幕左侧垂直浏览，寻找段落开篇几句中感兴趣的内容。当他们找到感兴趣的内容时，他们在第二个水平方向上快速浏览，通常这块内容区比上一个内容区更短小、更简洁。这部分元素形成了F的下半部分。

最后，用户在垂直方向上浏览内容的左侧区域。

Z型浏览模式：

是扫描滚动的网站的典型模式。

正如你所期望的，“z”型模式的布局遵循字母Z的形状。“Z”型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下：

• 首先，人们从左上角到右上角进行扫描，形成一条水平线
• 接下来，向页面的左下侧扫描，链接成一条对角线
• 最后，再次向右转，形成第二条水平线

当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形。

五、按钮设计中与开发还原细节

在实际工作中，经常遇到自己设计的按钮与开发实际还原的按钮差距很大，一些没有经验的设计师会和开发说，你看我设计稿，每一个按钮都要按照设计稿的来，这样设计师与前端开发之间的矛盾就会越来越深。其实在按钮设计的细节中，开发怎么完美的还原，里面还有很多细节。

5.1 Padding思维

首先要想让开发完全还原你的设计稿，就必须了解开发实现的思维方式，针对它的思维方式进行相应的思考。

又由于Sketch与开发常使用的VScode之间逻辑上存在较大差异，导致设计师设计出来的很多设计稿开发根本无法实现，这也是B端设计师摆在你面前的第一个问题。

对你没看错，无法实现，我举一个例子：

这是一位同学问我的一个问题，他说我这个按钮为啥实现不了，前端不就是多几个代码去适配我的设计稿就可以了吗？

如果你也有很多疑问，那就接着看下去～

什么是Padding

在按钮当中，通俗的理解Padding就是文字与按钮之间的间距。

因为Sketch等软件在按钮的设计中，只有图形位置的概念，没有内间距Padding的概念，因此需要对按钮还原要明确的描述。

比如上图，前端同学在开发就会将Padding设置为24px，所以整个按钮长度便为24px*2+20px（文本宽度）=68px。

而为什么说上面的设计规范实现不了，因为对于前端而言，Padding通常都是统一且固定的，只会根据按钮文字长度进行相应的调整，比如我上面举的错误栗子，其实在前端同学面前这类设计是不能够被共用，而且对前端同学项目会变得越来越不能维护，所以按钮设计应该更规划。

5.2 Min-Width思维

但是如果真的需要去实现两个文字按钮长度和四个字的一样怎么办，需要去设定按钮的最小宽度。

按钮最小宽度的设定一般为4个字文字的长度，假设字体大小为16px，左右的Paddung为24px。

最小宽度为：88px，因此在按钮的标注中，需要展示最小间距为102px，方便前端进行CSS开发。

5.3 按钮的边框

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

按钮虽然作为一个最基础的元素，但是在整个设计体系中，它一直都扮演着一个十分重要的位置，在思维中，任何组件都可以通过上面按钮的思维，对每个组件进行拆解分析，无论是组件的状态、组件的类型，在实际工作中，都需要你去深入思考。关于我呢， 也因为踩了很多坑，因此想分享给大家。

参考链接

https://blog.prototypr.io/8-rules-for-perfect-button-design-185d1202ee9c

https://medium.com/@uxmovement/when-you-need-to-show-a-buttons-loading-state-41fc4d5e3c65

https://atlassian.design/guidelines/product/components/buttons

https://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/

相关阅读

B端设计：盘点筛选控件的基本知识

B端设计：导航菜单的设计5步法

作者：CE，2B行业的2B设计师～。公众号：CeDesign

本文由 @CE 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议。