Fluent Design
複雑な世界を、わかりやすく、かつユニバーサルに表現することを目指しているのがFluent Design
概要
主要項目や何を目指しているかはここに書いてある
http://fluent.microsoft.com/
chromeで見るとなんか崩れるので、それ以外のブラウザ推奨
詳細
簡単にまとめる
実際のコーディング例、グラフィックなどは各ページにある
Acrylic material
https://docs.microsoft.com/ja-jp/windows/uwp/style/acrylic
depthの概念をapp内に持ってくるときに使う
ページの頭にも書いてあるが、大きく変更される可能性があるので注意
利用用途はapp内のNavigtationやメニューなど背景と溶け込ませたいものに使う
詳細画面とかには使わない
Connected animation
https://docs.microsoft.com/ja-jp/windows/uwp/style/connected-animation
Scene切り替えをスムーズに行うanimationの考え方
Scene間,View間に同じAnimationを適用することでリッチでかつ同じコンテキストに則ったユーター体験を提供できる
Parallax
https://docs.microsoft.com/ja-jp/windows/uwp/style/parallax
ご存知Parallax
Parallaxを使うことによりDepth, 遠近感, 動きなどを感じることができる
ページの頭にも書いてあるが、大きく変更される可能性があるので注意
Reveal
https://docs.microsoft.com/ja-jp/windows/uwp/style/reveal
Revealはアプリのインタラクションに使う照明効果（ポインタがあった場所にエフェクトつけるとか）
ページの頭にも書いてあるが、大きく変更される可能性があるので注意
オブジェクトの周囲に隠れた境界線を表示することにより、ユーザー操作に対する応答、何を操作できるのかを理解する上で役に立つ
Design toolkit
https://docs.microsoft.com/ja-jp/windows/uwp/design-downloads/index
Fluent Designデザインテンプレート作成ツール、プラグイン
- PowerPoint
- Adobe Illustrator
- Adobe Photoshop