1. 程式人生 > >14 款(移動端)UI 框架

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 構建,提供完整的型別定義檔案。