介紹:

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.
我們挑戰(zhàn)自己，為我們的用戶創(chuàng)造一種視覺語言，將優(yōu)秀設(shè)計的經(jīng)典原則與技術(shù)和科學(xué)的創(chuàng)新和可能性相結(jié)合。 這是材料設(shè)計。 這個規(guī)范是一個活的文檔，隨著我們繼續(xù)開發(fā)材料設(shè)計的原則和細節(jié)，這個文檔將會被更新。

Goals:

image.png

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

目標:
創(chuàng)建一種視覺語言，將優(yōu)秀設(shè)計的經(jīng)典原則與技術(shù)和科學(xué)的創(chuàng)新和可能性結(jié)合在一起。

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 ?rst-class input methods.
開發(fā)單一的底層系統(tǒng)，允許跨平臺和設(shè)備規(guī)模的統(tǒng)一體驗。 移動戒律是根本，但觸摸，語音，鼠標和鍵盤都是一流的輸入方法。

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

材料是比喻
物質(zhì)隱喻是合理化空間和運動系統(tǒng)的統(tǒng)一理論。 該材料基于觸覺現(xiàn)實，受到紙張和墨水研究的啟發(fā)，但技術(shù)先進，并具有想象力和魔力。

材質(zhì)的表面和邊緣提供了基于現(xiàn)實的視覺線索。 使用熟悉的觸覺屬性可幫助用戶快速了解功能。 然而，物質(zhì)的靈活性創(chuàng)造出新的代謝物，可以超越物理世界中的代謝物，而不會違反物理規(guī)則。

光，表面和運動的基本原理是傳達物體如何在空間和相互之間移動，相互作用和存在的關(guān)鍵。 逼真的燈光顯示接縫，劃分空間，并指示運動部件。

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;">
大膽，圖形，故意
印刷設(shè)計的基本元素 - 排版，網(wǎng)格，空間，比例，顏色和圖像的使用 - 指導(dǎo)視覺處理。 這些元素遠不止于眼睛。 他們創(chuàng)建層次結(jié)構(gòu)，意義和重點。 有意識的顏色選擇，邊緣到邊緣的圖像，大規(guī)模的印刷術(shù)和有意的白色空間創(chuàng)建了一個大膽的圖形界面，讓用戶沉浸在體驗中。

強調(diào)用戶操作使核心功能立即顯現(xiàn)，并為用戶提供航點。

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 ef?cient yet coherent.
Motion提供了意義
運動尊重和加強用戶的主要原動力。 主要用戶操作是啟動動作的轉(zhuǎn)折點，轉(zhuǎn)換整個設(shè)計。

所有行動都在一個單一的環(huán)境中進行。 對象呈現(xiàn)給用戶，而不會破壞體驗的連續(xù)性，即使它們正在轉(zhuǎn)換和重新組織。

動議是有意義和適當(dāng)?shù)模兄陉P(guān)注并保持連續(xù)性。 反饋是微妙而清晰的。 轉(zhuǎn)換是有效而連貫的。