5分で分かった気になる
Fluent Design System
2017.05.17 - Frontend Nagoya #0 @ahomu
Q. デザインに優れたIT企業といえば？
- Apple
- Google
- Microsoft
@ahomu です
- 佐藤 歩（Ayumu Sato）
- aho.mu
- CyberAgent, Inc. + AbemaTV, Inc.
- Web アプリケーション開発屋 または クライアントサイド開発者
- 今日は知ったかぶりでしゃべります
Fluent Design System
- Microsoft が Build 2017 で新たに発表した Design System
- Universal Windows Platform Apps 向け
- ようは今後の Windows ファミリーに適用されるデザイン
- Project NEON と呼ばれていたナニカ
Agenda
- Examples of Design System
- What's Fluent Design System ?
Examples of Design System
Style Guide との違い
- Style Guide は Interface Inventory 的なアプローチ
- 基本のビジュアルルールや UI パターンと実装の管理
- デザインされた成果物の一貫性や再利用性の担保
- Design System には概念 (Concept) や原則 (Principles) がある
- デザインを網羅的に言語化、明文化して共有する
What's Fluent Design System ?
我々の世界の変化
- ユビキタスコンピューティング - The Playground Is Expanding
- 2D スクリーンだけでなく、VR/AR のような 3D や、スクリーンのない 0D の発達
- あらゆるデバイスとあらゆるインプット（音声やジェスチャ、凝視など）の選択肢
- クリエイティビティの再考 - Users' Imagination Is Taking Off
- ビジュアルやストーリーをもったコミュニケーションの発達
- ユーザーが自身でコンテンツを創り出す時代
Fluent Design System の志向
- フラットなデザインから、没入的で多次元的なデザインへ
- from flat design language to immersive, multi-dimensional one.
- 限られたタッチスクリーンから、あらゆるデバイスとインプットへ
- from small screen and touch to multiple devices and input types.
- 消費的なコミュニケーションから創造性のキュレーションへ
- from consumption and communnication to creativity curation.
With Fluent Design System, we are unlocking everyone's creativity by enabling immersive and multi-dimensional experiences that adapt and respond to multiple device & input types.
Fluent Design System は、様々なデバイスとインプットの方法に適応し、没入的かつ多次元的な一貫性のある体験を実現することによって、あらゆる人々の創造性を解放します。（意訳ないし超訳）
Five main building blocks
- Light - フォーカスとコントロール、雰囲気とZ軸の元
- Depth - 視覚的な深み、階層化や関係性の整理
- Motion - 物事のつながりの暗示、連続性とダイナミックさ
- Material - デジタル環境におけるリアリティ、システムの個性
- Scale - 0D〜3Dでスケールするデザイン、それらをまたぐ体験
実際のところ
- これから取り入れられる考えなので実例にはまだ乏しく、抽象度が高い
- フィードバックを得て、段階的にガイドラインやツールなどが整えられる
- Windows 10 Fall Creators Update にはいくらか反映される
- Fluent Design 1st Wave として以下のパーツが提供される
- Reveal Highlight, Acrylic Material, Connected Animations, Conscious Controles, Perspective Parallax (案外少ないけど、Fluentっぽさの基礎になる？)
Microsoft について（個人の感想）
- 長大なドキュメントは昔から作ってる、デザインについても例外でない
- Future Productivity にせよ Inclusive にせよデザインし続けてる
- Windows Aero はともかく Modern UI とか Surface シリーズとか
- デザイン的にもソフトウェア的にもデバイス的にも期待が高いです
h1 { line-height: 1.3; }
5分で分かった気になる Fluent Design System
2017.05.17 - Frontend Nagoya #0 @ahomu
