1. 程式人生 > >移動Web UI庫(H5框架)有哪些,看這裡就夠了

移動Web UI庫(H5框架)有哪些,看這裡就夠了

前言

今年上半年,專案組在專案開發的過程中建立了一套風格統一,元件豐富完善,命名統一規範的PC端UI庫,適用於做大型站點,該UI庫也是應用到了整個平臺的專案中,在各個專案組中進行推廣。因為專案的保密性,這裡不方便給出實際專案,當然目前這套UI庫也不是開源的。

下半年開始,我們偏向做移動Web的同學也開始考慮要梳理出這樣一套適用於移動端的UI庫,與PC端UI庫命名規範保持一致,便於專案組同學在PC專案和移動專案中隨意切換,當然,移動端的元件和樣式以及互動與PC端都是有很大差別的,比如PC端的下拉選單,在移動端可能就需要彈出的picker來實現了。鑑於此,我們儘快建立移動端UI庫是非常有必要和有意義的,做之前我大量看了下目前移動端的UI庫,以及H5框架,比較豐富和切實的瞭解了更多的應用場景,本文將介紹各個移動端框架,沒有技術,只有一個列表,勿噴,謝謝!

移動Web UI庫列表

1、Framework7
Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.

2、

SUI Mobile
MSUI 是阿里巴巴共享業務事業部UED團隊的作品。目的是為了手機H5頁面提供一個常用的元件庫,減少重複工作。
SUI Mobile 是一套基於 Framework7 開發的UI庫。它非常輕量、精美,只需要引入我們的CDN檔案就可以使用,並且能相容到 iOS 6.0+ 和 Android 4.0+,非常適合開發跨平臺Web App。

3、FrozenUI
Frozen UI是一個開源的簡單易用,輕量快捷的移動端UI框架。基於手Q樣式規範,選取最常用的元件,
做成手Q公用離線包減少請求,升級方式友好,文件完善,目前全面應用在騰訊手Q增值業務中。

4、Amaze UI


中國首個開源 HTML5 跨屏前端框架,相比國外框架,Amaze UI 關注中文排版,根據使用者代理調整字型,實現更好的中文排版效果;兼顧國內主流瀏覽器及 App 內建瀏覽器相容支援。
Amaze UI 以移動優先(Mobile first)為理念,從小屏逐步擴充套件到大屏,最終實現所有螢幕適配,適應移動互聯潮流。

5、MUI
最接近原生APP體驗的高效能前端框架。

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

7、VUX
Vux(讀音 [v’ju:z],同views)是基於WeUI和Vue(2.x)開發的移動端UI元件庫,主要服務於微信頁面。
基於webpack+vue-loader+vux可以快速開發移動端頁面,配合vux-loader方便你在WeUI的基礎上定製需要的樣式。
vux-loader保證了元件按需使用,因此不用擔心最終打包了整個vux的元件庫程式碼。

8、WEEX
Weex 是一套簡單易用的跨平臺開發方案,能以 web 的開發體驗構建高效能、可擴充套件的 native 應用,為了做到這些,Weex 與 Vue 合作,使用 Vue 作為上層框架,並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API,這樣一來,你甚至可以使用其他框架驅動 Weex,打造三端一致的 native 應用。

9、Ant Design Mobile
antd-mobile 是 Ant Design 的移動規範的 React 實現,服務於螞蟻及口碑無線業務。

10、vue-carbon
基於 vuejs 1.0 開發 material design 風格的移動端 WEB UI 庫, 設計資源參考 CARBON FrameWork7。

11、uiKit
uiKit是一款輕量級、模組化的前端框架,可快速構建強大的web前端介面。

12、H-ui
H-ui是輕量級前端框架,簡單免費,相容性好,適用於中國網站。

13、layui
Layui 誕生於2016年金秋,是一款帶著濃烈情懷的國產前端UI框架,她追求極簡,又不失豐盈的內在,說她是史上最輕量的結晶,似乎並不為過。一切都源自於她對原生態的執著,對前端社群的那些噪雜聲音的過濾,以及她本身的精心雕琢。

14、YDUI Touch
YDUI Touch 專為移動端打造,在技術實現、互動設計上相容主流移動裝置,保證程式碼輕、效能高;使用 Flex 技術,靈活自如地對齊、收縮、擴充套件元素,輕鬆搞定移動頁面佈局;實現強大的螢幕適配佈局,等比例適配所有螢幕。什麼?用得不開心?輕鬆切換 px;自定義Javascript元件、Less檔案、Less變數,定製一份屬於自己的YDUI。

15、sheral
基於sandal(基礎sass庫)擴充套件的移動端UI庫。具體設計思想可參看sheral——一個方便定製及擴充套件的UI元件庫

16、vonic
一個基於 vue.js 和 ionic 樣式的 UI 框架,用於快速構建移動端單頁應用。

17、Mint UI
基於 Vue.js 的移動端元件庫
Mint UI 包含豐富的 CSS 和 JS 元件,能夠滿足日常的移動端開發需要。通過它,可以快速構建出風格統一的頁面,提升開發效率。
真正意義上的按需載入元件。可以只加載宣告過的元件及其樣式檔案,無需再糾結檔案體積過大。
考慮到移動端的效能門檻,Mint UI 採用 CSS3 處理各種動效,避免瀏覽器進行不必要的重繪和重排,從而使使用者獲得流暢順滑的體驗。
依託 Vue.js 高效的元件化方案,Mint UI 做到了輕量化。即使全部引入,壓縮後的檔案體積也僅有 ~30kb (JS + CSS) gzip。

18、Muse-UI
基於 Vue 2.0 和 Material Desigin 的 UI 元件庫
1.元件豐富
Muse UI 基本實現了 Material Design 設計規範類的所有元件,另外還開發許多的功能性的元件
2.可定製
Muse UI 使用less檔案,所有的顏色都有一個變數維護,通過編寫 less 檔案完成自定義主題,另外元件內部也提供一些修改效果的引數
3.基於 Vue 2.0
Muse UI 基於 Vue2.0 開發,Vue2.0是當下最快的前端框架之一,小巧,api友好,可用於開發的複雜單頁應用。

19、jQuery WeUI
jQuery WeUI 是專為微信公眾賬號開發而設計的一個簡潔而強大的UI庫,包含全部WeUI官方的CSS元件,並且額外提供了大量的拓展元件,豐富的元件庫可以極大減少前端開發時間。
jQuery WeUI 的最大特點是它只提供UI元件,並不會對專案所使用的框架和其他庫有任何的限制,幾乎可以在任何環境下使用。無論你的專案是基於jQuery,還是 React, Angular, Vue, 你都會發現 jQuery WeUI 能非常方便的和他們結合使用。既是你的專案是一個有很悠久歷史的老專案,也幾乎可以做到拿來即用。
國外官網:http://jqweui.com/

20、QMUI Web
QMUI Web 是一個專注 Web UI 開發,幫助開發者快速實現特定的一整套設計的框架。
框架主要由一個強大的 Sass 方法合集與內建的工作流構成。通過 QMUI Web,開發者可以很輕鬆地提高 Web UI 開發的效率,同時保持了專案的高可維護性與穩健。
該框架同步有針對Android和IOS風格的移動UI框架。

後面有優秀的專注於移動端開發的UI庫大家可以一起來補充啊!