谷歌Material Design设计规范使用指南

Material Design是一种谷歌出的安卓的设计规范，这套优秀的设计语言虽然是应用在Android上，但其要义被许多设计师借鉴，并用在自己的设计中，是广大的UX、UI设计师必学的优秀设计规范。

现在，Material Design设计规范已经正式内置到Pixso，并同步上线至Pixso资源社区！打开Pixso进入“资源社区”或点击设计界面“左侧栏-资源”即可随时使用，快来体验一下吧。

Material Design是什么

Material Design是谷歌提出的一套集合视觉、交互和前端的界面设计规范，其目标有两点：一是用视觉形式囊括经典的设计原则，并将前沿创新和技术展现出来。二是以移动端为基础，将所有尺寸、类型的设备统一起来。

• Material Design与安卓

说到Material design不得不提安卓操作系统，Material design是移动端开发主流中除iOS外的第二套设计规范。最早的安卓系统是一个基于Linux的开放源代码的操作系统，由于它的免费开源和出众的性能被快速广泛的应用在各种设备中。

Android和iOS这两个系统是目前在市场上受众最广、知名度最高的手机操作系统，尽管苹果是一家市值破万亿美元的科技巨头，但根据数据显示，安卓手机在全球市场占比达85%。

• Material Design的诞生

Material Design是谷歌2014年推出的一种全新的设计语言，其风格主要是扁平化设计。但并不单单是扁平设计，而是一种注重卡片式设计、纸张的模拟、动效比较突出、使用了强烈对比色彩的设计风格。谷歌将这种设计语言充分运用到旗下的电脑、穿戴设备、电视等可以使用Material Design作为视觉体现的设备上。

Material design

从2014年发布到现在，Material design不仅仅是安卓设备阵营的设计规范，这种设计风格甚至被应用在苹果设备和windows设备中。作为设计规范，它的设计风格非常独特，具有包容性但同时又非常严格。

Material Design的独特优势

• Material Design的核心思想

Material Design的核心思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

• Material Design的三大原则

运用比喻

谷歌认为现实世界中的材质触感是可以通过纸片的隐喻来表达，通过在设计上运用符合运动规律的动画交互、通过光影打造设计层次的关系可以创造出全新的虚拟交互空间。

大胆、形象、目的明确

在视觉上，谷歌不仅要求生动形象，更要求设计时要确认设计的目的。强调视觉设计要为用户提供指引，凸显页面当下的核心功能。

动效表意

交互动画的目的就是吸引用户的注意，表达当下页面所发生的变化并给予用户反馈，同时和对视觉要求一样，一定要有意义。

• Material Design的材质与空间

Material Design中，最重要的信息载体就是魔法纸片。纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈。同时拥有液体的一些特性，能够自由伸展变形。

在Materia Design的众多设计理念中，非常有代表性和深远影响的当属Z轴概念。当二维平面到三维空时，Z轴则出现。手机界面是典型的二维平面，Material Design在平面中引入Z轴，则是在突出界面中每个物体都有它的厚度，和高度的理念。

Z轴的概念十分巧妙，它是对现实中物理现象的隐喻。有了相对高度，就有了不同形态的投影，界面上的物体就自然的实现了「错落有致」。

距离用户越近（物体悬浮越高）投影则越大，反之则越小。来看看应用案例：

如何在Pixso使用Material Design

使用方法一：

1、进入编辑界面

2、点击“组件”—点击“Material Design组件可一键拖拽免费使用

3、组件查看可通过“搜索关键词”，进行检索

使用方法二：

1、进入“工作台”，点击“社区资源”

2、选择“Material Design”，点击复制，复制成功后点击打开文档即可使用。

除了谷歌的Material Design设计规范外，Pixso社区还内置了很多知名大厂的设计系统，如阿里设计体系Ant Design、字节跳动设计系统Arco Design 、腾讯设计体系TDesign等。所有大厂库内组件拖拽即可使用，减少重复设计。赶快打开Pixso开启你的设计吧！

Pixso AI，一键免费生成设计规范

设计规范是产品设计的基础，想要保持设计的一致性，高质量的设计规范必不可少。

Pixso AI带来了国内首个AI生成设计规范功能，只需要输入具体的设计需求，如“求职招聘APP"、“在线购物网站”等，并提供品牌的设计规范主色号，就能轻松生成完整的设计规范，包括颜色、字体、布局、效果、描边、阴影等，无需任何设计基础也可以快速搭建设计系统，满足商业级别的设计需求，👉点击免费使用Pixso AI。

此外，Pixso AI生成设计规范的操作也非常便捷，当完成设计规范的生成后，点击“在当前文件新建样式”，生成的样式就会自动插入对应的样式栏中，在当前文件内高效复用，也可以“生成静态文档”，所有样式就会自动插入画板之上，用户可以任意调整和编辑样式，或者在团队内部实时分享，实现团队内部高效实时复用。

无论是个人项目还是团队合作，AI设计规范可以让设计师从繁琐的基础设计规范的制定中解放出来，让他们能够专注于设计创作，同时确保设计的一致性和专业性。