フラットデザイン、マテリアルデザイン、スキューモーフィズムの相対的な利点は何ですか?


8

私はこの「マテリアルデザイン」と呼ばれるものについてのGoogleのガイドラインを見てきましたが、それに従っています。ただし、フラットなデザインを使用している多くのサイト(TwitterCodecademyGitter)も見かけます。これらはほんの一部です。次に、ホームページのように、CSS3グラデーション、シャドウなどを使用して、リアルに見えるサイトをデザインするための詳細な画像があります(私が間違っている場合は修正してください。以下のためのTwitterのブートストラップ2

私が理解していることから、フラットなデザインはモバイルトラフィックの負荷を軽減します。

(速度/ UX /その他に関して、特に)それぞれが互いに提供し合う利点は何ですか?


これは興味深い質問だと思います。私の最初の考えは、スキューモーモーフィックなデザインは、イメージに大きく依存している場合、速度が低下する可能性があるということです。モバイルトラフィックの負荷を軽減するフラットなデザインとは、そういうことだと思います。しかし、対抗点として、CSS3で利用可能な多くの機能を使用してスキューモーモーフィックなデザインを実現することができるため、速度に関してどちらか一方が有利であるかどうかの答えが「ときどきはい、時々いいえ」になるのではないかと心配しています。
JohnB 2014

@JohnBサイトにもアクセスできません。Chromeで「リダイレクトループ」エラーが発生します。ただし、ここではOTの議論に飛び込まないようにしてください。

回答:


11

スキューモーフィズムは、実際にはフラットなデザインと正反対です。Googleの「マテリアルデザイン」は、フラットなデザインを具体的に解釈したブランド名にすぎません。それでもフラットなデザインです。「フラットデザイン」は、iOS7のリリース時にAppleによって作成されました。それは最初に使われた用語なので、Googleが最初にそれを行ったとしても、「マテリアルデザイン」と簡単に呼ぶことができたはずです。

スキューモモーフィズムの実践は、オブジェクトがスクリーンに投影されるのではなく、物理的にリアルであるかどうかを確認することを期待する視覚要素を追加することです。例として、シャドウとハイライトがあります。それらは現実世界のすべてのものに存在しますが、デジタル世界には存在しません。これらの変形要素を追加することは、人間がデジタル要素に慣れ親しむように設計されています。

フラットデザインはこれとは正反対です。「フラットデザイン」では、「実世界」の物理学と照明は考慮されません。デジタルエレメントは作成されますが、設計者は、オブジェクトが物理的なものである場合に、エレメントに "現実"がどのような影響を与えるかを気にせずに作成したいと考えています。

ブートストラップのホームページは、スキューモーフィズムの例ではありません。一般的なフラットデザインの一例です。インセットの「エンボス」効果を持つ中央のインセット長方形もスキューモーフィックであると主張できますが。したがって、おそらく「ハイブリッド」が最も適切な説明かもしれません。

技術的に長所/短所に関して、どちらか一方を選択する確固たる理由はありません。

多くの場合、高品質で信じられないほどの変形効果画像が必要になります。画像は当然HTTPリクエストとブラウザの読み込みを増やします。変形モーフィングCSSを優先して画像を除外する場合、CSSは非常に複雑で大きくなる可能性があります。HTTPリクエストの画像を減らす必要がありますが、スキューモーフィック要素を含むCSSファイルの追加サイズ(kb)は、HTTPリクエストの削減(ユーザーの観点から)を上回ります。

フラットなデザインは、基本的なCSS3で簡単に引き離すことができます。画像フラットなデザインで必要な場合、同じ画像がスケオモーフィックなデザインでも必要になる可能性があります。したがって、利点/欠点の点で互いに相殺されます。通常、フラットデザインCSSは複雑さが少なく、編集が簡単ですが、そうである必要はありません。非常に複雑なCSSプロパティを使用してフラットなデザインを作成することは十分に可能です。ほとんどのフラットなデザインにはグラデーションが含まれています。オブジェクトが実在する場合のライトの動作に基づいた「実際の」グラデーションではありません。AppleのiOS7-8またはWindows 8アイコンはすべてグラデーションを使用しています。「これを突出しているように見える」グラデーションとは対照的に、非常に微妙なグラデーション。

結局のところ、フラットなデザインがスキューモーフィズムよりも技術的に優れているか悪いかという明確理由はありません。それはすべてデザイナーの好みの問題に帰着します。スキューモーフィズムとフラットデザインはどちらも、技術的な根拠のないデザイントレンドにすぎません

「技術的には赤いWebサイトと青いWebサイトのどちらが優れているのか」と尋ねるのと同じです。-「あなたが好むものは何でも」以外に答えはありません。


1
1つの注意点は、CSSで純粋に作成された変形効果は、グラデーション、ボックスシャドウなどが非常に集中するため、ファイルをロードするだけでパフォーマンスが大幅に低下することです
Zach Saucier '27

私は答え@ZachSaucierでそれを避けています:)
スコット
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.