Material Design 風格的網站的有哪些?

Google提出了Material design的設計風格,現今很多App開發者也運用到了這一設計語言。請問國內外擁有這種風格的網站有哪些典型?


http://inbox.google.com


https://www.polymer-project.org/
google推出的一個web component前端框架。並編寫了一套使用material design 的elements。
官方給出了幾個demo:
一個答題app: https://www.polymer-project.org/apps/topeka/
一個計算器:https://www.polymer-project.org/components/paper-calculator/demo.html


Daily Material Design Inspiration


當然是官方網站 Google Design

最近更新了很多內容,不僅只是material design指南,還覆蓋了google旗下很多產品和設計應用


谷歌自家產品
因為 Material Design 是 Google 倡導的設計標準,所以第一個想到的是 Google 自家的產品,列表如下(不要問我為毛打不開)
首先是谷歌的一系列 Web 應用:
Google Design Material Design 必須首先上
https://inbox.google.com/u/0/?pli=1 inbox

  • Google Maps 谷歌地圖
  • Google Docs - create and edit documents online, for free. 谷歌文檔
  • Google Sheets 谷歌表格
  • Google Slides 谷歌 Slides

然後是谷歌的其他各項服務:

  • Ask the Google app. Google app 的官網
  • Google Trends 谷歌趨勢,每年年終都會蹦出來刷下存在的那個

國內的網站
DevFest 2014 北京GDG的 DevFest 官網,代碼開源在gdgbeijing/devfest2014 · GitHub
(挖坑,待續)


https://bangumi.moe/
提供一些番劇的下載,感覺目前資源不算太多,不過網站的製作就能看出來很是良心。
G+上一個好友在2015年開的新站,使用Material Design,移動設備友好。


試試看這個:
Material UI - Material Design React Components
都是標準的樣例。


我參考了Material Design做了一般響應式的網站,希望能給大家一些參考;
Gekec 革客

然後還有一篇文章,分享了一下使用Material Design設計響應式網站的一些經驗;
【史上最干】Material Design複雜響應式設計


Materialup做的很不錯,除Cases外,Resource 和Tools也值得一看。
Daily Material Design Inspiration


CarbonROM官網,最近也已經更新為Material Design http://www.carbonrom.org 點擊網頁上的菜單,你會發現動畫效果和lollipop上的一模一樣。無論你點擊哪個位置,它的動畫就從哪裡開始。在結合網頁的整體布局,我認為做得是相當可以的了。除了動畫響應的速度,其他都已經很靠近Material Design App的效果了。


還有 WhatsApp 的網頁版

https://web.whatsapp.com


https://material.angularjs.org


Google全家桶的開源項目網站:http://opengapps.org/


不用 Material Design 標準元素,但深得 Material Design 魂。
教科書般的MD會看膩。
https://plus.google.com/

Material? · Issue #13 · zcyzcy88/SelfColle · GitHub


推薦閱讀:

TAG:網頁設計 | 網頁設計師 | 視覺設計 | MaterialDesign |