Materialのデザイン体系で色・形・大きさ・動きにより主な操作を強調します。
地域のピクニックページで住民はグループの席を確保します。同じ大きさの控えめなボタンでは参加操作を見落とします。控えめな平面区分より、主操作と生き生きした反応を優先します。
3人を選んで参加します。大きな曲線のボタンが取り消しに変わり、参加完了と3席を表示します。人数変更や取り消しができます。動きを減らす設定では短い形の反応をなくします。
土曜日 · 川辺の芝生 · 12:00
まだ参加していません
確保した席: 0
本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。
Material 3 Expressiveは色・形・大きさ・動きで注意を導きます。このWeb作例は特徴を示すもので、ネイティブなMaterialライブラリではありません。ラベルと読む順序も必要です。
任意の参考資料 · 概要の読了時間には含みません
一つの操作を目立たせたいとき、製品の雰囲気に合えば選びます。フラットデザインと共存でき、控えめな画面なら形の変化や動きを減らせます。
ピクニック例は招待・人数・参加状態を分けます。参加後は曲線のボタンの意味が見た目でも変わります。花は装飾であり、唯一の確認手段にはしません。
状態の文字と押下状態をアニメーションから独立させます。動きの低減では反応をなくします。実際の催しにはサーバーでの空席確認が必要で、この例は1〜6人を表示するだけです。
表情豊かな強調に関するGoogleの研究です。このピクニック例の操作性能向上を証明するものではありません。
確認キーボード・フォーカス・リフロー・コントラストの要件。見た目だけで適合を証明するものではありません。
確認| 概念 | 特徴 | 利点 | 制約 | 適する状況 | 組み合わせ条件 |
|---|---|---|---|---|---|
| Material 3 Expressive | 表現的な形・大きさ・動き | 主な操作を強調 | 強調が密な情報と競合する場合がある | 目立ち親しみやすい参加操作 | 明確な状態と動作低減対応 |
これからプロジェクトを始めますか？説明を入力して最初のプロンプトを準備しましょう。
自分に合うプロンプトを作る →すでに外部AIと会話中なら、この記事のリンクと自分のプロジェクトに合う理由、重視する利点や制約を伝えましょう。合意した要件にどう適用するか依頼してください。
この記事のリンク: Material 3 Expressive
この選択を話し合う
コメントは全言語で共有。投稿にはGitHubログインが必要です。