モバイルアプリでのマテリアルデザインの美しい実装

最近の多くの人々は、インスピレーションを得るためにモバイルアプリでのマテリアルデザインの美しい実装を探しています。

はい、マテリアルデザインが登場し、デザインの歴史が変わりました。この2年間、モバイルアプリのデザインで非常に人気があり、モバイルアプリでのマテリアルデザインの美しい実装が数多くあります。

しかしその前に、マテリアルデザインとは何か、そしてなぜそれが最も人気があり成功したデザイン言語になったのかを理解しましょう。

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

マテリアルデザインは、2014年にGoogleによって開発されたデザイン言語です。 Google Nowでデビューした「カード」モチーフを拡張して、マテリアルデザインは、グリッドベースのレイアウト、レスポンシブアニメーションとトランジション、パディング、照明や影などの奥行き効果をより自由に使用します。

2015年の時点で、Android向けのGoogleのモバイルアプリケーションのほとんどは、Gmail、YouTube、Googleドライブ、Googleドキュメント、シートとスライド、Googleマップ、受信トレイなど、新しいデザイン言語を適用しています。

すべてのGooglePlayブランドのアプリケーション、およびより少ない範囲でChromeブラウザとGoogleKeep。 Googleドライブ、ドキュメント、スプレッドシート、スライド、受信トレイのデスクトップウェブインターフェースにも組み込まれています。

Webアプリケーションのユーザーインターフェイスのマテリアルデザインの標準的な実装は、Polymerと呼ばれます。

これは、Polymerライブラリ、標準をネイティブに実装しないブラウザ用のWebコンポーネントAPIを提供するシム、およびマテリアルデザインの視覚要素を特徴とする「紙の要素コレクション」を含む要素カタログで構成されています。

グリッドベースのレイアウト、トランジションエフェクト、奥行きに焦点を当てたこのシステムは、すぐにAndroidアプリに採用され、システムをiOSの設計標準に引き上げました。

マテリアルデザインの原則

インスピレーションを得た視覚的手がかり

Googleは、マテリアルデザイン内の表面とエッジが実際の紙とインクの研究に触発されているため、「触覚の現実」という用語を使用してデザイン哲学を説明しています。

これにより、ユーザーは画面上のデジタルインターフェイスを問題なく視覚的に理解できます。 現実に基づいたデザインにより、画面上のオブジェクトが認識可能になり、操作しやすくなります。

大胆な美学

マテリアルデザインの色の選択は大胆で慎重です。 目を引く配色は、基本的な印刷ベースのデザイン手法と連携して、ユーザーを体験に没頭させます。

ユーザーの操作を強調するために、意図的な空白、端から端までの画像、および大きなタイポグラフィが使用されます。 このようにして、ユーザーは画面上のインターフェースの目的と機能をすばやく理解できます。

関連記事：モバイルアプリの設計における最も一般的なエラー

動きによる意味

人工的で機械的なアニメーションの代わりに、マテリアルデザインの動きは流動的で自然に見えます。 Googleでは、これをいくつかの異なる方法で行うことをお勧めします。

• 自然な加速と減速：不自然な動きを避けるために、ページ上の要素はスムーズに加速および減速する必要があります。 突然の開始、停止、および方向の変更は、ユーザーを不快にさせ、気を散らすものです。
• 視覚的連続性：ユーザーが脇道に追いやられないように、2つの視覚的状態間の移行はスムーズで簡単でなければなりません。 ウェブサイトやアプリがあるページから次のページに移動するときに、あまりにも多くのベルやホイッスルは不要です。
• 階層的なタイミング：最も重要なコンテンツを含む要素は、目がたどるのが最も簡単なパスに配置することによって強調する必要があります。 言い換えれば、重要な要素に注意を引くことが重要です。
• 一貫性のある振り付け：アニメーション化された要素は、気が散る可能性があるため、ランダムに遷移しないようにする必要があります。 代わりに、彼らは意味のある整然とした道を進むべきです。

マテリアルデザインは秩序を生み出すだけでなく、目的と意味を持って秩序を生み出します。 これは、Googleのブランドの感覚的な表現です。

購入が見つかった場合、それは、崇高なユーザーエクスペリエンスに対するAppleの明らかな独占に対する最初の深刻な脅威となる可能性があります。 iPhoneの愛好家として、私は初めてAndroidのやり方を横目で見始めたことを告白しなければなりません。

マテリアルデザインの気が遠くなるような特異性は、次の2つの事実への対応です。

• 開発者がUIを台無しにする可能性がある場合は、そうします。
• 良いデザインに代わるものは、デザインがないことではなく、悪いデザインです。

ここに、モバイルアプリでのマテリアルデザインの最も美しい実装のいくつかを示します。

マテリアルデザインを作成した人よりも優れた方法で実装できるのは誰ですか。 Googleカレンダーは、モバイルアプリでのマテリアルデザインの最も美しい実装の1つです。 1.000.000以上のダウンロードで、それは確かにパーティーを揺るがします。

Googleカレンダー

手始めに、Googleのアプリは、物理的なプランナーのレイアウトを模倣するほとんどのカレンダーアプリが使用する従来のスキューモーフィズムデザインを最終的に廃止しました。

スケジュールを紙に書き留める必要があるため、これ以上の制限はありません。 Googleのカレンダーは垂直方向のレイアウトを提供し、現在の日をページの上部に配置します。

このように、あなたは今後の日とイベントだけを見ることができます。 何も起こらない日が凝縮され、これによりエクスペリエンスがさらに合理化され、実際に役立つものだけが表示されます。

インターフェースへのこの単一の変更により、ユーザーはエクスペリエンスの中心に留まり、UIがそれらの周りを移動できるようになります。 視差スクロールを投入すると、非常に見栄えのするアプリが組み合わされます。

Evernote

Evernoteは、マテリアルデザインへの取り組みが高く評価されており、モバイルアプリでのマテリアルデザインの美しい実装の目を引く例です。

アプリは全体を通して強力で一貫した配色を持ち、機能的であると同時にうまく設計されています。 アイコンは、テキストのメモ、手書きのメモ、または撮影する写真のいずれであるかを明確かつ効率的に示します。

Elephantアイコンはシンプルでエレガントですが、ウェブサイト、iOS、Windows 10アプリも同様に慎重に設計され、レイアウトされています。

Microsoft Health

Microsoft Healthは、実際にはPlayストアでの最良の例の1つです。

このアプリは、バンドフィットネストラッカーと連携するように設計されており、すべての統計情報を単純な垂直レイアウトで平面の白いアイコンとともに表示します。 これらの見出しの1つをクリックすると、パネルが「開き」、統計が表示されます。

UIは、必要に応じてより深く掘り下げるオプションを持ちながら、概要を一目で把握できるようにするのに最適です。これは、優れたアプリ設計の特徴です。

素晴らしい：やる気を起こさせる

多くの人が、Fabulous：Motivate Meは、モバイルアプリでの最も正確で深く考えられたマテリアルデザインの実装であると考えています。

このアプリは、鮮明でフラットな画像と大胆な色を使用して、通常の方法で新しいマテリアルデザインの原則を探求しますが、Playストアで最も魅力的なアニメーションもいくつかあります。

Facebook Liveのモバイルアプリケーションがなければ、リストは完成しません。

このアプリは、マテリアルデザインの非常に最小限でありながら、効果的な例です。 通常は見られない方法でシャドウイングを使用します。 深さを提供するために、暗い代わりに明るい影を使用することによって。

マテリアルの重要な側面である図像、アニメーション、インタラクションデザインを興味深い方法で利用しています。