Introducing Fluent Design

1. Introducing Fluent Design System
蜜葉 優
あるいはMetroの先を紡ぐ手がかり

2. • H.N. :蜜葉 優 [@mitsuba yu]
• silkyfeel ,LLC CEO
• HoloMagicians
• Microsoft MVP for Windows Development
• UX Designer / Interaction Developer / Photographer
• Keynoteの表紙はいつも自分で撮影
• http://c-mitsuba.hatenablog.com
profile

4. • さまざまなデザイン
• Fluent Design System とは
• DEMO
• まとめ
agenda

8. Metro
8

9. Metro とはなんだったのか…

10. Metro
Windows Store App

11. Metro
BuildBuild

12. • Windows Store App
• フラットデザイン
• 横スクロール
• タイル
• SemanticZoom
• AppBar
Metro

15. すごい！
Modernで！！
Immersiveだ！！！

16. そして UWP へ…

17. UWP

18. UWP

20. • UWPになって、対応デバイスが増えた
• 2次元の画面の外にコンテンツが出てきた
• フラットと相反するようになった
• 新しいデザインガイドラインが必要に
UWP

21. Fluent Design System
https://developer.microsoft.com/ja-jp/windows/apps/design

22. • Project Neon
• Microsoft が提唱したUWP向けデザイン
• Fall Creates Updateで利用可能
• 今回はInsider向けSDKを使用
• 身近な例は。。。
Fluent Design System

24. さっきの動画にもあったように

25. Fluent 5大要素
Light Depth Motion Material Scale

26. Light Depth Motion Material Scale
カーソル
(特に3D)
タイル選択時の
ステート表現
コンテンツの
意味的前後関係
日 < 週 < 月
パララックス
• アニメーション
• トランジション
• 次操作を勧めたり
ミスを提示したり
シナリオに合わせ
たをシームレスに
質感
重力であったり
落として粉々に
写実的ではないが
物の本質を表現
0次元から３次元
画面の外への影響
ペン + ダイアル
3Dモデル

27. DEMO : Motion

28. DEMO : Acrylic Brush

29. DEMO : Light
https://docs.microsoft.com/ja-jp/windows/uwp/style/reveal

30. DEMO :Parallax
https://docs.microsoft.com/ja-jp/windows/uwp/style/parallax

31. DEMO : Windows Mixed Reality

32. AccentColor
https://fluentcolors.com/

33. • 色に悩んだときはここから選ぶと使いやすい
• アクセントカラーを使うと７種類の
カラーセットが用意されている
AccentColor

34. AccentColor

35. • https://docs.microsoft.com/en-us/windows/uwp/design-
downloads/index
toolkit & sample

36. • Fluent Design Systemは3D時代の
Windowsのためのデザインシステム
• とりあえず現状はこれぐらいのデザイン要素
• Acrylic Brush is not Glass UI
• 数日後に公式提供される
Fall Creators Update以降で利用可能
• 最新のVisual Studio 2017.4
ではSDKもインストールされている
まとめ

37. • スキュアモーフィズム（写実表現）ではなく、フラットふらっと
でもない
• 物質の本質をより自然に表現するデザイン
• 多くのデザイン要素は、スタイルを変更するだけで適用できる
パターンも多い（既存アプリにでもデザインを当てやすい）
• コーポレートカラーやサービスのテーマカラーがなければ、
Design Systemの色一覧から選択するのがおすすめ
まとめ

39. とはいえ、、、

40. • UWPでやりましょう -> やっぱWPFでいきましょう…案件
• UWPじゃWindows SDKが機能がなさすぎて、要件満たせない
• Binding貧弱、、、
• ストアの審査、、、
• Desktop Bridgeあるやん！
• 新規アプリはUWPで作ってね（新規WPFは審査通さないぜ
• そもそもWPFで進化するUWPデザインスタイル独自実装し
ろっていうの？（つらい
本音