Uiデザイン

マテリアルデザインを使用する理由長所と短所を比較検討する

5年以上前に導入された、Googleのマテリアルデザインガイドラインは、彼らのウェブサイトとアプリベースのサービスの特徴的な外観になっています。彼らはすぐにGoogleと提携していると認識され、会社のブランディングに恩恵をもたらします。

マテリアルデザインは、より幅広いデザインコミュニティでも採用されており、Googleのネイティブプラットフォームのはるか外側にあるウェブサイトやアプリ（さらには競合するプラットフォーム）でも見つけることができます。たとえば、Simplenoteは、デスクトップおよびモバイルプラットフォーム向けのアプリ全体でマテリアルデザインの美学を使用しています。これは、マテリアルデザインがさまざまな設計実装に最適である理由の一例にすぎません。

マテリアルデザインを使用する理由

Simplenote は、Googleのネイティブプラットフォームを超えて使用されるマテリアルデザインベースのインターフェースの一例です。

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

マテリアルデザインは、で利用されているカードベースのレイアウトに一部基づいて、2014年にGoogleによって作成されました Google Now 。紙ベースのデザインスタイルへの賛辞は、当時広く使用されていたフラットデザインスタイルとは異なります。

ほとんどのデザインシステムと同様に、マテリアルデザインは、さまざまなデバイス、プラットフォーム、入力方法で統一されたユーザーエクスペリエンスを提供するために作成されました。 Appleが標準としてフラットデザインの原則を実装した方法と同様に、Googleはマテリアルデザインを使用して、ユーザーが製品にアクセスする方法に関係なく、一貫したユーザーエクスペリエンスを提供できるようにしました。

マテリアルデザインの仕様には、タイポグラフィ、グリッド、スペース、スケール、色、画像など、すべてのガイドラインが含まれています。しかし、マテリアルデザインは、デザイナーに物事をどのように見せるかを教えるだけではありません。それは可能にしますデザイナー階層、意味、および最終結果に焦点を当てた意図的なデザインを作成する。

マテリアルデザインとは

バジルのカードベースの構造は、マテリアルデザインのレイアウトガイドラインに大きく根ざしています。

Javaでユニットテストケースを書く方法

マテリアルデザインを使用する理由

確立された他の設計システムと同様に、マテリアルデザインを使用することにはいくつかの大きな利点があります。デザイナー考慮する必要があります。

マテリアルデザインは、スタイルガイドラインのセットではなく、事実上デザインエコシステム全体です。潜在的な設計状況が存在する場合、マテリアルデザインには、それを処理する方法に関する包括的な一連のルールがある可能性があります。これには、あまり包括的でない設計システムでは見落とされがちな複雑なユースケースが含まれます。これは、そのような構造を必要とする設計者にとって非常に快適です。

Googleはマテリアルデザインを維持し、その使用方法と実装方法に関する広範なドキュメントを保持しています。この種のサポートとドキュメントは、多くの最新の設計システムでは不足している可能性があります。

マテリアルデザインフレームワーク

神社カードベースの製品ページを含む、多くの複雑なレイアウトを使用します。

anglejsプロジェクトを開始する方法

このすべての包括性とドキュメントにもかかわらず、マテリアルデザインはかなり柔軟なデザインライブラリのままです。ガイドラインの範囲内で、設計を実装する方法の詳細の多くは完全に設計者に任されています。

マテリアルデザインのよりきめ細かい利点には、フラットなデザインとは一線を画し、多くのユーザーにとってより直感的な微妙なスキューモーフィズムなどがあります。もう1つのユーザーフレンドリーな機能は、触覚フィードバック、微妙なアニメーションなどの形式のユーザーフィードバックがガイドラインに組み込まれていることです。物理学の感覚も非常に単純化されているため、相互作用がより直感的になります。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

マテリアルデザインはモバイルファーストの感性に基づいて構築されました。これは、本来の目的がAndroidアプリの設計であったことを考えると理にかなっています。また、ユーザーフィードバックと、さまざまな機能がどのように機能するかを示唆するために、デザインのアニメーションを促進します。

最終的に、暗いテーマオプションが利用可能になり、デザイナーの視覚的な柔軟性がさらに高まりました。もともと、マテリアルデザインは非常に明るく明るいため、一部のブランドの美学ではうまく機能しませんでした。ダークテーマガイドラインを追加すると、その問題が修正されます。

Googleのマテリアルデザインパターン

ラリーダークマテリアルデザインのテーマを実装するのに最適です。

マテリアルデザインを使用することの欠点

マテリアルデザインには非常に明白な長所がありますが、それはそれを使用することに伴う短所がないという意味ではありません。

まず、マテリアルデザインはすぐに識別でき、Google、特にAndroidと強く関連しています。これは必ずしもすべての人にとって悪いことではありませんが、一部の人にとってはマイナスになる可能性があります。

それがネガティブであるかもしれない1つの大きな理由は、それがデザインシステムを使用している間、他のブランディングの有効性を制限することです。はい、デザイナーはロゴ、カラーパレット（マテリアルデザインガイドライン内）、およびその他の差別化要因を組み込んでブランドアイデンティティをサポートできますが、マテリアルデザイン仕様に従った製品はほとんどの場合また Googleに関連付けられます。

モーションとアニメーションはマテリアルデザインガイドラインの範囲内で宣伝されているため、モーションとアニメーションが組み込まれていないサイトやアプリは、ユーザーには何かが足りないように見える可能性があります。人々はマテリアルデザインの動きの特徴を視覚的な特徴と関連付けます。これにより、動きを欠くことなくデザインを残すことができます。

確かに、1つの解決策は、マテリアルデザインの仕様に従うデザインに常にモーションを組み込むことです。ただし、モバイルデバイスでは、大規模なアニメーションはリソースを大量に消費する可能性があるため、データ使用量が多くなり、バッテリーの消耗が早くなります。これは、マテリアルデザインのガイドラインの範囲内で作業するときに設計者が考慮しなければならないバランスを取る行為です。

初心者は、マテリアルデザインの仕様がフラットデザインのような他のスタイルよりも複雑で実装が難しいことに気付くかもしれません。マテリアルデザインシステムは非常に包括的であるため、多くの新しいものよりも考慮し、遵守することがたくさんあります。デザイナー快適かもしれません。

Googleマテリアルデザインコンポーネント

クレーン明るいテーマと暗いテーマの両方を使用して、複雑で見た目に美しいデザインを作成します。

その包括性はまた、一部のデザイナーが制約を感じ、自分の創造性を完全に実現できないことにつながる可能性があります。また、事実上すべての設計上の課題が計画され、ソリューションが提供されているため、イノベーションを阻害する可能性があります。多くの場合に役立ちますが、これにより、設計者が問題に対して新しいアプローチをとることができなくなり、発生する可能性のある新しいアイデアの数も制限されます。

マテリアルデザインには、ウェブサイトやアプリを非常にユーザー的なものにする可能性のあるユーザビリティの問題もいくつかあります。 a フレンドリー。最大の問題の1つは、いわゆる「ミステリーミート」ナビゲーションは、多くのモバイルデザインアプリで発生します。多くの場合、アイコンはテキストの代わりに使用されます。アイコンがすぐに認識されてかなり使用できる場合もあれば、そうでない場合もあります。

「ホーム」を示す円は、以前ほとんどのAndroidインターフェースで使用されていたハウスアイコンよりも識別が非常に困難です。これは、マテリアルデザインの遺物である機能の上に形態を配置する代表的な例です。フラットなデザインのルーツ。

Photoshopでフォントを作成する方法

そして、それは下部のナビゲーションバーだけではありません。円形のフローティングアクションボタンを含めるというマテリアルデザインの好みも、使いやすさの問題です。これらの円形ボタンにはアイコン用のスペースのみが含まれ、補助テキストは含まれていません。また、アイコンは非常に自由に解釈できるため、多くの場合、ユーザーはこれらのボタンが実際に何をするのか疑問に思っています。

Googleのマテリアルデザイン要素

応答テキストラベルを含むより詳細なスライドアウトメニューでフローティングナビゲーションアイコンを解決します。

結論

アプリが主にAndroidプラットフォーム向けに構築されている場合は、マテリアルデザインを使用するのが簡単です。 Googleが広く採用されているため、マテリアルデザインの原則に基づくアプリはすべてネイティブアプリのように感じられます。

@media screen and（min-width 321px）and（max-width 480px）

とはいえ、Androidプラットフォーム以外にも、マテリアルデザインが確実な選択肢となるユースケースはたくさんあります。設計システムがさらに成熟するにつれて、これらの状況は必ず増加します。デザイナー少なくとも、ガイドラインをよく理解して、マテリアルデザインを使用するのが適切な時期や、他のシステムの方が適している時期を自分で判断できるようにする必要があります。

•••

ApeeScapeデザインブログの詳細：

基本を理解する

マテリアルデザインが重要なのはなぜですか？

Googleが使用する署名デザインフレームワークとして、マテリアルデザインフレームワークはブランドに関連付けられているものとしてすぐに認識できるようになりました。ただし、設計者は、その包括性とさまざまなユースケースのために、Googleのエコシステムの外部でマテリアルデザインガイドラインを使用することを検討する必要があります。