概要

マテリアル 3 Expressive は、Google の最も小さい画面であるスマートウォッチ向けの最新のデザイン システムです。丸いフォーム ファクタ向けに最適化され、プレミアム感と表現力を高めたデザインにアップデートされています。マテリアル 3 Expressive を使用して、美しく表現力豊かなスマートウォッチ アプリを設計、構築します。

表現力豊かなデザインの原則

表現力豊かなデザインは、形状、アニメーション、色、タイポグラフィを慎重に処理することで、各 UI レイヤを高めています。

エンブレイス ラウンド

マテリアル 3 Expressive では、丸い画面用に設計されたシェイプ フレームワークが導入されています。キャンバス全体を使用して、一目でわかることや視覚的なバランスを最適化します。

「下部のチェックボタンの下端が湾曲している」

プレミアム モーションとスプリング

マテリアル 3 エクスプレッシブの更新により、すべての遷移でナビゲーションが自然でプレミアムな印象を与え、一貫性のあるものになりました。モーションによってサーフェスが空間的に接続されるようになりました。ユーザーのジェスチャーに正確に対応し、直感的な操作を可能にします。

シェイプのモーフィング

マテリアル 3 Expressive では、リストと選択ボタンのシェイプ モーフィング フレームワークが導入され、より高級感のある外観に最適化されています。リストは、丸いフォーム ファクタでスムーズにスクロールできます。

リッチカラー

カラーシステムが拡張され、マテリアル 3 Expressive に含まれるより深い色調パレットとより幅広いトークンセットが採用されています。3 つ目のアクセント カラーの追加、トークンのバリエーションの増加、色の役割の明確化により、デザイン システムの深みと多様性が向上します。

「3 つ目のアクセント カラーを使用すると、アプリにすでに青とピンクがアクセント カラーとして設定されている場合でも、ストップウォッチ アプリの停止ボタンを赤色で表示できます」

可変フォント

マテリアル 3 Expressive では、Roboto のすべてのインスタンスが Roboto Flex に置き換えられます。ベースライン タイプの文字スケールは、スマートウォッチの丸い画面に合わせて調整され、最適化されています。