前回の2014年のI / Oイベントで、グーグルは新たな驚きをもたらしました。 正式にコードネームLollipopを付けた新しいAndroidアップデートをリリースした他に、Googleはその新鮮な新しいデザイン言語であるMaterial Designも紹介しました。 これは、新しいLollipopユーザーインターフェースの改善だけでなく、さまざまなデバイスや環境向けの設計システムです。
Material Designには、独自の方法で他のデザイントレンドと区別するためのいくつかの主要な機能があります。 その名前のように、それは本物の材料に触発されて、なめらかで、直感的で、美しくそして最もインタラクティブなユーザーエクスペリエンスを作成するために一つのデザインシステムにそれらを組み合わせました。 この記事では、Material Designの内部にあるものを見て、それを実装する方法についての簡単なガイドを提供します。 グーグルのブログを引用することによって、私は「これはマテリアルデザインです」と言うつもりです。
はじめに
Material Designは統一されたデザインシステムであり、今日利用可能なすべての機器とプラットフォームで動作するように作られています。 タブレットからスマートフォン、デスクトップ、そしてAndroidからiOS、WindowsからWebプラットフォームまで。 すべてのデザインの外観は、どこにいても同じでなければなりません。
主な原則
材料設計を構成する3つの主要な原則があります。 これらはマテリアルが一般的に提供するものの最も基本的な部分です。
- 材料は比喩です。 マテリアルの開発は、私たちが日常的に使用する触覚要素、 紙とインクの研究に触発されました。 それはお互いに相互作用するとき、オブジェクトの光、表面および動きをより良くします。
- 大胆、グラフィック、そして意図的 。 活版印刷、グリッド、スペース、尺度、色、および印刷ベースのデザインの基礎に使用されている画像の使用により、マテリアルの内容がより良くなります。
- 動きは意味を提供します 。 これは最も注目されるものの1つです。 マテリアルでは、意味のある適切な動き、微妙で明確なフィードバック、効率的で一貫した移行が必要です。
コンポーネント
Material Designは、そのコンポーネントのあらゆる細部に注意を払っているので、それらは普遍的に使用することができます。 これらのコンポーネントはあなたが素晴らしいアプリとサイトを構築するのを助けます。 ボタン、スイッチ、カード、テキスト入力、fab（フローティングアクションボタン）、ダイアログ、トースト、サブメニュー、タブなど、Materialによって提供される非常に多くのコンポーネントがあります。 それぞれに独自のルールとそれらをどのように構築するかについてのガイドがあります。
パターン物
コンポーネント以外にも、Materialは追加のUIのためのいくつかの基本的なパターンを提供します。 これらのパターンは、Materialのコンポーネントを使って作成したUIを改善します。 データフォーマット、ナビゲーションドロワー、エラー、ジェスチャー、スクロールテクニック、検索、設定、画像の読み込み、スワイプして更新するなどのパターン。
材料設計カラー
Materialの色は、違和感を感じさせないフラットなデザインになっています。 道路標識、現代建築、路面標示テープ、スポーツコートなど、日々の環境からインスピレーションを得たMaterial Designは、意外性の高い明るい色をもたらします。 アプリやサイトを開発するときにより多くのカラーパレットがあなたにもっと便利を与えることを選ぶためにあります。 Photoshopコレクションのように、色見本をダウンロードしてローカルで使用することもできます。
素材のアイコン
あなたがAndroid開発者であるならば、あなたはGoogleが提供するいくつかの無料のアイコンパックに精通していなければなりません。 それらは通常main要素とactionbarだけに使われます。 他のリソースについては、フォルダ、ファイル、コピー＆ペーストなどの他のアイコンを手動で検索する必要があります。 Material Designにおいて、Googleはあなたが使用できるたくさんのアイコンパックに関する問題を解決しました。
それぞれのアイコンは、触覚材料の研究をも使用するいくつかのデザインアプローチを経ています。 彼らは物質的な原則も維持しています、それは一貫しています。 あなたはGitHubでこれらのアイコンをダウンロードすることができます、彼らはiOs、ウェブ、アンドロイドまたはSVGのためのような異なった用法のためのいくつかのオプションが付属しています。 簡単にカスタマイズするためのより幅広いオプションが必要な場合は、おそらくFlatIconのMaterial Designアイコンパックをご覧になりたいでしょう。 パックの中には、アイコンベクトル（SVGとEPS）、PSD、PNGバージョンがあります。
素材のアニメーション
これは私が一番好きな素材の機能です。 Materialのアニメーションはとてもリアルで直感的です。 すべてのアニメーションには、意味のある、一貫性のある適切なタイミング遷移があります。 以下に示すgifデモは、美しいマテリアルアニメーションの1つです。 魅力的でレスポンシブなインタラクションを提供するために、Googleチームはユーザー入力効果のために水の波紋のようなアニメーションも作成します。 ボタンやカードによく使われます。
私が説明したこれらの機能は、マテリアルデザインが提供するもののほんの一部です。 Materialの世界についてさらに学ぶために、ドキュメンテーションページに進んでください。
実装
デフォルトでは、Material DesignはAndroid Lollipopの新しいUIアップデートとして提供されています。 その中に材料が適用されているすべてのガイドライン。 Materialはあらゆる種類の環境を対象としているため、他のシステムに実装するのは難しくありません。 そして、コミュニティのおかげで、彼らが作成したいくつかのツールを使えば、はるかに簡単になります。
これらはあなたがAndroidの外でマテリアルデザイン、例えばウェブを手に入れるために達成できるいくつかの方法です。
CSSフレームワークの使用
Webプラットフォームでマテリアルデザインを実装する場合、これが最も簡単な方法です。 フレームワークでは、初期化してから必要な要素を記述するだけで済みます。 いくつか例を挙げると、Materialise、Material UI、またはPolymerのように使用できるフレームワークがたくさんあります。 私の個人的な選択はマテリアライズに入ります。 使い方や理解が簡単で、素晴らしいデモを含む素晴らしいドキュメントがあります。
ガイドラインに従う
フレームワークの助けを借りずにMaterialを実装したいと考えていて、最もコードをめちゃくちゃにしたい場合は、Materialのガイドラインに従う必要があります。 そこには、重要な原則を達成するために気をつけなければならないことがすべてあります。 コンポーネント、レイアウト、アニメーション、色、パターンなどを作成するための基本的なガイドがすべて表示されます。 あなたはより簡単な開発のためにいくつかの材料チェックリストを見たくなるかもしれません。
結論
材料設計は素晴らしい設計システムであり、今年最も期待されている傾向の1つとなっています。 今後数ヶ月のうちに、私たちは至る所でそれを見るかもしれません。 この新しいGoogleのデザインアップデートにより、より多くのアプリやサイトが洗練されるでしょう。
そしてマテリアルデザインで、グーグルは最大の技術企業の一つとしての優位性を証明しました。 Googleは検索エンジンやモバイルOS分野だけでなく、デザイン分野でもリードしています。 今のところ、グーグルのようにこの大きなものを開発している会社は他にありません。 しかし経験は言う、それは長続きしません。 他社がグーグルのマテリアルデザインに応えるのをただ待ってみましょう。
