まずはUWPで体感

しかし、こうしたFluentのデザインシステムはまだ発表されたばかりであり、今年の秋以降に登場する「Windows 10 Fall Creators Update」に搭載されると言われています。
Googleの各種サービスが徐々にマテリアルデザインを適用させていったように、Windowsのシェル(本体)、アプリ、サービスなども徐々にFluentに移行されるようです。

実際にはFluentとは似て非なるものだとされていますが、UWP(the Universal Windows Platform)と呼ばれるデザインシステムがすでに公開されています。
デスクトップやスマートフォンはもちろん、Xbox OneやHoloLensといったさまざまなデバイスに適用することができるデザインツールキットで、Fluentの土台ともなりそうです。

それでは、UWPの主な要素についても見ていきましょう。

1. Acrylic Material (アクリル・マテリアル)

acrylic_lighttheme_base.png
Source: Microsoft

その名の通り「アクリル板」のようなUIが、この*「Acrylic Material」(アクリル・マテリアル)*です。
背景の光を通すような半透明のレイヤーは、Fluentの言うところの「Light」や「Depth」、「Material」とも結びつくでしょう。

acrylic_app-pattern_double-vertical.png
Source: Microsoft

Acrylic MaterialはApp内のナビゲーションやポップアップウィンドウ、通知などに使用することが推奨されており、2重にナビゲーションを置くときには、「80％」「60％」と透明度を変えて設置することがガイドラインに記載されています。

2. Connected Animation (連続アニメーション)

connected.gif
Source: Microsoft

*「Connected Animation」(連続アニメーション)*は2つの異なるビューを切り替える時に使うトランジション効果です。
いわゆるマイクロインタラクションの一種ですが、ビューの切り替えに連続してアニメーションを加えていくことで、ビューがひと続きでスムーズに見えます。

coordinated.gif
Source: Microsoft

その中でも、「Coordinated Animation」と呼ばれるものは、「Connected Animation」のターゲットとなる要素をそのまま別の場所に動かすようなトランジション効果を加えます。

3. Reveal (リビール)

reveal.gif
Source: Microsoft

*「Reveal」(リビール)*は選択したコンテンツをマウスホバーしたり選択することで見せるUIの挙動について説明します。
通常UWPのUIではまわりの線が隠されていますが、ホバーすることによってRevealが働き、インタラクションのフィードバックを与えます。

Revealには「Hover Reveal」(ホバー・リビール)とBorder Reveal(ボーダー・リビール)という2つの要素があり、前者は直接ホバーした要素に適用され、後者はホバーアイテムとその周りの要素にも適用されます。