Download as PDF, PPTX
Uploaded byNobuya Sato
Google I/O 19 Extended in Kyushu: Design Update
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/
![勉強会3月14日[第2部][nfc]](https://cdn.slidesharecdn.com/ss_thumbnails/3142nfc-120320073913-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Google I/O 19 Extended in Kyushu: Design Update
- 1.
- 2. Nobuya Sato Founder &CEO @SecretLabInc Google Developers Expert (Product Design) Google Developers Launchpad Mentor Google certified Sprint Master @nobsato
- 3. Google Design #io19Updates
- 4. Google Design #io19Updates 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. 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. #io19 Personal Viewfor Design
- 7. #io19 nobsato’s PersonalView 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. #io19 デザイン関連の個人的所感 ● ダークモード（DarkTheme）の台頭。過剰気味？本当に必要に疑問なのか疑問。とりあえず準備できてますか？ 的な。 ● マテリアルデザインの範囲がさらに広がり、よりよいブランド体験が作りやすくなる？一方で、標準とオリジナリティ の確立がますます高度に。 ● ダークモードを考慮したカラー設計、音のデザイン、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.
- 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. #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. #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. #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. #io19 Interaction withGoogle 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.
- 16. Design related tweetsfrom I/O @nobsato with #io19jp
- 17. Dark Theme guidelines Material designDark 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. ダークモード、4つの原則 Darken with greyColor with accents Conserve energy Enhance accessibility
- 19. ダークモードUIの構成エレメント Elements: 1. Background (0dpelevation 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. ダークモードUIの切り替え方法 App barで切り替え メニューから選択設定で切り替え Behavior, turned on (or off)
- 21.
- 22.
- 23. Dark Primary Colorのは元のPrimaryColorの8% 透過 + #121212。アクセシビリティのコントラスト比 4.5:1 を担保 A surface becomes lighter with the application of a semi-transparent white overlay. 1. Surface 2. Elevation overlay
- 24. Dark PrimaryのColorスキームはマテリアルカラーの 200のvariantを使う
- 25.
- 26.
- 27.
- 28.
- 29. Codelab for DarkTheme with Material and Figma / Figmaでのダークモードのチュートリアル
- 30. Dark ThemeのセッションではGoogle PhotoやGoogleCalendar、Google Drive、android autoなどの実例が紹介
- 31. ダークモードまとめ Users will expectapps 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. Material design patterns forML-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.
- 34. ML-Kitから3つの画像検索のデザインパターンを（今回）提供 Object Detection: Live Camera ObjectDetection: Static Image Barcode Scanning
- 35.
- 36.
- 37. Object Detective: LiveCameraの技術的な流れ・UX Technical flow and user experience of Object Detection: Live Camera
- 38. Object Detective: LiveCameraのデザインガイドラインとコンポーネント 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. Object Detective: StaticImageの技術的な流れ・UX Technical flow and user experience of Object Detective: Static Image
- 40. Object Detective: StaticImageの技術的な流れ・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. Barcode Scanningの技術的な流れ・UX Technical flowand user experience of Barcode Scanning
- 42. Barcode Scanningのデザインガイドラインとコンポーネント Components: 1. Topapp 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. 3 Design Principlesfor ML-Kit design patterns. / ML-Kit 向けデザインパターンの3つのデザイン原則
- 47. Collaboration with IKEAand Adidas. / IKEAとAdidasは、早期アクセスでML Kit向けのデザインパターンを使って実装
- 48. Material design sound design DesigningSound and Silence. Introducing Google’s first-ever public guidelines for designing product sounds
- 49.
- 50.
- 51.
- 52.
- 53. Voice Action Sprint Framework Definethe Design Sprint framework for Voice Action. Combining a traditional (standard) Design Sprint framework with voice-interaction focused role play workshop.
- 54.
- 55.
- 56.
- 57.
- 58. Voice Action Sprintは、伝統的？なDesignSprintのフレームワークにロールプレイングのワークショップを追加したもの
- 59.
- 60.
- 61. Phase 1. UNDERSTAND理解のフェーズ
- 62.
- 63. Phase 3 &4. SKETCH & DECIDE、スケッチ（アイデア創出）と決定のフェーズ
- 64. Phase 5 &6. ROLE PLAY, ITERATE & DECIDE、ロールプレイ＆反復そして決定のフェーズ（新しく追加されたステップ）
- 65.
- 66.
- 67.
- 68.
- 69. 実際のConversation Design Sprint( Voice Action Sprint Design)の雰囲気
- 70.
- 71.
- 72.
- 73. People + AI Guidebook 6guiding 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/
- 74. PAIR = People+ AI Research / Human-centered research and design initiative at Google.AI
- 75.
- 76. People + AIGuidebook. 人間中心のAI製品をデザインするさいの指南書。 https://pair.withgoogle.com/
- 77. User Needs +Defining Success https://pair.withgoogle.com/chapter/user-needs/
- 78. Data Collection +Evaluation https://pair.withgoogle.com/chapter/data-collection/
- 79.
- 80. Explainability + Trusthttps://pair.withgoogle.com/chapter/explainability-trust/
- 81. Feedback + Contralhttps://pair.withgoogle.com/chapter/feedback-controls/
- 82. Errors + GracefulFailure https://pair.withgoogle.com/chapter/errors-failing
- 83.
- 84.
- 85.
- 86.
- 87.
- 89. Build own Material Theme Interactiveprojects 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.
- 90. SandboxでのMaterial Theme Builderfor Web のデモ. 自分で作ったMaterial ThemeをA3のシールにプリントしてくれる
- 95.
- 96.
- 97.
- 98. Android Auto Design Completely redesignAndroid 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.
- 99.
- 100.
- 101.
- 102.
- 103. Android Auto DesignGuideline https://designguidelines.withgoogle.com/android-auto/
- 104.
- 105.
- 106.
- 107.
- 108. Android Automotive OSDesign Guideline https://designguidelines.withgoogle.com/android-auto/
- 109. 車向けの3つのAndroidプロダクト 3 Android forCar Products Google Assistant Drive Mode Android Auto Android Automotive
- 110. Android Automotive First preview ofAndroid 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)
- 111.
- 112.
- 113. Gender-neutral 53 Emoji forPixel 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)
- 114.
- 115.