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/

1. Design
Google I/O 2019
#io19jp
#design

2. Nobuya Sato
Founder & CEO @SecretLabInc
Google Developers Expert (Product Design)
Google Developers Launchpad Mentor
Google certified Sprint Master
@nobsato

3. Google Design #io19 Updates

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. 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 View for Design

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. #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. #io19 Design Sessions

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 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. #io19 Design, Deep Dive

16. Design related tweets from I/O @nobsato with #io19jp

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. ダークモード、4つの原則
Darken with grey Color with accents Conserve energy Enhance accessibility

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. ダークモードUIの切り替え方法
App barで切り替え メニューから選択 設定で切り替え
Behavior, turned on (or off)

21. ダークモードのカラー、BlackではなくDark Grey #121212

22. Material Designで重要な高度（Elevation）を表現するため、高度が上がるとサーフェースを明るくする＝透過率で制御
Higher elevation, lighter surface

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. Dark PrimaryのColorスキームはマテリアルカラーの 200 のvariantを使う

25. Primary Colorの8%が variantの200

26. Primary Colorの8%を展開してdark greyのカラーパレットを作る

27. イラストは？

28. イラストは？

29. Codelab for Dark Theme with Material and Figma / Figmaでのダークモードのチュートリアル

30. Dark ThemeのセッションではGoogle PhotoやGoogle Calendar、Google Drive、android autoなどの実例が紹介

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. 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. 様々なAPIがある中で、今回はVisual Search（画像検索）についてのガイドラインを策定

34. ML-Kitから3つの画像検索のデザインパターンを（今回）提供
Object Detection:
Live Camera
Object Detection:
Static Image
Barcode Scanning

35. 既存のものに新たにいくつかのデザインパターンを追加で構成

36. 違うテーマ（Theming）での例。Material Studiesにある Shrineをあてた例。

37. Object Detective: Live Cameraの技術的な流れ・UX
Technical flow and user experience of
Object Detection: Live Camera

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. Object Detective: Static Imageの技術的な流れ・UX
Technical flow and user experience of
Object Detective: Static Image

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. Barcode Scanningの技術的な流れ・UX
Technical flow and user experience of
Barcode Scanning

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. 3 Design Principles for ML-Kit design patterns. / ML-Kit 向けデザインパターンの3つのデザイン原則

47. Collaboration with IKEA and Adidas. / IKEAとAdidasは、早期アクセスでML Kit向けのデザインパターンを使って実装

48. Material design
sound design
Designing Sound and Silence.
Introducing Google’s first-ever public
guidelines for designing product
sounds

49. 音の原則。直感的で機能的で有益であること、ブランドアイデンティティに誠実で実直、落ち着きと安心を感じさせる

50. UIに音と追加する。音によるデザイン体験の考え方

51. デザインシステムとしての音。レイヤー的な音の考え方。

52. https://material.io/design/sound/about-sound.html#principles

53. 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.

54. Design Sprintとは？

55. Design Sprintの6つのフレームワーク

56. Design Sprintのそれぞれのフェーズでの手法

57. 実際のDesign Sprintの様子（2日間で理解からスケッチと決定までの様子）、くわしくは書籍『Design Sprint』で！
※I/O報告会のイベント当日と写真を変更。

58. Voice Action Sprintは、伝統的？なDesign Sprintのフレームワークにロールプレイングのワークショップを追加したもの

59. Voice Action Sprintの8つのフレームワーク

60. Voice Action Sprintの各フェーズの手法

61. Phase 1. UNDERSTAND 理解のフェーズ

62. Phase 2, DEFINE、定義のフェーズ

63. Phase 3 & 4. SKETCH & DECIDE、スケッチ（アイデア創出）と決定のフェーズ

64. Phase 5 & 6. ROLE PLAY, ITERATE & DECIDE、ロールプレイ＆反復そして決定のフェーズ（新しく追加されたステップ）

65. ロールプレイングの最初のアクセシビリティ：後ろ前にプロップに合わせて会話

66. ロールプレイングの2つ目のアクティビティ：批評

67. ロールプレイング、3つ目のアクティビティ：会話の反復と調整

68. ロールプレイングの最後のアクティビティ：会話の修正

69. 実際のConversation Design Sprint ( Voice Action Sprint Design)の雰囲気

70. Phase 7. PROTOTYPE、プロトタイプ（試作）のフェーズ

71. Phase 8. VALIDATE、検証（テスト）のフェーズ

72. Design Sprntsのサイトにテンプレートも公開されています。https://designsprintkit.withgoogle.com/resources/tools

73. 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/

74. PAIR = People + AI Research / Human-centered research and design initiative at Google.AI

75. Guidebookは、PAIRにあるAI原則とTensorFlowやML Kitなど、すてにあるフレームワークをつなぐ位置づけ

76. People + AI Guidebook. 人間中心の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. Mental Models https://pair.withgoogle.com/chapter/mental-models/

80. Explainability + Trust https://pair.withgoogle.com/chapter/explainability-trust/

81. Feedback + Contral https://pair.withgoogle.com/chapter/feedback-controls/

82. Errors + Graceful Failure https://pair.withgoogle.com/chapter/errors-failing

83. セッションでは最初の3つについて説明

84. Identify、Translate、Explainの3つについて

85. Identify: ニーズからAIの価値を特定する。…行動からパターン化可能？成功要因、AIであるべき？種類などを特定

86. Translate : ユーザーニーズをデータニーズに置き換えてAIモデルにする。…調整？マップ化可能？情報源？調整は必要？

87. Explain : ユーザーが不信感なく管理できてることを説明する。…調整と信用、ここ専門性、表示方法？

89. 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.

90. SandboxでのMaterial Theme Builder for Web のデモ. 自分で作ったMaterial ThemeをA3のシールにプリントしてくれる

95. SandboxでのGalleryのデモ

96. Sandboxでのスケッチワークショップ。奥のコーナーが5, 6人が入れるBox Talk（Design mini Talk）

97. Design Talks。長くても20分ぐらい、様々なトピックについてプレゼンよりもQ&Aチックなカジュアルな意見交換の場。

98. 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.

99. カラフルでGooglelyな旧android autoのMaterial Designから、車業界の重厚で品のある落ち着いたデザインへ進化

100. そのために、デザイン言語を変更し、スケーラビリティとユーザビリティを改善。

101. Android for Carの新しいデザイン言語、マルチデバイス的なスケーラビリティ

102. Android for Carの新しいデザイン言語

103. Android Auto Design Guideline https://designguidelines.withgoogle.com/android-auto/

104. Polestar 2、初のAndroid Automotive OS搭載車

105. アプリから車の制御が可能

106. Volvoの高性能ブランドをさらに追求したパフォーマンスとインテリア空間

107. Android Automotive、ダークモードを貴重としたUI。メインは4つのパネルで構成。メディアアプリなどが追加可能

108. Android Automotive OS Design Guideline https://designguidelines.withgoogle.com/android-auto/

109. 車向けの3つのAndroidプロダクト
3 Android for Car Products
Google Assistant
Drive Mode
Android Auto Android Automotive

110. 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)

111. Android Autoのコーナーでのデモ（8:15”）

112. TeslaとAndroid Automotiveの違い。TeslaもNightモードはあるが、Automotiveは標準でダークモード。アイコンも大きい

113. 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)

114. Any questions?

115. Thank You
NobuyaSato
@nobsato
@SecretLabInc