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.

Google I/O 19 Extended in Kyushu: Design Update

554 views

Published on

I/O Extended Kyushu | Google I/O 報告会 2019 in 福岡(2019年5月25日、LINE Fukuoka カフェスペース)
https://gdg.connpass.com/event/127728/

I/O Extended 2019 Oita ♨ feat. Kotlin/Everywhare | Google I/O 珍道中報告会 in 大分 ♨(2019年5月19日、QOX Lab)
https://www.meetup.com/GDG-Kyushu/events/260295442/

Published in: Design
  • Be the first to comment

Google I/O 19 Extended in Kyushu: Design Update

  1. 1. Design Google I/O 2019 #io19jp #design
  2. 2. Nobuya Sato Founder & CEO @SecretLabInc Google Developers Expert (Product Design) Google Developers Launchpad Mentor Google certified Sprint Master @nobsato
  3. 3. Google Design #io19 Updates
  4. 4. Google Design #io19 Updates 1. Dark Theme guidelines for a low luminance UI: guidelines, tutorial (Figma), sticker (Sketch) and Android template code with documentation. 2. Material design patterns for ML features: Object Detection: Live Camera, Object Detection: Static Image and Barcode Scanning. 3. Material Sound guidelines with sound resources. 4. Building Material Theme for Web (Glitch) and Android (Android Studio). 5. Designing Human-centered AI products with People + AI Guidebook. 6. Conversation Design with new Voice Action Design Sprint framework. 7. 53 New Emoji for Android Q with gender-neutral icons of people.
  5. 5. Google Design #io19 アップデート 1. マテリアルデザインにダークモード(Dark Theme)のガイドラインが正式に公開: ガイドライ ン, チュートリアル (Figma), Sketchデータ そして Androidテンプレートコードとドキュメント が公開。 2. ML機能向けのマテリアルデザインのデザインパターンを3つ追加: Object Detection: Live Camera, Object Detection: Static Image そして Barcode Scanning。 3. マテリアルサウンドガイドラインと音源リソースが公開。 4. Web (Glitch版)とAndroid (Android Studio) でBuilding Material Themeが公開。 5. 人間中心のAI製品をデザインするための指南書、People + AI Guidebookが公開。 6. 会話デザインのために新しくVoice Action Design Sprintフレームワークを公開。 7. Android Q向けに性別に依存しないアイコンで新しい53のEmojiが追加。
  6. 6. #io19 Personal View for Design
  7. 7. #io19 nobsato’s Personal View for Design ● Dark Theme rises! Too much? Do we need it? But for now, are you ready? ● Branding experience with more Material design systems. Standard vs. Originality. ● Dark-ready color scheme, sounds, HCD-AI process… etc. More and more clean standard design (and engineering) capability and experience required to adapt. ● You love Figma too, Don’t say “I love Sketch.” anymore. ● Flutter, Flutter and Flutter. ● No new update for Theme Editor (and Gallery.) By the way, what happen to Stage? ● Android for Car (Android Auto and Android Automotive) are coming… but not for Japan(ese) market yet. Not ready yet. ● Lots of AR. Where is VR (and Daydream)? ● No one talks about Tile UI (Wear OS by Google) ...and Pixel Watch.
  8. 8. #io19 デザイン関連の個人的所感 ● ダークモード(Dark Theme)の台頭。過剰気味?本当に必要に疑問なのか疑問。とりあえず準備できてますか? 的な。 ● マテリアルデザインの範囲がさらに広がり、よりよいブランド体験が作りやすくなる?一方で、標準とオリジナリティ の確立がますます高度に。 ● ダークモードを考慮したカラー設計、音のデザイン、HCDに基づいたAI製品の開発(プロセス)…。対応するのに ますます基本的な本来の意味でのデザイン(やエンジニアリング)能力や知識と経験が問われてきている気がす る。 ● Figma万世!、今「Sketch使いです」とか言ってると干される? ● Flutter、Flutter、Flutter。どこ観てもFlutter。 ● Theme Editor(とGallery)のアップデートはなし。そういえば、Stageは? ● Android for Car(Android Auto とAndroid Automotive)がそろそろ来そう。でも日本は…? ● サンドボックスはARでたくさん賑わってます。VR(とDaydream)どこいった? ● 誰もTile UI(Wear OS by Google)について話してない。…あとPixel Watchはぁ?
  9. 9. #io19 Design Sessions
  10. 10. #io19 Design Session, Day 1 ● Beyond Mobile: Material Design, Adaptable UIs, and Flutter. ○ #MaterialDesign, #Flutter ● Prototyping Voice Experiences: Design Sprints for the Google Assistant. ○ #VUI, #ConvoSprint, #DesignSprint, #GoADevs ● Sound Design and Sonic Brand. ○ #MaterialDesign
  11. 11. #io19 Design Session, Day 2 - 1/2 ● Material Theming: Build Expressively with Material Components. ○ #MaterialDesign, #MaterialTheming, #MaterialComponents, #MDC ● Designing AR Applications. ○ #AR, #ARCore ● Increasing AR Realism with Lighting. ○ #AR, #ARCore, #UX ● Reach the Next Billion Users with Actions for the Google Assistant. ○ #NBU, #AndroidGO, #KaiOS, #AoGDevs, #GoogleAssistant ● Designing Human-Centered AI Products. ○ #PAIRguidebook, #MaterialDesign, #HCD
  12. 12. #io19 Design Session, Day 2 - 2/2 ● How Material Design Can Be Adopted and Measured for Product Success. ○ #MaterialDesign, #DesignOps ● Voice and Visual: How to Build Actions for Smart Displays and More Devices. ○ #CxD, #ConvoSprint, #AoGDevs
  13. 13. #io19 Design Session, Day 3 ● How to Design a Dark Theme Using Material. ○ #MaterialDesign, #DarkTheme, #DarkMode ● ML Kit x Material Design: Design Patterns for Mobile Machine Learning. ○ #MaterialDesing, #MLKit, #DesignPatterns ● Build Apps for the Next Billion Users. ○ #NBU, #i18n, #a11y ● Let’s Talk: Designing Quality Conversations for the Google Assistant. ○ #CxD, #AoGDevs, #GoogleAssistant
  14. 14. #io19 Interaction with Google Design ● Material Design and Accessibility Sandbox ○ Box Talk (Design Talks) ○ Material Theme Builder ○ Gallery Demo ○ Sketching Excersise ○ Moving Buttuns ○ etc. ● Design Reviews ● Office Hours ○ Material Components (MDC) ○ MDC for Android ○ MDC for Web, iOS, Flutter ○ Next Billion Users ● Design Talks ○ 20-mis mini talks and QA at Sandbox.
  15. 15. #io19 Design, Deep Dive
  16. 16. Design related tweets from I/O @nobsato with #io19jp
  17. 17. Dark Theme guidelines Material design Dark Theme conserve energy, enhance accessibility, and use color as an accent. By lighting up pixels less, can result in significant reduction in power usage on some screen technologies like OLED. Up to 60% reduction of power usage while the app is being displayed on screen. Conserve energy Enhance accessibility Color with accents
  18. 18. ダークモード、4つの原則 Darken with grey Color with accents Conserve energy Enhance accessibility
  19. 19. ダークモードUIの構成エレメント Elements: 1. Background (0dp elevation surface overlay) 2. Surface (with 1dp elevation surface overlay) 3. Primary 4. Secondary 5. On background 6. On Surface 7. On Primary 8. On Secondary
  20. 20. ダークモードUIの切り替え方法 App barで切り替え メニューから選択 設定で切り替え Behavior, turned on (or off)
  21. 21. ダークモードのカラー、BlackではなくDark Grey #121212
  22. 22. Material Designで重要な高度(Elevation)を表現するため、高度が上がるとサーフェースを明るくする=透過率で制御 Higher elevation, lighter surface
  23. 23. Dark Primary Colorのは元のPrimary Colorの8% 透過 + #121212。アクセシビリティのコントラスト比 4.5:1 を担保 A surface becomes lighter with the application of a semi-transparent white overlay. 1. Surface 2. Elevation overlay
  24. 24. Dark PrimaryのColorスキームはマテリアルカラーの 200 のvariantを使う
  25. 25. Primary Colorの8%が variantの200
  26. 26. Primary Colorの8%を展開してdark greyのカラーパレットを作る
  27. 27. イラストは?
  28. 28. イラストは?
  29. 29. Codelab for Dark Theme with Material and Figma / Figmaでのダークモードのチュートリアル
  30. 30. Dark ThemeのセッションではGoogle PhotoやGoogle Calendar、Google Drive、android autoなどの実例が紹介
  31. 31. ダークモードまとめ Users will expect apps to have a dark theme Use AppCompat DayNight and provide app setting Update to AppCompat v1.1.0 and MDC v1.1.0 Force Dark enables rapid implementation on Q Theme attribute all the things Dark Theme
  32. 32. Material design patterns for ML-Kit Material Design has partnered with ML Kit to address how machine learning is applied in visual search. While no single design pattern embodies the potential of this technology, visual search provides an opportunity for design guidance to help users understand how to best interact with ML technology. Object Detection: Live Camera Object Detection: Static Image Barcode Scanning
  33. 33. 様々なAPIがある中で、今回はVisual Search(画像検索)についてのガイドラインを策定
  34. 34. ML-Kitから3つの画像検索のデザインパターンを(今回)提供 Object Detection: Live Camera Object Detection: Static Image Barcode Scanning
  35. 35. 既存のものに新たにいくつかのデザインパターンを追加で構成
  36. 36. 違うテーマ(Theming)での例。Material Studiesにある Shrineをあてた例。
  37. 37. Object Detective: Live Cameraの技術的な流れ・UX Technical flow and user experience of Object Detection: Live Camera
  38. 38. Object Detective: Live Cameraのデザインガイドラインとコンポーネント Components: 1. Top app bar 2. Reticle 3. Object marker 4. Tooltip 5. Detected image 6. Modal bottom sheet Design guidelines for Object Detective: Live Camera Navigate with a device camera. Keep camera clear and legible. Provide feedback.
  39. 39. Object Detective: Static Imageの技術的な流れ・UX Technical flow and user experience of Object Detective: Static Image
  40. 40. Object Detective: Static Imageの技術的な流れ・UX Components: 1. Top app bar 2. Object marker 3. Tooltip 4. Cards 5. Detected image 6. Modal bottom sheet Design guidelines for Object Detective: Static Image Keep camera clear and legible. Provide feedback.
  41. 41. Barcode Scanningの技術的な流れ・UX Technical flow and user experience of Barcode Scanning
  42. 42. Barcode Scanningのデザインガイドラインとコンポーネント Components: 1. Top app bar 2. Barcode frame 3. Tooltip 4. Modal bottom sheet (Optional) Design guidelines for Barcode Scanning Navigate with a device camera. Keep camera clear and legible. Provide feedback.
  43. 43. 3 Design Principles for ML-Kit design patterns. / ML-Kit 向けデザインパターンの3つのデザイン原則
  44. 44. Collaboration with IKEA and Adidas. / IKEAとAdidasは、早期アクセスでML Kit向けのデザインパターンを使って実装
  45. 45. Material design sound design Designing Sound and Silence. Introducing Google’s first-ever public guidelines for designing product sounds
  46. 46. 音の原則。直感的で機能的で有益であること、ブランドアイデンティティに誠実で実直、落ち着きと安心を感じさせる
  47. 47. UIに音と追加する。音によるデザイン体験の考え方
  48. 48. デザインシステムとしての音。レイヤー的な音の考え方。
  49. 49. https://material.io/design/sound/about-sound.html#principles
  50. 50. Voice Action Sprint Framework Define the Design Sprint framework for Voice Action. Combining a traditional (standard) Design Sprint framework with voice-interaction focused role play workshop.
  51. 51. Design Sprintとは?
  52. 52. Design Sprintの6つのフレームワーク
  53. 53. Design Sprintのそれぞれのフェーズでの手法
  54. 54. 実際のDesign Sprintの様子(2日間で理解からスケッチと決定までの様子)、くわしくは書籍『Design Sprint』で! ※I/O報告会のイベント当日と写真を変更。
  55. 55. Voice Action Sprintは、伝統的?なDesign Sprintのフレームワークにロールプレイングのワークショップを追加したもの
  56. 56. Voice Action Sprintの8つのフレームワーク
  57. 57. Voice Action Sprintの各フェーズの手法
  58. 58. Phase 1. UNDERSTAND 理解のフェーズ
  59. 59. Phase 2, DEFINE、定義のフェーズ
  60. 60. Phase 3 & 4. SKETCH & DECIDE、スケッチ(アイデア創出)と決定のフェーズ
  61. 61. Phase 5 & 6. ROLE PLAY, ITERATE & DECIDE、ロールプレイ&反復そして決定のフェーズ(新しく追加されたステップ)
  62. 62. ロールプレイングの最初のアクセシビリティ:後ろ前にプロップに合わせて会話
  63. 63. ロールプレイングの2つ目のアクティビティ:批評
  64. 64. ロールプレイング、3つ目のアクティビティ:会話の反復と調整
  65. 65. ロールプレイングの最後のアクティビティ:会話の修正
  66. 66. 実際のConversation Design Sprint ( Voice Action Sprint Design)の雰囲気
  67. 67. Phase 7. PROTOTYPE、プロトタイプ(試作)のフェーズ
  68. 68. Phase 8. VALIDATE、検証(テスト)のフェーズ
  69. 69. Design Sprntsのサイトにテンプレートも公開されています。https://designsprintkit.withgoogle.com/resources/tools
  70. 70. People + AI Guidebook 6 guiding chapters for designing human-centered AI products. 1. User Needs + Defining Success 2. Data Collection + Evaluation 3. Mental Models 4. Explainability + Trust 5. Feedback + Control 6. Errors + Graceful Failure https://pair.withgoogle.com/
  71. 71. PAIR = People + AI Research / Human-centered research and design initiative at Google.AI
  72. 72. Guidebookは、PAIRにあるAI原則とTensorFlowやML Kitなど、すてにあるフレームワークをつなぐ位置づけ
  73. 73. People + AI Guidebook. 人間中心のAI製品をデザインするさいの指南書。 https://pair.withgoogle.com/
  74. 74. User Needs + Defining Success https://pair.withgoogle.com/chapter/user-needs/
  75. 75. Data Collection + Evaluation https://pair.withgoogle.com/chapter/data-collection/
  76. 76. Mental Models https://pair.withgoogle.com/chapter/mental-models/
  77. 77. Explainability + Trust https://pair.withgoogle.com/chapter/explainability-trust/
  78. 78. Feedback + Contral https://pair.withgoogle.com/chapter/feedback-controls/
  79. 79. Errors + Graceful Failure https://pair.withgoogle.com/chapter/errors-failing
  80. 80. セッションでは最初の3つについて説明
  81. 81. Identify、Translate、Explainの3つについて
  82. 82. Identify: ニーズからAIの価値を特定する。…行動からパターン化可能?成功要因、AIであるべき?種類などを特定
  83. 83. Translate : ユーザーニーズをデータニーズに置き換えてAIモデルにする。…調整?マップ化可能?情報源?調整は必要?
  84. 84. Explain : ユーザーが不信感なく管理できてることを説明する。…調整と信用、ここ専門性、表示方法?
  85. 85. Build own Material Theme Interactive projects for Android and the web let you create your own Material theme by customizing values for color, typography, and shape. Build Material Theme for Android on Android Studio with material-theme-builder code. Build Material Theme for Web with Glitch.
  86. 86. SandboxでのMaterial Theme Builder for Web のデモ. 自分で作ったMaterial ThemeをA3のシールにプリントしてくれる
  87. 87. SandboxでのGalleryのデモ
  88. 88. Sandboxでのスケッチワークショップ。奥のコーナーが5, 6人が入れるBox Talk(Design mini Talk)
  89. 89. Design Talks。長くても20分ぐらい、様々なトピックについてプレゼンよりもQ&Aチックなカジュアルな意見交換の場。
  90. 90. Android Auto Design Completely redesign Android Auto design language from the ground. Inspired by Automotive design, designing new driving experience with new Material Dark Theme. Android Auto coming Summer 2019 and Android Automotive in the end of 2019.
  91. 91. カラフルでGooglelyな旧android autoのMaterial Designから、車業界の重厚で品のある落ち着いたデザインへ進化
  92. 92. そのために、デザイン言語を変更し、スケーラビリティとユーザビリティを改善。
  93. 93. Android for Carの新しいデザイン言語、マルチデバイス的なスケーラビリティ
  94. 94. Android for Carの新しいデザイン言語
  95. 95. Android Auto Design Guideline https://designguidelines.withgoogle.com/android-auto/
  96. 96. Polestar 2、初のAndroid Automotive OS搭載車
  97. 97. アプリから車の制御が可能
  98. 98. Volvoの高性能ブランドをさらに追求したパフォーマンスとインテリア空間
  99. 99. Android Automotive、ダークモードを貴重としたUI。メインは4つのパネルで構成。メディアアプリなどが追加可能
  100. 100. Android Automotive OS Design Guideline https://designguidelines.withgoogle.com/android-auto/
  101. 101. 車向けの3つのAndroidプロダクト 3 Android for Car Products Google Assistant Drive Mode Android Auto Android Automotive
  102. 102. Android Automotive First preview of Android Automotive with Volvo EV subsidiary’s Polerstar 2. See: demo (8:15) Read: Volvo’s Polestar 2 with Android Automotive is how all car software should be designed (The Verge) Read: GoogleがAndroid Automotive OSをSpotifyなどメディアデベロッパーに 一般公開(TechCrunch)
  103. 103. Android Autoのコーナーでのデモ(8:15”)
  104. 104. TeslaとAndroid Automotiveの違い。TeslaもNightモードはあるが、Automotiveは標準でダークモード。アイコンも大きい
  105. 105. Gender-neutral 53 Emoji for Pixel Google is releasing 53 new gender-fluid (gender-neutral) emoji on Pixel phones in beta this week, and will add them to all Android Q phones later this year. Read: Google is adding 53 gender-fluid emoji to Android Q (The Verge)
  106. 106. Any questions?
  107. 107. Thank You NobuyaSato @nobsato @SecretLabInc

×