マテリアルデザイン：Googleの新しいUI言語を体現する10のアプリ - TechRepublic

\N

Google は、マテリアル デザインによって、自社のプラットフォーム上で実行されるアプリに触覚的な感覚を導入したいと考えています。

設計ガイドでは、3D 空間を占有し、影を落とし、互いに積み重ね、さらには移動時の運動量をシミュレートするなど、物理オブジェクトのように動作するコンポーネントからアプリ インターフェースを構築する方法について説明します。

この物理的性質は単なる様式上の選択ではなく、現実世界の動作を模倣し、人々に直感的に理解できる一連のルールにインターフェースを従わせることを目的としています。

マテリアル デザイン インターフェースの特徴は、大胆な色彩と明確な空白で区切られた明確なコンポーネントです。

Google は、マテリアル デザインを、タイポグラフィ、グラフィック デザイン、印刷メディアからの情報の構造化方法に関する何百年にも及ぶ知識を取り入れ、それをアプリの構築方法に組み込む試みであると説明しています。

これは、Googleが現在、コンピューター、スマートフォン、タブレット、ウェアラブル、テレビなど、自社アプリで採用するデザイン言語であり、将来登場するあらゆる新しいプラットフォームにも適用されます。さらに、Googleはサードパーティのアプリ開発者にもマテリアルデザインへの追随を促し、開発者がマテリアルデザインアプリの開発を始めるために必要なフォント、レイアウトテンプレート、カラーパレットを提供しています。

マテリアルデザインは、スマートフォン、タブレット、テレビ、ウェアラブル、車載機器向けのGoogleの最新OSであるAndroid Lollipopで動作するアプリの一部で既に採用されています。ここでは、Google Playストアからマテリアルデザインの主要な特徴を示すアプリをいくつかご紹介します。

電子カレンダー

e-Cal カレンダー アプリは、影が UI のコンポーネント間の関係についての視覚的な手がかりを提供する仕組みを示しています。

黄色のボタンの下の影が、ボタンが下の地表からどれくらい高い位置にあるかを示していることに注目してください。物体の高度によって影の見え方が変わります。

画像: Google Play ストア/Eサイト

Redditニュースプロ

マテリアル デザイン アプリの最も重要なコンポーネントの 1 つはカードです。この Reddit News Pro アプリの左側にそれが示されています。

Googleは、カードとは、写真、テキスト、リンクなど、特定のテーマに関する固有の関連データを含む紙片であると説明しています。カードは通常、より複雑で詳細な情報への入り口となります。

ここでわかるように、カードの幅は一定で、高さは可変です。

画像: Google Playストア/DBrady

フリップ通貨コンバータ

Google は、マテリアル デザイン アプリではタブを使用して、アプリのさまざまなビューや機能面を簡単に切り替えたり、この Flip Currency Converter アプリのように分類されたデータ セットを参照したりすることを推奨しています。

Google によれば、タブは新聞のさまざまなセクションを表示するなど、コンテンツを高レベルで整理するために使用する必要があるとのことです。

画像: Google Playストア/サム・ラストン

受信トレイ

Google の新しいメール アプリ Inbox は、マテリアル デザイン アプリがインターフェースをあまり多くの領域に分割することを避け、代わりに空白を使用して二次領域を区切る方法を示しています。

画像: Google

Google ニューススタンド

Googleは画像を使用する際、ストックフォトを避け、関連するコンテンツに特化した画像を使用することを推奨しています。このGoogle Playニューススタンドアプリがその例です。コンテンツが抽象的な場合は、解釈的なショットを選ぶことを推奨しています。

画像: Google Play ストア/Google Inc

トピーカ

マテリアル デザイン ガイドラインでは、コマンドを実行するシステム アイコンを、正面を向き、グラフィックで太字にし、幾何学的で一貫した形状で構成することを推奨しています。

Google では、さまざまな形式でダウンロードできる約 750 個のアイコンの選択肢を提供しており、そのうちの 1 つがこの Topeka と呼ばれるアプリに表示されるチェック マークです。

画像: Google Play ストア