Googleの新しいマテリアルデザイン「表現力豊か」は私を興奮させてくれます！ （＆心配）| Punit Chawla | 2025年5月

Googleは最近、世界中の数十億人のユーザー向けのアプリと製品を構築するために使用する既存のデザイン言語とシステムへの大規模なアップグレードを発表しました。非常に多くの新しい遊び心の効果とスタイルを含むこの更新。しかし、何よりも、ユーザーエクスペリエンスに対する会社の思考プロセスの変化を強調しています。私にさせて 要約します あなたのためにすべて、そしてこれがどのようにして新しいデザイントレンドを空間にもたらすかを示します。矛盾が重要ですか？ - それは私がAndroidショーで気づいたことです！デザイナーとして、私たちはWebサイトやアプリを通じて一貫したデザインを説きますが、物質的な表現力がありますが、多くのルールを破っています。タブは形状を変更して目立つようになり、強調表示された状態を表示します。フローティングメニューには、一貫した幅の代わりに内容物を抱きしめるための可変幅があります。セクションやボタンに喜びを追加するための拡張された形状ライブラリ。画面上の同じ空間で可変境界半径（半径の複数）を使用して、より高いレベルの視覚的区別を提供します。視覚的な階層を強化し、「大胆な」デザインに焦点を当てるために、タイトルでタイポグラフィが使用されています。そして、リストは続きます。小さなマイクロ要素とは別に、アプリのカードとリスト全体でこれを見ることができます。カードとリストが矛盾して遊ぶ方法さまざまなアプリでタイトルが異なる「文字」を再生する方法ウェブサイトのタイトルのクレイジーなスタイルと、デザイナーがテーマに合わせて主要なグラフィカルな要素になるためにタイトルを利用する方法を見てきました。 Googleは独自の設計システムでまったく同じことをしようとしているようです。この素晴らしい例は、可変フォントの高さとサイズを使用してこのきちんとしたアラームアプリを作成する方法です。出典：9to5Googleいくつかの遊び心のあるタイトルとテキストは、特にタイトルが特定の役割を果たすアプリでは、非常に理にかなっています。しかし、いくつかあります 悲惨な用途 大規模で大胆なタイトルと要素の。 Googleが「何をしてはならないか」と表示しているものの素晴らしい例を次に示します。アニメーション化されたタイトルとエフェクトについてGoogleからあまり見たことがないので、待って見るだけです。上記の比較では、Gmailモバイルアプリのいくつかの大きな変更に気付くことができます。電子メールセクションは現在、マテリアルカードになり、アクションメニューをキーボードの上のスペースにシフトしました。ポジショニングの変更とは別に、BOLD送信ボタンと拡張メニューにより、ユーザーはアクションをすばやく実行し、メールに要素を添付できます。調査によると、これはユーザーの旅で4倍高速になる可能性があります。さまざまな要素の色の色の色合いは、アプリの遊び心をより遊び心にしますが、重要な要素の優れた視覚的階層とコントラストも作成します。M3 Expressive Designにより、年配のユーザーは、10のアプリがテストされた10のアプリで若いユーザーと同じくらい速く画面上で重要なインタラクティブな要素を見つけることができました。Google Researchチームによると、若い人口と古い人口統計の両方のユーザーは、重要なインタラクションとCTAをより速く見つけ、行動を起こすのに時間がかかります。簡単に言えば、ユーザーとインターフェイスの間に摩擦が少なくなります。Googleは、新しいアニメーションシステムとガイドラインを「モーション物理システム」と呼んでおり、マイクロインタラクションと移行をよりスムーズで表現力豊かにすることに焦点を当てています。 Googleは、ユーザーが理解しやすくすることにも注力しています。主な違いのいくつかは次のとおりです。基本的にアニメーションの最後にバウンスがあることを意味するスプリングベースのアニメーションは、より自然に感じられるようにします。デザインをカスタマイズできる新しいモーションスキーム。空間効果は、要素が画面上で1つの位置から別の位置まではるかに動き回る。また、アニメーション名のプレフィックスとして「表現力豊かな」を備えた新しい命名スキームもあります。標準的な緩和アニメーションは過去のものです！これがすべて一緒に機能する方法の素晴らしい例は、この非常に自然で表現力のあるアニメーションです。新しいAndroid通知アニメーションアニメーションガイドと設定リストを使用して、これらの新しいアニメーションを使用できます。 https://m3.material.io/styles/motion/overview/how-it-worksGoogleは、設計要素の状態の変化を示すために、モーフィング形状に本当に銀行を貸しています。カードの拡大であろうと、最初から最後に移動するタイマーであろうと、これらのモーフィング形状はどこにでもあります。丸薬は、他のオプションから際立って境界半径を増加させます。多くのSVGが変化し、モーフィングを形成して、何かの増加または減少を示しています。これは、タイマー、ローダー、進行状況バーになる可能性があります。選択した状態を表示し、他のカードと区別するために、カードが円に変わります。彼らがスライダーまたはカルーセルに焦点を合わせたときに拡大するカード。退屈な古い円からモーフィングの形に変わる円形ローダー。彼らはまた、デザイナーが使用して探索するための新しい形状ライブラリを導入しました - https://m3.material.io/styles/shape/overview-principles。これらの形状はアーティファクト以上のものです。 Googleは、キャラクターを追加するためのプロファイル画像にデザイナーを使用し、ユーザーのインタラクションや要素に追加し、2.5Dシェイプを追加して深さを追加することを奨励しています。しかし、Googleはまた、カオスや混乱を避けるために、設計者に形を控えめに使用するよう警告しています。過剰プレイ化： Googleは遊び心のある明るい要素に焦点を当てているため、一部のデザイナーはこれを搭載し、一般的なUXプリンシパルを破る可能性があるため、ユーザーのエクスペリエンスを妨げています。主観的デザイン： 一日の終わりにデザインは主観的です。 Android 16の周りのTwitterでさまざまなスレッドと、一部の人々が魅力的な色と実装を見つける人もいる物質的な表現力豊かなスレッドを見てきました。古いハードウェアの問題： 洗練されたアニメーションは見栄えが良くなりますが、処理能力とバッテリーを取ります。さまざまなデバイス間の一貫性がないため、Material Expressiveはすべてのデバイスで動作せず、そのようなWebサイトに適合しない可能性があります。私は完全に間違っている可能性があるので、コメントで私を修正してください。開発者は私たちをさらに憎むでしょう： 多くの場合、開発チームや製品マネージャーによって短縮または却下できるアニメーションまたはインタラクション集中作業を設計することがよくあります。一つのことは、ほとんどの開発者も物質的なデザインに追いつくことができるので、それらを納得させることはあまり面倒ではないでしょう。 #Googleの新しいマテリアルデザイン表現力豊かは私を興奮させてくれます #心配 #Punit #Chawla #2025年5月