Skip to content

Instantly share code, notes, and snippets.

@demi168
Last active May 25, 2018 01:29
Show Gist options
  • Save demi168/7b11868440d561829709 to your computer and use it in GitHub Desktop.
Save demi168/7b11868440d561829709 to your computer and use it in GitHub Desktop.

This is Material Design

1. Material is the metaphor

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

1. マテリアル(物質?)はメタファーである

マテリアル(物質的な)メタファーは、合理化された空間と動作のシステムを統合した考え方です。 我々のマテリアルデザインは、紙のデザインに発想を得た触感的なリアルさに基づいてはいるものの、 イマジネーションや魔法にも通じるものがあります。

2. Surfaces are intuitive and natural

Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.

2. 直感的で自然な外観

「面(表面)」と「境界線(エッジ)」は、私たちの現実の体験に基づいた視覚的な意味(手がかり)をもたらしてくれます。 使い慣れた触感の特性を使うことは、私たちの脳の主要な部位に働きかけ、その物事の関係性(アフォーダンス)をすぐ理解するのに役立ちます。

3. Dimensionality affords interaction

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

3. 空間がインタラクションをもたらす

光や外観、動きといった基本的な要素は、オブジェクトがどのようなインタラクションをするのかを伝える手がかりとなります。 リアルな光は継ぎ目を表し、空間を分割し、可動部分を示してくれます。

4. One adaptive design

A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.

4. ひとつで適応するデザイン

ひとつの基礎となるデザインシステム(設計)は、インタラクションと空間をもたらします。 それぞれのデバイスは、同じ基礎システム(設計)の別の面を反映しています。それぞれの外観は、そのデバイスに合わせてサイズやインタラクションを適切に調整されています。 色、イコノグラフィー(図像・図像学)、階層、そして空間的関係性は保たれたままです。

5. Content is bold, graphic, and intentional

Bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.

5. コンテンツは力強く、グラフィカルで意図的なものです

力強いデザインは、階層、意味と注目点を作り出します。意味のあるカラーの選択、端から端までの画像、大規模なタイポグラフィ、意図的な空白は、熱中(没入)的で明瞭さを生み出します。

6. Color, surface, and iconography emphasize actions

User action is the essence of expericence design. The primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.

6. 色、表面、イコノグラフィー(図像・図像学)は行動を強調する。

ユーザーのアクションは、体験デザインの本質です。主なアクションは、全体のデザインを変える変曲点(inflection points)です。 それらの強調は、コアな機能をすぐに明らかにし、ユーザーへの道しるべを作り出します。

7. Users initiate change

Changes in the interface derive their energy from user actions. Motion that cascades from touch respects and reinforces the user as the prime mover.

7. ユーザーは変化をひき起こす

インターフェースの変更は、ユーザーのアクションからエネルギーを引き出します。 タッチから流れ落ちる動きは、ユーザーを尊重し強固なものにする原動力となります。

8. Animation is choreographed on a shared stage

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.

8. 共通のステージで演出されたアニメーション

すべてのアクションは、単一の環境で行われます。 オブジェクトはユーザーが変形し再編成しても経験の連続性を壊すことなくに提示されます。

9. Motion provides meaning

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are effcicient yet coherent.

9. モーションは意味を提供する

動きは注意を喚起し持続させるのに有意義で適切です。 フィードバックはとらえがたく繊細でそれでいて明確です。(?) 遷移は効率的で筋が通っています。(?)


Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.

デザインはクリエーションに配慮された芸術です。私たちのゴールは、多様な人間のニーズを満足させることです。 これらのニーズは、わたしたちのデザイン、実践、哲学を進化させるのです。

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 http://static.googleusercontent.com/media/www.google.com/ja//design/material-design.pdf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment