產(chǎn)品人如何做好UI組件庫(kù)競(jìng)品調(diào)研和項(xiàng)目規(guī)劃
在數(shù)字化時(shí)代,UI組件庫(kù)已成為提升設(shè)計(jì)和開發(fā)效率的重要工具。本文將帶你深入了解產(chǎn)品經(jīng)理如何從零開始規(guī)劃和構(gòu)建一個(gè)內(nèi)部UI組件庫(kù)。
最近公司正在籌劃搭建內(nèi)部的UI組件庫(kù)。雖然這主要是設(shè)計(jì)師項(xiàng)目,但作為產(chǎn)品經(jīng)理的我,接到了這個(gè)項(xiàng)目前期規(guī)劃和調(diào)研的工作。一開始接到這個(gè)工作時(shí),其實(shí)有點(diǎn)無(wú)從下手。因?yàn)檫@不是一個(gè)常規(guī)的業(yè)務(wù)項(xiàng)目,看起來(lái)更像是設(shè)計(jì)師和開發(fā)者為了提高效率給自己搭建的工具。但有了這個(gè)任務(wù),我還是抱著摸著石頭過(guò)河的心理,一步一步地去做競(jìng)品調(diào)研和項(xiàng)目規(guī)劃。
一、了解定義
標(biāo)準(zhǔn)定義上來(lái)說(shuō),組件庫(kù)是一套標(biāo)準(zhǔn)化的組件集合,是前端工程師開發(fā)提效不可或缺的工具。完善的內(nèi)部組件庫(kù)對(duì)于設(shè)計(jì)和開發(fā)的工作好處多多,從工作效率上講,能夠提高開發(fā)效率、保證UI一致性,從團(tuán)隊(duì)角度上,又能促進(jìn)團(tuán)隊(duì)協(xié)作、降低維護(hù)成本、積累組織的知識(shí)資產(chǎn)。
組件庫(kù)一般有兩種,一種是基礎(chǔ)組件庫(kù),是基礎(chǔ)單個(gè)組件的集合,適用于需要自定義和靈活性的項(xiàng)目;還有一種是高級(jí)組件庫(kù),是完整的前端業(yè)務(wù)頁(yè)面,適用于需要快速搭建和標(biāo)準(zhǔn)化的企業(yè)級(jí)項(xiàng)目。大多公司都搭建了這兩種組件庫(kù),例如阿里有ant design、ant design pro,字節(jié)有Arco design和Arco Pro。
二、競(jìng)品調(diào)研
對(duì)于產(chǎn)品經(jīng)理而言,更熟悉的是Axure元件庫(kù),而對(duì)于UI組件庫(kù)是有點(diǎn)陌生的。為了更進(jìn)一步了解什么是UI組件庫(kù),我第一步是開展了競(jìng)品調(diào)研。調(diào)研活動(dòng)主要是針對(duì)市面上的大廠組件庫(kù),梳理下來(lái),最終選擇餓了么、阿里、騰訊、字節(jié)這四家公司的組件庫(kù)進(jìn)行逐個(gè)分析。不過(guò)由于競(jìng)品調(diào)研主要是偏重設(shè)計(jì),所以在分析時(shí)主要集中在項(xiàng)目、頁(yè)面、模塊等重點(diǎn),不涉及組件中技術(shù)相關(guān)的功能。
1. 餓了么——element、element+
餓了么的組件庫(kù)算是我關(guān)注時(shí)間比較長(zhǎng)的組件庫(kù)了。剛工作的時(shí)候就靠它來(lái)提高自己的原型水平。一開始它只有element一個(gè)組件庫(kù),后來(lái)又進(jìn)行迭代,增加了element+。
據(jù)官方說(shuō)法,Element UI和Element Plus都是基于Vue的UI組件庫(kù),在移動(dòng)端的支持、框架兼容性、組件設(shè)計(jì)、性能以及兼容性等方面,Element Plus都有很大進(jìn)步。
element組件庫(kù)算是比較簡(jiǎn)單的,主要包括指南、組件、主題、資源這四個(gè)模塊。指南中包括了設(shè)計(jì)原則、導(dǎo)航等全局內(nèi)容;組件中則包括了開發(fā)指南和組件;主題中可以查看官方主題,也能自定義我的主題;最后還在資源中給產(chǎn)品經(jīng)理和設(shè)計(jì)師提供了元件資源。
它的組件算是比較豐富的,大致通用的類型,豐富的組件元素,包含基礎(chǔ)、表格、數(shù)據(jù)、提示等。對(duì)于設(shè)計(jì)和產(chǎn)品來(lái)說(shuō),是值得學(xué)習(xí)和使用的一個(gè)組件庫(kù)。
撇除技術(shù)角度,從組件的角度看,Element Plus的組件更豐富,并且引進(jìn)了一些新組件。
但從觀感上來(lái)看,element只展示組件,plus則會(huì)有組件和代碼混合的情況,有時(shí)候會(huì)比較影響閱讀體驗(yàn)。
2. 阿里——ant design、ant design pro
阿里的組件庫(kù)也是我關(guān)注時(shí)間比較長(zhǎng)的,而且相比餓了么組件庫(kù),它在產(chǎn)品經(jīng)理中更廣為人知,并且它的Axure 元件庫(kù)使用的人也更多。
從官網(wǎng)上看,阿里的組件庫(kù)有很多,除了常見的ant design和ant design pro,還有Ant Design X、Ant Design Mobile、Ant Design Web3等或迭代版本細(xì)分、或客戶端細(xì)分而衍生的新產(chǎn)品。
為了分析方便,我在這只分析最典型的兩套組件庫(kù):ant design和ant design pro。Ant Design是一個(gè)UI組件庫(kù),適用于需要自定義和靈活性的項(xiàng)目。而Ant Design Pro則是一個(gè)完整的前端解決方案,適用于需要快速搭建和標(biāo)準(zhǔn)化的企業(yè)級(jí)項(xiàng)目。
ant design的主要模塊有設(shè)計(jì)、研發(fā)、組件、博客、資源等。可以看出,ant design對(duì)于設(shè)計(jì)價(jià)值觀、原則的闡述比較多。
對(duì)于組件展示上,也從何時(shí)使用、代碼展示、API、主題變量、FAQ、設(shè)計(jì)指引進(jìn)行闡述,整體上滿足了設(shè)計(jì)師和開發(fā)者的需求。
如果用樂高來(lái)形容組件庫(kù),那么ant design就像是樂高小顆粒件,或者是兩三塊顆粒的拼接品。而ant design pro就像是樂高成品,可以直接進(jìn)行展示。
pro主要有儀表盤、表單頁(yè)、列表頁(yè)、詳情頁(yè)、結(jié)果頁(yè)、異常頁(yè)、個(gè)人頁(yè)等后臺(tái)管理系統(tǒng)較通用的頁(yè)面。不管是對(duì)于設(shè)計(jì)還是產(chǎn)品,pro都是很好的學(xué)習(xí)和提效工具。
3. 字節(jié)——Arco design、Arco Pro
餓了么和阿里的組件庫(kù)是我關(guān)注時(shí)間比較長(zhǎng)的,也比較熟悉。而在搜集各個(gè)大廠組件庫(kù)的時(shí)候,發(fā)現(xiàn)字節(jié)也做了自己的組件庫(kù)。和其他組件庫(kù)類似,arco design也主要包括設(shè)計(jì)、開發(fā)、生態(tài)產(chǎn)品等模塊。在官網(wǎng)頁(yè)面上,就能便捷地找到設(shè)計(jì)和開發(fā)資源。
從頁(yè)面框架中來(lái)看,該組件庫(kù)還是很注重設(shè)計(jì)師和開發(fā)者的需求。設(shè)計(jì)指南中詳細(xì)介紹了設(shè)計(jì)價(jià)值觀、原則、樣式指南,闡述了該組件庫(kù)的設(shè)計(jì)出發(fā)點(diǎn)。此外,還展示了組件使用方法,拓展了組件的內(nèi)容和樣式。
組件庫(kù)的類型雖然大差不差,主要也是通用、布局、數(shù)據(jù)展示、導(dǎo)航、反饋等內(nèi)容。但展示的組件很豐富全面、樣式比較清爽。此外還展示每個(gè)組件的不同狀態(tài)和樣式,頁(yè)面?zhèn)冗呌袑?dǎo)航欄,支持快捷錨定,一目了然、操作便捷。
arco pro和ant design pro類似,是官方的中后臺(tái)典型頁(yè)面,包含工作臺(tái)、列表、數(shù)據(jù)可視化、詳情頁(yè)等20+主要場(chǎng)景頁(yè)面。雖然頁(yè)面類型差不多,但是頁(yè)面風(fēng)格還是有些不一樣。對(duì)于產(chǎn)品和設(shè)計(jì)來(lái)說(shuō),也同樣是很好的學(xué)習(xí)案例。
除了arco design和arco pro,還發(fā)現(xiàn)字節(jié)有一個(gè)Semi Design組件庫(kù)。官方介紹這是抖音前端團(tuán)隊(duì),MED 產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)、開發(fā)并維護(hù)的設(shè)計(jì)系統(tǒng)。整體看下來(lái),組件的設(shè)計(jì)思路、使用場(chǎng)景、組件解構(gòu)闡述的比較詳細(xì),適合產(chǎn)品、設(shè)計(jì)學(xué)習(xí)。在這就不多做介紹了,有感興趣的小伙伴可以自行搜索查看。
4. 騰訊——Tdesign、Tdesign starter
騰訊組件庫(kù)也是在調(diào)研過(guò)程中發(fā)現(xiàn)的。它的組件庫(kù)類型也和阿里比較類似,Tdesign是基礎(chǔ)組件庫(kù),Tdesign starter是頁(yè)面集成方案。騰訊組件庫(kù)種類挺多的,桌面端、客戶端,還根據(jù)自身業(yè)務(wù)搭建了微信小程序組件庫(kù)和QQ小程序組件庫(kù)。就算是Tdesign starter也區(qū)分了web端和移動(dòng)端,雖然移動(dòng)端還在規(guī)劃中,但至少是考慮到了移動(dòng)端管理系統(tǒng)的場(chǎng)景。
我覺得騰訊組件庫(kù)和字節(jié)組件庫(kù)都有一個(gè)比較好的點(diǎn),就是所有的組件庫(kù)都集成展示在官網(wǎng)上了,不用費(fèi)心去找不同的庫(kù)和入口。
組件類型其實(shí)都大差不差了,都是很同質(zhì)的全局、基礎(chǔ)、布局、輸入、導(dǎo)航等,就不贅述了。
從組件展示上來(lái)看, 組件庫(kù)中示例、API、指南都在同一頁(yè)面,可讀性較好。同時(shí)還針對(duì)組件提供了何時(shí)使用、推薦/慎用示例,也是比較好的學(xué)習(xí)資料。
Tdesign starter 的頁(yè)面類型相比其他組件庫(kù)更細(xì)化一些,頁(yè)面風(fēng)格也略有差別。還是那句話,對(duì)于產(chǎn)品和設(shè)計(jì)來(lái)說(shuō),也同樣是很好的學(xué)習(xí)案例。
不過(guò)騰訊組件庫(kù)有一個(gè)比較有趣的點(diǎn),它的底部提供了更換主題的操作入口,可以針對(duì)整個(gè)組件庫(kù)進(jìn)行更換顏色、字體、圓角、陰影、尺寸之類的。產(chǎn)品和設(shè)計(jì)師可以根據(jù)自己公司的特性進(jìn)行調(diào)整,看看該組件庫(kù)是否適合本公司使用。
三、組件庫(kù)規(guī)劃
通過(guò)對(duì)各大公司組件庫(kù)頁(yè)面框架梳理和組件的梳理,大致確定了如果搭建一個(gè)公司內(nèi)部組件庫(kù)的一些框架和組件類型。
整體看下來(lái),頁(yè)面支持文檔搜索、組件查看、模式調(diào)整、資源下載等幾塊內(nèi)容。同時(shí)在組件中展示設(shè)計(jì)指南、全局樣式、基礎(chǔ)組件、業(yè)務(wù)組件、高級(jí)組件等內(nèi)容。
組件類型主要分為3個(gè)類型:基礎(chǔ)組件是系統(tǒng)中所需的基礎(chǔ)單個(gè)元件;業(yè)務(wù)組件是基于公司業(yè)務(wù)情況,形成具有特定業(yè)務(wù)邏輯的組件或模塊;而高級(jí)組件則是形成公司后臺(tái)系統(tǒng)常用頁(yè)面,做到開箱即用。
四、項(xiàng)目規(guī)劃
初步搭建完組件庫(kù)框架后,接下來(lái)就是進(jìn)行項(xiàng)目規(guī)劃。這個(gè)其實(shí)用常規(guī)項(xiàng)目的規(guī)劃思路也可以。我將組件庫(kù)項(xiàng)目分為五個(gè)階段:項(xiàng)目籌備與啟動(dòng)、組件設(shè)計(jì)、組件開發(fā)、測(cè)試優(yōu)化、發(fā)布推廣。
項(xiàng)目籌備與啟動(dòng)過(guò)程,主要是進(jìn)行競(jìng)品調(diào)研、開發(fā)和設(shè)計(jì)分別進(jìn)行組件整理、項(xiàng)目啟動(dòng)等工作。
接下來(lái)就是組件設(shè)計(jì)、組件開發(fā)、測(cè)試優(yōu)化、發(fā)布推廣。在這個(gè)組件設(shè)計(jì)和組件開發(fā)過(guò)程中,要預(yù)留設(shè)計(jì)和開發(fā)溝通的時(shí)間。測(cè)試優(yōu)化時(shí),可讓設(shè)計(jì)進(jìn)行分批驗(yàn)收。這樣避免項(xiàng)目中出現(xiàn)太大的問題。
此圖表僅為示例,不是真實(shí)的項(xiàng)目排期
五、總結(jié)
最初接到這個(gè)任務(wù)時(shí),是有點(diǎn)陌生且局促的。但是在這個(gè)過(guò)程中,慢慢增進(jìn)了對(duì)組件庫(kù)的了解,看到了很多大廠的設(shè)計(jì)實(shí)力,也給自己找到了很多產(chǎn)品設(shè)計(jì)相關(guān)的學(xué)習(xí)資料。路漫漫其修遠(yuǎn)兮,后續(xù)慢慢多看多學(xué)多求索吧~!
專欄作家
異彩,微信公眾號(hào):一只蝸牛慢慢跑,人人都是產(chǎn)品經(jīng)理專欄作家。從事房產(chǎn)管理系統(tǒng)的產(chǎn)品工作,關(guān)注To C產(chǎn)品的交互設(shè)計(jì)、運(yùn)營(yíng)、結(jié)構(gòu)設(shè)計(jì)和商業(yè)模式。在成為一名優(yōu)秀的產(chǎn)品人的路上努力前行。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒評(píng)論,等你發(fā)揮!