介绍:

image.png

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
我们挑战自己，为我们的用户创造一种视觉语言，将优秀设计的经典原则与技术和科学的创新和可能性相结合。 这是材料设计。 这个规范是一个活的文档，随着我们继续开发材料设计的原则和细节，这个文档将会被更新。

Goals:

image.png

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

目标:
创建一种视觉语言，将优秀设计的经典原则与技术和科学的创新和可能性结合在一起。

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
开发单一的底层系统，允许跨平台和设备规模的统一体验。 移动戒律是根本，但触摸，语音，鼠标和键盘都是一流的输入方法。

image.png

Principles

Material is the metaphor

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

<figure class="s-tag-media" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; display: block; width: 360px;">

image.png

材料是比喻
物质隐喻是合理化空间和运动系统的统一理论。 该材料基于触觉现实，受到纸张和墨水研究的启发，但技术先进，并具有想象力和魔力。

材质的表面和边缘提供了基于现实的视觉线索。 使用熟悉的触觉属性可帮助用户快速了解功能。 然而，物质的灵活性创造出新的代谢物，可以超越物理世界中的代谢物，而不会违反物理规则。

光，表面和运动的基本原理是传达物体如何在空间和相互之间移动，相互作用和存在的关键。 逼真的灯光显示接缝，划分空间，并指示运动部件。

image.png

Bold, graphic, intentional

The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

<figure class="s-tag-media" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; display: block; width: 360px;">
大胆，图形，故意
印刷设计的基本元素 - 排版，网格，空间，比例，颜色和图像的使用 - 指导视觉处理。 这些元素远不止于眼睛。 他们创建层次结构，意义和重点。 有意识的颜色选择，边缘到边缘的图像，大规模的印刷术和有意的白色空间创建了一个大胆的图形界面，让用户沉浸在体验中。

强调用户操作使核心功能立即显现，并为用户提供航点。

image.png

Motion provides meaning

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
Motion提供了意义
运动尊重和加强用户的主要原动力。 主要用户操作是启动动作的转折点，转换整个设计。

所有行动都在一个单一的环境中进行。 对象呈现给用户，而不会破坏体验的连续性，即使它们正在转换和重新组织。

动议是有意义和适当的，有助于关注并保持连续性。 反馈是微妙而清晰的。 转换是有效而连贯的。