Material Design Lite、簡潔で驚くべきフロントエンドツールボックス.
Material Design Liteの概要
本文は主にMaterial Design設計言語のHTML/CSS/JS部分実装を紹介する.
各セクションに対応するオンライン練習アドレスは以下の通りです.試してみてください.
http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77/
一、設計言語
githubプロジェクトアドレス:https://github.com/google/material-design-lite
擬真vs.扁平
iso 7に先立ち、Appleは擬真化設計言語を採用し、現実世界の物体をシミュレートすることで、ユーザーに臨場感を与えることを望んでいる.metroやios 7から始まるフラットデザイン言語は、逆に冗長な装飾効果(透視、テクスチャ、グラデーションなど3 D効果が得られる要素)を排除し、「情報」自体をコアとして再浮上させることを意図している.
次の比較図から、2つの設計言語の違いを理解できます.
Material Design
擬真は設計言語の極端を表し、扁平は設計言語の極端を表すと、Material Designは両者の間でより右に位置します.
Material Designでは、画面が平らに見えるAppインタフェースで、実際には異なるコントロールの間に階層関係があります.異なるコントロール間の階層関係では、シャドウが表示されます.シャドウの深さは、Z軸の高さを表します.
二、材料/Material
Material Designの材料/Materialは実際には架空の材料です.厚さは無限に薄く(1 dp)、面積は無限に大きく、造形を変えることができ、規則に従って移動することができます.それを紙とすることができます(実際、Material DesignはQuantum Paper-量子紙に改称すると噂されていました):
上の2枚の図は、左にMaterial Designの設計理念を正しく表しています.材料は厚さがありますが、差のない1 dp厚さです.右の図は材料の厚さをあまりにもリアルに表現しているので、間違っています.
各Materialは扁平であるが、彼らが置かれている環境は、実際には3 D空間である.これは、Material Designが設定したこの3次元環境にあるすべてのコントロールがXYZの3次元を有し、Z軸がスクリーンに垂直であり、シャドウ表現材料の高さを使用すると、シャドウが重いほどZ値が高くなり、ユーザーに近づくことを意味する.次の動図では、影の変化が私たちの感覚に与える影響を直感的に理解することができます.
そのため、Material Designは単純なフラット化ではなく、フラットなコントロールを保持しながら、立体的な仮想空間を採用しています.簡単に言えば、Material Designの核心は、フラットで不平です.
Material Design Lite
MDLには、材料のシャドウを宣言するためのスタイルクラスmdl-shadow--Ndpのセットが定義されています.Nの有効な値は、2/3/4/6/8/16です.
要素にシャドウスタイルクラスを適用するのは簡単です.
三、色彩/Color
Material Designの色彩のインスピレーションは、現代建築、道路標識、路面標識、運動場など、色合い、ハイライト、影を大胆に駆使し、動感に満ちたシーンから来ている.
Material Designは、19個のパレット(red、pink、purpleなど)を使用して、設計中の色の使用を制約します.各パレットにおいて、色調500の色が基準色であり、その他の色は、異なる色調(50-900,A 100-700)での基準色の表現である.
右側のサンプルコードでは、Material Designの完全なパレットセットを描きます.各行はパレットで、各列は色調を表します.マウスを1つの色に移動して、RGB値を表示できます.
Material Design Lite
MDLでは、スタイルクラスmdl-color--{palette}-{hue}を使用して背景色を設定し、スタイルクラスmdl-color-text--{palette}-{hue}を使用して前景色を設定できます.
四、色彩運用
間違いなく、私たちは1つのインタフェースの中で無拘束に色を使うことができなくて、それは事をめちゃくちゃにします.いいことを言って、制約がなければ、デザインではなく、芸術になります.
Material Designは、いくつかの一般的な条件の制約を与えます.
1.最大2つのパレット
1つのインタフェースで最大2つのパレットを使用し、プライマリパレットから最大3つの色調を選択し、セカンダリパレットから強いパレットを選択します.次の例では、indigoパレットの3つの色調(100、500、700)を選択し、pinkパレットの色調A 200を強調色として選択します.
2.テキスト、アイコン、分割線に透明度を適用
テキストの透明度を設定することで、テキストの相対的な重要性を表現します.
暗い背景の薄い色のテキストでは、最も重要なテキストは87%の透明度、次に重要なテキストは54%の透明度を使用します.入力ボックス、ラベル、禁止されたテキストなど、ヒントテキストは26%の透明度を使用します.
薄い背景の濃い色のテキストでは、最も重要なテキストは100%の透明度を使用し、次に重要なテキストは70%の透明度を使用し、他のテキストは30%の透明度を使用します.
3.ツールバーとステータスバー
ツールバーと大きな色のブロックは、パレットの色調が500の色を基準色として使用する必要があります.ステータスバーは、ベースの準色よりもやや濃い色のパレットの700色を選択する必要があります.
次の例では、左図のツールバーと右図の大きな色のブロックは、indigoパレットの色調500の基準色を使用している.2枚の図の先端のステータスバーにはindigoパレットの色調700の濃い色が使用されています.
4.強調色を使う
大きな色のブロックでは絶対に強調色を使用しないでください.動作ボタン、スイッチ、スライドバーなどのコンポーネントには強調色を使用します.
五、アイコン/ICon
GoogleはMaterial Designに適したアイコンフォントを提供しています.フロントエンドスタイルシートで@font-faceを使用してこれらのフォントを直接参照できます.
ページでアイコンフォントを使用するには、上で定義したmaterial-iconsスタイルを適用するだけです.
上記の例では、faceが表示するアイコンを指定したり、対応する数値符号化を使用したりする笑顔アイコンを作成しました.
具体的なアイコン名とコードは、Material Icons公式サイト(FQが必要)を参照してください.https://www.google.com/design/icons/
六、レイアウト/Typography
Material Designでは、異なるシーンでレイアウトするための11種類の文字スタイルが用意されています.
Material Design Lite
MDLで、スタイルクラスmdl-typography--{name}を使用してテキストのレイアウトスタイルを宣言します.
サイトには各セクションに対応したオンライン練習がありますので、試してみてください.
http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77/
本文は主にMaterial Design設計言語のHTML/CSS/JS部分実装を紹介する.
各セクションに対応するオンライン練習アドレスは以下の通りです.試してみてください.
http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77/
一、設計言語
githubプロジェクトアドレス:https://github.com/google/material-design-lite
擬真vs.扁平
iso 7に先立ち、Appleは擬真化設計言語を採用し、現実世界の物体をシミュレートすることで、ユーザーに臨場感を与えることを望んでいる.metroやios 7から始まるフラットデザイン言語は、逆に冗長な装飾効果(透視、テクスチャ、グラデーションなど3 D効果が得られる要素)を排除し、「情報」自体をコアとして再浮上させることを意図している.
次の比較図から、2つの設計言語の違いを理解できます.
Material Design
擬真は設計言語の極端を表し、扁平は設計言語の極端を表すと、Material Designは両者の間でより右に位置します.
Material Designでは、画面が平らに見えるAppインタフェースで、実際には異なるコントロールの間に階層関係があります.異なるコントロール間の階層関係では、シャドウが表示されます.シャドウの深さは、Z軸の高さを表します.
二、材料/Material
Material Designの材料/Materialは実際には架空の材料です.厚さは無限に薄く(1 dp)、面積は無限に大きく、造形を変えることができ、規則に従って移動することができます.それを紙とすることができます(実際、Material DesignはQuantum Paper-量子紙に改称すると噂されていました):
上の2枚の図は、左にMaterial Designの設計理念を正しく表しています.材料は厚さがありますが、差のない1 dp厚さです.右の図は材料の厚さをあまりにもリアルに表現しているので、間違っています.
各Materialは扁平であるが、彼らが置かれている環境は、実際には3 D空間である.これは、Material Designが設定したこの3次元環境にあるすべてのコントロールがXYZの3次元を有し、Z軸がスクリーンに垂直であり、シャドウ表現材料の高さを使用すると、シャドウが重いほどZ値が高くなり、ユーザーに近づくことを意味する.次の動図では、影の変化が私たちの感覚に与える影響を直感的に理解することができます.
そのため、Material Designは単純なフラット化ではなく、フラットなコントロールを保持しながら、立体的な仮想空間を採用しています.簡単に言えば、Material Designの核心は、フラットで不平です.
Material Design Lite
MDLには、材料のシャドウを宣言するためのスタイルクラスmdl-shadow--Ndpのセットが定義されています.Nの有効な値は、2/3/4/6/8/16です.
要素にシャドウスタイルクラスを適用するのは簡単です.
<!-- 2dp -->
<any class="mdl-shadow--2dp">...</any>三、色彩/Color
Material Designの色彩のインスピレーションは、現代建築、道路標識、路面標識、運動場など、色合い、ハイライト、影を大胆に駆使し、動感に満ちたシーンから来ている.
Material Designは、19個のパレット(red、pink、purpleなど)を使用して、設計中の色の使用を制約します.各パレットにおいて、色調500の色が基準色であり、その他の色は、異なる色調(50-900,A 100-700)での基準色の表現である.
右側のサンプルコードでは、Material Designの完全なパレットセットを描きます.各行はパレットで、各列は色調を表します.マウスを1つの色に移動して、RGB値を表示できます.
Material Design Lite
MDLでは、スタイルクラスmdl-color--{palette}-{hue}を使用して背景色を設定し、スタイルクラスmdl-color-text--{palette}-{hue}を使用して前景色を設定できます.
<div class="mdl-color--red mdl-color-text--grey-50">
this is a gray text on red background.
</div>四、色彩運用
間違いなく、私たちは1つのインタフェースの中で無拘束に色を使うことができなくて、それは事をめちゃくちゃにします.いいことを言って、制約がなければ、デザインではなく、芸術になります.
Material Designは、いくつかの一般的な条件の制約を与えます.
1.最大2つのパレット
1つのインタフェースで最大2つのパレットを使用し、プライマリパレットから最大3つの色調を選択し、セカンダリパレットから強いパレットを選択します.次の例では、indigoパレットの3つの色調(100、500、700)を選択し、pinkパレットの色調A 200を強調色として選択します.
2.テキスト、アイコン、分割線に透明度を適用
テキストの透明度を設定することで、テキストの相対的な重要性を表現します.
暗い背景の薄い色のテキストでは、最も重要なテキストは87%の透明度、次に重要なテキストは54%の透明度を使用します.入力ボックス、ラベル、禁止されたテキストなど、ヒントテキストは26%の透明度を使用します.
薄い背景の濃い色のテキストでは、最も重要なテキストは100%の透明度を使用し、次に重要なテキストは70%の透明度を使用し、他のテキストは30%の透明度を使用します.
3.ツールバーとステータスバー
ツールバーと大きな色のブロックは、パレットの色調が500の色を基準色として使用する必要があります.ステータスバーは、ベースの準色よりもやや濃い色のパレットの700色を選択する必要があります.
次の例では、左図のツールバーと右図の大きな色のブロックは、indigoパレットの色調500の基準色を使用している.2枚の図の先端のステータスバーにはindigoパレットの色調700の濃い色が使用されています.
4.強調色を使う
大きな色のブロックでは絶対に強調色を使用しないでください.動作ボタン、スイッチ、スライドバーなどのコンポーネントには強調色を使用します.
五、アイコン/ICon
GoogleはMaterial Designに適したアイコンフォントを提供しています.フロントエンドスタイルシートで@font-faceを使用してこれらのフォントを直接参照できます.
/*icon.css*/@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'),
url(material-icons.woff2) format('woff2'),
url(material-icons.woff) format('woff');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
-webkit-font-smoothing: antialiased;
/*text-rendering must be set for local host fonts*/text-rendering: optimizeLegibility;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}ページでアイコンフォントを使用するには、上で定義したmaterial-iconsスタイルを適用するだけです.
<i class="material-icons">face</i>上記の例では、faceが表示するアイコンを指定したり、対応する数値符号化を使用したりする笑顔アイコンを作成しました.
<i class="material-icons"></i>具体的なアイコン名とコードは、Material Icons公式サイト(FQが必要)を参照してください.https://www.google.com/design/icons/
六、レイアウト/Typography
Material Designでは、異なるシーンでレイアウトするための11種類の文字スタイルが用意されています.
Material Design Lite
MDLで、スタイルクラスmdl-typography--{name}を使用してテキストのレイアウトスタイルを宣言します.
<h1 class="mdl-typography--title">Hello,Material Design</h1>
<p class="mdl-typography--body-2">this is a demo</p>サイトには各セクションに対応したオンライン練習がありますので、試してみてください.
http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77/