眾所周知，黑帕云這樣的產(chǎn)品幾乎使用了所有類型 B 端的組件。

由于我司設計資源有限，所以在擁有了組件庫、設計師定好了設計規(guī)范之后，作為產(chǎn)品經(jīng)理就直接可以手擼設計稿了。

這是是前面一文《 B 端產(chǎn)品中，一個 Epic 基本功能設計的過程》 提到，作為一個長大了的產(chǎn)品經(jīng)理，有時候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學會自給自足。

這個系列就是作為產(chǎn)品經(jīng)理的我，在這兩年中“自給自足”做設計的的一些總結與發(fā)現(xiàn)。

自給自足的前提是，前面說的組件庫和設計規(guī)范，即擁有一個設計體系（Design System）。

01.什么是設計體系？

關于設計體系的定義和內(nèi)容各家都不同，我找出來了以下案例供參考。

《設計體系：數(shù)字產(chǎn)品設計的系統(tǒng)化方法》

Tilio（一個寫作和筆記應用）聯(lián)合創(chuàng)始人，有十年 UX 設計經(jīng)驗的阿拉·霍爾馬托娃在《設計體系：數(shù)字產(chǎn)品設計的系統(tǒng)化方法》一書中這么定義：

設計體系是為了實現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關聯(lián)的模式和共享實踐。
模式指的是界面中那些重復的要素：用戶流程、交互方式、按鈕、文本框、圖標、配色、排版、文案，等等。
實踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式，尤其是在團隊協(xié)作時做這些事情的方法。

書中將設計體系分成以下幾個部分：

設計目的、設計原則、組件庫、樣式指南，以及用于提高設計師和開發(fā)人員溝通效率的工作流程和實用工具。

整理之后，可以參考下圖：

Salesforce：Lightning Design System

Material Design

可以發(fā)現(xiàn)，以上設計體系無論如何定義概念，都是由設計原則+設計指南+一些基礎的元素（比如 Design Token、Material Foundation、Icons）+組件庫+其他資源工具構成。

形成這些內(nèi)容的目的都是為了給自己產(chǎn)品建立一套保證設計質(zhì)量、提升設計決策、提升溝通效率的“工具包”，從而讓產(chǎn)品形成自己的符合設計原則的風格。

所以設計體系是什么不重要，重要的是如何在遵循設計原則下，能夠高效做出高質(zhì)量的設計。

02.設計原則（Design Principes）

一個開源設計原則和方法的網(wǎng)站 Design Principle 這樣定義設計原則：

Design Principles are a set of considerations that form the basis of any good product.

譯為“設計原則是構成任何好產(chǎn)品的一套基礎考慮因素?！?/p>

比如 Salesforce 的設計原則是：清晰、高效、一致、美觀。并且優(yōu)先級由前到后。

可以理解為 Salesforce 會追求清晰大于高效、一致、美觀，比如在產(chǎn)品設計中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。

這個準則很容易理解，可以推論出 Salesforce 在度量體驗時，將“易用性”放在了第一位，即作為一個 SaaS 產(chǎn)品，不能有任何讓用戶產(chǎn)生疑惑的地方。如果在設計上的美觀而要犧牲清晰，這就是不可取的。

03.組件庫

有了設計原則之后，下一步是需要一個組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經(jīng)封裝好的組件，如 Button、Alert、Toast、Text Input。

關于為什么要組件化，也不多說了，之前看過一篇閱文體驗設計 YUX 的《組件化思維—— 適應并推動業(yè)務及產(chǎn)品變革的設計案例》寫的非常清楚。

接下來我通過 Minecraft 這個游戲來總結了組件庫。

玩過生存模擬類游戲大家都知道，在游戲中會有一些可以靠雙手勞動得來的基礎材料，比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎材料可以合成一些簡單處理過的材料，比如把木頭合成為木板。然后可以再把半成品進一步加工，比如木棍。

在 Minecraft 這個游戲中，如果玩家要制造一個弓箭，需要一個弓和一個箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作，如下圖：

對應在設計組件庫中可以對照查看，一個完整的頁面是可以通過一些元素、控件、組件、大組件組成：

04.適用人群

在系列開始之前，先聲明一下文章的范圍和適用人群。

關于 「B 端設計總結」這一系列，主要是我個人在已有了我們的設計規(guī)范和組件庫后，“自給自足”的情況下探索出來的一些組件使用規(guī)則，更偏向產(chǎn)品經(jīng)理或者交互設計師來參考。

所以系列中不會寫設計規(guī)范，比如說字號、顏色、間距等等這些屬于設計規(guī)范中內(nèi)容。而是基于已有的規(guī)范，總結之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設計指南（Design Guidelines）或者設計模式（Design Patterns）。

05.設計系統(tǒng)參考

1、谷歌Material Design system：https://www.material.io/design

2、Atlassian 設計系統(tǒng)：https://www.atlassian.com/zh/software/confluence/templates/design-system

3、Blueprint：https://blueprintjs.com/docs/

4、愛彼迎設計系統(tǒng)：https://airbnb.design

5、蘋果HIG設計系統(tǒng)：https://developer.apple.com/design/

6、微軟Fluent設計系統(tǒng)：https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html

7、螞蟻金服 Ant design：https://ant.design/components/overview-cn/

8、字節(jié)跳動 Arco design：https://arco.design/

9、京東 LEGAO Design：https://legao.jd.com/

10、騰訊云 Element UI：https://element.eleme.cn/#/zh-CN