UI組件庫提供了各種常見的 UI 元素，比如按鈕、輸入框、菜單等，只需要調(diào)用相應(yīng)的組件并按照需求進(jìn)行配置，就能夠快速構(gòu)建出一個(gè)功能完善的 UI。

雖然市面上有許多不同的UI組件庫可供選擇，但在2023年底也并沒有出現(xiàn)一兩個(gè)明確的解決方案能夠適用于所有情況。因?yàn)椴煌那岸丝蚣埽ɡ鏡eact、Angular、Vue等）都有自己的優(yōu)勢(shì)和適用場(chǎng)景，所以對(duì)應(yīng)的UI組件庫也會(huì)有所不同。

本文就來簡(jiǎn)要概述當(dāng)前前端生態(tài)系統(tǒng)的樣式解決方案，并介紹一些常見和流行的UI庫。

UI 庫概述

CSS 框架和庫歷史

過去，網(wǎng)頁設(shè)計(jì)師需要手寫 CSS 樣式，這是一個(gè)曲折的過程。隨后，出現(xiàn)了一些CSS框架，如Blueprint、960 Grid System、YUI Grids等，它們引入了響應(yīng)式網(wǎng)格和簡(jiǎn)潔的UI元素，改變了網(wǎng)頁設(shè)計(jì)的方式。

然后，像 Twitter Bootstrap、Foundation 和 Bulma 這樣的巨頭出現(xiàn)了。它們提供了快速開發(fā)和一致的樣式，但也導(dǎo)致了一些問題，即網(wǎng)站開始感覺過于相似和統(tǒng)一。

為了解決這個(gè)問題，社區(qū)引入了一些方法論，例如BEM，用于注入獨(dú)特性和模塊化風(fēng)格，以使網(wǎng)頁設(shè)計(jì)更加個(gè)性化和靈活。

總而言之，CSS框架和庫從最初只滿足布局需求，逐漸發(fā)展為提供全面的UI工具包。與此同時(shí)，涌現(xiàn)出更多的方法和技術(shù)，以實(shí)現(xiàn)更定制化和模塊化的樣式。

JavaScript框架改變了規(guī)則

隨著Angular、React和Vue等JavaScript框架的出現(xiàn)，開發(fā)人員需要一種更細(xì)粒度的方法來應(yīng)對(duì)這些新的組件模型。傳統(tǒng)的CSS中最重要的特性之一是層疊，但對(duì)于這些新的框架來說，層疊機(jī)制卻帶來了一些問題。

為了解決這個(gè)問題，出現(xiàn)了一種新的解決方案，即CSS in JS。在React生態(tài)系統(tǒng)中，像Styled Components和Emotion這樣的庫變得非常流行，它們?cè)试S開發(fā)人員將樣式與組件作用域相關(guān)聯(lián)，從而解決了層疊問題。

原子化設(shè)計(jì)

原子化設(shè)計(jì)是一種組件化設(shè)計(jì)方法，由 Brad Frost 提出。它的核心思想是將 UI 元素分解成不同的層次，并將其視為原子、分子和有機(jī)體等不同的組件。

一個(gè)原子代表著最基本的、不可再分的元素，比如按鈕、輸入框等。一個(gè)分子則由多個(gè)原子組合而成，代表了相對(duì)復(fù)雜的組件，例如一個(gè)帶有圖片、文本和按鈕的卡片。而有機(jī)體則由多個(gè)分子組成，代表了更高級(jí)的 UI 元素，比如整個(gè)頁面或應(yīng)用。

通過將 UI 設(shè)計(jì)拆解成組件的層次結(jié)構(gòu)，開發(fā)人員和設(shè)計(jì)師可以更加系統(tǒng)地構(gòu)建和管理 UI。這種方法提倡重用和組合，使得開發(fā)過程更高效，同時(shí)也使得 UI 更容易維護(hù)和擴(kuò)展。

Tailwind CSS 等 CSS 框架采用了原子設(shè)計(jì)理念，提供了一系列的原子級(jí)樣式類，開發(fā)人員可以根據(jù)需要組合這些樣式類來構(gòu)建 UI。這種方式使得樣式的復(fù)用和調(diào)整更加靈活和精確，并且可以減少冗余的樣式代碼。

真的需要 UI 庫嗎？

那我們真的需要一個(gè) UI 組件庫嗎？答案可能是不需要。

在軟件開發(fā)中，很多時(shí)候都需要視情況而定，是否使用 UI 組件庫也用過視情況而定。如果希望能夠快速啟動(dòng)項(xiàng)目并且不需要過多的自定義，那么使用一個(gè)成熟、易用的UI組件庫是一個(gè)不錯(cuò)的選擇。但如果追求獨(dú)特的設(shè)計(jì)和完全自定義的外觀，UI 組件庫可能就不適合你。

UI 庫的分類

UI 庫可以分為以下類型：

• CSS的擴(kuò)展：像Sass、Less、Tailwind和CSS Modules這樣的工具可以幫助開發(fā)者以自定義的方式為網(wǎng)頁添加樣式。它們提供了更強(qiáng)大和靈活的CSS功能，使開發(fā)者能夠更方便地管理和重用樣式。
• 行為庫/無樣式庫：如HeadlessUI、Radix 和 React Aria，它們專注于實(shí)現(xiàn) UI 元素的行為邏輯，而不關(guān)注它們的具體樣式?？梢允褂眠@些庫來處理用戶交互、表單驗(yàn)證、狀態(tài)管理等功能。
• 樣式系統(tǒng)：例如TailwindUI和DaisyUI，它們提供了一套內(nèi)置的樣式和行為模板，使你可以快速構(gòu)建具有統(tǒng)一外觀和行為的 UI?？梢愿鶕?jù)需要選擇和組合這些樣式模板，從而節(jié)省開發(fā)時(shí)間和工作量。
• 組件庫：像MUI、Ant Design和Mantine這樣的組件庫是獨(dú)立的實(shí)體，它們提供了一整套可重用的UI組件，如按鈕、輸入框、表格等。需要學(xué)習(xí)如何正確使用這些組件，并按照它們的文檔和示例進(jìn)行開發(fā)。

什么是好的 UI 庫？

一個(gè)好的UI組件庫關(guān)鍵考慮因素如下：

• 一致性：UI 庫應(yīng)該在整個(gè)應(yīng)用程序中提供一致的UI元素、模式和行為。這有助于用戶快速理解如何使用 UI 庫。
• 靈活性：在保持一致性的同時(shí)，UI 庫也應(yīng)該允許自定義和擴(kuò)展，以適應(yīng)不同應(yīng)用程序的特定需求。模塊化和可自定義的組件是理想的選擇。
• 性能：UI 庫應(yīng)該經(jīng)過性能優(yōu)化。文件大小、渲染速度和效率等因素很重要，尤其是在移動(dòng)設(shè)備上。
• 可訪問性：遵循網(wǎng)絡(luò)可訪問性準(zhǔn)則可以確保UI 庫適用于所有用戶。ARIA角色、語義化的HTML和鍵盤支持等是一些例子。
• 文檔：良好的文檔和示例使UI 庫更容易學(xué)習(xí)和實(shí)施。API參考、樣式指南和代碼示例有助于加速開發(fā)。
• 瀏覽器支持：UI 庫應(yīng)該在現(xiàn)代瀏覽器中正常工作，并在舊版本瀏覽器中逐漸降級(jí)。漸進(jìn)增強(qiáng)原則同樣適用于UI 庫。
• 社區(qū)：UI 庫背后的活躍社區(qū)提供討論論壇、插件和持續(xù)的維護(hù)。這有助于確保長(zhǎng)期可用性。
• 直觀性：UI 庫應(yīng)該與用戶的心智模型和期望相一致。利用自然映射、一致性、標(biāo)準(zhǔn)和熟悉的模式。
• 響應(yīng)式：UI 庫應(yīng)該適應(yīng)不同的屏幕尺寸和輸入方式。以移動(dòng)優(yōu)先和流式布局為最佳實(shí)踐。

總之，一個(gè)好的 UI 庫在保持一致性和靈活性的同時(shí)，還要優(yōu)化性能、可訪問性和設(shè)備支持。出色的文檔、活躍的社區(qū)和直觀的設(shè)計(jì)也非常重要。貫徹使用者體驗(yàn)原則和啟發(fā)式原則有助于確保優(yōu)質(zhì)的結(jié)果。

熱門UI組件庫

React

由于其龐大的生態(tài)系統(tǒng)和普及度，React生態(tài)系統(tǒng)可能擁有最多的 UI 庫。

組件庫

• Material UI：一種基于Google的Material Design設(shè)計(jì)的流行實(shí)現(xiàn)。它提供了大量的組件和主題選項(xiàng)，并且已經(jīng)存在很長(zhǎng)時(shí)間，開發(fā)者需要按照他們的系統(tǒng)進(jìn)行開發(fā)。
• Ant Design：一個(gè)可靠的組件庫選擇，被許多大型公司使用，如騰訊、百度、阿里巴巴等。支持所有現(xiàn)代瀏覽器、服務(wù)端渲染、esm甚至Electron。還有為Angular、Vue等框架提供的社區(qū)實(shí)現(xiàn)。它使用CSS-in-JS，因此可能會(huì)在運(yùn)行時(shí)增加一些額外開銷，還有自己獨(dú)特的開發(fā)方式。
• ChakraUI：強(qiáng)調(diào)可訪問性（A11y），完全符合WAI-ARIA可訪問性標(biāo)準(zhǔn)，獲得了開源獎(jiǎng)項(xiàng)，并有一個(gè)活躍的社區(qū)。它是構(gòu)建可復(fù)用UI的優(yōu)秀選擇，內(nèi)置了hooks，并支持非常好的暗黑模式。這個(gè)團(tuán)隊(duì)還開發(fā)了Zag.js，將UI作為狀態(tài)機(jī)處理。學(xué)習(xí)其API可能需要一些時(shí)間，切換到其他庫可能有一些困難。
• Mantine：另一個(gè)功能齊全的組件庫，具備良好的可訪問性，提供了100多個(gè)組件和hooks。Mantine完全基于TypeScript，可以覆蓋默認(rèn)樣式。你需要學(xué)習(xí)如何使用它的函數(shù)和API來達(dá)到你的目標(biāo)。
• Blueprint：一組用于構(gòu)建桌面端數(shù)據(jù)密集型 UI 的組件。它特別適用于構(gòu)建內(nèi)部工具、儀表板和Electron應(yīng)用程序。Blueprint在這個(gè)列表中是少數(shù)幾個(gè)帶有日期選擇器組件的庫之一。
• NextUI：不要與 React 元框架 Next.js 混淆，這個(gè)庫是使用 Tailwind CSS 構(gòu)建的。它聲稱學(xué)習(xí)曲線很小。主題由tailwind.config.js文件處理，具備良好的可訪問性，并且所有組件都支持暗黑主題。只需使用不同的 Tailwind 類名即可覆蓋樣式。

Headless

• HeadlessUI：它提供了構(gòu)建可訪問組件所需的核心功能，但沒有提供具體的樣式。它專門設(shè)計(jì)用于與Tailwind CSS框架配合使用，但也可以選擇使用其他CSS解決方案。它的目標(biāo)是提供一種靈活的構(gòu)建方式，讓開發(fā)者完全掌控組件的外觀和樣式。
• React Aria：由Adobe團(tuán)隊(duì)開發(fā)的一個(gè)庫，它是一個(gè)完整的 HeadlessUI 解決方案。它不僅處理組件的行為和功能，還關(guān)注組件的可訪問性和國(guó)際化。該庫的API主要由一組鉤子組成，可以使用這些鉤子來構(gòu)建自己的組件。雖然它還處于alpha版本，但它的目標(biāo)是提供開箱即用的預(yù)定義組件。
• RadixUI：以前是一個(gè) HeadlessUI 組件庫，但最近添加了主題和一些樣式。它以其出色的可訪問性和可組合性功能而聞名。使用 RadixUI 時(shí)，所有主題都通過CSS自定義屬性公開，這意味著可以輕松地用自己的CSS樣式覆蓋默認(rèn)樣式。這個(gè)庫的目標(biāo)是提供一種簡(jiǎn)單而強(qiáng)大的方式來構(gòu)建組件，同時(shí)允許自定義和擴(kuò)展其外觀。

混合方法

• ShadCN/UI：它提供了一種不同于其他庫的開發(fā)方法。不需要通過npm安裝組件或整個(gè)庫，而是將代碼直接復(fù)制粘貼到自己的代碼庫中。這樣做的目的是讓開發(fā)者完全擁有組件，并將設(shè)計(jì)和實(shí)現(xiàn)分離。它使用 Tailwind 進(jìn)行構(gòu)建，并提供了一個(gè)CLI工具，可以生成組件代碼并調(diào)整tailwind.config.js文件。
• KumaUI：它使用零運(yùn)行時(shí)CSS-in-JS技術(shù)創(chuàng)建 headless UI組件，提供了很大的靈活性。它在設(shè)計(jì)上受到了其他零運(yùn)行時(shí)CSS-in-JS解決方案（如PandaCSS、Vanilla Extract和Linaria）以及Styled System、ChakraUI和Native Base的啟發(fā)。

Vue

Vue生態(tài)系統(tǒng)中，很多庫的文檔都是用中文而不是英文編寫的。

組件庫

• Quasar：它本身不被視為一個(gè)庫，而更像是一個(gè)框架。它是基于Vue的，但它的理念是可以使用它來創(chuàng)建網(wǎng)站和應(yīng)用，這意味著它使用CLI為Web、移動(dòng)端、桌面端、SPA（單頁應(yīng)用）、SSR（服務(wù)端渲染）等生成不同的輸出。
• Vuetify：聲稱自己是一個(gè)不需要設(shè)計(jì)技能的開源UI庫，擁有精心制作的Vue組件。它像大多數(shù)成熟的組件庫一樣，功能齊全。同樣，需要了解該庫的API，并被“鎖定”到它們的組件組合模型中才能使用。
• Element Plus：正如官網(wǎng)所述，Element Plus是“面向設(shè)計(jì)師和開發(fā)者的基于Vue 3的組件庫”。不確定它與其他庫有何不同，但它提供了相同種類的組件選擇。它擁有超過2萬顆star和每周超過15萬次下載量，這表明它很受歡迎。
• VueMaterial：顧名思義，VueMaterial是Material Design的Vue實(shí)現(xiàn)。文檔簡(jiǎn)單、輕量、響應(yīng)式，具有易于使用的API，聽起來像是一個(gè)完善的組件庫所具備的優(yōu)點(diǎn)。

Angular

Angular 正在經(jīng)歷一種復(fù)興，并且仍有很多公司在使用它。

組件庫

• Angular Material：和其他各種框架的Material實(shí)現(xiàn)一樣。它們都自稱是高質(zhì)量、多功能的。
• PrimeNG：這個(gè)集合中有一個(gè)很好的地方是可以選擇基礎(chǔ)主題?？梢詮钠渌餍械脑O(shè)計(jì)框架（如Material Design、Bootstrap、Soho、Fluent、Nano等）中選擇設(shè)計(jì)選項(xiàng)。這是通過一個(gè)可視化編輯器完成的，它是主題選項(xiàng)的一部分。PrimeNG還提供了一個(gè)Figma UI工具包、現(xiàn)成的模板和一個(gè)SASS API。
• NG Bootstrap：它是Angular與Twitter Bootstrap（4.0）的綁定。但需要注意的是，開發(fā)者需要同時(shí)學(xué)習(xí)庫的API以及掌握Bootstrap的類名的使用方式。

Svelte

Svelte 內(nèi)置了很多處理樣式和動(dòng)畫的功能。對(duì)于樣式，只需在組件文件中使用style標(biāo)簽，并且它的作用域僅限于該組件。此外，Svelte還具有處理緩動(dòng)和彈簧動(dòng)畫的motion模型，這對(duì)開發(fā)體驗(yàn)來說非常棒。

Headless 組件

• Svelte Headless UI：完全移植自React Headless UI，與SvelteKit（Svelte元框架）兼容。

組件庫

• SvelteUI：一個(gè)功能齊全的組件庫，使用TypeScript編寫。它包含了50多個(gè)高度可自定義的組件，涵蓋了在一個(gè)組件庫中常見的布局、操作、輸入和排版等各種元素。
• Smelte：一個(gè)基于Svelte和Tailwind CSS的UI框架，符合Material Design規(guī)范。它提供了一個(gè)Rollup插件，可以在其中定義主題、顏色等樣式。只需要導(dǎo)入庫的CSS，就可以開始使用它了！這個(gè)庫還提供了一些在其他庫中較為少見的組件，例如日期選擇器、導(dǎo)航抽屜和樹視圖。

Solid

SolidJS 是一個(gè)相對(duì)較新的框架，與上述大多數(shù)框架相比存在時(shí)間較短。它是你下一個(gè)項(xiàng)目的一個(gè)可靠選擇。

Headless 組件

• Kobalte：一個(gè)未經(jīng)樣式化的、可訪問的、可組合的UI工具包，用于構(gòu)建設(shè)計(jì)系統(tǒng)基礎(chǔ)。受到AriaKit、RadixUI、React Araia和Zag的啟發(fā)。從官方文檔來看，它看起來很像Radix的實(shí)現(xiàn)。注意：仍處于測(cè)試版。

組件庫

• SUID：SolidJS的MUI移植版本。正如文檔中所說“相同的API，相同的設(shè)計(jì)”，如果來自React并且使用過MUI，這會(huì)讓你感到賓至如歸。同樣的注意事項(xiàng)也適用。它們有一個(gè)很酷的工具，可以將React代碼轉(zhuǎn)換成Solid代碼。
• Solid Bootstrap：顧名思義，這是一個(gè)在SolidJS之上的Bootstrap包裝器。不同之處在于，你需要使用props（例如variant）而不是類來操作大部分內(nèi)容。還有一個(gè)“Core”版本，其中包含了 headless 實(shí)現(xiàn)的組件。

Qwik

作為本文最新的框架，Qwik生態(tài)系統(tǒng)仍然很新。因此，在這里的選項(xiàng)相對(duì)較少。但可以利用React生態(tài)系統(tǒng)在Qwik應(yīng)用中使用組件庫。

Headless 組件

• QwikUI：雖然仍處于測(cè)試版，但QwikUI提供了一個(gè) headless 套件，用于構(gòu)建完全兼容WAI-ARIA組件?，F(xiàn)在的beta版本中有下拉框、標(biāo)簽頁和手風(fēng)琴。他們還制定了提示工具、選擇器和彈出窗口的草案。該團(tuán)隊(duì)還在開發(fā)自己的ShadCN/UI方法，代號(hào)“Fluffy”。

跨框架

最近也出現(xiàn)了一些使用CSS工具鏈構(gòu)建的獨(dú)立庫：

• ArkUI：使用狀態(tài)機(jī)為React、Vue和SolidJS提供 headless 可訪問組件。由Zag.js和Chakra UI的創(chuàng)建者制作，這似乎是這兩項(xiàng)產(chǎn)品之間的折中方案。
• Flowbite：構(gòu)建在Tailwind之上的組件，不僅適用于JavaScript框架，如React、Qwik、Vue、Svelte、Angular和SolidJS；還適用于流行的元框架，如Astro、Next.js、Remix、Nuxt、Meteor；以及非JS框架，如Laravel、Symfony、Ruby on Rails、Pheonix、Django和Flask。

總結(jié)

如上所述，有許多選擇可供我們選擇。選擇正確的解決方案可能會(huì)大大提高工作效率，而錯(cuò)誤的選擇則可能導(dǎo)致一系列問題。

因此，在做出選擇時(shí)要謹(jǐn)慎。希望這篇文章能夠給你一個(gè)清晰的概述，讓你認(rèn)真思考是否需要使用庫，或者是否值得投入精力來開發(fā)自己的解決方案。這不僅關(guān)乎產(chǎn)品團(tuán)隊(duì)，也關(guān)乎用戶的體驗(yàn)。

記住，用戶并不在意你使用的是哪種解決方案。選擇適合項(xiàng)目和需求的解決方案最為重要。

參考：https://www.builder.io/blog/25-plus-ui-component-libraries。