• UIKit
  • • 簡介
    • 相容性
    • 使用反饋
• ionic
  • • 簡介
    • 元件
    • 相容性
    • 使用反饋
• mui
• WeUI
• 對比
• 元件對比
  • 手機預覽
    • WeUI
    • amazeUI
      • CSS
      • JS外掛
      • web元件
    • MUI
    • Ant UI
  • UI對比
    • WeUI
    • MUI
    • AntUI
  • 元件內容對比
    • WeUI
      • 表單
      • 基礎元件
      • 操作反饋
      • 導航相關
      • 搜尋相關
      • 層級規範
      • 總結
    • amazeUI
      • css
      • JS元件
      • Web元件
      • 總結
    • MUI
      • UI元件
      • 模板
      • 總結
    • AntUI
      • 總結

UIKit

簡介

相容性

Chrome	Firefox理	IE	Safari	Opera
Latest ✔	Latest ✔	9+ ✔	7.1+ ✔	Latest ✔

Github

• Star: 7429
• Issues: 336 Open, 1365 closed
• 團隊： YOOtheme
• 更新頻率：Jul 14, 2013 – Sep 22, 2016，持續穩定有更新；

使用反饋

• UIkit已經成功的在許多WordPress 主題上使用，它提供了一個靈活、強大的定製化機制，也可以通過GUI定製器進行手動操作。

簡介

Foundation 是一個易用、強大而且靈活的響應式前端框架，用於構建基於任何裝置上的響應式網站、 Web應用和電子郵件。結構語義化、移動裝置優先、完全可定製

JS 基礎庫	CSS 預處理
JQuery	Sass

相容性

• 瀏覽器支援： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

Github

• Star: 24123
• Issues: 388 Open, 5985 closed
• 更新頻率：Oct 9, 2011 – Sep 22, 2016, 持續穩定有更新；

使用反饋

在比較兩者的區別之前我們先來看一下前些日子Bootstrap4作出了哪些變動：
首先，前三個版本的Bootstrap利用Less對CSS進行編譯，但是在Bootstrap4中則開始利用Sass對CSS進行編譯，而Foundation的原始碼就是利用Sass編寫。
再者就是單位的變化，Bootstrap4在適當的時候會從px單位切換到rem和em，而Foundation除了在圓角等細節上少量使用px，多數使用的em、rem等相對值，在媒介查詢（Media Query）方面也採用了em作為單位。
第三，不再相容IE8，Foundation則長久以來都不支援IE。
從這個角度來看，Bootstrap與Foundation的差異正在，變小，而在移動優先的大環境下，這種變化很難改變。
說下兩者的優劣吧，Bootstrap因為是twitter團隊的作品，所以應用人數要廣一些，前段框架的優劣很大程度上要看他的社群是否活躍，這方面Bootstrap是要優於Foundation的。
Bootstrap的缺點在於大量趨同性質的網站設計，看多了會讓人生厭。
Foundation4支援jQuery和Zepto，與JQuery相比，Zepto偏向於移動端設計，因此移除了大量相容程式碼，在傳輸效率和執行效率上都要優於jQuery。不過Foundation5放棄了對Zepto的支援。
所以，還是用Bootstrap吧。

Github

ionic

簡介

• 利用你喜歡的web技術建立混合型移動應用。Ionic提供了一個免費且開源的移動優化HTML，CSS和JS元件庫，來構建高互動性應用。基於Sass構建和AngularJS 優化。
• 追求效能： 速度很重要。因此只有當它不夠敏捷時你才會注意到速度是那麼的重要。Ionic在最新的移動裝置中表現卓越。 操作最少的 DOM，非 jQuery，和硬體加速過渡，總有一樣會折服你。
• AngularJS 和 Ionic： Ionic 利用 AngularJS創造出一款最適合開發豐富而強大應用的框架。 Ionic不僅如此優秀，而且它的核心架構也是為開發專業應用建立，和AngularJS完美融合。
• 專注原生： Ionic以流行的原生移動開發SDK為藍本，使開發過原生iOS或安卓app的任何人都容易理解。開始只需書寫你的程式碼，完成時通過PhoneGap釋出。一次開發，處處執行。

元件

相容性

• ionic1: iOS 7+, android 4.1;
• ionic2: ios8+, android 4.4+;

Github

• Star: 25759
• Issues: 511 Open, 6519 closed
• 更新頻率：持續穩定有更新；

使用反饋

1. 當我發現Ionic的時候是如此鼓舞。它填補了構建移動應用時的一個空白，解決了很多需要多個庫才能解決的複雜問題，使你的程式碼保持簡潔。總之，它使移動開發更生動，敏捷，可以讓你構建更多！—–Hampton Catlin（Sass創始人）
2. 對於熟悉angularjs的人來說，開發起來很快。不過流暢度使用者體驗和可定製性並不好

mui

簡介

• 輕量： MUI不依賴任何第三方JS庫，壓縮後的JS和CSS檔案僅有100+K和60+K；
• 原生UI：MUI以iOS平臺UI為基礎，補充部分Android平臺特有的UI控制元件

元件

Github

使用反饋

感覺是廣告題呢，大概看了下，所謂 html5+ 不就和 Cordova 差不多麼… 流暢度什麼的無非就是用 CSS transform 唄，也不用裝那麼神祕… 雖然 CSS transform 用得好確實可以做出媲美原生的 UI，但要說得彷彿一定要用貴產品才能做到就不厚道了。

和 ReactNative 的對比槽點太多，唯一讚同的一點就是長線來說 RN 的意義是逐步下降的。

嗯，又仔細看了看，5+ runtime 在效能方面確實有一些特別的考慮，我收回上面 CSS transform 那一段。基本上總結起來一句話，就是多個 webview。在一些特定的地方，比如列表、下拉重新整理，利用一些低版本 Android 上 webview 的滾動效能優於單個元素 overflow: scroll 的效能這一點，用多個 webview 來規避滾動效能問題。這個確實解決了國內 hybrid 開發的一些痛點，但是 webview 方案並不是從本質上解決了 hybrid 效能的問題，難道切屏、滾動、下拉重新整理就囊括了所有的『動畫效果』了？這也太小看互動設計師了吧。在 webview 內部 5+ 其實和普通的 hybrid 沒有什麼區別，原本會卡的 HTML5 動畫並不會神奇地就不卡了。另一方面來說，這些效能問題其實大部分只在低版本 Android 上面存在，所以這些所謂的效能增強的意義其實也是隨著手機硬體的提升在下降嘛…

我覺得 5+ runtime / Native.js 和多 webview 方案思路還是不錯的，但是在文案上… 可以少一些『吊炸天』的即視感，語氣更平和實在一些。

至於 MUI 框架，設計思路實在是比較滯後了，開發體驗比較捉急，樓下有人提到了。不過 5+ 並不一定要用 MUI 框架吧，其實我覺得主推 runtime，做 Cordova/RN/NativeScript 的競爭者就好，上層 UI 框架這種東西變化很快，保持靈活性更好。

簡介

• 為移動而生：Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴充套件到大屏，最終實現所有螢幕適配，適應移動互聯潮流。
• 元件豐富，模組化：Amaze UI 含近 20 個 CSS 元件、20 餘 JS 元件，更有多個包含不同主題的 Web 元件，可快速構建介面出色、體驗優秀的跨屏頁面，大幅提升開發效率。
• 本地化支援：相比國外框架，Amaze UI 關注中文排版，根據使用者代理調整字型，實現更好的中文排版效果；兼顧國內主流瀏覽器及 App 內建瀏覽器相容支援。
• 輕量級，高效能：Amaze UI 面向 HTML5 開發，使用 CSS3 來做動畫互動，平滑、高效，更適合移動裝置，讓 Web 應用更快速載入。

JS 基礎庫	CSS 預處理
jQuery	Less

元件

• JS外掛：警告框、按鈕互動、摺疊面板、下拉元件、模態視窗、彈出框、載入進度條、圖片輪播、側邊欄、滾動偵測、滾動偵測導航、平滑滾動、固定元素、選項卡、日期元件、下拉選框、單/多選框、表單驗證
• web元件：官方元件、摺疊面板、分割線、單張圖片、頁尾、圖片畫廊、回頂部、頁頭、簡介、內容列表、選單、工具欄、分頁、圖片輪播、選項卡、標題欄

相容性

• 相容主流桌面、移動瀏覽器（WebView）
• 有限支援 IE8

Github

使用反饋

1. 文件太裝逼，差評。
2. 這框架相容性不是一般的差，我今天試了三個jq 3d圖片輪播外掛，沒一個有用，另外連大名鼎鼎的圖示生成庫highcharts在這個框架裡面都用不了。那作者官方文件還出口閉口就是一個：你不懂我我不怪你，呵呵我沒怪他就不錯了。
3. 後端程式設計師表示很好用啊。
4. Amaze UI總的來說加入更多符合中國市場特性的元素，框架對跨屏、適配都做了比較好的處理並且準備了一系列的常用網頁元件，為減少搞相容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。框架還對中文排版優化，相容中國本土主流瀏覽器、輕量化，不僅適用於桌面端，更適合移動端。

簡介

MSUI 是阿里巴巴共享業務事業部UED團隊的作品。目的是為了手機H5頁面提供一個常用的元件庫，減少重複工作。

SUI Mobile 是一套基於 Framework7 開發的UI庫。它非常輕量、精美，只需要引入我們的CDN檔案就可以使用，並且能相容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平臺Web App。

輕量的UI庫
SUI Mobile 非常輕量，核心庫壓縮Gzip後的JS、CSS網路傳輸體積總共只有52K，卻提供了20+個常用的元件。

對於只有HTML&CSS的元件，你只需要複製HTML程式碼既可以使用。他的大部分JS元件都是獨立的 Zepto 外掛，並且提供了 Zepto/jQuery 風格的API，你將會非常熟悉這種方式。

元件

• 元件庫： 基本結構、使用rem 、初始化、內容區、路由、文字樣式、標題欄、工具欄、按鈕、表單、側欄、搜尋欄、標籤頁、柵格、對話方塊、載入指示器、toast、popup、日曆、操作表、picker、日期時間、列表、卡片、滾動條、下拉重新整理、無限滾動、圖示、夜間模式、裝置偵測

相容性

• iOS 6+
• Android 4.0+

Github

使用反饋

1. 不是非常靈活，tableview的時候稍微複雜一點的列表，實現起來並不能減少工作量
2. 最近已經好幾個月沒有更新了，還遇到個大問題，裡面的picker控制元件很多客戶不滿意的地方。(沒有滑動慣性效果；需要點到文字上才有響應；)
3. 只用裡面的部分很小的功能很方便。

WeUI

簡介

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令使用者的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

元件

Github

• Star: 10756
• Issues: 94 Open, 174 closed
• 團隊：微信官方設計團隊
• 團隊成員：無名氣！
• 最近一次：3 months ago
• 更新頻率：八月份開始沒有更新；
  

使用反饋

1.看完微信設計團隊設計的這套DEMO，如果要做微信公眾，這個二話不說必然是首選了。框架不好的地方簡而言之就是框架本身應該就沒考慮過讓使用者用到非微信的場景之下。

對比

UIKit沒有移動端，SUI已死，不在對比之列

對比	Foundation	JQ Mobile	Ionic	mui	amazeUI	WeUI
元件	內容齊全	多種多樣	UI以IOS為基礎，提供多種原生動畫	內容齊全	內容有限，專注微信平臺
更新穩定	始於2011，更新穩定，釋出111個版本，2014.11.1釋出最新版本V6.2.3	始於2010，更新穩定，釋出41個版本，2016.3.26釋出最新版本1.4.5	始於2015，更新穩定，釋出73個版本，2016.8.5釋出最新版本V2.0.0-beta.11	始於2014，更新穩定，釋出24個版本，2016.4.22釋出最新版本V3.0.0	始於2014，近來跟新較少，釋出25個版本，2016.8.17釋出最新版本v2.7.2	始於2015，更新穩定，釋出5個版本，2016.7.5釋出最新版本 v0.4.3
大廠維護	zurb	JQuery	driftyco	數字天堂網路	雲適配	微信
文件	英文文件齊全，無中文文件	中、英文文件齊全	英文文件齊全、中文文件不齊全	可以	可以	可以

• 作者： 高喵喵
• 時間：2016/9/22
• 備註： 僅供參考

元件對比

• 本文主要對比 WeUI、amazeUI、mui、antUI和Ionic，從UI和元件內容兩個方面討論；

手機預覽

WeUI

amazeUI

CSS

JS外掛

web元件

MUI

Ant UI

UI對比

WeUI

• UI設計簡潔、清晰、好看
• 樣式略單一

amazeUI

• 樣式多樣、五顏六色

MUI

• 以iOS7位基礎，Android的樣式少

AntUI

元件內容對比

WeUI

• 按照功能來分類（++下劃線++部分為該元件特有的）

表單

• button
• Input(單列表選項、複選列表、手機號、日期、時間、卡號、開關)
• List
• ++Uplodaer++（圖片上傳）

基礎元件

• ++Article++
• Flex
• ++Footer++
• Gallery
• Icons
• LoadMore
• Panel
• ++Preview++（表單預覽：支付清單等）
• Progress

操作反饋

• ++ActionSheet++（iOS ActionSheet、Android ActionSheet）
• Dialog
• Msg
• Toast

導航相關

• Navbar
• Tabbar

搜尋相關

• Search Bar

層級規範

• WeUI頁面層級

總結

• 元件內容針對微信，但極其美觀簡潔，值得參考。

amazeUI

• 按CSS、JS、WEB元件來分來（以下直羅列特色部分）

css:

1. 佈局相關
   
   • 網格 Grid
   • 等分佈局 AVG Grid
   • 輔助類 Utility（水平滾動、垂直滾動、清除浮動、文字左右對齊、文字垂直對齊等）
2. HTML元素
   
   • 程式碼 Code
   • 圖片 Image（響應式圖片、圓角樣式、橢圓樣式等）
   • 表格 Table（圓角邊框、單元格狀態、斑馬紋等）
3. 常用元件
   
   • 麵包屑導航 Breadcrumb
   • 關閉按鈕 Close
   • 評論列表 Comment
   • 導航 Nav
   • 導航條 Topbar
   • 分頁 Pagination
   • css3動畫 Animation

JS元件

• 按鈕互動 Button（按鈕狀態、單按鈕狀態切換、複選框、單選框）
• 摺疊面板 Collapse/According
• 模態視窗 Modal/Dialog（基本、Alert、Confirm、Prompt、Loading、Actions）
• 下拉元件 Dropdown
• 載入進度條 NProgress
• 圖片輪播 Slider
• 側邊欄 OffCanvas
• 滾動偵測導航 ScrollSpyNav
• 平滑滾動 SmoothScroll
• 固定元素 Sticky
• 選項卡 Tabs
• 日期元件 DatePicker（基本形式、結合元件使用、更改顏色、檢視模式、限制檢視模式、自定義事件、設定禁止選擇日期）
• 下拉選框 Selected（單選、多選）
• 表單驗證

Web元件

• Accordion
• Divider
• Duoshuo
• Footer
• Gallery
• Gotop
• Header
• Menu
• Pagination
• Slider
• Tabs
• Titilebar

總結

• 元件內容不僅僅針對移動端，也考慮了PC端，有些對我們沒有必要；
• 每種元件都給了多種樣式多種情況，值得參考；

MUI

• 不依賴任何第三方JS庫，以iOS7為基礎，補充部分Android特有控制元件（++下劃線++部分為該元件特有的）

UI元件

• accordion
• ++actionsheet++（只有iOS樣式）
• ++ajax++
• badge（數字角標）
• ++cardView/panel++
• checkbox
• ++datetimepicker（H5模式/native模式）++
• dialog（Alert、Confirm、Prompt、自動消失提示框）
• gallery slider
• gallery table
• grid（九宮格）
• icon
• ++input（搜尋框、帶清除按鈕的、語音輸入的、密碼框、文字域）++
• ++list（普通、帶數字、帶input控制元件、三行列表、二列列表、滑動觸發列表項選單）++
• media list（圖文列表）
• navbar
• ++number box(可設定步長)++
• ++off canvas（側滑導航：webview模式，div模式）++
• pagination
• ++picker++
• popover
• progress bar
• ++pull to refresh（下拉重新整理和上拉載入更多）++
• radio
• ++range（滑塊）++
• switch
• ++tab bar（div模式（二級選單、左右滑動、滾動監聽）、webview模式）++
• typography

模板

• advertisement（整合百度聯盟的網站廣告）
• chart（Echart圖表）
• chat（聊天視窗）
• cloud Pay（雲端支付）
• ++feedback++
• image viewer
• ++indexed list（索引列表：展示模式、索引模式）++
• ++lazyload++
• ++locker（手勢圖案解鎖）++
• ++setting（div窗體切換示例）++

總結

• 提供了很多很類似原生互動的元件，值得參考
• 對於一些酷的效果效能有待考量
• 元件樣式僅基於iOS，不夠通用

AntUI

• 分為rem版和普通版
• 包含基礎樣式和元件兩個部分
• 當前版本9.9.0包含以下控制元件（++下劃線++部分為該元件特有的）：

是否預設整合	模組名稱	說明
√	Flexbox	彈性佈局
√	Writing	文字書寫
√	Whitespace	上下留白
√	Wingblank	兩翼留白
√	button	按鈕
√	list	列表
√	form	選項卡
√	tab	按鈕
×	message	++提示++
×	popmenu	浮動選單
×	notice	++公告++
×	process	++支付進度++
×	card	卡片
×	article	常規文章
×	search	對話方塊
×	page-result	++通用異常結果頁++

總結

• 作者： 高喵咪
• 時間：2016/10/9
• 備註： 僅供參考