很多前端開發(fā)人員喜歡使用各種UI框架，比如bootstrap，material UI，tailwindcss等，他們希望這可以節(jié)省他們大量的時(shí)間，然而，現(xiàn)實(shí)卻并非如此。

很多時(shí)候，人們會(huì)問我，或者讓我推薦一些UI框架，但是我想說的是，對(duì)于UI框架，沒有萬能的，每個(gè)UI框架都有自身的優(yōu)點(diǎn)和缺點(diǎn)，如果你非要找到一個(gè)萬金油的UI框架，那么我推薦你放棄尋找，自己去構(gòu)建自己的UI框架。

UI框架的優(yōu)點(diǎn)

• 可以提供更流行的，設(shè)計(jì)更好的UI組件
• 最短時(shí)間內(nèi)能提供不錯(cuò)的使用體驗(yàn)
• 豐富的組件可以調(diào)用

流行的設(shè)計(jì)

因?yàn)楹芏嗲岸碎_發(fā)人員沒有設(shè)計(jì)背景，因此他們不想要花費(fèi)很多時(shí)間來學(xué)習(xí)如何設(shè)計(jì)，他們只是想要一個(gè)已經(jīng)設(shè)計(jì)好的UI框架來滿足他們的頁面構(gòu)建需求。

但是，其實(shí)對(duì)于一個(gè)網(wǎng)站，設(shè)計(jì)才是靈魂，如果沒有經(jīng)過自己的精心設(shè)計(jì)，那些看似很精美的網(wǎng)站也會(huì)失去靈魂。

曾經(jīng)有人說過，只有谷歌的開發(fā)者才能讓材料設(shè)計(jì)的應(yīng)用看起來非常漂亮，而第三方開發(fā)者使用材料設(shè)計(jì)開發(fā)出來的應(yīng)用卻慘不忍睹。

雖然UI組件可以給你好看的按鈕，給你好看的日期選擇器，給你提供分頁組件，但是你仍然要學(xué)會(huì)組裝它們，否則一切看起來總是那么地不協(xié)調(diào)。

良好的設(shè)計(jì)有很多無形的方面需要我們注意，比如平衡，間距和一致性之類的東西。要有效地使用組件庫，我們需要將自己融入設(shè)計(jì)師的思維里面，并了解如何部署它們。

另外，無論UI庫設(shè)計(jì)的有多全面，它都將永遠(yuǎn)滿足用戶的所有需求。每個(gè)應(yīng)用程序和網(wǎng)站都是獨(dú)一無二的，總會(huì)有特殊要求。

節(jié)省時(shí)間

很多人選擇UI框架是因?yàn)樗麄冇X得UI框架可以幫助他們節(jié)省時(shí)間。這在很多情況下是非常正確的，但是，有時(shí)候卻并不是。

當(dāng)你選擇Bootstrap或Materiate UI之類的UI框架開發(fā)一個(gè)項(xiàng)目的時(shí)候，的確可以非常迅速地開發(fā)界面，并在最開始的幾天取得了非?？斓牡倪M(jìn)步。 但是隨著時(shí)間的流逝，你將會(huì)慢慢陷入困境。你會(huì)花費(fèi)大量的時(shí)間用來修改組件讓它適應(yīng)你的設(shè)計(jì)。因?yàn)榻M件總是不能滿足你的所有設(shè)計(jì)需求。

我自己曾經(jīng)花了整整一個(gè)下午試圖從CSS框架中修改默認(rèn)的樣式來適應(yīng)我的界面，但是最后我放棄了，因?yàn)槲乙庾R(shí)到我的修改總會(huì)影響到其它組件或者需要修改大量代碼結(jié)構(gòu)。

最后，我決定移除第三方UI組件，然后在很短地時(shí)間內(nèi)我就調(diào)整好了樣式。

編寫自己的樣式庫對(duì)我來說有點(diǎn)像編寫測(cè)試：起初有點(diǎn)慢，但是早期的努力都會(huì)有所回報(bào)。 從長遠(yuǎn)來看，這將節(jié)省大量時(shí)間，精力和挫敗感。

可用性和可訪問性

人們選擇UI框架其實(shí)還有一個(gè)主要原因就是構(gòu)建網(wǎng)站的可用性和可訪問性。

構(gòu)建一種適合鼠標(biāo)用戶，鍵盤用戶和屏幕閱讀器用戶的模態(tài)非常困難。

在可用性和可訪問性方面，UI框架具有自己的特性，通過使用它們的確可以大大減輕工作量。

因此，當(dāng)你的界面需要一些可用性和可訪問性的時(shí)候，我推薦你使用一些UI組件，僅限于此。

總結(jié)

不建議使用UI框架，并不是完全拋棄UI框架，而是在適當(dāng)?shù)臅r(shí)候選擇去使用它們。任何工具都有自己的最適合的場(chǎng)景，如果我們沒有掌握工具的使用方法，就拿來使用的話，我們一定會(huì)犯錯(cuò)誤。

如果你做的界面更多的是后端展示操作界面，那么UI框架將會(huì)是非常適合的選擇，否則對(duì)于設(shè)計(jì)師設(shè)計(jì)的網(wǎng)頁，自己動(dòng)手去寫樣式可能會(huì)更好。