Dotnetlab: Introducing Fluent Design System and Mixed Reality

1. Introducing
Fluent Design
and
Mixed Reality
Yu Mitsuba

2. • H.N. :蜜葉 優 [@mitsuba yu]
• silkyfeel Organizer
HoloLab Inc. XAML Platform事業部長
• Microsoft MVP for Windows Development
• Designer / Developer / Photographer
• Keynoteの表紙はいつも自分で撮影
• 最近とうとうLeica M10を買ったのでもやし生活
• http://c-mitsuba.hatenablog.com
profile

3. • Fluent Design System と UWP の関係
• Windows Mixed Reality
• ところで結局 WinMR をどうつかってるの
• 2D UWP
• まとめ
agenda

4. 今日のターゲット
n4
Fluent is なに？
WinMRってどうなん？結局おもちゃなん？

5. 今日のお持ち帰り
n5
Fluent Design System への納得感
WinMRの利用方法

6. n6

7. Fluent Design と
UWP の関係
n7

8. Windows 8 | 8.1 : Windows Store
n8
おさらいして。

11. Title
Header Header Header

13. Immersive

15. ImmersiveImmersive

16. Immersive?Immersive?

17. Windows 10 : UWP
n17

18. n18
結局ウィンドウになった

20. Fluent
Design
System
n20

21. Fluent : 流暢な、雄弁な、
Fluent : 説得力のある
n21
Design：設計

22. 0次元から3次元までのUIに適応する
デザインが必要

23. • 順応性:Natural on each device
各デバイスで自然な Fluent エクスペリエンスを得られる
• Fluent エクスペリエンスは環境に適応します。 タブレット、デスクトップ PC、
Xbox で軽快な Fluent エクスペリエンスを得られます。また、Mixed Reality ヘッド
セットでの動作も優れています。 PC の追加モニターなど、多くのハードウェアを追
加しても、Fluent エクスペリエンスでそれらを活用できます。
• Fluent experiences listen and adapt. They feel natural on the devices people use, from
tablets to laptops, from PCs to televisions. They travel from the office to the living room
to virtual worlds.
Windows10のコンセプトデザイン

24. • 親近感: Intuitive and powerful
Fluent エクスペリエンスは直感的で、強力である
• Fluent エクスペリエンスは一貫性のあるコントロールとパターンを使用するため、
ユーザーが学習したとおりに動作します。 幅広い物理的な機能を使用してユーザー
にアクセスします。グローバリゼーション機能が組み込まれているため、世界中の
ユーザーが使用することができます。
• Fluent experiences adjust to behavior and intent—they understand and anticipate what's
needed. They unite people and ideas, whether they're on opposite sides of the globe or
standing right next to each other.
Windows10のコンセプトデザイン

25. • 美しさ: Engaging and immersive
Fluent エクスペリエンスは魅力的で、臨場感がある
• 現実世界の要素を組み込むことで、Fluent エクスペリエンスでは基本的な機能を活
用できます。 直感的かつ本能的に情報を整理できるように、ライト、影、モーショ
ン、深度、テクスチャを使用します。
• Fluent Design に派手な効果はありません。 脳で効率的に処理するようにプログラム
されたエクスペリエンスをエミュレートするため、ユーザー エクスペリエンスを拡
張する物理的な効果が組み込まれています。
• The physical world is our vocabulary. Fluent speaks in light and shadow, in spatial
dimensions, in the weave and fold of fundamental materials. It communicates in a way that
feels effortless.
Windows10のコンセプトデザイン

26. n26
こういうデバイスをー

27. n27
こういうインタフェースでー

28. n28
こういうコントロールでー

29. n29
ポインティング
強調
アクティブ表現
フライアウトの
アクリル表現
パララックス
継続性アニメ
項目感の関係
物理表現
物理演算
テクスチャ
ペンUI
ダイヤルUI
音声から
タンジブル・ビッ
トまで
こういう表現で作る

30. n30
Windows
Mixed Reality

31. Mixed Realityって？
n31

32. • 現実世界の見た目の対して、
デジタルの情報を上乗して表示する技術
AR：拡張現実感

33. • CGやセンサーなどを利用して、
人工的に五感を刺激・模倣する技術
VR：人工現実感

34. • 現実世界と人工世界の情報を組み合わせて五感を模倣
したり、インタラクションする技術
• 物体の前後関係（オクルージョン）も１つ
• MSは、ARもVRもMRも全部まとめてWinMRと呼称
MR：複合現実感

35. WinMR：MSが提唱するプラットフォーム

36. WinMR：MSが提唱するプラットフォーム

37. • ちなみにスペックはどれでも
ほとんど一緒、だけどSamsung
は有機ELで1440*1600*2で
ヘッドホンが組み込みで有能
（日本で売ってないけど）
WinMR-HMD

38. • WinMRアプリは複合現実ポータルを使って利用する
WinMR

39. 実際にアプリを見てみる
n39

40. WinMRの利用
n40

41. コミケのはなし
• 規則正しく並べた横180cm x 奥行45cm x 高さ70cmの机を半分利用
• これを実測して、Unity上でパネルを配置

42. • BoundaryBoxでモデルを表示しただけ
• https://mtrl.com/kyoto/events/180328_hololens-tea-room/
• https://www.facebook.com/mitsubayu/videos/1902274169845404/
Holo茶室のはなし

43. 開発
n43

44. MRTK：Mixed Reality Toolkit

45. MRTK：Mixed Reality Toolkit
• Projectの環境構築をしてくれて
• いろんなコントロールがあって
• イチから作らなくていいキット。MSのサンプルでも利用

46. DEMO：
MRTKの操作用インタフェース
を使って、モデルを操作する
n46

47. n47
2D UWPの話も少し

48. XAML Controls Gallery
n48

49. Windows Composition
Samples
n49

50. DEMO : Acrylic
n50

51. DEMO : Connected Animation
n51

52. まとめ
n52

53. • Fluent、発表当初はだいぶふわっとしてたけど、今は前より具
体的。コントロールがペンに対応したり。
• とっかかりとして、自分がデザインシステムを覚える必要はな
い。どちらかというと、公式ライブラリを追いかけてアプリに
どう組み込めるか、なスタイルでよいと思う。
• まずは、モーション周りから試していくとよいかも。
Fluent Design System

54. • WinMRの多くのPoCコンテンツは、技術的な意味では大したことない
（HoloHoleとかすごいものも、もちろんある。
• どんなリソースを、どんなシチュエーションで、
どうコンテンツ化して、どう見せるかさえできれば、
有用なものは作れる。
• （パフォチュはつらい
• しのぶ本が初学習におすすめ。
WinMR