Material Design 資源與靈感

0
1911

Material Design 是 Google 新的視覺語言。Google 希望結合出色的視覺設計與技術,以做出更好的用戶體驗。Material Design 的概念目前還相當新穎,很多資源不是那樣具備。不過,我們已經收集了一些檔案,為設計提供 Material Design 風格及靈感。

Google 提供的資源

Google 非常貼心的為大家整理了一長串相當長的資源列表。也提供了各種在 Adobe Illustrator 格式的模板。可以在 Google 資源頁面 Material Design 指南免費下載。如果您正在尋找較具體的直接有所幫助的文件。這裡有一些可下載較為顯著的檔案:

相關閱讀:什麼是 Material Design?

設計師靈感

我們走遍 Dribbble 和 CodePen 蒐集了其他設計師使用 Material Design 的設計靈感和創作。看看別人都怎樣使用這種新的設計風格。此外,已從一些開發商取得了類似 Material Design 的按鈕資源,雖然很少但也讓我們夠興奮了。

Free After Effect Project File

material-design1

Jelio Dimitrov 在 After Effects 創作了這個很酷的動畫。這是一個簡單的作品,任何人都可以嘗試看看 Material Design 風格的動畫。

Material Design UI Buttons

Material Design2

這裡有幾個代碼片段和各種 Material Design 的 UI 元素。它們都使用 CSS 編碼打造。有按鈕,方形元素,警告框,圖片和圓形。這是一個小而有用的入門資源庫。

Material Design Playground

Material Design3

這個材料庫是由 Eric Bidelman 所打造的一個 github 資源庫。它包含許多 Material Design 元素,是相當豐富的代碼集散地。可以透過它來學習 Material Design 的基礎知識。

Material Design Buttons

Material Design4

這是 Material Design 功能按鈕的合集,有方形圓形和按鈕文字。可以添加點擊事件來改變背景顏色,使它變得更有趣。

Google Material Design Hierarchical Timing

Material Design5

Material Design 具備了豐富的動態,特別是當你載入了一個新的元素。這是一個動畫模擬,讓感興趣的人可以使用項目中的動態演示 – 這和 Google 一點關係也沒有。

Google Design Icon Template

Material Design6

另一方面,如果你正在尋找 Material Design 的圖標設計工具,那麼在 Dribbble 上有個資源非常適合你。這是由 Grahm Macphee 建立的圖標模板,任何需要用到的人都可以免費下載和使用。

Android L – Icon Grid System

Material Design7

如果需要更豐富的圖標模板,那這非常適合你。它包含兩個矩形,一個圓形,一個方形模板。這是設計 Android L 圖標專用的模板。

New Android L Interface

Material Design8

如果您正在尋找一款 Android L 的 PSD 文件,那這個剛好就是了。這是一個免費的 UI 工具包,它可以用來模擬針對 Android L 的應用程式或界面。我不得不說這些顏色搭配起來真是相當棒!

Material Design Checkboxes

Material Design9

這是一個複選框的代碼。是一個整潔精巧的作品。只希望這個代碼還能包括諸如下拉選單及其它輸入類型代碼。

Material Design Slideshow

Material Design10

對於偏好正統說明文件的設計人士,VentureBeat 科技部落格的編輯 Harrison Weber 在 Slideshare 分享了一個非常棒的幻燈片。用簡短的介紹說明 Material Design 的基礎知識。可以免費下載閱讀。

Material Design

Material Design11

這個節奏明快的動畫是由學生 Jovie Brett 設計用來演示 Material design(naturally)。動態效果非常的神奇,並保留了 Material design 的精髓。我很喜歡這種趣味性,讓 Material design 有一個友好的個性。

Material Design Icon Templates

Material Design12

這是在 Dribbble 找到的 Material design 風格 UI 圖標,下載包包含共有 434 個 SVG 圖標。

Google’s Material Design Dashboard

Material Design13

這是 Sam Mearns 在 Dribbble 所展式的 Material Design 設計概念,屬於私人作品展示性質。

WhatsApp – Material Design

Material Design14

WhatsApp 被不斷的重新設計已是眾所皆知的了,Amruth Pillai 在重新設計時使用了 Material design 的風格。這讓它看起來非常的棒。(而且 Copy 看相當奇特。)

System Icons – Material Design

Material Design15

上面是一組 Google 製作的 Android 圖標。請注意,他們不是中空的僅圖標輪廓。這是 Google 提供的有趣展示。其實。也算是簡約的矢量和草繪格式圖標。

Action Button

Material Design16

如果您正在尋找有關 Material Design 的導航靈感,可以看看這個時尚的動態按鈕。這是一個為 Android 設計的導航按鈕有時尚的動畫,包含有 CodePen 鏈結為您實現這個動態效果。

Android L PSD Kit

Material Design17

Rasmus Nielsen 製做了這個非常棒的 Android L 組件。在細節部位處理的非常好。設計簡約乾淨,顏色也很漂亮,整體質感相當驚人。

Prayers Times App

Material Design18

Vincent Tantardini 打造的這個應用程式,也是使用了 Material Design 的設計概念。同樣用戶界面細節表現亮眼,優秀的 Material design 設計。

在技術上 Material Design 算是相當新穎的設計,資源是欠缺的。但你大概已經可以了解到 Material design 的設計概念。這個設計美學將重新塑造並影響很多地方,隨著 Android L 應用不斷推出,將會有越來越多的資源。如果你對 Material design 開發或設計風格有興趣,歡迎訂閱我們的設計電子報。