Google的Material Design規範最初是針對Android平台的，旨在表明平台上設計的一致性。
01之06
如何在Adobe Experience Design CC中創建材料設計卡
一旦設計師開始理解並理解背後的想法，Material Design就悄然成為網頁和移動設計中最具影響力的視覺哲學之一。 您只需在Pinterest上進行材質設計搜索，您就可以在設備，平板電腦甚至網站上看到數百個示例和實驗。
材料設計的迷人之處在於谷歌正在考慮如何在移動設備上展示和使用應用程序，但這些概念正被應用於任何平台上的任何尺寸的任何屏幕。 正如穀歌在該規範的開頭段落所述，“我們挑戰自己為用戶創造一種視覺語言，將優秀設計的經典原則與技術和科學的創新和可能性相結合。 這是材料設計。 這個規範是一個活的文檔，隨著我們繼續開發材料設計的原則和細節，這個文檔將會更新。“
這個材料非常籠統地說是紙，而材料設計的標誌就是紙牌。 想想一張表面上的索引卡，你就在正確的軌道上。 卡片是包含照片，視頻，文本鏈接等元素的元素，但是它們與大多數交互式設計的區別在於它們旨在關注單個主題。 卡片有圓角，包含微弱的陰影，表明它們在表面之上，如果它們都在同一平面上，則稱它們為“集合”。
在這個“如何”中，我們將根據規範創建一張卡片。 我們不是通過各種成像和繪圖工具來創建卡片，而是從不同的方向著手。 我們將使用Adobe體驗設計中的工具，該工具目前僅在Macintosh上公開預覽，並且是免費的。 你可以在這裡下載。
讓我們開始吧。
02 06
在Adobe Experience Design中創建原型畫板
從Experience Design CC（XD）的開始屏幕創建Android屏幕沒有明顯的方法。 當我們打開XD時，我們常常要做的是選擇iPhone 6選項，當界面打開時，我們選擇工具欄底部的Artboard工具，然後從右側的屬性面板中選擇Android Mobile 。 然後我們切換到選擇工具，在iPhone畫板的名稱上單擊一下，然後刪除畫板。 不再。
在當前版本的XD中，iPhone 6旁邊有一個小箭頭，點擊後會打開一個下拉菜單。 從那裡您選擇Android Mobile版本，並選擇在界面中打開的Android Mobile畫板。
為確保我們為卡片打開適當的屏幕空間，我們通常會前往Sketch 3，然後將狀態欄，導航欄和應用程序欄從材質設計模板複製並粘貼到畫板。 Sketch 3.2包含一個Material Design模板（ File> New From Template> Material Design ），另外一個非常好的免費模板來自Kyle Ledbetter，您可以在這裡獲得。 如果您沒有Sketch，則可以從File> Open UI Kit> Google Material中找到的XD貼紙中進行複制和粘貼。 您也可以從Google下載它們以用於Photoshop，Illustrator，After Effects和Sketch。
03年06月
將材質設計卡添加到Adobe XD CC Artboard中
XD最有用的功能之一是包含適用於Apple iOS，Google Material和Microsoft Windows的UI套件。 在許多方面，他們在術語“快速原型”中增加了“快速”一詞，並且他們使得設計師的工作變得更加容易，因為通用的UI元素不必在設計應用程序中不斷重新創建，例如Photoshop，Illustrator或草圖。
我們需要的UI元素是一張卡片。 為了達到它，我們選擇了文件>打開UI工具包> Google資料，並將該工具包作為新文檔打開。 我們需要的元素在Cards類別中找到。
我們喜歡這些內容的是他們堅持內容塊規範中規定的材料設計規範以及版式規範中規定的文本格式和間距規格。
我們想要的卡片風格是左下角的卡片風格。 我們只需用鼠標對其進行選框並將其複製到剪貼板。 不幸的是，XD不包含打開文檔的標籤界面。 我們所做的是將打開的文檔窗口向下移動一點，以顯示我們正在處理的那個窗口，選擇它並粘貼。 快速切換打開的XD文檔的另一種方法是按Command-' 。
04年6月
如何在Adobe Experience Design CC中編輯材質設計元素
當XD中的卡片從剪貼板到達時，不要愉快地開始使用它。 你需要做的第一件事就是取消組合卡，因為你需要訪問組成該卡的零件。 為此，請選擇該卡並選擇對象>取消組合或按Shift-Command-G。
你的卡片現在由三部分組成：
- 圖像的淺灰色框。
- 中等灰色框為文本
- 後箱用作背景。
第一步是刪除淺灰色框。 它的唯一目的是作為圖像的佔位符，如果您選擇，可選。
帶有文字的框實際上是一個黑灰色，具有50％的不透明度。 此框可用作文本背景，您可以更改顏色和框的不透明度。
雖然它不是直接顯而易見的，但淺灰色方框遵循Material Design規範，其頂角四捨五入為2像素。 如果您要添加圖像，請記住這一點。 它還需要可以添加到成像應用程序或XD中的圓角。
看到這是卡的靜止狀態，它也需要一個陰影。 該規范清楚地表明，有一個2像素卡的休息高度。 要添加此項，請選擇黑色背景形狀，並在屬性面板中將Y和B（模糊）值設置為2。
05年06月
如何在Adobe XD CC中將圖像添加到材質設計卡片
知道該卡的寬度為344像素，圖像區域為150像素高（ 淺灰色框的高度的一半 ）。我們在Photoshop中打開圖像，將其裁剪至尺寸並使用Photoshop的導出為對話框中的@ 2x選項進行保存框。 該圖像已導入Adobe XD。
然後，將淺灰色框拖到粘貼板上的圖像上，並選擇“ 對象”>“具有形狀的遮罩” 。 結果是圖像拾取了形狀的圓角。 然後，我們將圖像移至最終位置。
隨著圖像就位，我們改變了中等灰色框的背景顏色，改變了文本和鏈接文本的顏色。
06年06月
使用Adobe XD CC網格功能
現在需要根據材料設計規范正確放置卡片。 這意味著卡的兩側有8個像素，卡的位置應該在應用程序欄下方8個像素處。 為此，請在美工板名稱上單擊一次，然後在“屬性面板”中選擇“網格”。 網格出現在美工板上。
默認網格大小為8個像素，恰好與Material Design的網格大小相同。如果需要不同的大小，請更改網格區域中的值。 如果您想更改網格的顏色，請單擊顏色芯片並從生成的顏色選擇器中選擇一種顏色。
在網格可見的情況下，點擊卡片並將其移動到最終位置。
最後，我們選擇了卡片，點擊了“重複網格”按鈕，並將卡片之間的間距改為8像素。