墨刀合作千米網(wǎng)：完成組件庫搭建

573次閱讀

認(rèn)識(shí)墨刀是在三年多前了，之前是產(chǎn)品自己用，來這家公司之后發(fā)現(xiàn)大家用這個(gè)工具協(xié)同，建立文件夾，產(chǎn)品、設(shè)計(jì)、開發(fā)都在墨刀中使用，同一個(gè)項(xiàng)目大家都使用墨刀來進(jìn)行溝通，非常方便，小驚艷。

一個(gè)擁有1328個(gè)組件的完整組件庫是如何搭建和維護(hù)的

作為設(shè)計(jì)師的你，一定對(duì)「組件庫」的概念并不陌生。

簡(jiǎn)單的來說，組件庫就是界面設(shè)計(jì)中常用的控件與元素的組合。或許我們可以將組件庫比作樂高的基礎(chǔ)顆粒，它們看起來很簡(jiǎn)單，也沒什么特別的，卻可以通過設(shè)計(jì)師的巧手搭建出炫酷的城堡。

千米網(wǎng)是中國領(lǐng)先的專業(yè)電商 SaaS 平臺(tái)，主要服務(wù)新零售企業(yè)，產(chǎn)品包含訂貨系統(tǒng)、分銷系統(tǒng)、微商城、門店管理系統(tǒng)等電商解決方案。

電商產(chǎn)品錯(cuò)綜復(fù)雜，產(chǎn)品線之間牽連很深，讓這棵盤根錯(cuò)節(jié)的大樹在面臨大版本迭代時(shí)苦不堪言。

為了保持迭代時(shí)設(shè)計(jì)風(fēng)格統(tǒng)一、設(shè)計(jì)語言一致，并減少溝通成本，同時(shí)減輕產(chǎn)品經(jīng)理原型設(shè)計(jì)的負(fù)擔(dān)，產(chǎn)品架構(gòu)師宋高峰協(xié)助UE組從零到一搭建一套相對(duì)完整的組件庫。

大而全還是小而美？

組件庫究竟應(yīng)該小而美還是大而全？這似乎是一個(gè)兩難的抉擇。

憑借對(duì)業(yè)務(wù)的深入理解和扎實(shí)的產(chǎn)品背景，千米UE組以技術(shù)架構(gòu)為基礎(chǔ)，結(jié)合業(yè)務(wù)特點(diǎn)和產(chǎn)品邏輯，將千米眾多產(chǎn)品線歸納成為5個(gè)組件庫

基礎(chǔ)組件

基礎(chǔ)組件如同積木的最小顆粒，按鈕、下拉框、輸入框等基礎(chǔ)內(nèi)容被歸檔在這里。

通用組件

通用組件就是復(fù)用性很高的一類非行業(yè)性組件，比如登陸注冊(cè)、找回密碼等大部分 App 都有的功能。

核心組件

核心組件是基于行業(yè)來提取的，比如電商常用的購物車、結(jié)算頁面、訂單頁面。

聚合組件

聚合組件更像是多個(gè)導(dǎo)航集合的入口，比如商城的個(gè)人中心頁面。

個(gè)性組件

個(gè)性組件是復(fù)用性較低的部分，比如營銷類活動(dòng)。

在搭建中理解業(yè)務(wù)

基礎(chǔ)框架梳理清楚后，設(shè)計(jì)團(tuán)隊(duì)著手梳理業(yè)務(wù)，搭建組件庫。

通過將具體產(chǎn)品的抽象提取，設(shè)計(jì)師們?cè)诖罱ㄟ^程中更加深了對(duì)業(yè)務(wù)的理解。

UE負(fù)責(zé)人劉甜甜說：“大家都知道，業(yè)內(nèi)很多的UI設(shè)計(jì)師只關(guān)注界面的美丑，而忽略頁面的流程交互。我們用墨刀搭建組件庫，讓我們的設(shè)計(jì)小伙伴們對(duì)頁面的流轉(zhuǎn)更加清晰，避免了一些頁面流程交互的疏漏，在交互上有了更多的提升。”

從某種程度上講，組件庫是對(duì)設(shè)計(jì)師的約束。

配色、圖標(biāo)、按鈕等一系列設(shè)計(jì)語言要素共同構(gòu)成了一套標(biāo)準(zhǔn)化的設(shè)計(jì)體系，限制了基礎(chǔ)設(shè)計(jì)方向，為后期的設(shè)計(jì)決策提供著指引。

通過這些組件的設(shè)計(jì)積累，也避免了多業(yè)務(wù)線多款產(chǎn)品設(shè)計(jì)上的不統(tǒng)一。

從另一個(gè)角度看，組件庫也是對(duì)設(shè)計(jì)師的解放。

過去，在時(shí)間有限的情況下，設(shè)計(jì)師常常會(huì)優(yōu)先基礎(chǔ)層面的表層設(shè)計(jì)，而忽略了業(yè)務(wù)層面的體驗(yàn)優(yōu)化。

有了組件庫后，通過提升設(shè)計(jì)團(tuán)隊(duì)的業(yè)務(wù)認(rèn)知，把組件省下的時(shí)間去觸及業(yè)務(wù)，來更好的為設(shè)計(jì)服務(wù)，讓業(yè)務(wù)和設(shè)計(jì)相輔相承。

團(tuán)隊(duì)協(xié)同時(shí)，組件庫的功用被放大到極致。

組件庫搭建好后，設(shè)計(jì)團(tuán)隊(duì)在墨刀上與產(chǎn)品團(tuán)隊(duì)共享了這套組件庫，將其提供給產(chǎn)品經(jīng)理使用，進(jìn)行原型搭建。

協(xié)同之間，組件庫讓產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)避免了表層展現(xiàn)不同所帶來的理解誤差。

“比如單選項(xiàng)，一般選項(xiàng)少時(shí)我們會(huì)用radio ，選項(xiàng)多時(shí)會(huì)用下拉框選擇，當(dāng)我們定義了組件給到了說明，就相當(dāng)于給到了規(guī)范，定義了規(guī)范，減少了一些不必要的溝通和解釋。包括一些核心組件的信息結(jié)構(gòu)布局，由專業(yè)的設(shè)計(jì)定義，產(chǎn)品直接使用，也提升了產(chǎn)品的效率。”千米UE負(fù)責(zé)人劉甜甜解釋道。

維護(hù)與迭代

迭代分為兩方面，一方面的迭代是基于業(yè)務(wù)，業(yè)務(wù)有變化，組件就需要跟著更新。

另一方面是設(shè)計(jì)本身需要迭代，這是出于視覺優(yōu)化的迭代。

迭代可以基于需要分周期進(jìn)行，舊的版本對(duì)應(yīng)封版作為記錄留存。

在搭建之初，千米UE組就考慮到了后期的維護(hù)和迭代。結(jié)構(gòu)清晰的基礎(chǔ)搭建為后期維護(hù)提供了一個(gè)條理清楚的框架。

對(duì)于日常維護(hù)，UE組為每個(gè)組件庫分配了相應(yīng)的責(zé)任人，讓團(tuán)隊(duì)每個(gè)人只需要關(guān)注自己相關(guān)業(yè)務(wù)的組件庫維護(hù)。而墨刀本身的多人協(xié)同屬性，也讓組件庫的協(xié)同維護(hù)成為可能。