マテリアル 3 の表現豊かなデザイン言語

マテリアル 3 エクスプレッシブ(M3)は、モダンで関連性があり、独自性のあるエクスペリエンスに対するユーザーの需要を満たすために構築されました。表現力のあるデザインでは、デザイナーはインターフェースのレイアウトと表示に特定の感情や気持ちを反映することもできます。

色とタイポグラフィ

カラーシステムは拡張され、M3 のより深い色調パレットとより広範なトークンセットが採用されています。また、よりシンプルなタイポグラフィ スケールは、可変フォント軸を利用して表現力を高め、操作をより表現力豊かで楽しいものにしています。

色のテーマ設定

新しいトークンを使用すると、さまざまなテーマやデザインシステム全体のコンテキストで、より多くの色を適用できます。

可変フォント

可変フォントとそのカスタマイズ可能な軸に関する考慮事項が更新され、ファーストパーティのユースケースだけでなく、同様の可変軸を持つサードパーティのユースケース(Roboto Flex など)にも対応できるようになりました。

可変フォント軸の動き

可変フォント軸を利用して、表現力豊かなモーション フィードバックを送信し、操作をより表現力豊かで使いやすくします。

ユースケース例:

  • 動的フォントの太さ
  • 動的フォント幅
  • フォントの太さと幅を動的に変更する

ロールの種類

更新され最適化されたタイプスケールに加えて、Wear で注目すべきパターンを特に対象とする新しいタイプのロールも導入されます。

これらの新しいタイプロールは、サーフェス タイトルの Arc Text、ライブスペースを含むプロアクティブ コンテンツ、数字専用のタイプロールなど、複数のユースケースをサポートしています。これにより、ローカライズする必要のない文字列のテキストサイズを大きくして、より多くのスタイルを適用できます。

形状と動き

また、柔軟なコンテナ形状を使用して角の丸みを付けてシャープにすることで、形状変化リストとボタンの状態をサポートし、より広範で意味のある方法でシェイプ言語を活用しています。Wear の丸いデバイス向けに、独自の象徴的なデザイン パターンとして、エッジを覆うボタンを導入します。

エッジを覆うコンテナ

円形を採用し、円形のフォーム ファクタ内のスペースを最大限に活用するシェイプ コンテナを導入しました。

適用されたシェイプ

角の半径と独自の形状をコンテナとして使用して、魅力的なデザインを実現します。これは、魅力的な読み込みアニメーション、興味深いレイアウト、形状を変化させるボタン、適応型のボタン グループにまで拡張できます。

角の丸み

マテリアル 3 の角の形状を利用して、コンテナの形状に多様性、区別、関係をもたせます。

グループ化されたコンテナ

コンポーネント コンテナは、柔軟なレイアウト手法を使用して、使用可能なスペースに動的に適応します。このスペースを均等に分散して対称性を保つことも、要素を戦略的に配置して視覚的な階層を確立し、重要なコンテンツを強調し、表現力豊かで動きのある視覚的な手がかりを通じてユーザー操作を誘導することもできます。