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

在數字化時代，UI組件庫已成為提升設計和開發效率的重要工具。本文將帶你深入了解產品經理如何從零開始規劃和構建一個內部UI組件庫。

最近公司正在籌劃搭建內部的UI組件庫。雖然這主要是設計師項目，但作為產品經理的我，接到了這個項目前期規劃和調研的工作。一開始接到這個工作時，其實有點無從下手。因為這不是一個常規的業務項目，看起來更像是設計師和開發者為了提高效率給自己搭建的工具。但有了這個任務，我還是抱著摸著石頭過河的心理，一步一步地去做競品調研和項目規劃。

一、了解定義

標準定義上來說，組件庫是一套標準化的組件集合，是前端工程師開發提效不可或缺的工具。完善的內部組件庫對于設計和開發的工作好處多多，從工作效率上講，能夠提高開發效率、保證UI一致性，從團隊角度上，又能促進團隊協作、降低維護成本、積累組織的知識資產。

組件庫一般有兩種，一種是基礎組件庫，是基礎單個組件的集合，適用于需要自定義和靈活性的項目；還有一種是高級組件庫，是完整的前端業務頁面，適用于需要快速搭建和標準化的企業級項目。大多公司都搭建了這兩種組件庫，例如阿里有ant design、ant design pro，字節有Arco design和Arco Pro。

二、競品調研

對于產品經理而言，更熟悉的是Axure元件庫，而對于UI組件庫是有點陌生的。為了更進一步了解什么是UI組件庫，我第一步是開展了競品調研。調研活動主要是針對市面上的大廠組件庫，梳理下來，最終選擇餓了么、阿里、騰訊、字節這四家公司的組件庫進行逐個分析。不過由于競品調研主要是偏重設計，所以在分析時主要集中在項目、頁面、模塊等重點，不涉及組件中技術相關的功能。

1. 餓了么——element、element+

餓了么的組件庫算是我關注時間比較長的組件庫了。剛工作的時候就靠它來提高自己的原型水平。一開始它只有element一個組件庫，后來又進行迭代，增加了element+。

據官方說法，Element UI和Element Plus都是基于Vue的UI組件庫，在移動端的支持、框架兼容性、組件設計、性能以及兼容性等方面，Element Plus都有很大進步。

element組件庫算是比較簡單的，主要包括指南、組件、主題、資源這四個模塊。指南中包括了設計原則、導航等全局內容；組件中則包括了開發指南和組件；主題中可以查看官方主題，也能自定義我的主題；最后還在資源中給產品經理和設計師提供了元件資源。

它的組件算是比較豐富的，大致通用的類型，豐富的組件元素，包含基礎、表格、數據、提示等。對于設計和產品來說，是值得學習和使用的一個組件庫。

撇除技術角度，從組件的角度看，Element Plus的組件更豐富，并且引進了一些新組件。

但從觀感上來看，element只展示組件，plus則會有組件和代碼混合的情況，有時候會比較影響閱讀體驗。

2. 阿里——ant design、ant design pro

阿里的組件庫也是我關注時間比較長的，而且相比餓了么組件庫，它在產品經理中更廣為人知，并且它的Axure 元件庫使用的人也更多。

從官網上看，阿里的組件庫有很多，除了常見的ant design和ant design pro，還有Ant Design X、Ant Design Mobile、Ant Design Web3等或迭代版本細分、或客戶端細分而衍生的新產品。

為了分析方便，我在這只分析最典型的兩套組件庫：ant design和ant design pro。Ant Design是一個UI組件庫，適用于需要自定義和靈活性的項目。而Ant Design Pro則是一個完整的前端解決方案，適用于需要快速搭建和標準化的企業級項目。

ant design的主要模塊有設計、研發、組件、博客、資源等?？梢钥闯?，ant design對于設計價值觀、原則的闡述比較多。

對于組件展示上，也從何時使用、代碼展示、API、主題變量、FAQ、設計指引進行闡述，整體上滿足了設計師和開發者的需求。

如果用樂高來形容組件庫，那么ant design就像是樂高小顆粒件，或者是兩三塊顆粒的拼接品。而ant design pro就像是樂高成品，可以直接進行展示。

pro主要有儀表盤、表單頁、列表頁、詳情頁、結果頁、異常頁、個人頁等后臺管理系統較通用的頁面。不管是對于設計還是產品，pro都是很好的學習和提效工具。

3. 字節——Arco design、Arco Pro

餓了么和阿里的組件庫是我關注時間比較長的，也比較熟悉。而在搜集各個大廠組件庫的時候，發現字節也做了自己的組件庫。和其他組件庫類似，arco design也主要包括設計、開發、生態產品等模塊。在官網頁面上，就能便捷地找到設計和開發資源。

從頁面框架中來看，該組件庫還是很注重設計師和開發者的需求。設計指南中詳細介紹了設計價值觀、原則、樣式指南，闡述了該組件庫的設計出發點。此外，還展示了組件使用方法，拓展了組件的內容和樣式。

組件庫的類型雖然大差不差，主要也是通用、布局、數據展示、導航、反饋等內容。但展示的組件很豐富全面、樣式比較清爽。此外還展示每個組件的不同狀態和樣式，頁面側邊有導航欄，支持快捷錨定，一目了然、操作便捷。

arco pro和ant design pro類似，是官方的中后臺典型頁面，包含工作臺、列表、數據可視化、詳情頁等20+主要場景頁面。雖然頁面類型差不多，但是頁面風格還是有些不一樣。對于產品和設計來說，也同樣是很好的學習案例。

除了arco design和arco pro，還發現字節有一個Semi Design組件庫。官方介紹這是抖音前端團隊，MED 產品設計團隊設計、開發并維護的設計系統。整體看下來，組件的設計思路、使用場景、組件解構闡述的比較詳細，適合產品、設計學習。在這就不多做介紹了，有感興趣的小伙伴可以自行搜索查看。

4. 騰訊——Tdesign、Tdesign starter

騰訊組件庫也是在調研過程中發現的。它的組件庫類型也和阿里比較類似，Tdesign是基礎組件庫，Tdesign starter是頁面集成方案。騰訊組件庫種類挺多的，桌面端、客戶端，還根據自身業務搭建了微信小程序組件庫和QQ小程序組件庫。就算是Tdesign starter也區分了web端和移動端，雖然移動端還在規劃中，但至少是考慮到了移動端管理系統的場景。

我覺得騰訊組件庫和字節組件庫都有一個比較好的點，就是所有的組件庫都集成展示在官網上了，不用費心去找不同的庫和入口。

組件類型其實都大差不差了，都是很同質的全局、基礎、布局、輸入、導航等，就不贅述了。

從組件展示上來看， 組件庫中示例、API、指南都在同一頁面，可讀性較好。同時還針對組件提供了何時使用、推薦/慎用示例，也是比較好的學習資料。

Tdesign starter 的頁面類型相比其他組件庫更細化一些，頁面風格也略有差別。還是那句話，對于產品和設計來說，也同樣是很好的學習案例。

不過騰訊組件庫有一個比較有趣的點，它的底部提供了更換主題的操作入口，可以針對整個組件庫進行更換顏色、字體、圓角、陰影、尺寸之類的。產品和設計師可以根據自己公司的特性進行調整，看看該組件庫是否適合本公司使用。

三、組件庫規劃

通過對各大公司組件庫頁面框架梳理和組件的梳理，大致確定了如果搭建一個公司內部組件庫的一些框架和組件類型。

整體看下來，頁面支持文檔搜索、組件查看、模式調整、資源下載等幾塊內容。同時在組件中展示設計指南、全局樣式、基礎組件、業務組件、高級組件等內容。

組件類型主要分為3個類型：基礎組件是系統中所需的基礎單個元件；業務組件是基于公司業務情況，形成具有特定業務邏輯的組件或模塊；而高級組件則是形成公司后臺系統常用頁面，做到開箱即用。

四、項目規劃

初步搭建完組件庫框架后，接下來就是進行項目規劃。這個其實用常規項目的規劃思路也可以。我將組件庫項目分為五個階段：項目籌備與啟動、組件設計、組件開發、測試優化、發布推廣。

項目籌備與啟動過程，主要是進行競品調研、開發和設計分別進行組件整理、項目啟動等工作。

接下來就是組件設計、組件開發、測試優化、發布推廣。在這個組件設計和組件開發過程中，要預留設計和開發溝通的時間。測試優化時，可讓設計進行分批驗收。這樣避免項目中出現太大的問題。

此圖表僅為示例，不是真實的項目排期

五、總結

最初接到這個任務時，是有點陌生且局促的。但是在這個過程中，慢慢增進了對組件庫的了解，看到了很多大廠的設計實力，也給自己找到了很多產品設計相關的學習資料。路漫漫其修遠兮，后續慢慢多看多學多求索吧~！