中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、Why | 為什么要學習 Ant Design ？

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

具體來說， Ant Design 對設計師都有哪些幫助呢？

1.1 了解組件用法

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

1.2 啟發設計思路

當你在方案設計過程遇到問題無從下手時，或許 Ant Design 能給你一些啟發。

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

圖1 · 某后臺系統的列表工具欄規則

1.3 為設計方案提供判斷依據

有時候我們產出了設計方案，但不確定方案是否合理時，Ant Design 也能給出判斷依據。

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

圖2 · 顏色差值的計算方法

二、What | 什么是 Ant Design ？

Ant Design 是經過螞蟻內部大量中后臺項目實踐總結出的設計規范，提供了完善的設計指引、最佳實踐、設計資源和設計工具，能夠幫助設計者快速產出設計方案。

對于設計師而言，Ant Design 的方法論體系可以歸納為設計價值觀、設計原則和設計模式3個層面。接下來，我們將依次從這3個層面來學習如何使用 Ant Design 。

圖3· Ant Design 設計方法論體系

三、How | 如何學習 Ant Design ？

3.1 設計價值觀

設計價值觀，是判斷設計好壞的內在標準。Ant Design 的設計價值觀包括：自然、確定性、意義感和生長性。

圖4 · Ant Design 的設計價值觀

下面通過語雀設計團隊分享的一個案例來認識Ant Design設計價值觀對于具體設計方案的影響。

在語雀中，要解決用戶找不到“插入圖片”功能的問題，設計師應該如何入手呢？

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

常規的設計思路一般是去強化功能入口，讓用戶主動找到這個功能。但從讓功能更加“自然”的角度出發，正確的做法應當是在用戶需要這個功能時，讓功能找到用戶，避免繼續消耗用戶本就不多的注意力。

Ant Design 總結了9種“自然”的主動交互方式，各位在設計功能時可以依次去排查每種方式實現的可能性。

圖6· AntDesign總結的“自然”交互方式

經過排查，“插入圖片”功能有2種主動交互的方式可以落地實現：

第1種，上下文。用戶想要在文檔中加入圖片的時候，會下意識地將圖片拖入文檔，因為用戶已經在桌面軟件上養成了習慣，系統在這個時候就可以主動讓圖片被插入到文檔中。

第2種，特殊數據結構。由于圖片格式是特定的（比如.jpg、.png等），如果系統識別到用戶復制了圖片格式，那么可以在用戶進入文檔編輯頁面時提示用戶是否要插入這張圖片。

最后，產出方案：

圖7 · 語雀“插入圖片”功能的優化

3.2 設計原則

設計原則，是基于價值觀衍生出的向導或提示，它包含UI設計原則和可視化設計原則。

相對于抽象的設計價值觀，設計原則更加落地和實用，對于初級設計師來說是不錯的避坑指南。由于 Ant Design 官網中已經有足夠多的案例來說明如何使用設計原則，本文就不再贅述。

3.3 設計模式

設計模式是針對B端產品的具體問題，給出的一般性解決方案，它包含設計策略、全局規則、可視化和模板。

3.3.1 設計策略

設計的第一步是要去理解業務以及與用戶共情。

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

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

角色畫像：不同于 C 端的用戶畫像，在以 Job 為中心的視角下，B端產品的角色畫像重點關注的三個維度：角色概覽、工作能力、工作內容。

例如，下圖是一個開發工程師的角色畫像：

圖8 · 開發工程師的角色畫像

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

例如，下圖是一個最簡單的版本迭代，其中可以看到角色之間的協作關系。

圖9· 多角色協作關系圖示

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

3.2.2 全局規則

全局規則通過規范常見的互動行為，如按鈕、導航、數據錄入等，定義了組件元素的標準用法。

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

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

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

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

第3步，為按鈕添加強調。當前任務中，用戶最有可能的，也是我們最希望用戶執行的操作是“提交”，因此加強這個按鈕，讓用戶更快的選擇。

具體的設計過程如下：

圖10· 按鈕設計過程

3.3.3 可視化

可視化是 Ant Design 團隊在數據圖表領域沉淀的方法論，其中最基礎的是各類圖表的用法，它是我們進行可視化設計的第一步。

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

圖11· 常見圖表及用法

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

假如，要對比4種產品的銷量、價格和利潤數據，該怎么用圖表的方式去呈現？

首先，由于是對不同類別的產品進行對比，因此選擇比較類圖表；

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

最后，在氣泡圖中，將銷量、價格對應橫/縱坐標，價格則對應于氣泡面積，實現效果如下：

圖12· 某銷售表格的可視化呈現

3.3.4 模板

模板是基于 Ant Design 團隊以往的設計經驗，總結出的幾類典型頁面的解決方案，包括詳情頁、表單頁、數據可視化頁、工作臺等。

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

假設：要在后臺設計一個商品訂單的詳情頁，該如何進行設計？

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

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

第3步：選擇合適的呈現方式。根據每張卡片的內容信息，使用不同的方式去進行呈現。

具體的設計過程如下：

圖13· 詳情頁設計過程

四、總結

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