Windows 11 デザイン
Microsoft はすでにアプリをデザインしています。適切なシステムパーツを選び、それらを配置し、その邪魔をしないでください。
- デザインチェックリスト: design-rules.md
- コピー可能な XAML パターン: patterns.md
Microsoft の5つの Fluent 原則
- 自然: ユーザー入力(キーボード、マウス、タッチ、ペン)に適応します。
- 直感的: 見慣れたレイアウト、一貫したアイコン表現、明確な階層構造。
- 応答性: 即座のフィードバック、滑らかなマイクロアニメーション。
- 意図的: すべての視覚要素には目的があります。
- 洗練: エッジを揃え、一貫した 4 px / 8 px グリッドスペーシング、洗練されたマテリアル。
Windows 11 の視覚マテリアル
- Mica (
MicaBackdrop): メインウィンドウフレームに適用されます。ユーザーのデスクトップ壁紙を動的にサンプリングし、微妙な色合いの表面を作り出します。 - Acrylic (
DesktopAcrylicBackdrop): 一時的なフローティングフライアウト、コンテキストメニュー、ダイアログに使用されます。 - 角丸: カードとボタンには Windows 11 標準の 8 px 角丸半径、小さいチップには 4 px。
- タイポグラフィ: 動的な光学サイズ調整に対応した Segoe UI Variable。
- アイコン: Segoe Fluent Icons(
FontIcon Glyph="\uE...")。
完了条件
すべてのビューとフライアウトが標準の Fluent 2 コントロールを使用し、Mica または Acrylic のバックドロップが適用され、タイポグラフィが Segoe UI Variable に準拠していること。