web-dev-qa-db-ja.com

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

私は通常、Googleの Material Design UXフレームワークのファンです。その肯定的な側面は、マスコミとGoogle自身のデザイングループと伝道者によって十分に取り上げられています。

しかし、システムの欠点は 単純な検索が示すように のように、はるかに文書化されていません。だから問題は:

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

ここでは主観的な意見(たとえばの配色は好きではありません)を探しているのではなく、明確な設計ロジックに基づく具体的な欠点や測定可能な観察。

41
tohster

私はマテリアルデザインをかなり使用しており、次の欠点を理由にしています:

1.アニメーションはかわいいですが、認知的に混乱する可能性があります

Material Designはアニメーションによるトランジションを幅広く使用しているため、インターフェースに活気を与え、活気のある個性を与えることができますが、人間の脳は視覚刺激に非常に敏感であり、アニメーションは認知障害を引き起こしてユーザーのトレーニングを中断させる可能性があるため、最終的には逆効果になります。思想。

  • 特に、Googleの「 楽しい詳細 」の原則は、アニメーションが機能に必要ない場合が多いためアニメーションを作成するため、繰り返したり、気が散ったりすると煩わしくなります。

  • たとえば、ユーザーが複雑なワークフローを頭に抱えている場合、ワークフローの途中にある次の不要なアニメーションは、思考の流れを壊すのに十分な場合があります。

    animated button

2.インタラクティブな要素を見分けるのが難しい場合があります

マテリアルデザインはここではありません フラットデザインと同じくらいの量 ここでは、ボタンがしばしば影付きまたは大文字で表示され、ボタンが認識されやすくなっています。ただし、マテリアルデザインでは引き続きフラット/フラッシュ要素を使用しているため、クリック可能な要素として理解するのが難しい場合があります。デザイン仕様自体にもフラットなクリック可能なテキストの例があり、コンテキストを注意深く設計しないとわかりにくい場合があります。たとえば、次はマテリアルデザイン仕様自体のスクリーンショットです。

enter image description here

3.パフォーマンスのオーバーヘッド

マテリアルデザインではアニメーションを多用しているため、かなりのオーバーヘッドがかかります。私たちの技術オタクにとっては、高速の電話やラップトップを持ち運ぶ傾向があるため、通常は問題になりませんが、それ以外の世界ではそうではありません。ドロップシャドウ、塗りつぶし、変換/変換のトランジションは、ハードウェアアクセラレーションに依存しているわけではないため、アニメーションがぎくしゃくしていて、適切なクライアント機器を持たないユーザーにとっては不快です。

  • 特に、Facebookは Iの更新を中止 を数年前に行わなければなりませんでした。なぜなら、誰もがFacebookと同じナイスコンピューティング機器を持っているわけではないことに気づいたからです。

  • 最悪の場合、課税アニメーションを使用すると、デジタルデバイドがクライアントのパフォーマンスの差を均等化するのではなく増幅するため、デジタルディバイドがさらに悪化します。 https://en.wikipedia.org/wiki/Digital_divide

MD transitions

4.画像と色の使いすぎは気を散らす可能性があります

マテリアルデザインはまだ 鮮やかな色とイメージの使用を促進します の仕様。これはインターフェースを活発にすることができますが、このスタイルは使い過ぎる傾向があり、何かを成し遂げようとするユーザーの気を散らす可能性があります。たとえば、次のメニューはマテリアルデザインドキュメントに数回表示されます。それは不必要にハイコントラストのヘッダー背景を複数のレイヤーとオフグリッドラインと共に使用します。これは一度に見るのは楽しいかもしれませんが、テキストを読みにくくし、メニューが複数回開かれると本当に迷惑になるため、機能的にお粗末です。 :

material design cluttered menu

5. Googleエコシステムとの提携

良くも悪くも、マテリアルデザインはGoogleが推進するフレームワークであり、Androidは著名な初期採用者であるため、フレームワークがGoogleとの知覚関係から切り離されることはおそらくありません。それは考慮すべきことです。プラットフォームに依存しないUXを作成したい開発者向け(例:IOSでも実行する必要があるアプリ)。


もう一つ...

ここでの私の意図は、フレームワークを不必要に批判することではありません...逆に、私はマテリアルデザインを本当に気に入って、使い続けています。落とし穴とアンチパターンは設計フレームワークで理解することが重要であるため、ここでの目的は欠点を文書化することです。

36
tohster

輪郭バイアス

コンターバイアス

輪郭バイアスは、鋭い角度または尖ったオブジェクトよりも輪郭オブジェクトを優先する傾向です。私たちの周りの自然の世界を見ると、私たち自身の外見を含め、私たちの周りの周囲の環境など、多くの輪郭や曲線が見えます。それは自然なプロセスです!

マテリアルデザインでは、要素に鋭い角を持つ長方形を多数使用します。これにより、要素がユーザーにとって視覚的に魅力的でなくなります。

カードとボタンの例では、輪郭のないシャープな長方形を使用しています。

enter image description here

角の丸い方が目に優しい理由

エッジの処理には、脳のより多くの「神経画像ツール」が含まれます 1 。したがって、角が丸い長方形は、通常の長方形よりも円に近く見えるため、処理が簡単です。

角丸コーナーと四角コーナーの混合

角の丸みはユーザビリティにどのように影響しますか?

11
DasBeasto

一般的に言えば、UXの問題には[〜#〜] direct [〜#〜]開発者が行った設計のタイプへの接続がありません。そのため、それらは[〜#〜]から発生しますdeveloper [〜#〜]アプリケーションを理解しやすくするためにその要素を効果的に使用する方法がわかりません。

アプリケーションのマテリアルデザインを利用する開発者からコミットされた、最も一般的なUXの「罪」は何であるかを質問しているように感じます。上に挙げたものはたくさんあります。材料設計。

しかし、それを責めないでください。多くの材料設計アプリケーションがあります[〜#〜]なし[〜#〜]最も一般的な欠陥であり、それらは使用する喜びでもあり、彼らにとっても目に見えます。

2
downrep_nation

私がマテリアルデザインで抱えている唯一の問題は、人々が混乱しやすいインターフェースを簡単に作成できることです。

たとえば、FAB(フローティングアクションボタン)を考えてみましょう。レイアウト、グラフィックデザインの点で、使うのは美しいです。しかし、実用的な目的のために?画面に常にFABが必要なわけではなく、確かに1つ以上必要ではありません(先週、5つのFABを含むレイアウトを見つけました)。

マテリアルデザインは美しいですが、効果的に実装するには、批判的な目とテストが必要です。

ところで、角を丸くすることはグローバルな解決策ではありません-それはすべてコンテキストとユーザーに送信したい記号論的なメッセージの種類に依存します。

1

これは、使い方次第だと思います。このコメントは、一般的なマテリアルデザインのアイデアよりも、Googleの実現に関係しているかもしれません。

Googleによってゆっくりと駆動されるように見える新しいものの1つは、丸みを帯びた大きなエッジであり、半円形のテキストフィールド(たとえば、GoogleのURLアドレスフィールドChrome for Android =最近の更新で)。

マテリアルデザインのこの実現により、テキストはフィールドの「コーナー」によって不明瞭にならないようにフィールドの内側から開始する必要があるため、長方形のものや丸みを帯びたエッジを持つ長方形のものに比べて、テキスト用のスペースが少なくなります。

これは小さなモバイル画面には適していません。ドキュメントでそれを強調することは理にかなっています。

0
nsandersen