Dotnetlab: Introducing Fluent Design System and Mixed Reality
0 likes486 views
Dotnetlab: Introducing Fluent Design System and Mixed Reality
![• 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](https://image.slidesharecdn.com/dotnetlab-180825071555/85/Dotnetlab-Introducing-Fluent-Design-System-and-Mixed-Reality-2-320.jpg)
Dotnetlab: Introducing Fluent Design System and Mixed Reality
- 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
- 5. 今日のお持ち帰り n5 Fluent Design System への納得感 WinMRの利用方法
- 6. n6
- 7. Fluent Design と UWP の関係 n7
- 8. Windows 8 | 8.1 : Windows Store n8 おさらいして。
- 13. Immersive
- 17. Windows 10 : UWP n17
- 18. n18 結局ウィンドウになった
- 21. Fluent : 流暢な、雄弁な、 Fluent : 説得力のある n21 Design：設計
- 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 こういうデバイスをー
- 28. n28 こういうコントロールでー
- 34. • 現実世界と人工世界の情報を組み合わせて五感を模倣 したり、インタラクションする技術 • 物体の前後関係（オクルージョン）も１つ • MSは、ARもVRもMRも全部まとめてWinMRと呼称 MR：複合現実感
- 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
- 45. MRTK：Mixed Reality Toolkit • Projectの環境構築をしてくれて • いろんなコントロールがあって • イチから作らなくていいキット。MSのサンプルでも利用
- 47. n47 2D UWPの話も少し
- 51. DEMO : Connected Animation n51
- 52. まとめ n52
- 53. • Fluent、発表当初はだいぶふわっとしてたけど、今は前より具 体的。コントロールがペンに対応したり。 • とっかかりとして、自分がデザインシステムを覚える必要はな い。どちらかというと、公式ライブラリを追いかけてアプリに どう組み込めるか、なスタイルでよいと思う。 • まずは、モーション周りから試していくとよいかも。 Fluent Design System
- 54. • WinMRの多くのPoCコンテンツは、技術的な意味では大したことない （HoloHoleとかすごいものも、もちろんある。 • どんなリソースを、どんなシチュエーションで、 どうコンテンツ化して、どう見せるかさえできれば、 有用なものは作れる。 • （パフォチュはつらい • しのぶ本が初学習におすすめ。 WinMR