スタイル

Material 3 Expressive

同じプロジェクト作業室でスタイルを比較.

同じプロジェクト作業室でスタイルを比較
プロジェクト / 今日 · 01

余白をつくる

次のアイデアのための小さな余白。

資料を集め、方向を描き、言葉を整えます。3つの小さな作業で、考えの伝わる作業室をつくります。

タスク

始める準備ができました。

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

概念

Material 3 Expressiveは色・形・大きさ・動きで注意を導きます。この作例は大きな操作部と多様な曲率を使います。

実例

11種類で概要・タスク3件・進捗・資料メモ2件を共有します。メニューで移動し、完了チェック、状態の絞り込み、メモの展開を試します。1件完了すると1 / 3と33%を表示し、該当がなければ案内が出ます。リセット・再読み込みで、すべて表示・全件未完了・0%・閉じたメモに戻ります。 完了時に進捗パネルの形が短く反応します。動きを減らす設定では静止します。

選ぶ条件

主要操作を視覚的に強調したいときに向きます。 表情豊かな形でも、なじみのあるラベルと読む順序を保ちます。

Google Design

比較のまとめ
同じ分類の比較
概念特徴利点制約適する状況組み合わせ条件
Material 3 Expressive色面・多様な曲率・大きな操作部・短い形の反応を使います。大きさと領域の区切りで主要操作を強調します。表情豊かな形でも、なじみのあるラベルと読む順序を保ちます。主要操作を視覚的に強調したいときに向きます。単色の面に明確なグリッドと動きの抑制を組み合わせます。
続けて読む原稿・修正提案 ↗

この選択を話し合う

コメントは全言語で共有。投稿にはGitHubログインが必要です。