前段時間，我在某個設(shè)計師交流群和知乎發(fā)現(xiàn)了同樣的問題：有設(shè)計師根據(jù)目前主流的設(shè)計系統(tǒng)（比如Ant Design等），設(shè)計出了適合自己公司產(chǎn)品的設(shè)計組件庫，但是設(shè)計方案給到前端工程師時，才得知：目前產(chǎn)品的前端框架是基于VUE的，或者更老一點的前端框架，所以現(xiàn)階段使用React的Ant Design設(shè)計系統(tǒng)不合適。

當(dāng)時發(fā)現(xiàn)這個問題之后，就想分享一點我個人在公司建立設(shè)計組件庫的經(jīng)驗，幫助那些要給公司建立設(shè)計組件庫的朋友們。

所以，本文將從「項目思維」的角度，分享如何在公司從0-1建立「設(shè)計組件庫」。

首先，要明確一點：如果我們承擔(dān)起了建立「設(shè)計組件庫」這項工作，則需要將它當(dāng)成一個屬于自己的項目或產(chǎn)品，去規(guī)劃、設(shè)計、開發(fā)、跟蹤。在職場里，資源會向「有想法、有目標(biāo)、有擔(dān)當(dāng)」的員工傾斜。有了這種項目經(jīng)理的認(rèn)知，我想你在建立設(shè)計規(guī)范的道路上成功邁出了第一步。下面是具體的幾個步驟：

- 1 -

明確目標(biāo)和用戶

目標(biāo)：統(tǒng)一產(chǎn)品體驗、提升協(xié)作效率、迭代技術(shù)框架。

所以，能滿足上述目的的設(shè)計組件庫，才是一個真正意義上的設(shè)計組件庫，因為，完整的組件庫不僅僅是Axure元件庫、Sketch Symbol等設(shè)計軟件的組件，而是要深入到開發(fā)層。

簡單點說，我們做的Axure和Sketch組件，工程師需要將它們封裝成代碼層的組件，才能提升從設(shè)計到開發(fā)的協(xié)作效率。相反，如果只是設(shè)計軟件層面的組件，是無法從本質(zhì)上達(dá)到設(shè)計組件庫的目標(biāo)的。

說完目標(biāo)，我想你已經(jīng)知道設(shè)計組件庫的用戶是誰了：設(shè)計師、工程師、甚至產(chǎn)品經(jīng)理。

- 2 -

提前與關(guān)鍵人溝通

關(guān)鍵人1：領(lǐng)導(dǎo)或老板

我們在職場里，只要是自己主動想做一點事，首先必須要獲得領(lǐng)導(dǎo)的認(rèn)同和支持，因為不僅是從上下級關(guān)系的角度，還是人力資源的角度考慮，如果得不到領(lǐng)導(dǎo)的支持，那幾乎是很難搞定一件事情的，畢竟話語權(quán)和資源分配權(quán)在領(lǐng)導(dǎo)手里。

所以，首先要和領(lǐng)導(dǎo)說清楚現(xiàn)階段做設(shè)計組件庫的意義和好處，特別是對部門和他的好處。

當(dāng)然，有時候領(lǐng)導(dǎo)出于對時間、人力成本的考慮，會告訴你目前公司的項目進(jìn)度和團(tuán)隊規(guī)模，還不需要急著做「設(shè)計組件庫」。遇到這種情況，我個人認(rèn)為設(shè)計師也別太勉強了，我們自己先將設(shè)計軟件層面的設(shè)計組件做好，然后和領(lǐng)導(dǎo)說下：雖然現(xiàn)在不做，但希望工程師在開發(fā)過程中留個心，這些組件以后是要形成前端組件庫的。

如果要說服老板答應(yīng)做這件事，思路如下：

1.設(shè)計組件庫能提高協(xié)作效率。具體大家都知道，我不啰嗦了。（這是站在研發(fā)效率和時間成本的角度）

2.設(shè)計組件庫能成為公司的技術(shù)資產(chǎn)，新同事來公司后可以快速調(diào)用和上手，就算有同事離職，也不會對產(chǎn)品的整體體驗造成影響。（這是站在公司招聘成本的角度）

3.設(shè)計組件庫可以讓產(chǎn)品體驗統(tǒng)一，有助于公司建立統(tǒng)一的產(chǎn)品品牌認(rèn)知，方便銷售和運營包裝、運營、策劃產(chǎn)品方案。（這是站在銷售運營部門的角度）

總之，要讓老板覺得：雖然老板可能不知道什么是設(shè)計師組件庫，但聽你這么一說，覺得不做這個是對公司的損失，確實要考慮做。

關(guān)鍵人2：前端工程師

職場里人人都希望被尊重、被提前告知，而不是突如其來的需求，特別是勤勤懇懇、任勞任怨的工程師（大多數(shù)），如果沒有前端工程師，我們的設(shè)計組件庫就是PNG。

所以，在開工前，一定要和那個技術(shù)不錯的前端工程師聊聊做設(shè)計組件庫的事情，其中最重要的是確定好：選擇什么樣的前端框架。

如果組件庫服務(wù)的是B端或者中后臺系統(tǒng)，那其實有很多可參考的開源組件框架：Ant Design、ElemetUI、Layui等，注意不同的框架用到的前端技術(shù)不一樣，兼容的瀏覽器版本也不一樣，這要根據(jù)你們技術(shù)情況作選擇。

如果覺得開源框架的風(fēng)格和你們的產(chǎn)品不統(tǒng)一，那就需要二次設(shè)計和開發(fā)封裝。

關(guān)鍵人3：研發(fā)主管

如果你的領(lǐng)導(dǎo)既管產(chǎn)品設(shè)計，也管研發(fā)，那恭喜你，溝通成本就會很小。如果前端工程師的領(lǐng)導(dǎo)不是你的領(lǐng)導(dǎo)，那最好讓你的領(lǐng)導(dǎo)幫忙去和前端工程師的領(lǐng)導(dǎo)溝通好，畢竟你要用到研發(fā)部門的人力資源。

如果兩個部門領(lǐng)導(dǎo)之間溝通不暢，那問題就比較復(fù)雜了。這時候除非你是設(shè)計Leader，否則我不太建議你去強推設(shè)計組件庫這件事。

關(guān)鍵人4：設(shè)計師、產(chǎn)品經(jīng)理

這里的設(shè)計師指的是需要輸出設(shè)計組件庫設(shè)計稿的設(shè)計師，如果需要其他設(shè)計師的幫助，也是要提前溝通好的，設(shè)計一家親，有了設(shè)計組件庫，大家有福同享嘛。

至于產(chǎn)品經(jīng)理，基本上從他的角度去告知他一下就可以了，產(chǎn)品經(jīng)理比較關(guān)心產(chǎn)品的統(tǒng)一體驗，產(chǎn)品研發(fā)進(jìn)度等，所以有了設(shè)計組件庫，體驗和效率的問題會有效提升。

BTW：如果你一人既會設(shè)計、又會前端、也會前后端聯(lián)調(diào)，那請忽略前2個步驟。

- 3 -

立項啟動

搞定了目標(biāo)、用戶、前端技術(shù)、關(guān)鍵人之后，我們需要把「設(shè)計組件庫」當(dāng)成一個項目去運作，而我們自己就是項目經(jīng)理，帶領(lǐng)關(guān)鍵人從0-1建立設(shè)計組件庫。

在和關(guān)鍵人都溝通確認(rèn)好之后，寫一封項目啟動的郵件，把背景、意義、目標(biāo)、責(zé)任人、相關(guān)資源、里程碑計劃、風(fēng)險等信息寫清楚，這就算把這個項目啟動了。

- 4 -

小步快跑，組織評審

先將常用的組件輸出設(shè)計文檔，然后讓工程師評審確認(rèn)一下。設(shè)計組件可以小步快跑，快速迭代，不要急著一次迭代完。

- 5 -

時刻溝通，關(guān)注進(jìn)度

一般情況下，「設(shè)計組件庫」這項工作的優(yōu)先級應(yīng)該是公司里比較低的，工程師通常會在項目閑暇時間做這件事，所以時刻保持與工程師的溝通，維護(hù)好人際關(guān)系，關(guān)注你的項目進(jìn)度。

- 6 -

應(yīng)用與測試

當(dāng)前端工程師封裝好組件庫后，就可能會應(yīng)用在近期的開發(fā)里，待到測試時，我們自己要記得測試組件庫的可用性。

- 7 -

孵化產(chǎn)品，迭代組件庫

當(dāng)設(shè)計組件庫投入使用后，我們需要時刻關(guān)注組件的適用性和優(yōu)化，已有的組件能否滿足新的業(yè)務(wù)需求等等。就像迭代產(chǎn)品一樣，迭代設(shè)計組件庫。

總結(jié)

01 全鏈路是視角和思維的全鏈路

所謂的全鏈路設(shè)計師，我認(rèn)為是視角和思維上的全鏈路，也就是能站在上下游各角色的角度，審視和推動自己的設(shè)計工作。真正的有實力，是能在有限的資源里，把工作做出色，用小成本實現(xiàn)大價值。

02 做不出來，怎么辦？

如果思路對了、方法對了、盡力溝通了，前端工程師也盡力開發(fā)了，最后因為時間、成本等因素沒做出來，怎么辦？

我想說，其實結(jié)果已經(jīng)不重要了。雖然沒收獲最終成果，但在這過程中收獲了團(tuán)隊的信任、老板的關(guān)注、自己的經(jīng)驗。老板和同事能看到我們的全局思考和工作方式，甚至是領(lǐng)導(dǎo)力。雖然今天沒成，但以后如果有機會，老板可能會第一個想到你。

事實上，實際工作中的情況要比本文描述的復(fù)雜很多。

作者：王晗陵

公眾號：設(shè)計意志

封面圖片來源：Dribbble / Uran