Bootstrap
首先說 Bootstrap,估計你也猜到會先說或者一定會有這個( 呵呵了 ),這是說明它的強大之處,擁有框架一壁江山的勢氣。自己剛入道的時候本着代碼任何一個字母都得自己敲出來擋我者廢的決心,來讓自己成長。結果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬里有一的人才,但是老天只讓我會用 PS 和各種設計工具卻不給我跟設計妹子一樣的審美,所以這也是我最初選擇 Bootstrap 的原因之一,它讓我做出來的東西好歹能在妹子面前裝個逼,不過時間長了難免覺得 Bootstrap 美的讓人煩躁, 但好在它的每個版本都會有很大的改變,不會讓人覺得自己做的網站會跟很多網站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數,了解他們痛的結果 ),以至於是個小前端都可以快速上手,幾乎沒什么學習成本。
總結:Bootstrap 最大的優勢就是它非常流行,流行就代表你有問題就有很多人幫你解決問題,就代表裝逼它就是利器,還有就是界面比較和諧,容易上手,關注它的童鞋應該發現最新 V4 版也開始支持 FlexBox 布局,這是非常好的升級體驗。 劣勢是 class 命名不夠語義化,並且各種縮寫,以至於我離了文檔就是個菜,最近開始整混合 APP,選框架的時候首選就是它,但之前搞 PC 一直沒注意,后來搞混合右鍵屬性看它的時候,瞬間一陣涼風襲來,Bootstrap 好小,小到我只好選擇別的框架。
AUI
第三個是最近剛起來的AUI,雖然作者聲稱是專為APICloud開發者設計的一套UI框架,但實際它還是解決了很多移動前端開發的普遍問題,是主要面向混合開發的 CSS 框架。看起來作者比較猖狂,各種高級 CSS3 遍地使用,這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性,哈哈了一頓激動從前輩手上大膽認識了幾個好東西,並且框架還提供了聊天界面、計數列表等組件,解決了很多復雜的讓我罵娘的布局,現在可以直接拿走就用。
總結:這個框架對我來說有個優點就是純 CSS 框架,自己以前也就用過 Pure,自己有點 JS 能力,如果不是復雜的效果,找個純 CSS 框架自己隨便改改就可以,而現在 CSS3 也已經能夠做到動畫,效率、質量、高效全兼顧,所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什么,說好的高大上呢。
Amaze UI
第二個介紹的是妹子UI,最初使用它是因為本尊遇到了一個愛糾結細節設計士,有一次她跟我的字體較上真了,結果一句頂萬句的 BOOS 誇了她,我只好根據她的想法去解決,結果最后找到了Amaze UI 框架( 我不介意你叫我懶淫 ),按照官方的話說就是 "基於社區開源項目構建的一個跨屏前端框架,以移動優先,從小屏到大屏,最終實現所有屏幕適配,適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。
總結:Amaze UI 總的來說就是加入更多符合中國市場特性的元素,框架對跨屏、適配都做了的比較好的處理並且准備一了一系列的常用的網頁組件,為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。,框架還對中文排版優化,兼容中國本土主流瀏覽器、輕量化,不僅適用於桌面端,還更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點太那什么了,比如 “人們不會在乎jQuery的那點流量。”,說實的在這真沒啥,不過我從來不會說出來( 哈哈 ),代碼和設計上感覺沒太多突出的點。
Frozen UI
第三個是Frozen UI,有段時間看到 QQ 瞬間高大上了,后來四處打聽,原來 QQ 客服端也用了 HTML 混合開發,其中QQ會員前端就是用的 Frozen UI,並且這套框架開源,欣喜若狂耐不住心里的寂寞直接上手三下五除二試了一遍就開始試用,初體驗的就是基礎樣式效果簡單色調清爽,有個比較活躍的社區所以組件什么的也比較豐富。
總結:如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了,或者原生的火雞們拿去嵌套在應用中做前端開發,並且這個框架對 android 2.3 +、ios 4.0 + 做了兼容,或者拿來做 Web app 也是極好的選擇,不過要是放在微信里比這更合適的 WeUI 框架更是首選了,劣勢的話從 UI 層面就可以看到了,誰讓它是出生在QQ會員前端的呢。
WeUIi
第四個是WeUI和同 FrozenUI都屬於 差不多的 WeUi了,也是一個比較專一的框架,WeUI應該說比FrozenUI前者更專一,話說連個官網都不搞,所有答疑都在 gitHub Issues 解決了,這個框架極其簡單,體積當然就不用說了,模塊也就 7 個左右,不過體量雖然小做的卻不錯,口碑看 star 就夠了,框架從 16/1/23 發版至今 github star 超過 7K,不過也不排除用戶沒地方發泄所以都跑到 git 上來,哈哈。
DEMO:http://weui.github.io/weui/
總結:看完微信設計團隊設計的這套 DEMO,二話不說如果要做微信公眾,這個二話不說必然是首選了。框架不好的地方簡而言之就是框架本身應該就沒考慮過讓用戶用到非微信的場景之下。
SUI
“SUI 是一套基於bootstrap開發的前端組件庫,同時它她也是一套設計規范。通過SUI,可以非常方便的設計和實現精美的頁面”。 果然還是直接引用官方給的枯燥無味廣告要節省自己的腦細胞( 囧… ),當然了就像廣告說的,如果你之前用過 Bootstrap, 那么可以輕松轉向 SUI,這可能就是淘寶給前端屌絲們的福利了。。
官網:http://sui.taobao.org/sui/docs/index.html
MUI
曾經一直使用 Android 系統的我,后來見到 IOS,果斷移情別戀了,不知道為什么蘋果每次調整系統我都特別喜歡,后來一段時間因為缺設計我專門模仿 IOS 系統做 UI,但始終不能夠做到很好,無意間就發現了 MUI 這個框架,這個框架給我的吸引之處就是它的 UI 是以 IOS 為主體設計的,當然它也補充了android特有UI樣式。並且MUI官方聲稱用來開發深入以后發現拿它做 APP 還能夠提高用戶使用流暢度,然后便試着更深入的了解和使用一段時間。
官網:http://dev.dcloud.net.cn/mui/
總結:就像之前說的這個框架是以兩大系統為參照來封裝UI組件,框架自身還有一個較為活躍的社區,不太好的地方這也是我特別關注的一點,關於開發應用的流暢度,我當然知道這是 H5 目前的劣勢,但是看到官網給的描述,還是抱着期待的心理試試看能否提升,然而它其實還是需要是借助 Webview來提升,而不是框架本身。
Semantic UI
倒數第三個是 Semantic UI,接觸這個框架還是因為 Bootstrap,Semantic UI 剛上線 github 就受到大量開發者的關注,以至於很多人拿它倆對比各種挑刺各種誇,是好是壞不能單憑別人三句四句就抬起手指開始贊,用了以后感覺 UI 上跟 Bootstrap 沒太多的區別,不過代碼命名規范上卻相差甚大,本人認為 Semantic UI 是不是就想做的不一樣,它的命名全是采用復合的方式,類名特別的離散,用的時候你得很小心自己擴展或者新增的 class 命名與它的類名沖突。
Mint UI:
Mint UI 包含豐富的 CSS 和 JS 組件,能夠滿足日常的移動端開發需要。通過它,可以快速構建出風格統一的頁面,提升開發效率。
官網:http://mint-ui.github.io/#!/zh-cn
Foundation
Foundation 算是框架界的元老啦,都說框架去的早,而這個框架一直到現在依然這么的熱門,如果你比較介意 Bootstrap 開發撞臉的尷尬事情,那么你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像,就像官方說的給開發者更靈活的框架體驗。
官網:http://foundation.zurb.com/
UiKit
UIkit是YOOtheme團隊開發的,在許多WordPress主題中都有應用(也就是如果你是個 WordPress 愛好者,那么這個框架應該比較適合深究),並且框架能夠通過GUI編輯器和手動編輯,所以它提供了一個靈活、強大的自定義機制。框架借助LESS、jQuery、normalize.css及FontAwesome開源項目的獨有特點,整合成了這么一款輕量級、模塊化的前端框架。
官網:http://www.getuikit.com/
Pure
Elemen:
Element,一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的桌面端組件庫
一致性:
- 與現實生活一致:與現實生活的流程、邏輯保持一致,遵循用戶習慣的語言和概念;
- 在界面中一致:所有的元素和結構需保持一致,比如:設計樣式、圖標和文本、元素的位置等
- 控制反饋:通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作;
- 頁面反饋:操作后,通過頁面元素的變化清晰地展現當前狀態。
- 簡化流程:設計簡潔直觀的操作流程;
- 清晰明確:語言表達清晰且表意明確,讓用戶快速理解進而作出決策;
- 幫助用戶識別:界面簡單直白,讓用戶快速識別而非回憶,減少用戶記憶負擔
- 官網:https://element.faas.ele.me/#/zh-CN
Iview:一套基於 Vue.js 的高質量UI 組件庫,主要服務於 PC 界面的中后台產品。
特性
- 高質量、功能豐富
- 友好的 API ,自由靈活地使用空間
- 細致、漂亮的 UI
- 事無巨細的文檔
- 可自定義主題
官網:https://www.iviewui.com/
Layui:
layui(諧音:類UI) 是一款采用自身模塊規范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。layui 首個版本發布於2016年金秋,她區別於那些基於 MVVM 底層的 UI 框架,卻並非逆道而行,而是信奉返璞歸真之道。准確地說,她更多是為服務端程序員量身定做,你無需涉足各種前端工具的復雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與交互,從這里信手拈來。
兼容性和面向場景:layui 兼容人類正在使用的全部瀏覽器(IE6/7除外),可作為 PC 端后台系統與前台界面的速成開發方案
官網:https://www.layui.com/doc/
uni_app: 是一個使用 Vue.js 開發跨平台應用的前端框架,開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平台。
官網:https://uniapp.dcloud.io/
Vue.js :是一套構建用戶界面(user interface)的漸進式框架。與其他重量級框架不同的是,Vue 從根本上采用最小成本、漸進增量(incrementally adoptable)的設計。Vue 的核心庫只專注於視圖層,並且很容易與其他第三方庫或現有項目集成。另一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為復雜的單頁應用程序提供有力驅動。
中文文檔:https://vue.docschina.org/v2/guide/
Api:https://cn.vuejs.org/v2/api/index.html