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.

0

Share

Introducing Fluent Design

Introducing Fluent Design

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Introducing Fluent Design

  1. 1. Introducing Fluent Design System 蜜葉 優 あるいはMetroの先を紡ぐ手がかり
  2. 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
  3. 3. • さまざまなデザイン • Fluent Design System とは • DEMO • まとめ agenda
  4. 4. Metro 8
  5. 5. Metro とはなんだったのか…
  6. 6. Metro Windows Store App
  7. 7. Metro BuildBuild
  8. 8. • Windows Store App • フラットデザイン • 横スクロール • タイル • SemanticZoom • AppBar Metro
  9. 9. すごい! Modernで!! Immersiveだ!!!
  10. 10. そして UWP へ…
  11. 11. UWP
  12. 12. UWP
  13. 13. • UWPになって、対応デバイスが増えた • 2次元の画面の外にコンテンツが出てきた • フラットと相反するようになった • 新しいデザインガイドラインが必要に UWP
  14. 14. Fluent Design System https://developer.microsoft.com/ja-jp/windows/apps/design
  15. 15. • Project Neon • Microsoft が提唱したUWP向けデザイン • Fall Creates Updateで利用可能 • 今回はInsider向けSDKを使用 • 身近な例は。。。 Fluent Design System
  16. 16. さっきの動画にもあったように
  17. 17. Fluent 5大要素 Light Depth Motion Material Scale
  18. 18. Light Depth Motion Material Scale カーソル
 (特に3D) タイル選択時の
 ステート表現 コンテンツの
 意味的前後関係 日 < 週 < 月 パララックス • アニメーション • トランジション • 次操作を勧めたり ミスを提示したり
 シナリオに合わせ たをシームレスに 質感 重力であったり
 落として粉々に 写実的ではないが
 物の本質を表現 0次元から3次元 画面の外への影響 ペン + ダイアル 3Dモデル
  19. 19. DEMO : Motion
  20. 20. DEMO : Acrylic Brush
  21. 21. DEMO : Light https://docs.microsoft.com/ja-jp/windows/uwp/style/reveal
  22. 22. DEMO :Parallax https://docs.microsoft.com/ja-jp/windows/uwp/style/parallax
  23. 23. DEMO : Windows Mixed Reality
  24. 24. AccentColor https://fluentcolors.com/
  25. 25. • 色に悩んだときはここから選ぶと使いやすい • アクセントカラーを使うと7種類の
 カラーセットが用意されている AccentColor
  26. 26. AccentColor
  27. 27. • https://docs.microsoft.com/en-us/windows/uwp/design- downloads/index toolkit & sample
  28. 28. • Fluent Design Systemは3D時代の
 Windowsのためのデザインシステム • とりあえず現状はこれぐらいのデザイン要素 • Acrylic Brush is not Glass UI • 数日後に公式提供される
 Fall Creators Update以降で利用可能 • 最新のVisual Studio 2017.4
 ではSDKもインストールされている まとめ
  29. 29. • スキュアモーフィズム(写実表現)ではなく、フラットふらっと でもない • 物質の本質をより自然に表現するデザイン • 多くのデザイン要素は、スタイルを変更するだけで適用できる
 パターンも多い(既存アプリにでもデザインを当てやすい) • コーポレートカラーやサービスのテーマカラーがなければ、
 Design Systemの色一覧から選択するのがおすすめ まとめ
  30. 30. とはいえ、、、
  31. 31. • UWPでやりましょう -> やっぱWPFでいきましょう…案件 • UWPじゃWindows SDKが機能がなさすぎて、要件満たせない • Binding貧弱、、、 • ストアの審査、、、 • Desktop Bridgeあるやん! • 新規アプリはUWPで作ってね(新規WPFは審査通さないぜ • そもそもWPFで進化するUWPデザインスタイル独自実装し ろっていうの?(つらい 本音

Introducing Fluent Design

Views

Total views

858

On Slideshare

0

From embeds

0

Number of embeds

294

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×