自Material Design的設計理念推出以來，Google的內(nèi)部設計語言實現(xiàn)了從古老的用戶界面向現(xiàn)代網(wǎng)絡的現(xiàn)代外觀的轉變。最大的改變之一是使用大膽鮮明的顏色。Material Design的色彩指南將其顏色風格描述為“受到柔和環(huán)境，深色陰影和明亮亮點并置的大膽色調(diào)的啟發(fā)。”

越來越多的網(wǎng)站和App在設計中運用到材料設計，并趨向于使用谷歌官方的材料設計色彩搭配。Material design的顏色概念大多借用了扁平設計的趨勢。它配色大膽明亮。字體排版也跟simple sans serifs字體一樣遵循扁平主題。

根據(jù)Material design的官方文件：

“色彩從當代建筑、路標、人行橫道以及運動場館中獲取靈感，由此引發(fā)出大膽的顏色表達激活了色彩，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比。強調(diào)大膽的陰影和高光。引出意想不到且充滿活力的顏色。”

顏色是品牌標識中最重要的元素之一。例如Facebook中的藍色或UBER中的黑白主題。而在我們自己的設計中，使用哪種工具，選擇哪種顏色能最好的突出品牌感，也是一件頭疼的事情。以下是我整理的材料設計的顏色工具，希望能助你一臂之力。

材料設計顏色工具

1. Material.io

網(wǎng)站特點：完整的配色方案

地址：http: www.material.io

Material.io是谷歌官方的材料設計配色工具。用戶只需要在右側調(diào)色盤中選中喜歡的顏色，左側界面區(qū)域會立即顯示該種顏色在App界面中所呈現(xiàn)的效果。右下方的配色方案區(qū)域會顯示當前的主色彩、次要色彩和文本顏色的色號。而你需要的就是將它提供的配色方案運用到你的App設計中。

Tips：

（1）在Material Design中，主要顏色是指在您的應用中最常出現(xiàn)的顏色。一個輔助色是指用來強調(diào)自己的UI的關鍵部分的顏色。

（2）次要顏色最適合用于：

• 按鈕，浮動操作按鈕和按鈕文本
• 文本字段，光標和文本選擇
• 進度條
• 選擇控件，按鈕和滑塊
• 鏈接
• 標題

2. Material Colors

網(wǎng)站特點：

• 配色即時預覽
• 支持下載
• 在線分享

地址：https://www.materialui.co/colors

Material Colors不僅是個調(diào)色板，也是圖標工具和色彩工具。Material Palette主要特色是可以讓用戶一邊選擇顏色同時還能實時預覽效果圖，并且用戶只需要選擇1個或2個顏色后系統(tǒng)會自己匹配出一組APP UI 配色方案。值得一提的是，這個網(wǎng)站提供了在線分享和多種格式的下載。

3. Material UI

網(wǎng)站特色：

• 顏色代碼可直接復制粘貼
• 支持多種顏色格式切換

地址：https://www.materialui.co/ui

這個工具主要是面向希望快速訪問材料設計顏色代碼的開發(fā)人員和設計人員。用戶可以點擊顏色框并將相應的顏色代碼自動復制到剪貼板。這個網(wǎng)站也被稱作是顏色“小抄”，它把所有能提供給的顏色都匯聚在一個頁面上供用戶選擇，非常方便。

4. Material Design Palette Generator

網(wǎng)站特色：自定義色板

地址：http://mcg.mbitson.com

如果你對自定義色板感興趣，那么試試Material-design-like這個工具吧。首先，你需要手動設置一種顏色——不是系統(tǒng)色也可以哦——然后在同色系的色彩選擇對話窗口中找到你最喜歡的圖形編輯器。材料設計面板生成器將根據(jù)你選擇的顏色生成你的色板。

5. Color - Materialize

網(wǎng)站特色：支持顏色明暗調(diào)整

地址：http://materializecss.com/color.html

這是一個基于材料設計基礎顏色的調(diào)色板。這些顏色中的每一種都用基本顏色類和可選的變亮或變暗類來定義。

安卓材料色彩資源

1. Sketchappsources

地址：https://www.sketchappsources.com

這個網(wǎng)站提供各種設計相關的免費資源下載。你可以在這里找到安卓材料設計的調(diào)色板資源并且可以免費下載。

2. Android Material Design Colours

這是Github上面的網(wǎng)友提供的安卓材料顏色代碼。每個主色調(diào)下面都涵蓋了各種不同色調(diào)的顏色代碼。直接復制粘貼即可使用，節(jié)省了不少時間。

Material design風格應用設計欣賞

1. Google Hangouts

谷歌旗下產(chǎn)品之一，在應用設計方面很好的遵循了Material design的設計原則和配色方案。是一款典型的谷歌材料設計的App案例。

2. Weather Timeline

這款應用的配色非常符合上面提到的材料設計色彩工具的配色原則。在主色彩、次要色彩和文本顏色，以及按鈕顏色的搭配上非常鮮明且大膽。

Material design風格網(wǎng)頁設計欣賞

1. Google

提到Material design，怎么能錯過谷歌呢？作為谷歌自家的設計語言，當然是在自家網(wǎng)站上運用最為出色了。Material Design風格的設計在于擁有干凈的排版和簡單的布局,易于理解,內(nèi)容才是焦點。

2. WhatsApp

WhatsApp作為一款深受老外喜愛的及時通訊工具，在其網(wǎng)頁版的設計和手機端設計上都貫徹了材料設計的理念。WhatsApp在主色調(diào)的選取上并沒使用很艷麗的顏色，反而似乎是為了給人一種沉穩(wěn)的感覺，在配色上混入了一點點的灰色。

看完上面的工具和案例后，你是否也想過如何借助材料設計理念與色彩搭配創(chuàng)建自己的網(wǎng)站或手機App呢?

答案很簡單。你只需要一款材料設計風格的原型工具！作為一款正宗國產(chǎn)的原型設計工具，Mockplus無論在網(wǎng)站原型設計或是手機App原型設計方面都有其獨特的優(yōu)勢。結合軟件內(nèi)置的材料設計風格的組件和上面我為大家總結的材料設計配色方案，輕松設計一款Materia design風格的應用或網(wǎng)站不再是難題！

總結

顏色作為品牌標識中最重要的元素，在實際運用的時候需要慎重考慮。如何正確的使用顏色搭配，是一門大學問。希望上面羅列的資源可以幫你挑選出最美的Material design色彩方案。