作為一個(gè)前端人員來說吕嘀,總結(jié)幾款相對(duì)來說不錯(cuò)的用于移動(dòng)端開發(fā)的UI框架是非常必要的,以下幾種移動(dòng)端UI框架就能基本滿足工作中開發(fā)需要趁曼,根據(jù)項(xiàng)目需求棕洋,選用合適的框架搭建項(xiàng)目,更能容易提高開發(fā)效率拍冠。
一、MUI
最接近原生APP體驗(yàn)的高性能前端框架,追求性能體驗(yàn)碟摆,是我們開始啟動(dòng)MUI項(xiàng)目的首要目標(biāo),輕量必然是重要特征
MUI不依賴任何第三方JS庫(kù)断盛,壓縮后的JS和CSS文件僅有100+K和60+K愉舔,鑒于之前的很多前端框架(特別是響應(yīng)式布局的框架),UI控件看起來太像網(wǎng)頁(yè)轩缤,沒有原生感覺贩绕,因此追求原生UI感覺也是我們的重要目標(biāo)壶愤,MUI以iOS平臺(tái)UI為基礎(chǔ),補(bǔ)充部分 Android平臺(tái)特有的UI控件
二娇哆、Frozen UI
由騰訊團(tuán)隊(duì)開發(fā)勃救,適用于使用手Q規(guī)范設(shè)計(jì)的Web頁(yè)面,而針對(duì)非手Q規(guī)范的頁(yè)面勃黍,可通過修改變量定制界面主題税肪。可以按需選擇需要的組件益兄,也可以采用cdn和combo的方式按需加載。使用iconfont展示圖標(biāo)疑枯,包含了按鈕蛔六,列表,表單国章,提示,彈窗等常用組件骂删,新增文本四啰,布局,1px柑晒, rem,文字截?cái)喾鹨矗嘉唬瑑啥肆舭仔岢瘢瑑啥藢?duì)齊等解決方案撕彤,同時(shí)解決了移動(dòng)端屏幕適配問題。CSS使用模塊化的樣式命名和組織規(guī)范羹铅,使用sass編寫css代碼。
三麻蹋、Amaze UI
Amaze UI 以移動(dòng)優(yōu)先(Mobile first)為理念焊切,從小屏逐步擴(kuò)展到大屏,最終實(shí)現(xiàn)所有屏幕適配专肪,適應(yīng)移動(dòng)互聯(lián)潮流。Amaze UI 含近 20 個(gè) CSS 組件荔仁、20 余 JS 組件芽死,更有多個(gè)包含不同主題的 Web 組件,可快速構(gòu)建界面出色关贵、體驗(yàn)優(yōu)秀的跨屏頁(yè)面揖曾,大幅提升開發(fā)效率。相比國(guó)外框架翩肌,Amaze UI 關(guān)注中文排版禁悠,根據(jù)用戶代理調(diào)整字體,實(shí)現(xiàn)更好的中文排版效果粱坤;兼顧國(guó)內(nèi)主流瀏覽器及 App 內(nèi)置瀏覽器兼容支持。Amaze UI 面向 HTML5 開發(fā)站玄,使用 CSS3 來做動(dòng)畫交互株旷,平滑、高效晾剖,更適合移動(dòng)設(shè)備,讓 Web 應(yīng)用更快速載入沽损。
官方鏈接:http://amazeui.org/
四循头、SUI Mobile
SUI Mobile 是一套基于 Framework7 開發(fā)的UI庫(kù)。它非常輕量国裳、精美偿警,只需要引入我們的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+螟蒸,非常適合開發(fā)跨平臺(tái)Web App。
五少办、Muse-UI
基于 Vue 2.0 和 Material Desigin 的 UI 組件庫(kù)诵原,Muse UI 擁有40多個(gè)UI 組件,用于適應(yīng)不同業(yè)務(wù)環(huán)境蔓纠。Muse UI 自定義主題方式極為優(yōu)雅吗蚌,僅需少量代碼即可完成主題樣式替換。Muse UI 基于 Vue2.0 開發(fā)蚯妇,Vue2.0是當(dāng)下最快的前端框架之一暂筝,小巧硬贯,api友好,可用于開發(fā)的復(fù)雜單頁(yè)應(yīng)用饭豹。
六、AUI2.0
AUI 2.0是一套全新的AUI框架卫漫,在1.X基礎(chǔ)上進(jìn)行了重新架構(gòu)肾砂。結(jié)合實(shí)際項(xiàng)目出發(fā),站在開發(fā)者和項(xiàng)目的角度包吝,重新定義AUI框架源葫。在2.0中使用了大量彈性響應(yīng)式布局,采用容器+布局結(jié)構(gòu)+控件的嵌套形式息堂,方便開發(fā)者快速布局樣式荣堰。我們充分吸取了AUI使用者的反饋意見和借鑒了市場(chǎng)上其他優(yōu)秀UI框架床未,完成了2.0版本的開發(fā)振坚。2.0遵循Google Material 設(shè)計(jì)規(guī)范,使用MIT開源協(xié)議啃洋。