マテリアルデザイン、GoogleによるとUI

現代のシナリオでは、動きを含めたい場合は、物理学の法則と現実世界の物事の機能を尊重して、それを現実にしなければなりません。. 確かに、ユーザーは日常生活の動きを感じることに慣れています. これは彼らの注意を引き付け、物事の機能をよりよく理解するのに役立ちます.

材料設計の20の基本原則

マテリアルデザインは、モダンでエレガントなユーザーインターフェイス（IU）の設計を導く一連の原則とガイドラインです. 2014年にGoogleによって発売されたこの視覚言語は、オペレーティングシステムや使用されるインターフェイスに関係なく、すべてのデバイスに一貫した調和のとれたインターフェイスを作成することを目的としています。.

マテリアルデザインは、物理的な宇宙、色、空間の3つの主要な柱に基づいています. 各インターフェイスコンポーネントは、各素材に固有の割合と色を尊重して、この宇宙に溶け込む必要があります. また、ユーザーがある要素から別の要素に簡単にナビゲートできるように、スペースを明確に定義する必要があります.

マテリアルデザインは何ですか ?

なにこれ ?

マテリアルデザインは、2014年にGoogleによって作成された一連のデザインルールです. この機器は、プラットフォームのコンポーネントの管理を促進します. 確かに、Googleのデザイナーは、コンポーネントが特定の物理的特性を持っている必要があることを理解しています.

したがって、マテリアルデザインには、すべての指令が含まれています。

• 幅
• スピード
• シャドー

• タイポグラフィ
• グレート
• 空間
• 色彩
• スケール
• イメージング

このように、ユーザーは現実世界の物理的な要素と接触しているという印象を持っています.

同様に、マテリアルデザインは、デザイナーに製品やサービスの外観にどのように取り組むかを示すだけではありません. また、デザイナーが意図的なデザインを作成することもできます.

なぜマテリアルデザインを選ぶのか ?

ほとんどの設計システムと同様に、さまざまなデバイスやプラットフォームでより良いユーザーエクスペリエンスを提供するために材料設計が作成されています. 目標は、ユーザーが一貫した体験をしていることです .

マテリアルデザインは、スタイルガイドラインの単純なセットではありません. これは完全な設計システムです.

他の少ない完全な設計システムとは異なり、複雑なユースケースで設計状況を管理できます.

同様に、マテリアルデザインはかなり柔軟なデザインライブラリです. 指令では、デザインの実装の特異性の大部分がデザイナーに完全に任されています.

マテリアルデザインの原則のリスト

原則1：重要なリソースに精通してください

材料設計に関する具体的な知識を習得したい場合は、最良の解決策は公式のGoogleリソースに相談することです.

材料設計の設計のために、継続的に更新され、必要なすべての詳細が含まれています.

このリソースに関する最大の利点は、Androidの特定の側面に限定されていないことです. それどころか、それはどのプロジェクトでも、アプリケーションの種類やWeb上の材料設計の側面全体をカバーしています.

少なくともこのリソースの最初の章を閲覧することをお勧めします。.

原則2：マテリアルデザインの「素材」が何であるかを知っている

名前のマテリアルデザインは無害ではありません. 材料のデザインは、物質と物理的な世界の模倣です. 彼女は、光の反射や影の投影からでさえ、彼女のテクスチャーに触発されています. 材料表面は、紙とインクのサポートを再発明します.

確かに、材料デザインの原則の中心的なアイデアは、デザインの作成、現実世界のオブジェクトの模倣に焦点を当てています.

原則3：影を使用して視覚階層を定義します

主な材料設計ツールは次のとおりです。

• エッジ
• 表面
• 点灯
• 現実的な影

たとえば、シャドウズは、完全なデザインを持つために、さまざまな要素に優先順位を付けるのに役立ちます.

原則4：明るい色を使用します

マテリアルデザインは間違いなくミニマリストのアプローチで作られたデザインです. 言い換えれば、多くのデザインやスタイルのツールを使用する必要はありません.

使用できる数少ない物質的なものの1つは色です. 正確には、明るい色. 確かに、明るい色は材料デザインを強化する上で重要な役割を果たします. 彼らはユーザーの注意を引き、デザインと対話するように奨励します.

原則5：一次色とアクセント色を無視しないでください

この原則をあらゆるタイプのデザインに適応させる最良の方法は、メインパレットとして機能する3つのシェードを選択することです。.

選択した主要な色は、以下を含むインターフェイスの重要な要素で使用できます。

• フィールド
• ボックス
• 背景
• フォントなど.

そして、アクセントの色は、その名前が示すように、主な要素に注意を喚起し、注目しています. 選ばれたアクセントの色は、一次色の色よりも対照的でなければならないことを忘れないでください.

原則6：白い空間をうまく利用してください

白いスペースは、テキストとタイポグラフィのレイアウトで重要な役割を果たします. 現実には、ホワイトスペースは、特定の要素に注意を引き付け、ユーザーを誘導し、注意を向けるためのツールです。.

したがって、躊躇しないでください：

• メインタイトルには大きなタイポグラフィを使用します
• たくさんの白いスペースを追加します
• グローバルデザインに十分な空きスペースを保持してください.

原則7：新しいエッジツーエッジ画像のトレンドに従ってください

材料のデザインは、画像に完全に適合しています. だから、あなたがあなたのデザインに画像を追加することに決めたなら、彼らは主な役割を持っている必要があります.

マテリアルデザインに含まれる画像は、エッジツーエッジモードに従う必要があります. つまり、画像の端を窓の端または画面から分離するマージンがないはずです.

原則8：すべてがリアクティブでなければなりません

画面のサイズに関係なく、各デバイスで物事をアクセスしやすく使用できるようにすることは、マテリアルデザインの基本原則の1つです. 目標は、一貫した体験を提供することです. このようにして、ユーザーは、あるデバイスから別のデバイスへの移行中に混乱しません。なぜなら、彼はデバイスを変更するたびに新しいインターフェイスを取得しないからです.

この場合、設計は反応的でなければなりません. 幸いなことに、高度なフレームワークのおかげで、あなたの仕事の半分はすでに行われています. その結果、リアクティブなデザインの作成はあなたにとって難しい作業ではありません.

原則9：寸法

ウェブ上では、Z軸は見込み客ではなく重ね合わせに使用されます. 一方、3Dの世界はY軸に基づいています.

設計材料は主に3Dを使用するため、y軸は. 等尺性の視点に気付くために、Googleのデザインを見てください. この設計方法は、現実の世界に触発されているため、「マテリアル」という名前.

原則10：覚えておいてください、成功は詳細です

マテリアルデザインでは、すべてが簡単でなければなりません. 最良の例は、義のデザインです . この手法は、仮想オブジェクトの設計中に実際のオブジェクトを模倣することを目的としています. したがって、デザインの各要素が、実生活のものと可能な限り見えるようにする必要があります.

原則11：運動には意味がなければなりません

Googleによると、動きはデザインに意味を与えます. 材料デザインを使用するとき、動きは含める必要があるコンポーネントです.

マテリアルデザインでは、ムーブメントにはこれらの3つの特性が必要です。

1. 有益なこと：アクションがどこでいつ利用できるかユーザーには知られている必要があります.
2. ページの最も重要な部分にユーザーを集中して導くのを手伝ってください.
3. 表現力豊かで、インターフェイスに少し個性とダイナミズムを追加する.

原則12：動きは本物でなければなりません

現代のシナリオでは、動きを含めたい場合は、物理学の法則と現実世界の物事の機能を尊重して、それを現実にしなければなりません。. 確かに、ユーザーは日常生活の動きを感じることに慣れています. これは彼らの注意を引き付け、物事の機能をよりよく理解するのに役立ちます.

これが、Googleが本物の動きの概念を詳述するために、マテリアルデザインの指令の別のセクションを予約した理由です.

原則13：動きの加速と減速

ユーザーに明確で実用的な移行を提供する必要があります. 材料設計は現実世界現象の再現を目指しているため、動きのプロセスは可能性が高く現実的でなければなりません。.

デザイナーは、オブジェクトの動きごとに最高の時間を見つけなければなりません.

一方では、要素の過度の遅さがユーザーの気を散らすことができ、ユーザーのフローにマイナスの影響を与えることさえあります. 一方、動的すぎる動きはインターネットユーザーを邪魔する可能性があります.

この場合、あなたは右中央にいる必要があり、アニメーションの最適な期間と適切な読みやすさを確保する必要があります. ユーザーが変更に気付くように十分な時間を与える必要があります. しかし、彼らを待たせないでください. 調査は、200〜500ミリ秒が最高のアニメーション速度であることを証明しています.

原則14：アイコンアニメーションを活用してください

時々、円形の啓示効果を備えたコンテキストボタンでアイコンを作成できることがあります.

インターネットユーザーがこれらの詳細にしばしば気付かないことは事実ですが、それらはグローバルユーザーエクスペリエンスにプラスの影響を与えるために重要です.

原則15：さまざまな動きの異なるタイミングを作成します

1つずつ表示されるアニメーションオブジェクトは、より面白くて生きています. このようなアプローチは、ユーザーに各アイテムを見る可能性を提供します.

一方、ページのすべての要素を同時に提示すると、ユーザーはどこを見るべきかわからないため、ユーザーを混乱させます.

マテリアルデザイン、GoogleによるとUI !

マテリアルデザインは、Googleによって作成された視覚的でインタラクティブな言語です. しかし、それはグラフィカルインターフェイス（デザインシステム）を設計するためのガイドでもあります. このデザインは、実際のオブジェクト、紙、インクに触発されているため、「素材」です。フラットデザインとは異なります. Googleはマテリアルデザインを使用して、アプリケーションとプラットフォームのグラフィックスタイルを統合しました. したがって、そのインターフェイスには、任意のデバイスとすべての表示解像度に使用するのに非常に適しているという利点があります. 彼女も手頃な価格です. マテリアルデザインはUXを最適化し、開発者とインターフェイスデザイナーにリソースを提供します. 他のグラフィック電流と同様に、それはそのアマチュアと中傷者を持っています.

材料デザインは何よりも比phorです. 合理化された空間と運動システムの統一理論としての物質的な比phor. この素材は、紙とインクの研究に触発された触覚現実に固定されていますが、技術的には想像力と魔法に開かれています.

マテリアルデザインは何ですか ?

「マテリアルデザイン」という名前は、 設計ルール Googleが提案しました. 「マテリアルデザイン」または「コンテキストデザイン」によって翻訳されることがあります. まず、モバイルアプリケーション用の設計でした（モバイルファースト）. その後、彼はインターフェイスデザインの主なトレンドの1つになりました. Googleのアプローチはそれを思い出します フラットデザイン （またはフラットデザイン）：ミニマリズム、幾何学的形状、カラフルな、余分な（ゼアモーフィズムとは異なり）. しかし、この場合、それはフラットなデザインです…厚さと安reliefを持つ. 確かに、主な特徴は次のとおりです。

• a 比喩 デジタル機器からの紙とインク.
• 大胆なデザインと チャート.
• の作成 動き アフォーダンスとUXを改善するため. ユーザーのアクションは、重要なマイクロ相互作用を引き起こします.

ポリマーライブラリ

マテリアルデザイン（紙要素）と基本コンポーネント（コア要素）のグラフィック要素を使用するために、GoogleはWebアプリケーション開発者向けのライブラリであるポリマーを作成しました。. それ以来、Googleは、デザイナーがこのスタイルのデザインでデザインを支援するためのさまざまなサイトとツールを提供してきました.

この宣言を「マニフェスト」の形で、マテリアルリファレンスサイトの導入にあります.io：

「私たちは、優れたデザイン、革新的、テクノロジーと科学によって提供される可能性の古典的な原則を統合するユーザーのために視覚言語を作成するように挑戦しました。. 私たちはそれを：マテリアルデザインと呼びます.»

GoogleによるとWebDesign

したがって、マテリアルデザインはフラットデザインとは異なります. それは新しい種類のWebデザインです. 彼は レスポンシブウェブデザイン （Auto Adaptive）ユーザーエクスペリエンスを中心に. 目標は、デザインを取得することです。

• 直感的 すべてのユーザー向け（経験がないことを含む）
• すべてのサポートに適しています （コンピューター、タブレット、スマートフォンなど）
• 相互の作用 動的なアニメーションのおかげです.
• 同種の すべてのインターフェイス間

Googleによると、この設計は技術的および科学的可能性を使用して、現代の人間工学と設計上の問題にWebソリューションを提供します. 以下のビデオでは、Googleのデザイナーが最初の動機、彼らの働き方、そして実行された「物理的な」経験を表現しています. このデザイン言語が現実に固定されている場合、ユーザーの想像力に重要な場所を離れることに注意してください。. 「魔法」という用語は、しばしばマテリアルデザインについて戻ってきます.

Googleの再設計

Googleのアプローチを完全に理解するには、Googleの起源に戻る必要があり、Montain Viewの会社がデザインを攻撃したことの重要性. まあそれほどではありません…マテリアルデザインのイニシエーターによると.

このビデオを見ると、このプロジェクトを引き受けるために「ビジョン」を運ぶことの重要性についての良い考えが得られます：Googleの再設計.

なぜマテリアルデザイン ?

バージョン5に表示されます.Androidの0、マテリアルデザインは、2014年6月25日にGoogleのAndroidユーザーエクスペリエンスのディレクターであるMatias Durateによって初めて発表されました。. Google I/O Conferenceの一部でした. この新しいデザインチャーターで、Googleは独自に作成しました ビジュアル言語, モバイルアプリケーションから接続されたオブジェクトまで、サービスや製品が何であれ識別可能.

Matias Duarteは、2014年に2014年にPaper（Android / Material）のメタファーを展示しました）.

このデザインアプローチの最初の記念日を祝うためにこのビデオをご覧ください. 2015年5月に発売後の1つでした. マティアスはこの1年間の回顧展を見て、より熱心なデザイナーだけでなく開発者も、1年前に提示された原則を充当していたことにすでに感謝することができました.

材料デザインのためまたは反対 ?

このデザインも設計されています ユーザーエクスペリエンスを豊かにします そして、インターフェイスの有効性（複数の言語で読み取り可能な新しいフォント、より良いアフォーダンス…）1年後、GoogleはWebプロジェクト向けのマテリアルデザインライトキットを発表しました（キットをダウンロードしてください）.

材料設計は、さまざまな反応を引き起こしています. 一部の人は、単純で退屈だと思われるフラットデザインのこの「改善」を承認しました. 確かに、それは「流動的」で動くデザインです. 組成、ゲート、レスポンシブ、ダイナミクスでは、インターフェイスを構成します. 設計段階では、スペース、アライメント、色が不可欠です. これらすべての要素がコンテンツを優先し、ユーザーのナビゲーションを促進します. 物理学の法則に基づいたアニメーションは、彼の行動の結果に関してユーザーを安心させます.

しかし、他の人にとっては、Googleはそれを課そうとしています グラフィックスタイル, デザイナー/グラフィックデザイナーの創造性を制限するリスクがある. その後、すべてのWebサイトはAndroidアプリケーションのようになり始めます。 ユーザーエクスペリエンスの品質.

使い方 ? Androidを使用したアプリケーション

これらは「物質的な要素」であることに留意する必要があります. したがって、要素を越えることは不可能です. 影響を受けるコンポーネントのみが反応します. マテリアルデザインでは、環境は3Dです. 各オブジェクト、または「材料」には、x、y、zの3つの座標があります. Z軸は、オブジェクトの標高に関するものです. オブジェクトの標高、その寸法、損傷した影を決定することができますが、厚さは紙の厚さのままです. 後者は曲がることができません. 一方、それはすべての軸を動きます.

Androidは、3つのテーマ（暗いまたは明るい素材のテーマ、暗いActionBarを使用した明るい素材のテーマ）を提供します。. エンターテインメント インターフェイスのオブジェクト/要素に適用するのは2つです：トゥイーンアニメーション（トランジション用、たとえば画像を回転することによる）とフレームアニメーション（いくつかの画像の表示）. ロードアニメーションにより、それらをロードすることができ、それらを活性化/起動することの開始が可能になります.

材料デザインインターフェイスの例

理論的な説明 – 生き生きとしてユーザーとやり取りするインテリジェントな紙の比phor-はあいまいに思えるかもしれません. しかし、インターフェイスを観察すると、Googleの概念を理解することが具体的に容易になります.

アップラブのソースを参照してください（ストーリー.アップラブ.com）

例が豊富な別のソース：マテリアルデザインブログ

マテリアルデザインアイコン

この設計システムは、独自のアイコンを作成する必要がありました. さまざまなソースサイトで大きなライブラリを利用でき、均一なコヒーレントアイコンの設計の複雑さを知っている場合、UIデザイナーにかなりの時間を節約できます.

このテーマに私たちの記事を読み直してください：

さまざまな環境でこれらのアイコンを使用するためのGitHubガイドを参照してください.

その他のマテリアルアイコン（こちらからダウンロードする）

ここから多くのマテリアルデザインアイコンをダウンロードできます

ここからダウンロードするマテリアルデザインアイコンの別のソース

プロジェクトで使用するためのフラットデザインの素材アイコンの大部分を選択するだけでなく、それらを使用するガイド（こちら）

いくつかの情報源とインスピレーション

• 材料設計に関する参照：材料.io
  • モーション
  • スタイル
  • レイアウト
  • 成分
  • パターン
  • 成長とコミュニケーション
  • 使いやすさ
  • プラットフォーム
  • Googleデザインサイトには、ケーススタディと実用的なガイド（非常に豊富なニュースレターに購読する多くのリソースと可能性）があります）

  結論

  Googleマテリアルデザインは、からです フラットデザインのシンプルさ. インターフェイスは洗練されており、視覚的にバランスが取れています. フラットデザインのように、それはの要件を満たしています レスポンシブデザイン. しかし、フラットデザインはしばしばそのために批判されています アフォーダンスの欠如, グーグル正直 skeuomorphismの一部 高レベルの抽象化で. したがって、アニメーションのインテリジェントな使用、タイポグラフィの選択、紙の比phorにより、ユーザーエクスペリエンスが向上します. 開発者に提供されるグラフィック要素の範囲は、AndroidマテリアルデザインがどのようにWebを征服したかを理解することも可能になります…侵略的になるリスクがあります. もちろん、各デザインのトレンドと同様に、このタイプのデザインを使用する選択は、ターゲットを絞ったユーザーとビジネス目標/ブランドに依存します. デザイナー/デザイナーに、彼が完全に従わなければならないかどうかを決定する マテリアルデザインチャーター, それに触発されるか、背を向けること.

  • Googleマテリアルデザイン、設計の形式化
  • サービスデザインとは何ですか ?
  • デザイン思考とは何ですか ?
  • アフォーダンスとは何ですか ?
  • フラットなデザインとは何ですか ?
  • 懐疑とは何ですか ?
  • 感情的なデザインの定義、デザインの感情の場所

  私たちのサービスを参照してください：

  • システム設計を設計するためのトレーニング
  • 私たちの2日間の思考デザイントレーニング.