マテリアルテーマ: 同じアプローチ、同じ基本

Google I/O 中に、マテリアルデザイン 2 はマテリアルテーマという名前で発表されました。彼は何を持ってきますか？この記事で答えてください。

マテリアルデザインは、異なるプラットフォーム (スマートフォン、コンピューター、コネクテッドウォッチなど) 間の一貫性を向上させるために 2014 年に発表されました。当時、Android 4.0 (Ice Cream Sandwich) とその Holo テーマに関して開始された取り組みは、実際のエミュレーションを作成するのに苦労していました。実際、Google アプリケーションとサードパーティアプリケーションの間を移動するのが難しい場合がありました。したがって、マテリアルデザインは、ユーザーにとってすべてがより一貫性のあるものになるようにルールを提供するために作成されました。

限界を超えた成功

4 年後、マテリアルデザインは Android と Web の両方で大きな成功を収めました。残念ながら、設計者側の結果はさらに複雑です。確かにマテリアルデザインは彼らの創造性を表現するためのフレームワークを提供しましたが、それは制約が多すぎました。 Google はプラットフォームを標準化したいあまり、デザイン面で何千ものクローンを作成しただけです。さらに、この Mountain View の巨人は確かに視覚的な手がかりを提供していましたが、当初は開発者にすぐに使えるコードを提供していなかったので、開発者は同じコンポーネントを何十回も再作成する必要があり、その結果パーソナライゼーションが忘れられてしまいました。

のマテリアルデザイン2、Googleは最終的にこう呼んだマテリアルテーマ—そしてその最中に明らかになったGoogle I/O 2018— 実際には、これまで私たちが知っていたことの単純な進化です。このアイデアは、特にコンポーネントに関するマテリアルデザインの長所を維持しながら、各アプリケーションが独自のコードでテーマを適切に使用できるようにすることです。もう 1 つの新機能: マテリアルデザインは基本的に Android 向けに設計されていますが、マテリアルテーマは iOS を含むすべてのプラットフォームに真にオープンです。たとえば「iOS ではしてはいけない」などの文は表示されなくなります。

Googleのスタイルを真似しないでください

彼を通してイニシアチブ材料研究, Googleは、マテリアルがどれほど柔軟になったかを示したいと考えています。古典的なマテリアルデザインに独自の表現を与える方法をいくつかの例で説明します。ここでの考え方は、デザインを完全に再作成することではなく、単にインターフェイスをパーソナライズしてコードを独自のものにすることです。

Google が配布を開始したアプリケーション (Gmail、Google Tasks など) は良い例です... 見習うべきではありません。確かに、会社のロゴは、その曲線と認識できる 4 つの色で際立っています。したがってGoogleテーマをコピーしても意味がない: あなたのブランドと一致しません。流用とパーソナライゼーションは明らかにマテリアルテーマの新機能です。

以下の画像では、非常に一般的な外観のマテリアルデザインアプリケーションが、どのようにして突然ユニークになるかを示しています。

私たちは基本を守ります

ほとんどすべての制約がなくなったとしても、ガイドラインマテリアルテーマによるものは既視感を与えます。私たちは常に、コンポーネントの紙、高さ、色の概念を見つけます...簡単に言うと、マテリアルテーマは、各コンポーネントがどの程度変更できるかを説明することによってマテリアルデザインを再解釈することを目的としています。したがって、アプリケーションを新しいマテリアルデザインに変換するようにデザイナーに依頼すること自体は不可能です。次に進む前に、まず自分のブランドを所有し、独自のコードを持っている必要があります。

そして主な新機能

色

Google はマテリアルデザインを使用したカラーパレットを提供しました。今後任意の配色一貫性がある限り使用できます。ただし、これらの色は 3 つの基準を満たしている必要があります。それは、階層的である (たとえば、クリックできる要素を区別する)、読みやすい、表現力があるということです。

形

デフォルトのサーフェスは、わずかに丸みを帯びたエッジを持つ長方形ですが、その角度、曲線、コーナーの名前は制限なく変更できます。常に丸いカードを使う必要はもうありません。

画面下部のバー

マテリアルデザインでは、Holo と同様に、メインアプリケーションバーが画面の上部にありました。それ以来、画面はますます大きくなり、反対側のエリアに素早く到達することが困難になる場合があります。これが、メインバーが下部にあるアプリケーションがすぐに表示される理由です。アプリケーションにフローティングアクションボタンがすでに存在し、「ボトムアプリバー」が存在する場合、それらはマージされて 1 つになります。

ボタンの新しい状態

マテリアルデザインでは、ボタンは完全に平ら (背景なし) か、「盛り上がった」 (押すと影が動く) のいずれかでした。
新しい中間状態が、影が表示されずに、背景の境界を区切って表示されます。

背景

コンテンツをユーザーに対して非表示にすることは、特にメニューに関しては一般的に悪い考えです。これが、サイドメニュー (ドロワーと呼ばれる) を備えたアプリケーションがますます少なくなっている理由です。しかし、特定のそれほど重要ではない情報をインターフェイスに表示する必要がある場合、マテリアルテーマでは次の概念が導入されます。背景(=~背景)。これはメインインターフェイスの下にあるインターフェイスの一部であり、一般にユーザーにメニュー、設定、フィルターなどを提供します。