(無料)|ログインまとめトップWebデザイン(1817)Android(5453)Webデザイ...(1093)マテリアルデ...シャッフルGoogleマテリアルデザインとフラットデザインって結局何が違うの?[UI/UX]マテリアルデザインのサイトのまとめをみていると「あれ?これフラットデザインじゃないの?」ということがよくあると思います。ややこしい気もしますが「考え方が違う」という部分からなら理解しやすいと思います。viewお気に入り追加この記事は私がまとめましたwebdesignsoupさんマテリアルデザインのサイトのまとめをみていると「あれ?これフラットデザインじゃないの?」ということがよくあると思います。実際マテリアルデザインじゃないものまでマテリアルデザインとして紹介しているサイトも、ありますよね?最初に言っておくと初期のフラットデザインから派生した中に、ほぼマテリアルデザインと言って良いものももともとあります。ややこしい気もしますが「考え方が違う」という部分からなら理解しやすいと思います。お気に入り詳細を見るまずフラットデザインって?出典getprismatic.com典型的なフラットデザインわかりやすいフラットデザインの例です。株式会社LIG探して追加|アップロード「エフェクトは最小限」がポイント。お気に入り詳細を見るざっくり言ってしまうとフラットでシンプルなやつです。見た目がフラットだったらフラットデザインですね。完全にフラットでしたが、途中から多少の影やグラデーションがあってもフラットデザインに分類されるようになった、という部分がマテリアルデザインと混同される原因になっています。影を許容してしまうと混乱するので、影があった時点でフラットデザインから「フラットデザインっぽいデザイン」になると思っちゃっていいです。淡いグラデーションは割とOKです。基本的に「フラットな見た目」という見た目での分類であることを知っていれば大丈夫です。お気に入り詳細を見るメトロUIもなんか似たやつだよね?出典smashinghub.comモダンUIに名前が変わった関係で「モダンなUI」のイメージがおかしいことにお気に入り詳細を見るメトロUIはどこか遠くの別の世界のやつです。今となってはデザインの話の中でそうそう出てくる事はありません。言われるまで存在を忘れていた方は今一度忘れてください。お気に入り詳細を見るそれで、マテリアルデザインって?出典www.google.comガイドラインの最初の画像で困惑するすごくフラットデザインっぽい!お気に入り詳細を見るマテリアルデザインは画像で見ただけではどういうものという理解は難しいと思います。最低限のコンセプトは知っておきましょう。guidelines探して追加|アップロードよく知られた触覚の特質を使用すると、ユーザが速くアフォーダンス(見た目から連想する機能)を理解する助けになります。お気に入り詳細を見るなんとなくスキュアモーフィズム的に聞こえますが、視覚ではなく「触覚」という表現であることに注意してください。いうと現実にある物を模したリアルなアイコンを使うと、みんな(パソコンとかスマホとか初めてな人にも)現実での経験から機能を推測できるから伝わりやすいよ!ということです。guidelines探して追加|アップロード光、外観と動きの基本原理はスペースに対して、そしてお互いに関してオブジェクトがどのように動いて、相互作用して、そして存在するかを伝えることへの鍵です。design「触覚の特性」というのが動画で見るとわかりやすいです。慣性のある動きをします。お気に入り詳細を見るエレメントの位置関係を意識してください出典googledevelopers.blogspot.jpマテリアルデザインの中心となる概念マテリアルデザインではZ軸の概念を積極的に取り入れています。エレメントが図のように重なっているイメージを持つ事が全ての前提となります。お気に入り詳細を見る重なり合えば必ず影が出来ます。濃く小さな影、淡く大きな影、それを真上から見たとしてもそれぞれのエレメント同士の距離感がつかめるはずです。ご覧のとおりそれぞれのエレメントには厚みがありません。マテリアルデザインは紙から着想を得たデザインなので、机の上で紙が浮いているイメージです。その紙はくっ付いたり変形したりしますが、他の紙を突き抜けるようなことはありません。重なって存在する事もできません。お気に入り詳細を見るぱっと見の違い4のようにエレメントと影の形が一致しないような影のつけ方はガイドラインにはありません。色々なサイトを見ていると「許容されそうな雰囲気」はあります。button(隆起したボタン)」と呼ばれ、枠のないテキストだけのボタンであっては不都合があるときに使います。影を取り入れたフラットデザインに関しては扱いがあいまいですが、一応はフラットデザインから外れます。お気に入り詳細を見る特徴的なボタン出典www.google.com丸い車のマークのボタンがフローティングアクションボタンです。これはページ内の最も重要度の高いボタンで、1ページ内に最大で1つまでしか使用できません。マテリアルデザイン以外での使用頻度はあまり高くないので、これがあったらいかにもマテリアルデザイン!という感じです。お気に入り詳細を見る操作に対してレスポンスを返します出典medium.comレスポンシブインタラクションたまにマテリアルデザインについて書いてあるサイトにレスポンシブとだけ書いてあって紛らわしいですが、レスポンシブデザインのことではないです。ユーザーの操作に対して反応を返してあげると操作感があがって良いですよ、ということ。お気に入り詳細を見るマテリアルデザインでは動きを重要視します当然「動く=マテリアルデザイン」ではありませんが、動きが多いのがマテリアルデザインの特徴です。お気に入り詳細を見る出典dribbble.comよく動きますタップしたフローティングアクションボタン自体がアニメーションの起点になってコンテンツが展開されています。アニメーションの起点はタップした場所からであることが多く、ユーザーの操作が直接作用したことがわかりやすい動きが特徴です。お気に入り詳細を見る出典dribbble.comどこがアニメーションの起点になるのかわかりやすい例です。お気に入り詳細を見る出典dribbble.comアニメーションには理由があります。ユーザーが自分がしている事と、その結果がつながっていることを理解する為に役立ちます。Corporation。