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

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

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

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

1.1 了解組件用法

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

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

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

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

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

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

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

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

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

二、What | 什么是 Ant Design ？

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

對(duì)于設(shè)計(jì)師而言，Ant Design 的方法論體系可以歸納為設(shè)計(jì)價(jià)值觀、設(shè)計(jì)原則和設(shè)計(jì)模式3個(gè)層面。接下來(lái)，我們將依次從這3個(gè)層面來(lái)學(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à)值觀包括：自然、確定性、意義感和生長(zhǎng)性。

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

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

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

圖5 · 語(yǔ)雀“插入圖片”功能入口

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

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

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

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

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

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

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

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

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

設(shè)計(jì)原則，是基于價(jià)值觀衍生出的向?qū)Щ蛱崾荆琔I設(shè)計(jì)原則和可視化設(shè)計(jì)原則。

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

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

設(shè)計(jì)模式是針對(duì)B端產(chǎn)品的具體問(wè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è)開(kāi)發(fā)工程師的角色畫像：

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

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

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

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

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

3.2.2 全局規(guī)則

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

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

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

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

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

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

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

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

3.3.3 可視化

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

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

圖11· 常見(jiàn)圖表及用法

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

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

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

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

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

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

3.3.4 模板

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

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

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

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

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

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

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

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

四、總結(jié)

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