經常使用流行的前端框架

1、Ant Design

網站連接：https://ant.design/index-cn

 

螞蟻金服出品，很是著名的框架。就算你不瞭解前端，也會在公司的項目中多少聽到程序員提及過。目前不少公司都在用，已經很成熟。並且提供了對設計師友好的 Sketch 規範文件，能夠直接拿來用。

Ant Design 是基於 React 開發的，並非傳統的 html。React 起源於 Facebook 的內部項目，如今已經成了一個很流行的開發工具。

理想的項目開發流程是，設計師和程序員一塊兒熟悉 Ant Design 的各類樣式，設計師再也不隨意設計，而是基於框架的基礎樣式進行設計創新。這樣程序員在進行 UI設計稿還原的時候，能極大提升開發效率。

如今不少項目都使用了 Ant Design，一些公司在招聘 UI設計師的時候甚至會寫上：瞭解 Ant Design 規範的優先考慮。因此這個框架建議設計師都好好看一下。

2、Bootstrap

網站連接：http://www.bootcss.com/

Bootstrap 是 Twitter 推出的一個用於前端開發的開源工具包，是一個 CSS/HTML 框架，目前世界上的不少網站開發都使用了這個。其中的柵格理論、響應式解決方案都變成了業界的參考規範。

不少設計師在學前端的時候，都會接觸到這個框架，甚至培訓機構有專門的課程，因此重要性可見一斑。

3、Taro UI

網站連接：https://taro-ui.aotu.io/

Taro UI，一套基於 Taro 框架開發的多端UI組件庫，能夠在微信小程序/H5/ReactNative 等多端適配運行。京東用戶體驗設計部的凹凸實驗室出品。

如今一個產品要求在 iOS、安卓、小程序、h5 等多端運行，針對不一樣的客戶端開發不一樣的代碼會產生巨大的成本，這時候只編寫一套代碼就可以適配到多端的能力就顯得極爲須要。

使用 Taro，就能夠只寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信小程序、H五、RN等）運行的代碼，節約成本。

4、iView

網站連接：https://www.iviewui.com/

一套基於 Vue.js 的高質量 UI組件庫。Vue.js 是一個 JavaScriptMVVM 庫，是一套構建用戶界面的漸進式框架。

在網站中能夠看到數量衆多的 UI組件和對應代碼，本質上和咱們製做 UI規範是同樣的。

5、LuLu UI

網站連接：https://l-ui.com/

LuLu UI，是一個基於 jQuery，針對 PC 網站，兼容 ie八、ie7 的前端 UI 框架，包含不少靜態或動態 UI 組件。對設計師很是友好，只須要簡單的 html、css 知識就能快速上手使用。

區別於 Ant design 面向中後臺開發，LuLu UI 很是適合面向外部用戶的網站開發。會簡單的 HTML 和 jQuery 就能夠上手了，不像一些流行框架，須要較多的學習成本。

6、QMUI

網站連接：https://qmuiteam.com/

QMUI，騰訊出品，分爲 Web、iOS、安卓三個端，都有相應的 dome 下載安裝，設計師能夠下載安卓和 iOS 應用，常常看看裏面的組件，熟悉後，和技術的協做會更有效率。

7、Element

網站連接：http://element-cn.eleme.io/#/zh-CN

餓了麼出品，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫，很適合開發後臺產品。有意思的是裏面的默認圖文數據不少都是食物……

8、Fusion Design

網站連接：https://fusion.design/

阿里推出的一個適合設計、技術共同使用的設計規範框架。基本目的也是爲了讓設計師在一個標準框架內設計界面，同時也提供了 Sketch 插件，讓設計的組件直接轉化爲代碼，技術直接調用。

9、WeUI

網站連接：https://weui.io/

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。

這個小巧的框架提供了微信頁面經常使用的組件，咱們在設計微信風格的項目時，能夠參考使用。

10、Framework 7

網站連接：http://www.framework7.cn/

一個簡單、免費的 HTML 框架，主要用來構建移動端 web 應用，分爲 iOS 和安卓兩種風格。

其自己的結構很是簡單，使用了最基礎的 html、css 和 js 構建，很容易上手使用。也能夠用來做爲原型開發工具，迅速建立一個應用的原型。

總結

此外還有不少其餘的前端框架，以上10個框架其實不須要設計師很是深刻去了解，最基本的要求是設計師對其內容、樣式、組件有個大體的認知便可。在和技術協做的過程當中，知道哪些組件不須要額外設計，哪些組件能夠進行樣式擴展。

就好比設計師去學習前端，並非去代替前端的工做，而是對 UI 界面有個更深層次的認知，設計的同時會考慮到界面的交互性、擴展性、可用性。猶如庖丁解牛，透過表象看到結構本質，提升本身的界面把控能力。