頭條創(chuàng)作挑戰(zhàn)賽#

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

一起養(yǎng)成寫作習(xí)慣！這是我參與「掘金日新計劃 · 4 月更文挑戰(zhàn)」的第3天，點擊查看活動詳情。

Yeah，關(guān)注我的讀者應(yīng)該知道，上一篇文章了解 Angular 開發(fā)的內(nèi)容，我們已經(jīng)概覽了 Angular 的相關(guān)內(nèi)容。在自定義指令的部分，我們已經(jīng)能夠?qū)崿F(xiàn)編寫，但是，在實際場景中，我們還需要標(biāo)準(zhǔn)化的管理。

Angular 是 Angular.js 的升版

So，本文，我們就以 Tooltip 來講解下自定義指令的內(nèi)容。

線上效果圖，如下：

目錄結(jié)構(gòu)

在上一篇文章的實現(xiàn)的代碼項目基礎(chǔ)上，執(zhí)行命令行：

# 進入 directives 文件夾
$ cd directives

# 創(chuàng)建 tooltip 文件夾
$ mkdir tooltip

# 進入 tooltip 文件夾
$ cd tooltip

# 創(chuàng)建 tooltip 組件
$ ng generate component tooltip

# 創(chuàng)建 tooltip 指令
$ ng generate directive tooltip
復(fù)制代碼

執(zhí)行完上面的命令行之后，你會得到 app/directive/tooltip 的文件目錄結(jié)構(gòu)如下：

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                              // 指令文件
復(fù)制代碼

嗯，這里我將組件放在 tooltip 的同級，主要是方便管理。當(dāng)然，這個因人而異，你可以放在公共組件 components 文件夾內(nèi)。

編寫 tooltip 組件

在 html 文件中，有：

<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div>
復(fù)制代碼

在樣式文件 .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 偽類選擇器，給組件元素本身設(shè)置樣式
: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;
}
復(fù)制代碼

嗯～，css 是一個神奇的東西，之后會安排一篇文章來講解下 sass 相關(guān)的內(nèi)容...

然后，在 javascript 文件 tooltip.component.ts 內(nèi)容如下：

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

@Component({
  selector: 'app-tooltip', // 標(biāo)識符，表明我這個組件叫做啥，這里是 app-tooltip
  templateUrl: './tooltip.component.html', // 本組件的骨架
  styleUrls: ['./tooltip.component.scss'] // 本組件的私有樣式
})
export class TooltipComponent implements OnInit {

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

  // 組件本身 host 綁定相關(guān)的裝飾器
  @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 距離左側(cè)的距離，這里計算公式是：tooltip.left + 目標(biāo)元素的.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() {
    // 組件銷毀后，清除定時器，防止內(nèi)存泄露
    if(this.displayTimeOut) {
      clearTimeout(this.displayTimeOut)
    }
  }
}
復(fù)制代碼

編寫 tooltip 指令

這是本文的重點，具體的說明，我在代碼上標(biāo)注出來～

相關(guān)的文件 tooltip.directive.ts 內(nèi)容如下：

import { 
  ApplicationRef, // 全局性調(diào)用檢測
  ComponentFactoryResolver, // 創(chuàng)建組件對象
  ComponentRef, // 組件實例的關(guān)聯(lián)和指引，指向 ComponentFactory 創(chuàng)建的元素
  Directive, ElementRef, 
  EmbeddedViewRef, // EmbeddedViewRef 繼承于 ViewRef，用于表示模板元素中定義的 UI 元素。
  HostListener, // DOM 事件監(jiān)聽
  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>;

  // 獲取目標(biāo)元素的相關(guān)位置，比如 left, right, top, bottom
  get elementPosition() {
    return this.elementRef.nativeElement.getBoundingClientRect(); 
  }

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

  // 創(chuàng)建 tooltip
  protected createTooltip() {
    this.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // 綁定 tooltip 組件
      .create(this.injector);

    this.componentRef.instance.data = { // 綁定 data 數(shù)據(jù)
      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();
    }
  }
  
  // 監(jiān)聽鼠標(biāo)移入
  @HostListener('mouseover')
  OnEnter() {
    this.createTooltip();
  }
    
  // 監(jiān)聽鼠標(biāo)移出
  @HostListener('mouseout')
  OnOut() {
    this.destroyTooltip();
  }

}
復(fù)制代碼

到這里，已經(jīng)完成了 99% 的功能了，下面我們在頁面上調(diào)用即可。

頁面上調(diào)用

我們在 user-list.component.html 上添加下面的內(nèi)容：

<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>
復(fù)制代碼

TooltipDirective 這個指令我們已經(jīng)在 app.module.ts 上進行聲明，我們直接調(diào)用即可。目前的效果如下：

我們實現(xiàn)的 tooltip 是底部居中展示，也就是我們平常使用框架，比如 angular ant design 中 tooltip 的 bottom 屬性。對于其他屬性，讀者感興趣的話，可以進行擴展。

至此，我們可以很好的維護自己編寫的指令文件了。

【完】?

輯導(dǎo)語：一些復(fù)雜的B端系統(tǒng)，在用戶用起來時會比較困難，總能聽到用戶說學(xué)不會，不會用，為了減低用戶的使用成本，搭建一個全局的幫助系統(tǒng)是很有必要，本文從三大幫助系統(tǒng)類型出發(fā)，進行詳細(xì)拆解。

一些復(fù)雜的B端產(chǎn)品，因為其特殊的業(yè)務(wù)屬性和復(fù)雜度操作使用上門檻不低，總是會聽到用戶反饋不會用、學(xué)不會、記不住。為了降低用戶使用成本，保證用戶在一個大型業(yè)務(wù)系統(tǒng)的可用性，引入一個在全局系統(tǒng)層面用戶幫助體系對于提升用戶體驗是非常有必要的。

Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導(dǎo)原則）是搭建B端用戶幫助體系的核心準(zhǔn)則，在理想情況下，沒有幫助文檔就可以使用系統(tǒng)是最好的，但在某些情況下（尤其是B端系統(tǒng)），提供一些引導(dǎo)性的幫助其實是必要的。本文從三種 B 端幫助體系的三種類型主動式幫助、被動式幫助、自動式幫助進行詳細(xì)拆解說明。

一、主動式幫助

什么是主動式幫助呢？回歸到生活的場景中，進入地鐵站的方向指示牌，馬路上的路標(biāo)，都是讓行人們可以根據(jù)指示找到想去的地方；剛剛參加工作，一般都會有前輩帶著你學(xué)習(xí)工作流程，進行教學(xué)指導(dǎo)；機場和車站的展示大屏，告訴我們目前車次的檢票口和車輛狀況，這些都是我們生活中主動幫助的例子。

沿用到互聯(lián)網(wǎng)產(chǎn)品中也是一樣的，同樣也是主動幫助向用戶提供幫助，讓用戶盡快熟悉系統(tǒng)。

1. 在系統(tǒng)中的使用場景

對于第一次接觸系統(tǒng)或者第一次接觸系統(tǒng)中某個模塊的新用戶，剛開始使用產(chǎn)品的時候，需要快速熟悉并嘗試系統(tǒng)中的某一功能，這個時候系統(tǒng)提供一些主動的功能介紹或者操作引導(dǎo)可以讓用戶快速了解。

下面是一款室內(nèi)裝修設(shè)計師畫圖使用的系統(tǒng)，屬于操作復(fù)雜的工具類型，對于新用戶來說在第一次進入系統(tǒng)主動出現(xiàn)一個彈窗介紹完成渲染出圖的步驟，可以讓用戶快速學(xué)習(xí)到什么使用這款產(chǎn)品做一個設(shè)計效果圖，也讓用戶清楚了解每個步驟之間的先后順序。

對于老用戶當(dāng)系統(tǒng)新上線了功能需要告知哪里更新了，更新了什么內(nèi)容。花瓣更新了點擊頭像下拉后展示更多信息的功能，在改版后第一次進入系統(tǒng)，出現(xiàn)了提示引導(dǎo)，引導(dǎo)用戶快速點擊進行體驗，當(dāng)然也可以選擇關(guān)閉。

使用主動幫助有 2 個核心場景，「對新用戶幫助教學(xué)」和「新功能上線后對老用戶的提示」； 總結(jié) 5 種交互形式：引導(dǎo)頁、模態(tài)彈窗、向?qū)问健⒐ぞ咛崾尽⑽淖痔崾荆枰O(shè)計師根據(jù)不同的場景，去適配不同的引導(dǎo)方式。

2. 引導(dǎo)頁

在用戶首次進入產(chǎn)品或者產(chǎn)品中某個獨立功能的時候，將產(chǎn)品最核心的功能加入一些品牌基調(diào)展示給用戶，可以加入一些插畫或者視頻吸引用戶，另外需要注意在文字部分不要長篇大論，提煉最核心的內(nèi)容傳達(dá)給用戶。

3. 模態(tài)彈窗

讓用戶聚焦當(dāng)前內(nèi)容，在用戶第一次打開某個特定頁面時出現(xiàn)，缺點是用戶容易忽略或者無視，直接關(guān)掉，引導(dǎo)的效果差一點，所以彈窗教程建議保留二次進入的入口，當(dāng)用戶需要的時候可以順利找到。應(yīng)用場景有「版本更新提示」「新功能介紹」「常規(guī)通告」。

設(shè)計形式上可以在文本的基礎(chǔ)上加入圖片、插畫、動畫、視頻講解和實例演示等視覺表現(xiàn)形式，不管用什么形式，其目的都是幫助用戶快速理解系統(tǒng)的功能特性。也可以使用一些視覺元素烘托氛圍，并在文案上注入情緒化的表達(dá)，從而提升用戶的關(guān)注度。

承載內(nèi)容上可以師簡單業(yè)務(wù)邏輯的功能說明或單頁面功能，采用讓用戶一次性進行學(xué)習(xí)。復(fù)雜業(yè)務(wù)邏輯的功能說明或多頁面功能聯(lián)動，通常會進行分步講解，通過循序漸進的形式將所有知識點逐漸披露出來，讓用戶有充裕時間進行信息的接收和理解。

4. 向?qū)б龑?dǎo)

在用戶首次進入相關(guān)頁面，且無操作時出現(xiàn)。有明確的指向性，提前告知用戶具體功能的使用場景，因此它會具體指向界面中的某些特定區(qū)域，同時會隨著具體操作的具體位置發(fā)生變化，讓用戶實際感知到功能的整個運轉(zhuǎn)邏輯和流程。針對局部功能升級的提示說明，一般與元素綁定關(guān)系較強，可讓用戶直觀了解關(guān)注點，提升功能觸達(dá)率。

設(shè)計組成元素蒙層（可選）+ 文字 + 插圖/GIF（可選）。向?qū)е饕獓@某個操作的引導(dǎo)說明，與元素綁定關(guān)系較強，核心功能和操作在視覺上突出顯示。

為了讓用戶高效獲取信息，一次僅顯示一條。如果需要用戶聚焦了解功能或說明，不被頁面中其他元素干擾使用蒙層，注意蒙層的透明度要比彈窗蒙層淺，向?qū)У拿蓪有枰脩艨梢钥吹皆卦陧撁嬷械奈恢谩＞唧w使用過程中有三種交互方式隨著提示強度由強到弱依次是：「分布引導(dǎo)」「氣泡提示」「閃點提示」

分步式引導(dǎo)（重）：常用于頁面多個功能升級的引導(dǎo)組。當(dāng)頁面有多個升級點，直接平鋪會讓頁面臃腫不聚焦。通過「下一步」操作，逐步喚出剩余引導(dǎo)。為避免步驟過多導(dǎo)致用戶疲勞，建議最多不超過5步。

氣泡式（輕）：相對輕量的引導(dǎo)，有足夠的提示性但不影響其他功能操作。

閃點提示（弱）：微輔助型提示，常與氣泡引導(dǎo)配合使用。在需要關(guān)注的地方閃爍，點擊閃點后喚出關(guān)聯(lián)氣泡提示。不對用戶造成視覺干擾，又能引起一定的關(guān)注。

5. 文字提示

文字提示作為最直觀的信息展示，一般會采用直接平鋪的展示方式，針對一些功能較多邏輯較為復(fù)雜的頁面，將對用戶有幫助的信息直接放在頁面上從而指導(dǎo)用戶的行為不失為一種簡單粗暴的設(shè)計方法。對重點或復(fù)雜功能提供直觀描述或建議。

帶有引導(dǎo)性的文案處理，會促進用戶優(yōu)化填寫方案，輸入更合適的內(nèi)容。關(guān)于文案設(shè)計的詳細(xì)延展查看https://www.zcool.com.cn/work/ZNjA3NzU1ODA=.html這篇文章非常詳細(xì)的拆解了文案設(shè)計原則以及使用場景。具體的使用場景有：「頁面功能輔助說明」「占位提示」。

6. 工具提示

工具提示比文字直接展示要更簡潔降噪，沒有直接進行展示，在用戶需要的時候通過懸浮或者點擊元素以氣泡的形式呼出，Material Design在對工具提示（Tooltip）的官方定義是這樣的：“When activated, tooltips display a text label identifying an element, such as a description of its function.”工具提示僅僅起到提示的作用，它會出現(xiàn)在當(dāng)用戶激活某一控件的時候，針對某一特定的元素通過簡要的文字來闡述其功能特性。

在設(shè)計形式上有短暫性、匹配性、簡明性的特點：短暫性指工具提示出現(xiàn)和消失的時機需要恰當(dāng)和短暫；匹配性指工具提示需要出現(xiàn)在與之關(guān)聯(lián)的元素附近；簡明性則是對工具提示承載的文本內(nèi)容提出了要求，要盡可能具備簡短性和描述性。

二、被動式幫助

被動引導(dǎo)映射到我們生活中的場景下可以看作是手機地圖導(dǎo)航軟件，當(dāng)你不知道該怎么走或者迷路的時候才會主動去打開地圖軟件進行導(dǎo)航。

另一個生活中的場景是產(chǎn)品說明書，在使用前或者再遇到不會用的功能的時候才會去查閱說明書，無論是導(dǎo)航軟件還是說明書它不會自動把全部內(nèi)容展示在你眼前，都需要你去進行查找。沿用到互聯(lián)網(wǎng)產(chǎn)品中是指用戶遇到問題的時候系統(tǒng)能夠提供一些幫助，去指導(dǎo)用戶接下來怎么做。

1. 在系統(tǒng)中的使用場景

被動式幫助一般會依托于主動式幫助，產(chǎn)品發(fā)展的初期階段，主動式幫助是必須的，當(dāng)產(chǎn)品發(fā)展到一定規(guī)模具備一定成熟度后，被動式幫助的引入就可以極大的提高整體產(chǎn)品的使用體驗。常用的被動引導(dǎo)有：幫助中心/幫助文檔、客服支持、全局常駐性功能。

2. 全局提示

重點信息的匯總或提示。此類提示完美融合于頁面，醒目且對操作無干擾，用戶可根據(jù)披露內(nèi)容判斷是否處理。常用的交互形式是全局提示、徽標(biāo)，向用戶傳達(dá)信息的變化并提供快速觸達(dá)的能力，無形中提升用戶響應(yīng)效率。

全局提示：不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當(dāng)前操作，又足夠明顯，一般需手動關(guān)閉或事件結(jié)束后自行消失。不同顏色屬性不同：一般藍(lán)色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯誤或異常等情況。

徽標(biāo)：形態(tài)各異的小紅點。常出現(xiàn)在圖標(biāo)、按鈕右上角的紅色圓點、數(shù)字或文字，簡單且醒目。表示內(nèi)容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準(zhǔn)傳達(dá)提示意圖。使用時注意無數(shù)字與有數(shù)字的應(yīng)用場景。有數(shù)字的徽標(biāo)給用戶帶來的心理壓力會更大，也會更吸引用戶注意力，同時需注意數(shù)字長度控制。

3. 客服中心

客服中心是B端產(chǎn)品的服務(wù)團隊和客戶建立聯(lián)系的平臺，目前大部分客服采用智能客服+人工客服的組合，通過智能客服先過濾已經(jīng)在幫助中心的問題，可以解決 80%以上的共性簡單的問題，剩下沒有辦法通過智能客服解決的問題會轉(zhuǎn)接到人工客服。

在設(shè)計上通常懸浮在右下角以入口或者懸浮窗口的形式，可以加入品牌形象IP、情感化來提升存在感，吸引用戶關(guān)注拉近平臺與用戶的距離。

4. 幫助中心

幫助中心是全平臺信息文檔的匯總，提供一個快捷入口，幫助用戶了解他想了解的問題，在幫助文檔中需要注意方便用戶直接進行搜索。文檔內(nèi)容要針對用戶的核心任務(wù)，描述要盡量步驟化和流程化，另外由于大部分用戶實際上都不喜歡閱讀大篇幅文字，如何在文檔中直接傳達(dá)重要的信息也很重要。

在設(shè)計上為保證用戶高效獲取信息，需突出內(nèi)容本身，不要度裝飾。框架設(shè)計清晰將頁面氛圍導(dǎo)航區(qū)和內(nèi)容展示區(qū)，讓用戶通過導(dǎo)航快速定位到想要查找的內(nèi)容。一般幫助中心會由三部分組成：產(chǎn)品介紹，產(chǎn)品入門和使用，常見問題的匯總。

三、自助式幫助

自助式幫助就就像我們?nèi)コ宰灾停挥米约嘿I菜、處理食材、烹飪，飯店直接把我們可能會喜歡的食物準(zhǔn)備好了，直接來選擇自己喜歡的食物就可以了。在系統(tǒng)中也是一樣提前預(yù)判用戶的預(yù)期，直接為用戶提供建議和幫助，或者直接幫用戶自動執(zhí)行一些任務(wù)，減少用戶的決策壓力，不過前提是需要產(chǎn)品設(shè)計師考慮非常周全并配合大量數(shù)據(jù)支撐。

1. 在系統(tǒng)中的使用場景

針對一些用戶操作風(fēng)險較小且系統(tǒng)能力能夠支持的場景，可以直接交付系統(tǒng)來自動完成。一些用戶操作風(fēng)險較大且系統(tǒng)能力也能夠勉強支持的場景，可以提供部分選項供用戶進行選擇，同時提供必要的容錯能力。常用的自助式幫助引導(dǎo)有智能推薦、錯誤校驗。

2. 智能推薦

系統(tǒng)自動提供內(nèi)容供用戶進行選擇，幫助用戶做出決策，不過這種設(shè)計的前提是平臺有足夠的數(shù)據(jù)積累，系統(tǒng)通過字段自動為用戶預(yù)置內(nèi)容。

3. 模版設(shè)計

用戶新建每一個內(nèi)容都需要從頭到尾重新填寫一遍內(nèi)容，成本極高，可以把高頻的類型變?yōu)槟０孢M行選擇。

4. 錯誤校驗

當(dāng)操作出現(xiàn)輸入錯誤時，為用戶展示明確的提示性消息，糾正和引導(dǎo)用戶的修改內(nèi)容。設(shè)計的時候需要注意反饋的時機做到及時反饋，將發(fā)生了什么，接下來怎么調(diào)整告知用戶。常見的有以下類型：toast、表單錯誤校驗、模態(tài)彈窗、根據(jù)不同的場景適配不同的交互方式。

最后

任何的引導(dǎo)都要注意任何事情都是過尤不及，適當(dāng)?shù)慕o用戶提供幫助當(dāng)然是好的，但是在用戶不需的時候過多的進行引導(dǎo)和幫助反而會適得其反，我們在使用引導(dǎo)和幫助的時候一定要合理的進行判斷，避免適得其反。

本文由@郭大毛毛設(shè)計筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議

鈕是最常使用的組件之一，但是在與人交流時，還是會覺得大家存在很多誤區(qū)，所以本文將圍繞如何使用按鈕展開分析，希望能給大家?guī)硪恍┬碌乃伎肌?/p>

按鈕是任何用戶界面當(dāng)中（無論是桌面還是移動用戶界面）必備的交互元素：甚至可以說，如果頁面中沒有一個按鈕，整個頁面設(shè)計將是不完整的。在日常生活中，按鈕也是隨處可見的，一個電燈開關(guān)、遙控器按鈕，現(xiàn)實生活中按鈕反復(fù)的出現(xiàn)也可以幫助我們不斷去理解屏幕世界中按鈕應(yīng)該如何操作，從而衍生出屏幕世界中的按鈕的具體形態(tài)。

人機交互中最重要的就是把我們從小到大對于這個世界的認(rèn)識映射到屏幕世界中，比如蘋果最為經(jīng)典iOS的滑動解鎖。

而到了屏幕世界中，控件的設(shè)計更應(yīng)該與物理世界保持相對的一致，這也是按鈕設(shè)計中，尤為重要的一個環(huán)節(jié)。

最近常問身邊的朋友，按鈕究竟是什么？

他們多數(shù)的回答：“按鈕就是按鈕唄，還能是什么～”

因為對于他們而言，按鈕不就是一個操作區(qū)域加上文字，沒什么特別的，也正因如此，對于按鈕的具體構(gòu)造也不太了解。這篇文章主要是根據(jù)自身的工作經(jīng)驗，結(jié)合當(dāng)下對于按鈕設(shè)計的理解，去分析如何進行更合理的按鈕設(shè)計。

聊聊按鈕的痛點

對于每個設(shè)計師來說按鈕并不陌生，在每天的設(shè)計中，都會使用按鈕進行頁面設(shè)計；但又不是每一個設(shè)計師都能夠?qū)粹o設(shè)計好，因為它存在三個方面的復(fù)雜性：

• 它使用的場景過多：不是每個場景都需要相同的按鈕，比如在登錄頁當(dāng)中，登錄和注冊就是使用不同的按鈕形式。這些情況特別在B端產(chǎn)品中，業(yè)務(wù)在每個步驟中需要突出和強調(diào)的點不同，導(dǎo)致設(shè)計師很難通過具體場景進行按鈕設(shè)計；
• 按鈕出現(xiàn)的頻率太高：B端產(chǎn)品中，每個頁面當(dāng)中都會有按鈕不停的重復(fù)，而高頻的出現(xiàn)會讓我們感到麻木，導(dǎo)致很多設(shè)計師都將其忽略；
• 按鈕形式太多：在我總結(jié)的按鈕形式當(dāng)中，一共分為10類，且情況多種多樣，很多時候都沒有意識到不同形式之間的差距，導(dǎo)致亂用混用。

因此一個看上去小小的按鈕，其實經(jīng)常會困擾著我們，如果剛開始沒有將按鈕進行整體的梳理，那么在你的設(shè)計過程中，按鈕會經(jīng)常打斷自己的設(shè)計思維，為了讓大家能夠?qū)Π粹o有更深的理解，我將按鈕進行系統(tǒng)的拆解，結(jié)合實際案例，能夠使按鈕更淺顯易懂。

在文章按鈕類型的分析中，我將按鈕分為兩大類、十小類，將其分類也是為了更好的為大家去分析每一個按鈕所涉及到的狀態(tài)，當(dāng)我們理解按鈕之前，你需要了解它的內(nèi)部構(gòu)造。

一、按鈕類型

首先，拋出一個問題給大家，下圖中，共有幾種按鈕形式？分別是什么？給大家五秒鐘時間思考。

如果你對上圖的按鈕形式并不完全了解，建議你拿好小本本，做好筆記～

在開始講常見按鈕類型前，我們必須要搞清楚一個重要的知識點：按鈕狀態(tài)。

1.1 什么是按鈕狀態(tài)？

按鈕狀態(tài)，可以讓用戶知道這個按鈕當(dāng)前是在進行哪一種操作，方便幫助用戶進行判斷。

常見的按鈕狀態(tài)分為：正常狀態(tài)(Normal)、聚焦?fàn)顟B(tài)(Focus)、懸停狀態(tài)(Hover)、激活狀態(tài)(Active)、加載狀態(tài)(Loading)、禁用狀態(tài)(Disabled)，下面分別對這六大狀態(tài)進行拆解。

正常狀態(tài) (Normal)：除了其他五種狀態(tài)外的情況都是正常狀態(tài)，它是按鈕最為常規(guī)的狀態(tài)形式，也是設(shè)計師必須設(shè)計的一種狀態(tài)。

聚焦?fàn)顟B(tài) (Focus)：主要是用于展示當(dāng)前電腦光標(biāo)所在的具體位置。聽起來有點玄乎，我來講他背后的原理，主要是方便一些鍵盤使用的用戶，可以使用Tab鍵或者方向鍵來對網(wǎng)頁進行訪問輸入。

比如在Mac OS 以及 Windows的使用中，通過點擊Tab，便展示出文件的Focus狀態(tài)。

Focus狀態(tài)是一個非常重要的交互形式，但是很多設(shè)計師都會忽略，甚至在很多網(wǎng)站，直接就是將這個樣式所去除，導(dǎo)致使用Tab鍵無法獲取聚焦的反饋，比如常見的百度、Google再到各大操作系統(tǒng)都會有這類反饋，去除這類反饋，會導(dǎo)致用戶無法用方向鍵控制光標(biāo)位置，在很大程度上降低用戶使用的可能性。

懸停狀態(tài) (Hover)：在桌面端的設(shè)計當(dāng)中，即使用戶知道它是可以點擊的，但是你還是需要設(shè)計懸停狀態(tài)，表明鼠標(biāo)現(xiàn)在正在按鈕上。平板電腦和移動端的設(shè)備上用永遠(yuǎn)不會展示懸停狀態(tài)，因為你的手指是無法在屏幕上進行懸停的（雖然IPad OS 更新了13.4版本后，會有Hover態(tài)的出現(xiàn)，但是是通過鼠標(biāo)進行操作，因此這里不予以討論）。

激活狀態(tài) (Active)：激活狀態(tài)因為叫法不同，在有的地方也稱之為Press狀態(tài)，它的表現(xiàn)就是將按鈕按壓下，將顏色變深同時會涉及到內(nèi)陰影等效果的出現(xiàn)。

禁用狀態(tài) (Disable)：按鈕禁用狀態(tài)作為最難設(shè)計的狀態(tài)之一，主要在于禁用狀態(tài)的表現(xiàn)形式以及禁用狀態(tài)與激活狀態(tài)之間如何的切換，我具體來分析一下兩個難點。

難點一：禁用狀態(tài)在顏色上首先會給人灰色塊的感覺，行業(yè)里也稱之為置灰，在設(shè)計上，也需要注意光標(biāo)移動時需要展示禁用光標(biāo)，即讓前端大哥將Cursor的hover狀態(tài)更改為not-allowed，你可以優(yōu)雅的在前端面前裝個X（之后會出一期，簡單聊聊我與前端如何協(xié)作如何裝X）。

難點二：禁用與激活狀態(tài)的切換，比如在一個注冊頁面中，需要姓名與電話必填，當(dāng)用戶沒有填寫完成姓名與電話時，應(yīng)該將按鈕置灰，提示用戶不可以點擊，當(dāng)用戶填寫完成必填字段后，將禁用按鈕轉(zhuǎn)變?yōu)榧せ畎粹o，提示用戶可以點擊登錄。

加載狀態(tài)/Loading：按鈕需要時間進行加載的一種狀態(tài)，通常會被用戶忽略，但是在B端產(chǎn)品中，Loading狀態(tài)尤為重要，這里有很多細(xì)節(jié)和小技巧，展開講篇幅太大，在文中4.3（按鈕細(xì)節(jié)）會詳細(xì)解答。

1.2 主按鈕 （Primary Button）

主按鈕為頁面中按鈕區(qū)最為核心的操作，在日常場景中，主要按鈕一般都為新建、編輯、保存這一類正向的操作，強調(diào)頁面中最為核心的功能，能夠讓用戶一看到主按鈕就明白大致在頁面中需要如何操作。

但在主按鈕的使用中，要遵循以下兩個原則：

1）在頁面當(dāng)中，按鈕區(qū)域的主按鈕最好只有一個，否則會對頁面的主要功能造成干擾。

2）并不是每一個頁面都需要有主按鈕，不要因為頁面缺失主按鈕而強行加上。因為在實際使用中，時常遇到按鈕之間為平級的關(guān)系，強行添加，容易造成頁面層級混亂。

在主按鈕中，按鈕狀態(tài)的設(shè)計也會跟隨物理世界進行相應(yīng)的映射，因此在設(shè)計時需考慮現(xiàn)實生活中的狀態(tài)。

比如用戶的Hover時，一般都將按鈕抬起并亮度增加，其目的是為了提示用戶可以點擊，而用戶在按下時，用加黑來表示用戶按下的狀態(tài)，與現(xiàn)實生活中按鈕的狀態(tài)類似，因此按鈕狀態(tài)應(yīng)該映射物理世界。

1.3 次按鈕/標(biāo)準(zhǔn)按鈕（Default Button）

次按鈕在頁面中出現(xiàn)最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時，那使用它，大概率沒有錯。因為它運用廣泛，出現(xiàn)頻率也最高，因此也被人們稱為標(biāo)準(zhǔn)按鈕。

在次按鈕的設(shè)計形式中，我們團隊將設(shè)計形式分為兩類：

第一類 字線型

此按鈕整體以文字+邊框的形式，這類形式在視覺層面上感知較弱，適合幾個按鈕同時展示，在B端項目中，字線型也是在使用中最為頻繁的形式。

第二種 字面型

字面型更偏向表達(dá)按鈕整體，常見于各類移動端的按鈕當(dāng)中，整體的表達(dá)也更適合移動端這類屏幕尺寸較少的設(shè)備當(dāng)中，更符合卡片化設(shè)計的思路，反而不太適合桌面端的設(shè)計。

1.4 文字按鈕/鏈接（Text Button/Link）

文字按鈕為頁面中視覺層級較低的按鈕形式，因而可以在頁面中大面積的重復(fù)使用，文字按鈕與鏈接（Link）基本一致，且沒有太多區(qū)分，所以在設(shè)計上，文字按鈕與鏈接基本相同。

文字按鈕重復(fù)的出現(xiàn)，以表格頁面當(dāng)中的操作列表最為突出，因為表格當(dāng)中常用的操作最好能夠直接展示出來，因此表格中基本都采取文字按鈕的形式。

1.5 圖標(biāo)按鈕（Icon Button）

圖標(biāo)按鈕為頁面中控件占比最小的按鈕，所以在頁面中的使用也是最為高效的。因為沒有了文字元素，會導(dǎo)致用戶在圖標(biāo)的理解上出現(xiàn)偏差。為了解決這一問題，主要是通過用戶在Hover時使用展示Tooltip提示按鈕的含義，同時建議在圖標(biāo)按鈕的使用上多為高頻且易理解的圖標(biāo)。

我舉一個簡單例子，在桌面端產(chǎn)品中，幫助文檔一定是非常重要的一個入口，當(dāng)用戶對頁面中的功能有所疑惑時，可以通過此來幫助用戶進行理解，通常需要在大多數(shù)頁面當(dāng)中展示幫助中心的入口，這時圖標(biāo)按鈕就變得最為合適。

因此，我們可以得出圖標(biāo)按鈕的應(yīng)用場景通常為：當(dāng)頁面中需要高效的展示一個或幾個圖標(biāo)時，同時圖標(biāo)按鈕的展示最為頻繁時，當(dāng)同時滿足以上兩點，使用圖標(biāo)按鈕就是一個更優(yōu)的解決方案方案。

1.6 按鈕菜單（Menu Button）

按鈕菜單為頁面中許多操作的集合，通常是將高頻的操作以及一些低頻的操作進行整合，組成的按鈕菜單。這樣既能夠減少頁面元素的冗雜，同時也能夠滿足業(yè)務(wù)對于功能的需求。

舉個例子，在表格頁面當(dāng)中，B端設(shè)計師最常見到的按鈕菜單就是新建，這類新建按鈕其實是必不可少的，同時業(yè)務(wù)需要，還需要多個業(yè)務(wù)按鈕進行展示，按鈕菜單的出現(xiàn)，幫助用戶進行按鈕的整理，同時也滿足業(yè)務(wù)需求。

1.7 按鈕中加圖標(biāo)（Icon add Button）

這其實是主按鈕的一種衍生，通過圖標(biāo)對主按鈕的含義進行解釋，從而幫助用戶提高這個按鈕的識別性。如果一個按鈕你想比主按鈕更加強調(diào)，那便可使用在按鈕中添加圖標(biāo)，這樣既能夠強化圖標(biāo)的含義，同時也加深了用戶對于按鈕的印象。

在六個常見按鈕形式中，我們根據(jù)重要的優(yōu)先級，給常見按鈕進行一個簡單的排序：

圖標(biāo)按鈕-按鈕菜單-主按鈕-次按鈕-文字按鈕-圖標(biāo)按鈕

二、特殊按鈕類型

2.1 危險按鈕（Danger Button）

危險按鈕在刪除操作中最為常見，通常是為了警告用戶，這個數(shù)據(jù)刪除不可恢復(fù)，讓用戶謹(jǐn)慎考慮。在常見的刪除操作中，都需要用戶進行二次確認(rèn)，避免用戶誤操作。

當(dāng)然，在實際業(yè)務(wù)中，危險按鈕不宜過多，如果業(yè)務(wù)當(dāng)中無法避免，需要展示多個刪除按鈕時，推薦采取圖標(biāo)按鈕進行展示或者Hover過后將其呼出。

2.2 幽靈按鈕（Ghost Button）

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

它沒有使用復(fù)雜的顏色、樣式，而是用線條表示外部輪廓，證明它還是一個按鈕。同時內(nèi)部只用文字展示按鈕名稱。它只出現(xiàn)在按鈕背景復(fù)雜的頁面當(dāng)中，比如：漸變色、紋理、動態(tài)圖片背景的情況下，幽靈按鈕能夠完美融入到環(huán)境當(dāng)中。

而現(xiàn)如今，傳統(tǒng)意義上的幽靈按鈕已經(jīng)很少，畢竟在現(xiàn)如今的官網(wǎng)當(dāng)中，幽靈按鈕已經(jīng)不再流行，更多的是出現(xiàn)在復(fù)雜頁面的“實心按鈕”，而在某種意義上講，這類按鈕才是幽靈按鈕現(xiàn)在的狀態(tài)。

幽靈按鈕和次按鈕有何不同？

在形式上，幽靈按鈕和次按鈕看起來沒有并什么不同，因此會有很多疑惑，那我什么時候用幽靈按鈕什么時候用次按鈕呢？

首先幽靈按鈕是屬于特殊按鈕體系中，因此它不會受整個按鈕體系的束縛，比如我在一個設(shè)計系統(tǒng)中，分別定義了常規(guī)按鈕的尺寸分別是24px、32px、40px，但是我在一個官網(wǎng)落地頁當(dāng)中需要有一個46px的按鈕出現(xiàn)，次按鈕就完全不合適。其次幽靈按鈕邊框粗細(xì)、字體大小都是和常規(guī)按鈕體系不同，因此幽靈按鈕就和次按鈕有所不同。

第二個方面在次按鈕的設(shè)計形式中，不僅僅只有描邊按鈕這一種形式，因此幽靈按鈕與次按鈕它們可能會有交集，但是屬于兩種不同類型的場景，因此也不能將它們混用。

2.3 懸浮按鈕（Floating Action Button）

在Material Design 出現(xiàn)之初，懸浮按鈕受到了很多人的追捧，它也是安卓設(shè)計的代名詞。主要是用于頁面當(dāng)中最常用的操作，是整個APP中最核心的按鈕，能夠代表這個產(chǎn)品的核心功能，比如記賬軟件的添加賬單記錄，印象筆記的新增筆記（安卓）。

但沉浸式設(shè)計的出現(xiàn)，使得移動端寸土寸金的地方，需要固定一個按鈕的情況就變得更加少見。

而在B端的設(shè)計過程中，逐漸衍生出了B端行業(yè)特有的方式。

懸浮按鈕在B端場景中，主要是幫助用戶進行輔助咨詢的功能，例如在一些用戶需要得到幫助的頁面中，可以通過懸浮按鈕，使用戶的又疑問的頁面進行快速提問，幫助用戶能夠進行快速的跳轉(zhuǎn)，在飛書的應(yīng)用列表中，其實用戶剛開始理解應(yīng)用列表其實存在一個理解成本，就可以通過懸浮按鈕進行展示（后面有機會聊聊B端改版厭惡時也會提到）。

2.4 行為號召按鈕（Call to Actiontion）

行為號召按鈕簡稱：CTA按鈕，主要目的是為了號召人們在某些特定的頁面中使用此按鈕來提高轉(zhuǎn)化，比如立即購買、聯(lián)系我們、立即訂閱等等…

大多數(shù)時候，CTA按鈕都是成對出現(xiàn)的。“是與否“ 、“登錄與注冊”、“確認(rèn)與取消”等。因此，分析清楚CTA按鈕后設(shè)計出視覺層級合理的頁面稱為非常重要的點。在設(shè)計中，一般會采取漸變色、主題色、主題色的互補色等等，它經(jīng)常獨立出現(xiàn)。

在B端軟件的場景中，官網(wǎng)是CTA按鈕出現(xiàn)最為重要的頁面，一般在官網(wǎng)中，使用CTA按鈕將用戶引導(dǎo)從潛在客戶向付費客戶進行轉(zhuǎn)變（點擊過后一般是一個聯(lián)系表單進行信息的填寫），這也是在B端產(chǎn)品中非常重要的指標(biāo)：潛客向付費客戶轉(zhuǎn)變。可以引導(dǎo)用戶進入到下一個階段，如果CTA按鈕設(shè)計不好，人們對于官網(wǎng)只是瀏覽，不會有任何轉(zhuǎn)化。

因此，在設(shè)計CTA按鈕的形式與位置時，需要與產(chǎn)品、設(shè)計、運營等共同確定并討論使用，大家站在不同的立場希望得到一個完美的方案，因為設(shè)計出清晰的結(jié)構(gòu)層次將直接引導(dǎo)用戶朝著理想的使用路徑前進，從而極大提高轉(zhuǎn)化率。

三、按鈕細(xì)節(jié)

3.1 按鈕文案

在我們?nèi)粘ＴO(shè)計中，常常會遇到一些棘手的文案問題：登陸、登錄、確認(rèn)、確定、發(fā)送、發(fā)布，在許許多多的工作場景中，猶豫究竟應(yīng)該在按鈕上使用哪種文案，這就需要我們通過具體的案例場景進行展示相應(yīng)文案。

• 登陸（Land)：這是網(wǎng)絡(luò)中錯別字最為頻繁的用此，很多人都會把登陸放到登錄頁面中，其實是錯的。這個詞里的“陸”字，就是陸地的意思，其基本含義只是登上陸地而已，拓展出來還會有“登陸到某一個市場”，但登陸網(wǎng)站的說法是絕對錯誤的。
• 登錄（Login）：這是“登記記錄、記載”的含義，我們正常輸入賬號密碼就是為了去記錄我們的一個信息，一般為官網(wǎng)登錄頁。
• 確認(rèn)（Confirm）：這是帶有一些不可逆我操作的提示，一般用于用戶配置、選擇項等。
• 確定（Yes）：這是詢問用戶是否進行某項不可逆操作，一般為一個單獨的操作。
• 發(fā)送（Send）：這是盡快傳遞對方的聊天消息，一般為即時性的聊天發(fā)送。
• 發(fā)布（Publish）：這是用于用戶填寫的觀點、意見、文章等反饋信息發(fā)布到一些正式場合，如論壇、社區(qū)等。

這些細(xì)節(jié)的文案就是幫助用戶去理解頁面中所傳達(dá)的真正含義，多將文字放置到場景中，文案也更好的輔佐他們作出選擇

3.2 按鈕圓角

圓角在每一個軟件中，隨處可見。圓角大小所帶來的不僅僅是視覺表現(xiàn)，還更多影響著用戶的使用體驗以及對于產(chǎn)品而言的整體的認(rèn)知，如果在開始設(shè)計之前，沒有對按鈕圓角有具體的規(guī)劃，很容易踩坑，如何設(shè)計好圓角，我們來進行系統(tǒng)分析

在下文中我們將按鈕的圓角大小，分為以下三類：直角、圓角、半圓。

直角：

按鈕四角的方向，具有很強烈的引導(dǎo)性，看上去也會更加刺眼，使得在頁面當(dāng)中注意力會減弱。同時，直角在按鈕排列當(dāng)中看上去更加統(tǒng)一，相同的東西在視覺上不太能引起我們的注意。

圓角：

相比與直角按鈕，在使用圓角的按鈕中，視覺上總是給人一種柔和親近的感覺，當(dāng)幾個圓角按鈕進行排列時，能夠感受到圓角按鈕更容易被點擊。因此在使用的按鈕中，建議添加圓角的細(xì)節(jié)元素。

為何直角的物體會給人更嚴(yán)肅的感受——每一個人都認(rèn)為圓角會更好，但是并不是每一個人都能夠解答為什么圓角更好。

在巴羅神經(jīng)病學(xué)研究所對拐角的科學(xué)研究發(fā)現(xiàn)，“拐角的感知程度隨著角度線性變化。銳角比鈍角產(chǎn)生更強的幻覺顯著性”。換句話說，拐角越尖，則出現(xiàn)越亮。拐角越多，越難看。

圓角還有另一種解釋，是因為現(xiàn)實生活中有圓角的物體會更友好。從小，我們就知道尖角的物體會讓人受傷，圓角的物體會更安全。這就是小孩在玩皮球與刀的時候，家長的反應(yīng)完全不同。

小朋友玩刀會讓家長十分的緊張，趕緊讓孩子放下；而小朋友玩皮球時，家長則是非常的放心。這激起了神經(jīng)科學(xué)所謂的尖銳邊緣“回避反應(yīng)”。因此，我們傾向于“避免鋒利的邊緣，因為在自然界中它們可能會構(gòu)成危險”。

圓角是不是越大越好？

通常在移動端場景中，半圓按鈕隨處可見，移動端手指觸摸操作上，對于圓角的影響小之又小；而到了桌面端的場景下，鼠標(biāo)的使用，半圓按鈕就會有所不妥。

如果相同面積中，按鈕的圓角增大，相應(yīng)的對于按鈕的可操作區(qū)域就會隨之減小，在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作。

當(dāng)然，麻煩事還不僅僅于操作區(qū)域，在結(jié)合實際業(yè)務(wù)，我們的按鈕常常作為原子（原子設(shè)計理論）用來組成為下拉菜單進行聯(lián)動，半圓按鈕在下拉菜單的設(shè)計中，也會因為半圓的局限，使下拉菜單的設(shè)計會更加困難，同樣在設(shè)計上，半圓角對于下拉菜單的適配也會相當(dāng)突兀，因此在考慮這方面設(shè)計時，需要你多去思考之后的業(yè)務(wù)場景。

3.3 重要的Loading狀態(tài)

按鈕的狀態(tài)中，Loading狀態(tài)通常不會對用戶進行直接展示，因為大多數(shù)情況下，Loading狀態(tài)就發(fā)生在一秒鐘以內(nèi)，但是對于B端場景中有很多重要操作，在長時間等待中不展示loading狀態(tài)，會導(dǎo)致用戶在使用時犯下錯誤。

需要在合理的時間進行反饋

• 當(dāng)按鈕響應(yīng)時間小于1秒時，通常正常反饋即可。
• 當(dāng)按鈕響應(yīng)時間長于1秒時，我們通常會采取加載動畫，減緩用戶等待的焦慮感。

舉個例子：比如一個確認(rèn)提交的按鈕，由于網(wǎng)絡(luò)或者服務(wù)器等原因，需要長時間加載資源，而用戶不知道我剛才按下的按鈕是否有效，這時用戶慌張，想要多按下幾次這個按鈕，系統(tǒng)就會不停提交數(shù)據(jù)，最后網(wǎng)絡(luò)變好時，窗口就會一瞬間瘋狂展示，導(dǎo)致用戶體驗下降。

為了防止這類事情的發(fā)生，需要在設(shè)計師考慮到按鈕在加載一秒以后的狀態(tài)，應(yīng)當(dāng)提示用戶在網(wǎng)頁已經(jīng)收到請求，正在加載，同時在按鈕狀態(tài)中應(yīng)該為不可操作狀態(tài)。同時會給出加載轉(zhuǎn)圈的動畫，緩解用戶的焦慮。

當(dāng)你完成了第一步的設(shè)計后，想想在按鈕的狀態(tài)中，是否更能夠幫助用戶進行體驗上的提升呢？

這也是在面試某大型互聯(lián)網(wǎng)公司時，被問到過的一個問題～敲黑板。

對用戶操作的適當(dāng)反饋是用戶界面設(shè)計的最基本準(zhǔn)則。讓用戶了解當(dāng)前狀態(tài)、位置、是否成功、進度如何，減少不確定性；并引導(dǎo)他們在正確的方向上交互，而不是浪費精力在重復(fù)操作上。

在Loading的加載過程中，等待焦慮一直是用戶想要了解到的，為了緩解類似情況，可以將等待的進度狀態(tài)進行展示，使的用戶在等待的過程中，能夠清晰的清楚自己的按鈕目前處于何種狀態(tài)，我大概還需要等待多久，緩解用戶在等待過程中的焦慮。

以上兩個方式均是尼爾森十大原則的內(nèi)容，能夠在按鈕Loading狀態(tài)中，緩解用戶在按鈕加載過程中、重復(fù)提交、等待焦慮的問題，通過一些設(shè)計小細(xì)節(jié)，幫助產(chǎn)品提升用戶體驗。

四、按鈕實際的使用場景

通過上文對于按鈕的解釋，大致明白按鈕在設(shè)計中的作用，接下來我結(jié)合一個工作中的實際案例，來看看我們應(yīng)該如何優(yōu)化常見按鈕在頁面當(dāng)中的設(shè)計。

項目背景：在桌面端，我們需要對整個導(dǎo)航欄進行設(shè)計改版，但其中涉及到對于導(dǎo)航的一個整體優(yōu)化，主要是由于業(yè)務(wù)功能發(fā)生變化，我們需要在導(dǎo)航欄上增加快捷添加入口和通知中心，來滿足導(dǎo)航的后續(xù)的功能需求，由于保密協(xié)議的原因，就不放自家產(chǎn)品。

第一步根據(jù)用戶瀏覽模式確定按鈕順序

在桌面端中，瀏覽模式大致分為兩類，F(xiàn)型瀏覽模式、Z型瀏覽模式（下方知識拓展會有講到）。

首先，因為導(dǎo)航在整個頁面的頂部，結(jié)合兩種瀏覽模式在頂部時統(tǒng)一都為從左到右的瀏覽順序。

因此確定整個導(dǎo)航按鈕初步的按鈕重要層級排序。

第二步交互路徑優(yōu)化

我們對于用戶的按鈕層級有著明顯的劃分，因為在整個導(dǎo)航右側(cè)，又因為其的特殊性，我們把操作空間分為三部分：

左側(cè)為操作路徑最短的區(qū)域，因為桌面端的產(chǎn)品需要通過鼠標(biāo)進行交互操作，而其中移動鼠標(biāo)的長短直接決定用戶是否愿意點擊這個按鈕，因此，靠左的按鈕適合放置用戶最常使用的操作。

中部為按鈕內(nèi)部區(qū)，可以放置一些低頻，但是又必須出現(xiàn)在這個區(qū)域的按鈕操作（比如：幫助中心、通知中心等等…）。

右側(cè)為按鈕最為重要層級最弱的區(qū)域，同時它也有一些特殊性。

一般在瀏覽器的右側(cè)，為用戶最容易定位的操作區(qū)域，因為靠近邊緣導(dǎo)致在用戶定位當(dāng)中能夠幫助用戶進行快速選擇。

回到頁面中信息層級較高、同時需要精準(zhǔn)定位的按鈕就會將個人中心放置在最右側(cè)，方便用戶進行快速定位。

因此我們講導(dǎo)航當(dāng)中按鈕重要層級進行簡單排序，得到下圖：

第三步信息整合優(yōu)化按鈕結(jié)構(gòu)

通過親密性原則，我們將除去左右兩側(cè)確定好的按鈕之外的按鈕進行簡單分類，將有關(guān)聯(lián)的按鈕進行組合，形成較強的關(guān)聯(lián)性～

第四步視覺調(diào)整

視覺調(diào)整作為最重要的一步，主要是為了在最后的按鈕重要層級上，將一部分按鈕突出、一部分按鈕弱化，達(dá)到我們想要的整個層級效果。

通過團隊內(nèi)部討論，將我們的新增按鈕定位CTA按鈕，因為它關(guān)聯(lián)到我們每個使用系統(tǒng)的人都會用到，屬于最高頻的操作按鈕，也因此將其突出。

F型瀏覽模式：

是新聞平臺、博客等文字為主的網(wǎng)站布局所采取的閱讀模式。

該閱讀模式由尼爾森團隊的眼動追蹤研究結(jié)果從而進行普及，在這個研究中記錄了超過200位用戶瀏覽網(wǎng)頁時，發(fā)現(xiàn)用戶的主要閱讀行為在許多網(wǎng)站和場景中表現(xiàn)得相當(dāng)一致。這個閱讀模式看起來有點像字母F，因此也被叫做F型瀏覽模式。

首先用戶以水平方向進行閱讀，通常是在閱讀區(qū)域的上半部分。

接下來，他們在屏幕左側(cè)垂直瀏覽，尋找段落開篇幾句中感興趣的內(nèi)容。當(dāng)他們找到感興趣的內(nèi)容時，他們在第二個水平方向上快速瀏覽，通常這塊內(nèi)容區(qū)比上一個內(nèi)容區(qū)更短小、更簡潔。這部分元素形成了F的下半部分。

最后，用戶在垂直方向上瀏覽內(nèi)容的左側(cè)區(qū)域。

Z型瀏覽模式：

是掃描滾動的網(wǎng)站的典型模式。

正如你所期望的，“z”型模式的布局遵循字母Z的形狀。“Z”型模式的設(shè)計跟蹤了人眼掃描頁面時的路線——從左到右，從上到下：

• 首先，人們從左上角到右上角進行掃描，形成一條水平線
• 接下來，向頁面的左下側(cè)掃描，鏈接成一條對角線
• 最后，再次向右轉(zhuǎn)，形成第二條水平線

當(dāng)觀眾的視角以這種模式移動時，它形成一個虛構(gòu)的“Z”字形。

五、按鈕設(shè)計中與開發(fā)還原細(xì)節(jié)

在實際工作中，經(jīng)常遇到自己設(shè)計的按鈕與開發(fā)實際還原的按鈕差距很大，一些沒有經(jīng)驗的設(shè)計師會和開發(fā)說，你看我設(shè)計稿，每一個按鈕都要按照設(shè)計稿的來，這樣設(shè)計師與前端開發(fā)之間的矛盾就會越來越深。其實在按鈕設(shè)計的細(xì)節(jié)中，開發(fā)怎么完美的還原，里面還有很多細(xì)節(jié)。

5.1 Padding思維

首先要想讓開發(fā)完全還原你的設(shè)計稿，就必須了解開發(fā)實現(xiàn)的思維方式，針對它的思維方式進行相應(yīng)的思考。

又由于Sketch與開發(fā)常使用的VScode之間邏輯上存在較大差異，導(dǎo)致設(shè)計師設(shè)計出來的很多設(shè)計稿開發(fā)根本無法實現(xiàn)，這也是B端設(shè)計師擺在你面前的第一個問題。

對你沒看錯，無法實現(xiàn)，我舉一個例子：

這是一位同學(xué)問我的一個問題，他說我這個按鈕為啥實現(xiàn)不了，前端不就是多幾個代碼去適配我的設(shè)計稿就可以了嗎？

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

什么是Padding

在按鈕當(dāng)中，通俗的理解Padding就是文字與按鈕之間的間距。

因為Sketch等軟件在按鈕的設(shè)計中，只有圖形位置的概念，沒有內(nèi)間距Padding的概念，因此需要對按鈕還原要明確的描述。

比如上圖，前端同學(xué)在開發(fā)就會將Padding設(shè)置為24px，所以整個按鈕長度便為24px*2+20px（文本寬度）=68px。

而為什么說上面的設(shè)計規(guī)范實現(xiàn)不了，因為對于前端而言，Padding通常都是統(tǒng)一且固定的，只會根據(jù)按鈕文字長度進行相應(yīng)的調(diào)整，比如我上面舉的錯誤栗子，其實在前端同學(xué)面前這類設(shè)計是不能夠被共用，而且對前端同學(xué)項目會變得越來越不能維護，所以按鈕設(shè)計應(yīng)該更規(guī)劃。

5.2 Min-Width思維

但是如果真的需要去實現(xiàn)兩個文字按鈕長度和四個字的一樣怎么辦，需要去設(shè)定按鈕的最小寬度。

按鈕最小寬度的設(shè)定一般為4個字文字的長度，假設(shè)字體大小為16px，左右的Paddung為24px。

最小寬度為：88px，因此在按鈕的標(biāo)注中，需要展示最小間距為102px，方便前端進行CSS開發(fā)。

5.3 按鈕的邊框

在我們的sketch中，按鈕邊框有三種，內(nèi)邊框、居中邊框、外邊框，默認(rèn)為居中，但是在前端的CSS代碼中沒有居中邊框，沒有居中邊框，沒有居中邊框（重要的事情說三遍），默認(rèn)為內(nèi)邊框，如果需要調(diào)整為外邊框，最好能夠標(biāo)注。

按鈕雖然作為一個最基礎(chǔ)的元素，但是在整個設(shè)計體系中，它一直都扮演著一個十分重要的位置，在思維中，任何組件都可以通過上面按鈕的思維，對每個組件進行拆解分析，無論是組件的狀態(tài)、組件的類型，在實際工作中，都需要你去深入思考。關(guān)于我呢， 也因為踩了很多坑，因此想分享給大家。

參考鏈接

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/

相關(guān)閱讀

B端設(shè)計：盤點篩選控件的基本知識

B端設(shè)計：導(dǎo)航菜單的設(shè)計5步法

作者：CE，2B行業(yè)的2B設(shè)計師～。公眾號：CeDesign

本文由 @CE 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。