「フラットスタイル」と「マテリアルデザイン」の違いは何ですか？

20

Windows 8がリリースされた後、全員が「Metro UI」について語り、後に「フラットデザイン」について語りました。さて、Android Lollipopがリリースされてからは、すべてが「マテリアルデザイン」について語っています。誰かが「マテリアルデザイン」と「フラットスタイル」の違いを説明できますか？

website-design google-material-design flat-design

— user3631654
ソース

20

材料設計は、原則としてフラット設計とは無関係です。マテリアルデザインは、ブラウザの外で理にかなっている方法でレイヤーとアニメーションを使用して、要素をどのように描写するかでWebデザインをより現実的にしようとするという点で、skeuomorphicです。現時点では、視覚的にフラットなデザインとマテリアルデザインは似ていますが、マテリアルデザインはフラットなデザイン以外のデザインにも適用できます。

3つの原則に従います

材料は比phorです
大胆、グラフィック、意図的であること
動きに意味を与える

マテリアルデザインのレイヤー化は、z軸に沿ってユーザーとの間で要素を前後に移動し、現実的な影を追加してより多くの意味を伝えます。リストアイテムが削除されたときに位置に影響するアニメーションを作成するなどの要素をアニメーション化することは、ユーザーの流れと理解を向上させ、エクスペリエンスをよりスムーズにすることを目的としています。そうすることで、フラットなデザインよりも材料デザインを通してより多くの意味を描くことができます

_{Googleのデザイナーは、紙のモデルを作成して、マテリアルデザインのレイヤーと影を見つけました。}

間隔、色、使いやすさ、および配置とアニメーションに関する詳細をカバーする他の設計ガイドラインがあり、これらについてはGoogleのWebページで主題について確認できます。

マテリアルデザインとその実装方法の詳細を学ぶ良い方法は、Googleがマテリアルデザインを使用して作成したアプリを使用し、デザインの詳細について読むことです。これは、InboxアプリのBrian Lovinによるものです。

材料設計はフラット設計の一種の拡張であると思われるかもしれませんが、実際には原理は異なります。現在の傾向は、Googleが現在使用しているクリーンでフラットなデザインを作成することですが、マテリアルデザインの原則はこれらの範囲を超えて拡張され、他のデザイン手法にも適用できます。

— ザック・ソーシエ
ソース

マテリアルデザインでは、視覚的に、多くのフラットなデザインアイコンとスタイルを使用していますが、それらはその意味で確かに関連していると思います。マテリアルデザインは、もちろん、あなたが指摘する視覚的な外観以上のものです。

— DA01 14年

@ DA01のおかげで、私は、最新の編集で私のポイントをより明確にするためにしようとした

— ザックSaucier

関連する注意事項として、この記事はiOSをMaterial Designと比較し、それぞれについて詳しく知るのに最適です。

— ザックソーサー

5

フラットデザイン =ブロッキーなフラットアイコンと色のブロックのトレンディな現代UIの美学を指す総称。

Metro Design = フラットデザインの視覚的美学を使用するWindows 8用のMicrosoftの新しいUIデザイン（現在はMicrosoftデザイン言語と呼ばれています）。

マテリアルデザイン = フラットデザインの視覚的美学を使用したAndroid向けのGoogleの新しいUIデザイン。

（MetroとMaterialの両方は、単なるフラットなデザインの美観以上のものです。また、インタラクションデザイン、フロー、パターンライブラリなどについても話します。）

MicrosoftのUIの名前の変更に注目してくれたJohannesに感謝します。

— DA01
ソース

私は、これは、彼らが実際に何の詳細に十分に入るとは思わないです。それは彼らが使用されているもののようです

— ザックSaucier 14年

@ZachSaucier右。OPは主に違いについて尋ねていました。違いは、1つは視覚スタイルの一般的な用語であり、他の2つはブランド化されたUIガイドラインの特定の用語であることです。

— DA01 14年

1

@ DA01、MicrosoftのUIは2012年以降Metroという名前になっていないことを指摘したいだけです。代わりに「Microsoftデザイン言語」ソースと呼ばれます。OPの質問でもこの名前で言及されていることがわかりますが、それは間違っています。

— ハンナ14年

@ヨハネスうん、それは良いメモです。

— DA01

Material Designは、Androidだけでなく、Webデザインとデスクトップアプリのデザインでも使用できます。

— vovahost

3

マテリアルデザインはフラットではなく、Z軸上に少し間隔を空けた「マテリアル」の平らな層の束です。つまり、これらのオブジェクトには影があり、画面に表示されたときにどこかから来て、不要になったときにどこかに移動することになっています。つまり、フェードインとフェードアウトだけではありません。

また、色、間隔、およびレイアウトのその他の多くの側面を指定する一連の設計ガイドラインがあります。

それらのいくつかはここにありますが、いくつかのグーグル検索でもっと多くを見つけることができます。

http://www.google.com/design/spec/material-design/introduction.html#

— Zach Saucier
ソース

-1

「フラットデザイン」は彼らがあなたに説明したとおりであり、「マテリアルデザイン」デザインは実際には「スキューモーフィック」ではなく、「スキューモーフフラットデザイン」です。「マテリアルデザイン」では、平らなものを使用し、Z軸に合わせて「3Dフラットデザイン」を作成します。役に立てば幸いです。

— ルハラヌ
ソース

-2

実際、素材の背景ではフラットなデザインがより単純に表示されます。さらに、これらのアニメーションはすべて、サイトではなくモバイルデバイスとのユーザーインタラクションに重点を置いています。さらに、設計に関する作業をより意識的かつ哲学的にアプローチする場合、1つの製品でこれら2つのアプローチの使用を禁止する人はいません。skeuomorphismに関しては、インターフェイスの要素をより馴染みのある、ユーザーフレンドリーな方法で持ち込もうとしました。実際の世界では、このオブジェクトまたはそのオブジェクトはどのように見えるでしょうか。このようなアプローチのスタイルはほぼ不可能だった...一部の情報は、追加することの違いは何：材料設計対フラットデザイン

— ジム
ソース