Contents

Windows 11 UI アップデート: アクリルのぼかしが隅々まで行き渡り、Web アプリがよりネイティブに感じられるようになる

<本文>/images/Windows-11-modern-UI.jpg

Windows 11 は必ずしも見た目が最高の OS というわけではありませんが、「ぼかし」効果などの現代的な美学が好きな方に朗報です。現在、Windows アプリは「アクリル」効果をウィンドウ全体またはフライアウト メニューに制限していますが、Microsoft は開発者がポップアップなどの特定の領域を含む任意の場所でぼかし効果を使用できるようにします。

Microsoft はまた、ドロップ アンド ドロップのエクスペリエンスがスムーズでないバグを修正しているため、WebApps2 アプリが Windows 11 上でよりネイティブに感じられることを確認しました。

アクリル素材とは何ですか?またその仕組みは何ですか?

アクリルは Fluent Design ビジョンのマテリアル部分であり、Windows 11 の選択した領域に半透明効果を適用します。たとえば、デスクトップを右クリックすると、半透明効果またはぼかし効果のあるコンテキスト メニューが表示されます。 Microsoft はこのエクスペリエンスを「すりガラス」と表現しています。

「これは、フライアウトやコンテキスト メニューなどの一時的なライト非表示サーフェスにのみ使用されます」と Microsoft はサポート文書で説明しています。

/images/Windows-11-context-menu-with-Acyrlic-effect.jpg

アクリルは何年も前から存在していますが、マイクロソフトが言うように、アクリルは厳密にコンテキスト メニューに限定されていました。

/images/Windows-11-new-Start-menu-UI.jpg

タイトル バーには、Windows 11 のテーマと壁紙を使用して視覚的な階層を作成する Mica エフェクトを使用しています。

アクリルのぼかしは、ポップアップ、メニュー、ツールチップなど、さらに多くの領域に導入される可能性があります

ポップアップ、TeachingTip、ToolTip、Commandbar、SecondaryCommands、Combobox などはどうですか?現時点では、Windows またはアプリのこれらの要素に半透明効果を適用することはできません。これまでは API の制限でしたが、良い方向に変わろうとしています。

Microsoft の WinUI チームで働く Godly T. Alias 氏によると、「これは、WinUI3 で Window と Flyouts 以外のコントロールのアクリル効果をサポートするために提案された SystemBackdropHost コントロールの API 仕様です」とのことです。

「開発者が背景が必要な場所に簡単に追加できるコントロールを採用することにしました」と Microsoft の Godly T. Alias 氏は述べています。

/images/Systembackdrop-support-in-Windows-11-apps.jpg

開発者は SystemBackdropHost を使用して、ビジュアル ツリー内の任意の場所にアクリル エフェクトを適用できるようになりました。つまり、任意の要素に半透明の背景を追加できるようになりました。

この変更により、最終的に開発者はより詳細に制御できるようになり、Windows 11 でのポップアップの外観が変わる可能性があります。

/images/Windows-11-new-blur-effect.jpg

Microsoft関係者はまた、画面の特定の領域にアクリル製の背景を使用するデモアプリをからかった。モダンに見えますよね?アプリが新しいデザインを使用し始めると、よりスムーズなアニメーションを備えた最新の Windows 11 UI が使用できるようになります。

ファイル エクスプローラーや設定などの Windows アプリでも、ポップアップに新しい WinUI のぼやけた背景のアプローチが採用されても、私は驚かないでしょう。

どう思いますか?以下のコメント欄でお知らせください。

ホーム

シェアする

ニュースレター

購読する

プッシュ通知を購読する

WL ニュースレター

/images/WL-logo-new.svg

WLニュースレターです!

最新の Windows、IT、AI アップデートを常に入手してください。 50,000 人以上の加入者から信頼されています。

名前

電子メール

無料で参加

*️⃣ 出典リンク:

説明 、マイカ効果、 ホーム

ニュースレター