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像素。