14 款(移動端)UI 框架
因業務需求,特調研了當前比較火的移動端UI框架,在此做一個彙總。
star資料是截止發文時間(2018-08-18),僅供參考。
一、【H5通用UI】
WeUI
Star:19743
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程式量身設計,令使用者的使用感知更加統一。
-
FrozenUI 是一套基於移動端的UI庫,輕量、精美、遵從手機 QQ 設計規範。
適用於使用手Q規範設計的Web頁面,而針對非手Q規範的頁面,可通過修改變數定製介面主題,並且可以按需選擇需要的元件。
使用iconfont展示圖示,包含了按鈕,列表,表單,提示,彈窗等常用元件,新增文字,佈局,1px, rem,文字截斷,佔位,兩端留白,兩端對齊等解決方案,同時解決了移動端螢幕適配問題。
CSS使用模組化的樣式命名和組織規範,使用sass編寫css程式碼。
相容android 2.3 +,ios 4.0 + 。 -
AUI是為APICloud而打造的一個單純UI框架,體積小,方便使用者擴充套件和自由組合,擺脫繁瑣的html標籤佈局。
AUI為一款輕量級前端UI框架,更偏重於CSS佈局及樣式的構造,通俗易懂的寫法及模組式的拼裝方便使用者自由擴充套件。輕小的體積、靈活的擴充套件性,大大提高移動端專案的體驗度和開發效率。
AUI 2.0版本是整個版本更新中的一個里程碑,結合實際專案出發,站在開發者和專案的角度,重新定義AUI框架。在2.0中使用了大量彈性響應式佈局,採用容器+佈局結構+控制元件的巢狀形式,方便開發者快速佈局樣式。2.0遵循Google Material設計規範,使用MIT協議開源。
在2.0中,全域性使用rem控制尺寸,完美適應不同解析度移動裝置;新加入的主題樣式表方便開發者自定義基礎顏色樣式,完成APP主題的定製。
二、【iOS風格】
MUI
Star:9675
最接近原生APP體驗的高效能前端框架
輕量:MUI不依賴任何第三方JS庫,壓縮後的JS和CSS檔案僅有100+K和60+K
原生UI:MUI以iOS平臺UI為基礎,補充部分Android平臺特有的UI控制元件-
SUI Mobile 是一套基於 Framework7 開發的UI庫。它非常輕量、精美,只需要引入我們的CDN檔案就可以使用,並且能相容到 iOS 6.0+ 和 Android 4.0+,非常適合開發跨平臺Web App。
輕量的UI庫;炫酷的iOS風格;功能強大的元件。 -
Framework7 是一個開源免費的框架可以用來開發混合移動應用(原生和HTML混合)或者開發 iOS & Android 風格的WEB APP。也可以用來作為原型開發工具,可以迅速建立一個應用的原型。
Framework7 最主要的功能是可以使用HTML、CSS和JS來開發iOS7應用。Framework7 是完全免費開源的。
Framework7 並不能相容所有的裝置。她只專注於為 iOS 和 Google Material 設計提供最好的體驗。
三、【三大主流框架彙總】
3.1、【Vue】
element(餓了麼)
Star:29902
三大主流框架都支援
Element,一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫
iview
Star:16817
一套基於 Vue.js 的高質量
UI 元件庫-
Vuetify基於vue2.0,為移動而生的元件框架
Vuetify 支援SSR(服務端渲染),SPA(單頁應用程式),PWA(漸進式Web應用程式)和標準HTML頁面。
不相容IE9/IE10,部分相容IE11/Safari9,相容其他瀏覽器。
3.2 【React】
-
世界上最受歡迎的React UI框架。
-
一個服務於企業級產品的設計體系,基於『確定』和『自然』的設計價值觀和模組化的解決方案,讓設計者專注於更好的使用者體驗。
基於 Ant Design 設計語言,我們提供了一套開箱即用的高質量 React 元件,用於開發和服務於企業級中後臺產品,除官方的 React 實現,還有 Angular、Vue 的實現。
提供antd資源包、Axure元件庫、sketch工具集等工具和資源。
Ant Design Pro:開箱即用的中臺前端/設計解決方案
Ant Design Mobile:antd-mobile 是 Ant Design 的移動規範的 React 實現
AntV:簡單、專業、擁有無限可能的資料視覺化解決方案
dva :基於 redux、redux-saga 和 react-router 的輕量級前端框架。 -
基於 React.js 的移動端 Web 元件庫
專屬於移動;專注於 UI;採用 Flexbox 佈局;基於 React.js
3.3【Angular】
-
Angular的Material Design元件
-
這裡是 Ant Design 的 Angular 實現,開發和服務於企業級後臺產品。
提煉自企業級中後臺產品的互動語言和視覺風格。
開箱即用的高質量 Angular 元件。
使用 TypeScript 構建,提供完整的型別定義檔案。