隨著B端產(chǎn)品的不斷進(jìn)步與發(fā)展，B端產(chǎn)品的競爭越來越激烈，用戶對用戶體驗(yàn)要求越來越嚴(yán)格。本文作者在講解Ant Design，一套完整的B端設(shè)計(jì)方法論體系。感興趣的話就讓我們繼續(xù)看下去吧~

一、Why | 為什么要學(xué)習(xí) Ant Design ？

近兩年，隨著B端產(chǎn)品的競爭逐漸白熱化，越來越多的用戶對更好的用戶體驗(yàn)有了進(jìn)一步的要求。Ant Design 在歷經(jīng)多年的打磨之后，已經(jīng)擁有一套完整的B端設(shè)計(jì)方法論體系，而且這套體系具有一定的廣度和普適性，很適合初入B端的設(shè)計(jì)師作為入門教材來學(xué)習(xí)。

具體來說， Ant Design 對設(shè)計(jì)師都有哪些幫助呢？

1.1 了解組件用法

對于初次接觸B端的設(shè)計(jì)師來說，學(xué)習(xí)常用組件的使用方法是非常有必要的。Ant Design 的組件設(shè)計(jì)指南能夠幫助設(shè)計(jì)師快速了解組件并掌握它們的用法，從而提高設(shè)計(jì)效率。

1.2 啟發(fā)設(shè)計(jì)思路

當(dāng)你在方案設(shè)計(jì)過程遇到問題無從下手時(shí)，或許 Ant Design 能給你一些啟發(fā)。

比如，下圖是參考Ant Design列表工具欄規(guī)則得出的適用于我們自己產(chǎn)品的規(guī)則。

圖1 · 某后臺系統(tǒng)的列表工具欄規(guī)則

1.3 為設(shè)計(jì)方案提供判斷依據(jù)

有時(shí)候我們產(chǎn)出了設(shè)計(jì)方案，但不確定方案是否合理時(shí)，Ant Design 也能給出判斷依據(jù)。

比如，要判斷圖表的顏色是否有辨識度，我們可以通過計(jì)算顏色之間在Lab色彩體系下的空間距離來判斷。

圖2 · 顏色差值的計(jì)算方法

二、What | 什么是 Ant Design ？

Ant Design 是經(jīng)過螞蟻內(nèi)部大量中后臺項(xiàng)目實(shí)踐總結(jié)出的設(shè)計(jì)規(guī)范，提供了完善的設(shè)計(jì)指引、最佳實(shí)踐、設(shè)計(jì)資源和設(shè)計(jì)工具，能夠幫助設(shè)計(jì)者快速產(chǎn)出設(shè)計(jì)方案。

對于設(shè)計(jì)師而言，Ant Design 的方法論體系可以歸納為設(shè)計(jì)價(jià)值觀、設(shè)計(jì)原則和設(shè)計(jì)模式3個(gè)層面。接下來，我們將依次從這3個(gè)層面來學(xué)習(xí)如何使用 Ant Design 。

圖3· Ant Design 設(shè)計(jì)方法論體系

三、How | 如何學(xué)習(xí) Ant Design ？

3.1 設(shè)計(jì)價(jià)值觀

設(shè)計(jì)價(jià)值觀，是判斷設(shè)計(jì)好壞的內(nèi)在標(biāo)準(zhǔn)。Ant Design 的設(shè)計(jì)價(jià)值觀包括：自然、確定性、意義感和生長性。

圖4 · Ant Design 的設(shè)計(jì)價(jià)值觀

下面通過語雀設(shè)計(jì)團(tuán)隊(duì)分享的一個(gè)案例來認(rèn)識Ant Design設(shè)計(jì)價(jià)值觀對于具體設(shè)計(jì)方案的影響。

在語雀中，要解決用戶找不到“插入圖片”功能的問題，設(shè)計(jì)師應(yīng)該如何入手呢？

圖5 · 語雀“插入圖片”功能入口

常規(guī)的設(shè)計(jì)思路一般是去強(qiáng)化功能入口，讓用戶主動找到這個(gè)功能。但從讓功能更加“自然”的角度出發(fā)，正確的做法應(yīng)當(dāng)是在用戶需要這個(gè)功能時(shí)，讓功能找到用戶，避免繼續(xù)消耗用戶本就不多的注意力。

Ant Design 總結(jié)了9種“自然”的主動交互方式，各位在設(shè)計(jì)功能時(shí)可以依次去排查每種方式實(shí)現(xiàn)的可能性。

圖6· AntDesign總結(jié)的“自然”交互方式

經(jīng)過排查，“插入圖片”功能有2種主動交互的方式可以落地實(shí)現(xiàn)：

第1種，上下文。用戶想要在文檔中加入圖片的時(shí)候，會下意識地將圖片拖入文檔，因?yàn)橛脩粢呀?jīng)在桌面軟件上養(yǎng)成了習(xí)慣，系統(tǒng)在這個(gè)時(shí)候就可以主動讓圖片被插入到文檔中。

第2種，特殊數(shù)據(jù)結(jié)構(gòu)。由于圖片格式是特定的（比如.jpg、.png等），如果系統(tǒng)識別到用戶復(fù)制了圖片格式，那么可以在用戶進(jìn)入文檔編輯頁面時(shí)提示用戶是否要插入這張圖片。

最后，產(chǎn)出方案：

圖7 · 語雀“插入圖片”功能的優(yōu)化

3.2 設(shè)計(jì)原則

設(shè)計(jì)原則，是基于價(jià)值觀衍生出的向?qū)Щ蛱崾?，它包含UI設(shè)計(jì)原則和可視化設(shè)計(jì)原則。

相對于抽象的設(shè)計(jì)價(jià)值觀，設(shè)計(jì)原則更加落地和實(shí)用，對于初級設(shè)計(jì)師來說是不錯(cuò)的避坑指南。由于 Ant Design 官網(wǎng)中已經(jīng)有足夠多的案例來說明如何使用設(shè)計(jì)原則，本文就不再贅述。

3.3 設(shè)計(jì)模式

設(shè)計(jì)模式是針對B端產(chǎn)品的具體問題，給出的一般性解決方案，它包含設(shè)計(jì)策略、全局規(guī)則、可視化和模板。

3.3.1 設(shè)計(jì)策略

設(shè)計(jì)的第一步是要去理解業(yè)務(wù)以及與用戶共情。

由于業(yè)務(wù)領(lǐng)域比較垂直，B端的用戶基本都是專業(yè)用戶，設(shè)計(jì)師 60% 的精力都花在了梳理業(yè)務(wù)、理解角色，所以 Ant Design 探索出以JCD 為核心的B端產(chǎn)品設(shè)計(jì)思維，它可以幫助設(shè)計(jì)師深入理解業(yè)務(wù)和角色。

JCD (Job – Centered Design) 是以 Job（事情）被高效完成為決策依據(jù)的設(shè)計(jì)思維，其中用于理解角色的方法叫做“角色分析”，它包含角色畫像和角色協(xié)作關(guān)系。

角色畫像：不同于 C 端的用戶畫像，在以 Job 為中心的視角下，B端產(chǎn)品的角色畫像重點(diǎn)關(guān)注的三個(gè)維度：角色概覽、工作能力、工作內(nèi)容。

例如，下圖是一個(gè)開發(fā)工程師的角色畫像：

圖8 · 開發(fā)工程師的角色畫像

角色協(xié)作關(guān)系：要做好一件工作，往往需要有多個(gè)角色的協(xié)作。因此，為了理解角色，我們還要去梳理角色之間的協(xié)作關(guān)系，建立全局視角。

例如，下圖是一個(gè)最簡單的版本迭代，其中可以看到角色之間的協(xié)作關(guān)系。

圖9· 多角色協(xié)作關(guān)系圖示

通過以上角色分析的方法，設(shè)計(jì)師能夠從 Job 出發(fā)洞察角色的工作需求以及協(xié)作模式，為深入解決B端的設(shè)計(jì)問題提供幫助。

3.2.2 全局規(guī)則

全局規(guī)則通過規(guī)范常見的互動行為，如按鈕、導(dǎo)航、數(shù)據(jù)錄入等，定義了組件元素的標(biāo)準(zhǔn)用法。

下面以按鈕為例，了解該如何使用全局規(guī)則。

假設(shè)要在頁面中新建一個(gè)商品，涉及的操作包括：提交，保存，清空，取消，該如何設(shè)計(jì)按鈕？

第1步，確定按鈕位置。一個(gè)頁面/卡片可以分成Header、Body、Footer 3個(gè)區(qū)域，而 Body 中適合放置對內(nèi)容生效的操作，因此新建商品的按鈕需要放置在 Body 中并跟隨表單內(nèi)容。

第2步，確認(rèn)按鈕順序。按鈕閱讀順序類似于用戶和電腦的對話過程，按照日常對話的順序，應(yīng)當(dāng)將按鈕從左到右設(shè)置為：提交，保存，清空，取消。

第3步，為按鈕添加強(qiáng)調(diào)。當(dāng)前任務(wù)中，用戶最有可能的，也是我們最希望用戶執(zhí)行的操作是“提交”，因此加強(qiáng)這個(gè)按鈕，讓用戶更快的選擇。

具體的設(shè)計(jì)過程如下：

圖10· 按鈕設(shè)計(jì)過程

3.3.3 可視化

可視化是 Ant Design 團(tuán)隊(duì)在數(shù)據(jù)圖表領(lǐng)域沉淀的方法論，其中最基礎(chǔ)的是各類圖表的用法，它是我們進(jìn)行可視化設(shè)計(jì)的第一步。

我們通過一張圖認(rèn)識一下常見圖表以及它們的用法。

圖11· 常見圖表及用法

下面結(jié)合一個(gè)具體案例來說明圖表該如何選擇和使用。

假如，要對比4種產(chǎn)品的銷量、價(jià)格和利潤數(shù)據(jù)，該怎么用圖表的方式去呈現(xiàn)？

首先，由于是對不同類別的產(chǎn)品進(jìn)行對比，因此選擇比較類圖表；

其次，這次要對3個(gè)變量進(jìn)行比較，而氣泡圖是一種適合展示多變量的比較類圖表，比較適合。

最后，在氣泡圖中，將銷量、價(jià)格對應(yīng)橫/縱坐標(biāo)，價(jià)格則對應(yīng)于氣泡面積，實(shí)現(xiàn)效果如下：

圖12· 某銷售表格的可視化呈現(xiàn)

3.3.4 模板

模板是基于 Ant Design 團(tuán)隊(duì)以往的設(shè)計(jì)經(jīng)驗(yàn)，總結(jié)出的幾類典型頁面的解決方案，包括詳情頁、表單頁、數(shù)據(jù)可視化頁、工作臺等。

我們以詳情頁為例，講解一下模板的使用思路。

假設(shè)：要在后臺設(shè)計(jì)一個(gè)商品訂單的詳情頁，該如何進(jìn)行設(shè)計(jì)？

第1步：選擇模板。Ant Design 有基礎(chǔ)詳情和高級詳情2種詳情頁模板可供選擇，案例中的訂單信息復(fù)雜度不高，一個(gè)頁面就可以承載，所以選擇基礎(chǔ)詳情。

第2步：確定信息的區(qū)隔方式。這一步需要按照信息之間的相關(guān)性，確定是用單張卡片、多張卡片還是tab頁簽來區(qū)隔不同信息。在這個(gè)案例中，我們對信息進(jìn)行了重組后，拆分成多個(gè)卡片進(jìn)行區(qū)隔展示。

第3步：選擇合適的呈現(xiàn)方式。根據(jù)每張卡片的內(nèi)容信息，使用不同的方式去進(jìn)行呈現(xiàn)。

具體的設(shè)計(jì)過程如下：

圖13· 詳情頁設(shè)計(jì)過程

四、總結(jié)

通過本文的學(xué)習(xí)，我們了解了 Ant Design 從設(shè)計(jì)價(jià)值觀到設(shè)計(jì)模式的整個(gè)方法論體系，并且知道了如何去使用它。相信大家通過學(xué)習(xí) Ant Design ，對B端設(shè)計(jì)中用到的組件、原則、策略都會有一個(gè)比較全面的了解，并且能夠拓寬解決問題的思路。最后，希望各位設(shè)計(jì)小伙伴在今后的工作中充分利用好 Ant Design 的設(shè)計(jì)方法論，并在實(shí)際項(xiàng)目中因地制宜的改良，這樣才能快速提高我們的設(shè)計(jì)質(zhì)效，少走彎路。