SAY討論區

標題: Win8 Metro UI風格Web資源大收集 [打印本頁]
作者: 傻QQ    時間: 2012-11-6 13:36:56     標題: Win8 Metro UI風格Web資源大收集

最近微軟已經正式發佈瞭Windows8操作系統，Window操作系統的風格已經完全改變成瞭瓦片狀的Metro UI。
對於微軟來說這是一個巨大的改變，而且所有微軟的平臺包括，桌面，平板，移動及其網站都使用這個UI風格。
Metro UI包含瞭所有的現代Web設計的特點，包括瞭，簡化，基於網格的界面，並且富有連續性。 大家如果有興趣可以看看這個界面設計說明（http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx）。
如果你也喜歡Metro風格的話，這裡我們收集瞭很多windows 8的Metro UI風格佈局資源，希望大家喜歡！
Metro風格的網站框架和模板
Metro UI CSS
Metro UI CSS是一個非常完整的創建Metro風格的網站的框架。使用LESS創建，並且擁有網格系統，排版樣式，表格，按鈕和圖片。
同時也擁有內建的javascript組件，幫助你生成片狀，菜單，邊欄，進度條，提示等等
etro UI CSS
170011ldkyoazgkjr.gif
BootMetro
BootMetro是一個Twitter Bootstrap的Metro風格主題。你可以創建Metro風格的樣式。例如，片狀UI，工具欄，其它組件。
170011ospcdypsgx2.gif
metro-bootstrap
類似上面的BootMetro，這是另外一個Twitter Bootstrap主題，擁有所有的漂亮組件，並且包含瞭LESS。
170011vggrpjgbgp2.gif
Metro UI Template
這是一個網站的框架和模板，用來創建Windows8 Metro UI風格的界面。擁有平滑的過渡效果和tiles（包括，RSS，Twitter，weather等等）
這個模板支持模板並且擁有jQuery UI主題。
170012grt3t2furo1.gif
Droptiles – Metro-Style Web Dashboard
一個開源的windows 8開始界面dashboard（類似igoogle)。
使用tiles來展示信息，每一個tiles是獨立的應用可以用來獲取數據。這個項目基於ASP.NET可以移植到其它語言。
170012zqd4un35esq.jpg
PHP Image Gallery In Metro UI
一個PHP的圖片畫廊可以自動生成縮略圖，並且可以使用lightbox來顯示圖片。支持HTML5和CSS3。
170012g5lyz2o1hxk.jpg
Motown
一個用來創建Metro風格應用的類庫，使用很少代碼即可實現。不依賴其它javascript類庫。
Metro風格jQuery插件資源
jq-metro
一個jQuery插件用來創建Metro風格的界面。目前，panorama，privot，進度條，列表選擇，切換，按鈕等。
170012uynyvmnvams.jpg
Metro JS
這個jQuery Metro UI插件可以用來創建tiles，應用條，並且支持主題。功能和設計完全可定制。
170012yci2succ0rs.jpg
jQuery Metro UI Plugin
這個插件可以簡單的創建tiles視圖並且支持聚焦。
170012hh4wpngwajx.jpg
jQuery Mobile Metro Theme
一個免費jQuery移動Metro UI主題，完全支持自定義。使用不同插件來處理應用欄，進度條，按鈕和日期選擇器。
170013jj2lnbtkypa.gif
Metro UI Theme Builder For jQuery UI
擁有themeroller風格的jQuery UI主題創建，幫助你創建Metro UI風格樣式
170013x3rqc3ecrja.jpg
TileJS (non-jQuery)
一個標準的javascript代碼來創建tiles並且擁有完整tiles的onclick效果。
170013hjpvhzlxdbf.gif
免費Metro UI圖標
Modern UI Icons
一套簡單手繪的Metro UI風格圖標，擁有48x48大小的PNG格式及其XAML文件。
1700131oqpyjy4a13.gif
1300枚Win8 Modern風格圖標
Modern UI 愛好者千萬不要錯過這次的合集，數量多，品質精，不收藏怎麼行！很貼心的是壓縮包裡作者已經這1300枚圖標按照系統的各個組成部分分類好瞭，這樣就更加方便瞭你對他們的使用！
border=
Metro Icons
windows phone 7的圖標，非常適合Metro UI應用。
170014gzhsv41fiaf.gif
via webresourcesdepot

附件: [170011ldkyoazgkjr.gif] 170011ldkyoazgkjr.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTYwfDZhNTVhMzQ3fDE3Nzk5MDc2NzR8MHww

附件: [170011ospcdypsgx2.gif] 170011ospcdypsgx2.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTYxfDU3OTI5MTBkfDE3Nzk5MDc2NzR8MHww

附件: [170011vggrpjgbgp2.gif] 170011vggrpjgbgp2.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTYyfGFhMTA5ODM2fDE3Nzk5MDc2NzR8MHww

附件: [170012grt3t2furo1.gif] 170012grt3t2furo1.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTYzfDQyOWY1ZDJkfDE3Nzk5MDc2NzR8MHww

附件: [170012zqd4un35esq.jpg] 170012zqd4un35esq.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTY0fGM5YjQ3ODlhfDE3Nzk5MDc2NzR8MHww

附件: [170012g5lyz2o1hxk.jpg] 170012g5lyz2o1hxk.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTY1fDA4MGI4ODFmfDE3Nzk5MDc2NzR8MHww

附件: [170012uynyvmnvams.jpg] 170012uynyvmnvams.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTY2fGQ5NmU3MDg3fDE3Nzk5MDc2NzR8MHww

附件: [170012yci2succ0rs.jpg] 170012yci2succ0rs.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTY3fGM5OWJmNWE1fDE3Nzk5MDc2NzR8MHww

附件: [170012hh4wpngwajx.jpg] 170012hh4wpngwajx.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTY4fDU0MDIzZmM4fDE3Nzk5MDc2NzR8MHww

附件: [170013jj2lnbtkypa.gif] 170013jj2lnbtkypa.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTY5fDYyOGEwOWI5fDE3Nzk5MDc2NzR8MHww

附件: [170013x3rqc3ecrja.jpg] 170013x3rqc3ecrja.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTcwfGQ4NWVmZWU5fDE3Nzk5MDc2NzR8MHww

附件: [170013hjpvhzlxdbf.gif] 170013hjpvhzlxdbf.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTcxfDhlMzNhMGIyfDE3Nzk5MDc2NzR8MHww

附件: [1700131oqpyjy4a13.gif] 1700131oqpyjy4a13.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTcyfGMxMjdhOTk0fDE3Nzk5MDc2NzR8MHww

附件: [border=] 17001425jbqwygamy.jpg (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTczfGM0MjI0YjNifDE3Nzk5MDc2NzR8MHww

附件: [170014gzhsv41fiaf.gif] 170014gzhsv41fiaf.gif (2012-11-6 13:36:56, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTY5OTc0fDhjNWNhNWZhfDE3Nzk5MDc2NzR8MHww
作者: 傻QQ    時間: 2012-11-6 18:16:25

我在努力中
作者: 正義西門慶    時間: 2012-11-6 18:29:42

加油！樓主，謝謝分享
作者: skykingdom    時間: 2012-11-6 18:31:48

今天沒事來逛逛，看了一下，感覺相當的不錯。
作者: 切雞飯    時間: 2012-11-6 18:33:19

我來看看！謝謝  
作者: tn52003    時間: 2012-11-6 19:24:51

這貼？不回都不行啊
作者: 花家姐    時間: 2012-11-6 19:25:42

看來這一帖沒有多少人回喔
作者: 段皇爺    時間: 2012-11-6 20:15:03

一個子 沒看懂
作者: junhau    時間: 2012-11-6 22:34:51

不錯的東西  持續關注
作者: 前程    時間: 2012-11-7 03:22:58

哈哈,頂你了哦.
作者: 鬼谷先生    時間: 2012-11-7 07:02:23

有一天醒來，我的電腦就看到尼伊達論壇了
作者: yan4327    時間: 2012-11-7 11:31:08

有些帖子，真的不錯



歡迎光臨 SAY討論區 (http://say.go2tutor.com/) Powered by Discuz! X2