UI選擇務必慎重,貨比三家。
弱水三千只取一瓢:弱水三千只取一瓢,源起佛經中的一則故事,警醒人們在一生中可能會遇到很多美好的東西,但只要用心好好把握住其中的一樣就足夠了
老牌構建於jQuery框架之上的UI外, 新銳UI派系:
- 基於Vue: ELementUI, iViewui
- 基於React: AntDesign, Amaze UI React
根據GitHub、前端社區、掘金等平台對當前流行的前端UI框架的進行了小小的整理和匯總(ps:前端UI框架的應用是通過GitHub star數,社區熱度和使用范圍等進行的粗略的匯總【不分先后】)。希望對尋找UI框架的小伙伴們提供點幫助。
以下對前端UI框架的移動端、PC端和混合APP的應用進行了列舉。
移動端UI框架
Mint UI(餓了么團隊)
中文官網:mint-ui.github.io/#!/zh-cn
描述:基於vue的移動端UI框架
組件庫:
GitHub地址:github.com/ElemeFE/min…
star:8705,fork:1810
預覽:
SUI Mobile(阿里巴巴共享業務事業部UED團隊)
描述:一套基於 Framework7 開發的UI庫。基於IOS風格。它非常輕量、精美,只需要引入CDN文件就可以使用,
並且能兼容到 iOS 6.0+ 和 Android 4.0+,非常適合開發跨平台Web App。
基於zepto
IOS風格
預覽:
組件庫:
GitHub地址:github.com/sdc-alibaba…
star:5242,fork:1466
Weui(微信官方設計團隊)
描述:WeUI 為微信 Web 服務量身設計,是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,可以令用戶的使用感知更加統一。
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub地址:github.com/weui/weui
star:16804,fork:4683
latest commit 2017.11.2 8pm
20 contributors
預覽:
UI組件
JS組件
YDUI Touch
描述:一只注重審美,且性能高效的移動端&微信UI。
基於jQuery
兼容性:
兼容絕大多數移動端設備(兼容Android4.0+、IOS6.0+);
采用 flexbox 布局,因低版本安卓及部分特殊瀏覽器不兼容flex-basis、flex-wrap、inline-flex屬性,YDUI 將采取其他解決方案;
組件庫:
預覽:
GitHub地址: github.com/ydcss/ydui
star:420,fork:117
個人觀點:自定義keyBoard插件為亮點
GMU(百度GMU小組開發)
描述:基於zepto的輕量級mobile UI組件庫,符合jquery ui使用規范,提供webapp、pad端簡單易用的UI組件。
兼容iOS3+ / android2.1+,支持國內主流移動端瀏覽器,如safari, chrome, UC, qq等。
GitHub地址:github.com/fex-team/GM…
star:1106,fork:461
FrozenUI(QQVIP FD團隊• Alloyteam團隊)
官方地址:frozenui.github.io/
描述:簡單易用,輕量快捷,為移動端服務的前端框架。基於手Q樣式規范。應用在騰訊手Q增值業務。
兼容android 2.3 +,ios 4.0 + 。
GitHub地址:github.com/frozenui/fr…
star:2330,fork:645
Foundation
中文官網:www.foundcss.com/
描述:Foundation是國外最流行的 HTML、CSS 和 JS 框架,用於開發響應式布局、移動設備優先的 WEB 項目。
GitHub地址:github.com/zurb/founda…
star:26751,fork:5751
觀點:無很多中文官方文檔,不便於中國開發者
Amaze UI
官方地址:amazeui.org/
描述:中國首個開源 HTML5 跨屏前端框架。Amaze UI 關注中文排版,根據用戶代理調整字體,
實現更好的中文排版效果。
基於jQuery
GitHub:github.com/amazeui/ama…
star:10949,fork:2397
組件庫:
觀點:適合PC端更多(例如分頁的實現)
Pure
中文官網:www.purecss.cn/
描述:純CSS
美國雅虎公司出品的一組輕量級、響應式純css模塊,適用於任何Web項目。
GitHub:github.com/yahoo/pure/
star:17880,fork:1969
PC 端 UI框架
iView
官網地址:www.iviewui.com/
描述:一套基於 Vue.js 的高質量 UI 組件庫。iView 是一套基於 Vue.js 的開源 UI 組件庫,主要服務於 PC 界面的中后台產品。
GitHub地址:github.com/iview/iview
star:11421,fork:1745
組件庫:
Element UI(餓了么團隊)
官方地址:element-cn.eleme.io/#/zh-CN
描述:基於 Vue 2.0 的桌面端組件庫
GitHub:github.com/ElemeFE/ele…
star:20657,fork:3777
組件庫:
SUI(阿里巴巴國際UED團隊-商家業務事業部)
官網地址:sui.taobao.org/
描述:一套基於bootstrap開發的前端組件庫,同時也是一套設計規范。
基於jquery
組件庫:
GitHub:github.com/sdc-alibaba…
star:322,fork:135
觀點:偏向設計規范,組件庫相對簡單。
H-ui
官方地址:www.h-ui.net/
描述:輕量級前端框架,簡單免費,兼容性好,服務中國網站。
基於jQuery
GitHub地址:github.com/jackying/h-…
star:432,fork:196
組件庫:
觀點:無亮點,借鑒第三方插件完成
layui
官方地址:www.layui.com/
描述:更多是為服務端程序員量身定做,你無需涉足各種前端工具的復雜配置,只需面對瀏覽器本身,
讓一切你所需要的元素與交互,從這里信手拈來。
layui 兼容人類正在使用的全部瀏覽器(IE6/7除外),可作為 PC 端后台系統與前台界面的速成開發方案。
經典模塊化前端框架
組件庫:
GitHub:github.com/sentsin/lay…
star:10278,fork:2909
uiKit(YOOtheme 團隊)
官網地址:www.getuikit.net/
描述:一款輕量級、模塊化的前端框架,可快速構建強大的web前端界面。
UIkit 兼容 IE9 以上現代瀏覽器。在 IE8 及其以下版本中,所有JavaScript 都會失效。
依賴jQuery
組件庫:
GitHub地址:github.com/uikit/uikit
star:11146,fork:1811
Bootstrap
中文官網:www.bootcss.com/
描述:簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。
組件庫
GitHub地址: github.com/twbs/bootst…
star:118971,fork:56198
其他基於bootstrap衍生出來的模塊:
Ace Admin后台管理系統模板:基於bootstrap3;ace.jeka.by/
Metronic后台管理模板:www.metronic.com/
H+:www.zi-han.net/theme/hplus…
jQuery UI+Bootstrap:github.com/jquery-ui-b…
jQuery UI
官方網址:jqueryui.com/
組件庫:
其他基於jQuery衍生出來的模板:
BUI:基於jQuery+KISSY UI: www.builive.com/
EasyUI::www.jeasyui.net/
描述:使用easyui你不需要寫很多代碼,你只需要通過編寫一些簡單HTML標記,就可以定義用戶界面。
DWZ JUI:jui.org/
混合開發 UI框架
ionic
中文官網網址:www.ionic-china.com/
基於angular
描述:ionic是一個強大的 HTML5應用程序開發框架(HTML5 Hybrid Mobile App Framework)。
ionic 主要關注外觀和體驗,以及和你的應用程序的 UI 交互,特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫,具有速度快,界面現代化、美觀等特點。
Framework7
官網地址:framework7.cn/
描述:Framework7 是一個開源免費的框架可以用來開發混合移動應用(原生和HTML混合)或者開發 iOS & Android 風格的WEB APP。
也可以用來作為原型開發工具,可以迅速創建一個應用的原型。
她只專注於為 iOS 和 Google Material 設計提供最好的體驗。
GitHub:github.com/framework7i…
star:11304,fork:2439
OnsenUI
官網地址:onsen.io/
描述:用來構建混合移動端APP的 HTML5 UI 框架
GitHub地址:github.com/OnsenUI/Ons…
star:5706,fork:716
APP 框架(拓展)
react-native
中文官網地址:reactnative.cn/
描述:React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗,構建世界一流的原生APP。
React Native着力於提高多平台開發的開發效率 —— 僅需學習一次,編寫任何平台。(Learn once, write anywhere)
GitHub地址:github.com/facebook/re…
star:56938,fork:13206
weex
官網地址:weex.apache.org/cn/
描述:Weex 提供強大的跨平台能力,可以使用相同的 API 開發 Web,Android 和 iOS 應用。
同時,我們對接口了豐富的擴展能力。
更多
更多基於vue的UI框架:
更多基於bootstrap的UI框架:
更多基於React的UI框架:
更多基於Angular的UI框架:
結束語
關於混合APP和APP開發方面,小弟沒有很多的經驗,只是進行了粗略的了解。以上就是匯總到的一些關於移動端UI框架、PC端及混合APP開發UI框架方面的資料。當然,當今前端飛速發展,關於UI框架方面的很多都沒有總結和匯總到,希望小伙伴們有了解到的可以留言喔。
參考
https://www.cnblogs.com/aaron-pan/p/8018473.html
https://segmentfault.com/a/1190000007699297
https://wdd.js.org/all-best-ui-frame.html
pc端:
