Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dotnetlab: Introducing Fluent Design System and Mixed Reality

579 views

Published on

Dotnetlab: Introducing Fluent Design System and Mixed Reality

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Dotnetlab: Introducing Fluent Design System and Mixed Reality

  1. 1. Introducing Fluent Design and Mixed Reality Yu Mitsuba
  2. 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. 3. • Fluent Design System と UWP の関係 • Windows Mixed Reality • ところで結局 WinMR をどうつかってるの • 2D UWP • まとめ agenda
  4. 4. 今日のターゲット n4 Fluent is なに?
 WinMRってどうなん?結局おもちゃなん?
  5. 5. 今日のお持ち帰り n5 Fluent Design System への納得感
 WinMRの利用方法
  6. 6. n6
  7. 7. Fluent Design と UWP の関係 n7
  8. 8. Windows 8 | 8.1 : Windows Store n8 おさらいして。
  9. 9. Title Header Header Header
  10. 10. Immersive
  11. 11. ImmersiveImmersive
  12. 12. Immersive?Immersive?
  13. 13. Windows 10 : UWP n17
  14. 14. n18 結局ウィンドウになった
  15. 15. Fluent Design System n20
  16. 16. Fluent : 流暢な、雄弁な、 Fluent : 説得力のある n21 Design:設計
  17. 17. 0次元から3次元までのUIに適応する デザインが必要
  18. 18. • 順応性: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のコンセプトデザイン
  19. 19. • 親近感: 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のコンセプトデザイン
  20. 20. • 美しさ: 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のコンセプトデザイン
  21. 21. n26 こういうデバイスをー
  22. 22. n27 こういうインタフェースでー
  23. 23. n28 こういうコントロールでー
  24. 24. n29 ポインティング 強調 アクティブ表現 フライアウトの アクリル表現 パララックス 継続性アニメ 項目感の関係 物理表現 物理演算 テクスチャ ペンUI ダイヤルUI 音声から タンジブル・ビッ トまで こういう表現で作る
  25. 25. n30 Windows Mixed Reality
  26. 26. Mixed Realityって? n31
  27. 27. • 現実世界の見た目の対して、
 デジタルの情報を上乗して表示する技術 AR:拡張現実感
  28. 28. • CGやセンサーなどを利用して、
 人工的に五感を刺激・模倣する技術 VR:人工現実感
  29. 29. • 現実世界と人工世界の情報を組み合わせて五感を模倣 したり、インタラクションする技術 • 物体の前後関係(オクルージョン)も1つ • MSは、ARもVRもMRも全部まとめてWinMRと呼称 MR:複合現実感
  30. 30. WinMR:MSが提唱するプラットフォーム
  31. 31. WinMR:MSが提唱するプラットフォーム
  32. 32. • ちなみにスペックはどれでも
 ほとんど一緒、だけどSamsung は有機ELで1440*1600*2で ヘッドホンが組み込みで有能
 (日本で売ってないけど) WinMR-HMD
  33. 33. • WinMRアプリは複合現実ポータルを使って利用する WinMR
  34. 34. 実際にアプリを見てみる n39
  35. 35. WinMRの利用 n40
  36. 36. コミケのはなし • 規則正しく並べた横180cm x 奥行45cm x 高さ70cmの机を半分利用 • これを実測して、Unity上でパネルを配置
  37. 37. • BoundaryBoxでモデルを表示しただけ • https://mtrl.com/kyoto/events/180328_hololens-tea-room/ • https://www.facebook.com/mitsubayu/videos/1902274169845404/ Holo茶室のはなし
  38. 38. 開発 n43
  39. 39. MRTK:Mixed Reality Toolkit
  40. 40. MRTK:Mixed Reality Toolkit • Projectの環境構築をしてくれて • いろんなコントロールがあって • イチから作らなくていいキット。MSのサンプルでも利用
  41. 41. DEMO:
 MRTKの操作用インタフェース を使って、モデルを操作する n46
  42. 42. n47 2D UWPの話も少し
  43. 43. XAML Controls Gallery n48
  44. 44. Windows Composition Samples n49
  45. 45. DEMO : Acrylic n50
  46. 46. DEMO : Connected Animation n51
  47. 47. まとめ n52
  48. 48. • Fluent、発表当初はだいぶふわっとしてたけど、今は前より具 体的。コントロールがペンに対応したり。 • とっかかりとして、自分がデザインシステムを覚える必要はな い。どちらかというと、公式ライブラリを追いかけてアプリに どう組み込めるか、なスタイルでよいと思う。 • まずは、モーション周りから試していくとよいかも。 Fluent Design System
  49. 49. • WinMRの多くのPoCコンテンツは、技術的な意味では大したことない (HoloHoleとかすごいものも、もちろんある。 • どんなリソースを、どんなシチュエーションで、
 どうコンテンツ化して、どう見せるかさえできれば、
 有用なものは作れる。 • (パフォチュはつらい • しのぶ本が初学習におすすめ。 WinMR

×