Enviar pesquisa
Carregar
Android2でも動くMaterialデザイン実装
•
7 gostaram
•
4,059 visualizações
Yusuke Konishi
Seguir
LTで話した内容です。
Leia menos
Leia mais
Engenharia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 40
Baixar agora
Baixar para ler offline
Recomendados
Prott user meetup 16 効率よく、品質良く、アプリを育てよう。
Prott user meetup 16 効率よく、品質良く、アプリを育てよう。
Musashi Kobayashi
Pudule live cording
Pudule live cording
Yusuke Konishi
Androidアプリ本格開発入門 webブラウザ編
Androidアプリ本格開発入門 webブラウザ編
bg1 333
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
leverages_event
20141120 ぬるぬる動くandroid tips
20141120 ぬるぬる動くandroid tips
Yusuke Konishi
受託側UXデザインの分解と構築 | "RIDE" UX Sketch SUMMER 2016
受託側UXデザインの分解と構築 | "RIDE" UX Sketch SUMMER 2016
Tomohiro Suzuki
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
Tomohiro Suzuki
Weekend Androidのススメ
Weekend Androidのススメ
Suzuki Junko
Recomendados
Prott user meetup 16 効率よく、品質良く、アプリを育てよう。
Prott user meetup 16 効率よく、品質良く、アプリを育てよう。
Musashi Kobayashi
Pudule live cording
Pudule live cording
Yusuke Konishi
Androidアプリ本格開発入門 webブラウザ編
Androidアプリ本格開発入門 webブラウザ編
bg1 333
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
leverages_event
20141120 ぬるぬる動くandroid tips
20141120 ぬるぬる動くandroid tips
Yusuke Konishi
受託側UXデザインの分解と構築 | "RIDE" UX Sketch SUMMER 2016
受託側UXデザインの分解と構築 | "RIDE" UX Sketch SUMMER 2016
Tomohiro Suzuki
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
ワイワイカフェ UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」
Tomohiro Suzuki
Weekend Androidのススメ
Weekend Androidのススメ
Suzuki Junko
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
Rubyでアプリ開発(2013 0430)
Rubyでアプリ開発(2013 0430)
Shinichirou Nakamura
JJUG 2015 Summer
JJUG 2015 Summer
Recruit Technologies
Coloris紹介
Coloris紹介
Akira Hatsune
Android icon deployment
Android icon deployment
Takashi Ishibashi
二求の塾 プログラミング講座(2019-08-10)
二求の塾 プログラミング講座(2019-08-10)
Atsuo Yamasaki
LT#6 Taskete
LT#6 Taskete
Shingo Inoue
主婦でもできる Android Layout
主婦でもできる Android Layout
Hiromi Tsuzuki
言語処理するのに Python でいいの? #PyDataTokyo
言語処理するのに Python でいいの? #PyDataTokyo
Shuyo Nakatani
アプリデザインの共通言語
アプリデザインの共通言語
Hiroki Akiyama
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Shoya Tsukada
[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...
[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...
エピック・ゲームズ・ジャパン Epic Games Japan
ABC 2012 spring
ABC 2012 spring
Takeaki Tada
App Dojo 2017 12月 - VUI in your app with Dialogflow -
App Dojo 2017 12月 - VUI in your app with Dialogflow -
啓介 大橋
ペアプロどうでしょう?
ペアプロどうでしょう?
hiroyuki Yamamoto
知識ゼロからモバイルアプリをデザインして失敗した話
知識ゼロからモバイルアプリをデザインして失敗した話
FujishiroRumi
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
Hiroki Toyokawa
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
HoloLens 2 アプリ開発ハローワールド
HoloLens 2 アプリ開発ハローワールド
Madoka Chiyoda
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
Toshiyuki Ando
Mais conteúdo relacionado
Semelhante a Android2でも動くMaterialデザイン実装
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
Rubyでアプリ開発(2013 0430)
Rubyでアプリ開発(2013 0430)
Shinichirou Nakamura
JJUG 2015 Summer
JJUG 2015 Summer
Recruit Technologies
Coloris紹介
Coloris紹介
Akira Hatsune
Android icon deployment
Android icon deployment
Takashi Ishibashi
二求の塾 プログラミング講座(2019-08-10)
二求の塾 プログラミング講座(2019-08-10)
Atsuo Yamasaki
LT#6 Taskete
LT#6 Taskete
Shingo Inoue
主婦でもできる Android Layout
主婦でもできる Android Layout
Hiromi Tsuzuki
言語処理するのに Python でいいの? #PyDataTokyo
言語処理するのに Python でいいの? #PyDataTokyo
Shuyo Nakatani
アプリデザインの共通言語
アプリデザインの共通言語
Hiroki Akiyama
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Shoya Tsukada
[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...
[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...
エピック・ゲームズ・ジャパン Epic Games Japan
ABC 2012 spring
ABC 2012 spring
Takeaki Tada
App Dojo 2017 12月 - VUI in your app with Dialogflow -
App Dojo 2017 12月 - VUI in your app with Dialogflow -
啓介 大橋
ペアプロどうでしょう?
ペアプロどうでしょう?
hiroyuki Yamamoto
知識ゼロからモバイルアプリをデザインして失敗した話
知識ゼロからモバイルアプリをデザインして失敗した話
FujishiroRumi
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
Hiroki Toyokawa
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
HoloLens 2 アプリ開発ハローワールド
HoloLens 2 アプリ開発ハローワールド
Madoka Chiyoda
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
Toshiyuki Ando
Semelhante a Android2でも動くMaterialデザイン実装
(20)
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Rubyでアプリ開発(2013 0430)
Rubyでアプリ開発(2013 0430)
JJUG 2015 Summer
JJUG 2015 Summer
Coloris紹介
Coloris紹介
Android icon deployment
Android icon deployment
二求の塾 プログラミング講座(2019-08-10)
二求の塾 プログラミング講座(2019-08-10)
LT#6 Taskete
LT#6 Taskete
主婦でもできる Android Layout
主婦でもできる Android Layout
言語処理するのに Python でいいの? #PyDataTokyo
言語処理するのに Python でいいの? #PyDataTokyo
アプリデザインの共通言語
アプリデザインの共通言語
「Camelog」Android開発秘話
「Camelog」Android開発秘話
[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...
[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...
ABC 2012 spring
ABC 2012 spring
App Dojo 2017 12月 - VUI in your app with Dialogflow -
App Dojo 2017 12月 - VUI in your app with Dialogflow -
ペアプロどうでしょう?
ペアプロどうでしょう?
知識ゼロからモバイルアプリをデザインして失敗した話
知識ゼロからモバイルアプリをデザインして失敗した話
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
HoloLens 2 アプリ開発ハローワールド
HoloLens 2 アプリ開発ハローワールド
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
Android2でも動くMaterialデザイン実装
1.
Android2でも動く Materialデザイン実装 2015/01/14(水)Yusuke Konishi
2.
今日話すこと 1. とにかく色々試してみたので紹介 2. そもそも下位OSで対応すべきなのか所感 3.
まとめ
3.
色々試してみた
4.
キャッチアップの手順 1. まずGoogle純正のアプリ、Materialデザイン対応した アプリ(Airbnb、Twitter、Path)をよく見る 2. Materialデザインガイドラインと照らし合わせて作る
5.
今回試してみたところ 1. 色 2. 画面遷移アニメーション 3.
スクロールアニメーション 4. Rippleエフェクト 5. ToolBar 6. タブ 7. フォント
6.
1. 色
7.
1. 色 デザインガイドラインで推奨カラーが定められている。こ の色を使うと、Materialデザインに対応した時に違和感な いよ、という指針。
8.
他のアプリでは? Google純正のアプリは当然この色に沿ってテーマカラー を設定してる。
9.
実装するには 難易度 ★☆☆☆☆ appcompat v21使ってテーマの色を変えるだけ。 日本語訳はこちら。 どこの色の設定がどこのパーツに影響するかは、Android 5.0
でのカラーカスタマイズと属性名の関係にまとめられ てる。
10.
2. 画面遷移アニメーション
11.
2. 画面遷移アニメーション デザインガイドラインのアニメーションの項目。 ActivityTransition、Shared Elementsと呼ばれるもの。 ふわっと浮き上がるような画面遷移や、前の画面の一部が 拡大して次の画面の一部になるようなアニメーションで、 操作している時に前後関係が把握しやすい。あと触ってて 気持ちいい。
12.
他のアプリでは? Google純正のアプリは、無理せずある程度やってる。 Airbnbのアニメーションはいい感じ。
13.
実装するには 難易度 ★★☆☆☆ ActivityOptionsCompatを使ったり、アニメーションを自作 すれば対応可能。 [参考] ・YouTubeのAndroidアプリと同じ検索ビューを作ってみる ・v21未満の端末で、AirbnbアプリのようなShared Elementっぽい動きを実装する ただ、同じような見た目なのにアニメーションついたりつい てなかったりすると強烈な違和感を感じるので、やるなら統 一して対応する必要あり。
14.
3. スクロールアニメーション
15.
3. スクロールアニメーション デザインガイドラインのスクロールテクニックの項目。 スクロールすると上部がパララックスっぽく動いたり、 Toolbarが隠れたり、透明度が変わったりするやつ。
16.
他のアプリでは? GooglePlayStoreの詳細画面や、Airbnbの詳細画面はさ りげなくていい感じ。Pathはめっちゃやってる。
17.
実装するには 難易度 ★★★☆☆ 単純なパララックス効果だけなら簡単。5.0くらい気持ちのよい アニメーションにするのは大変。NotBoringActionBarのコード が参考にしやすいかも。
18.
4. Rippleエフェクト
19.
4. Rippleエフェクト Materialデザインの動画でも紹介されてる、水の波紋のよ うなエフェクト。
20.
他のアプリでは? Google純正のアプリや他の有名なアプリはAndroid5.0以 上で対応。5.0未満は諦めてる。たぶんあえてやってな い。 Materialデザインガイドラインの本質は、画面を似せるこ とではなく、同じ基準で作ることによってユーザーが操作 する時に頭を使わないですむようにすることだと思うので、 Android5.0未満のRippleエフェクトが標準でない端末の 場合は逆に従来のタップフィードバックの方がいいよねと いう判断?
21.
実装するには 難易度 ★★☆☆☆ material-rippleを使うと導入は比較的簡単。 参考 :
[Materialデザイン] Android5.0未満でRipple effectを実装する ただ、既存アプリを対応させる場合は全てのタップフィー ドバックで対応する必要があるのでかなり面倒。
22.
5. ToolBar
23.
5. ToolBar 上部のバー。旧ActionBar。 以前の48dpから56dpになってる。NavigationDrawerの アイコンや表示の仕方も変わってる。
24.
他のアプリでは? Google純正のアプリはほとんど対応。Airbnbは対応して るけどDrawerの表示がちょっと古い。
25.
実装するには 難易度 ★★☆☆☆ 普通のActionBarの場合は割と簡単に移行可能。Drawer もそんなに難しくない。AndroidのToolBar(新しい ActionBar)メモを見れば大体問題ない。 ToolBarはただのViewなので、スクロールしたら隠すみた いな動きもわりと簡単。
26.
6. 上部タブ
27.
6. 上部タブ YouTubeやGooglePlayにあるやつ。Materialデザインだ と、ここはテーマカラーにそろえるよう推奨されている。
28.
他のアプリでは? Google純正のアプリは完全対応。他のアプリは、なんか 納得できていないのか色を変えてる場合もある。
29.
実装するには 難易度 ★☆☆☆☆ PagerSlidingTabStripを使うと簡単。attrを調整すればマ テリアルデザインっぽくなる。
30.
7. フォント
31.
7. フォント ガイドラインのTypographyの項目。アルファベット&数 字はRoboto、それ以外はNotoフォントを使うことが推奨 されている。デフォルトと違って、太さを細かく指定でき る。
32.
他のアプリでは? Google純正アプリは、5.0未満は非対応。Airbnbは違う フォントに変えているが、日本語のフォントは標準のまま。
33.
実装するには 難易度 ★★★★☆ Calligraphyというライブラリを使うと全体に反映できるが、フォ ントファイルのサイズが大きいのと、Google公式のNotoフォント otfファイルを使うと変な余白が出るので微妙な感じになる。
34.
そもそも下位OSで 対応すべきなのか
35.
Materialデザインの本質 • Material Designのガイドラインは、「見た目を
えよ う!」というものではない。 • 「共通の動作や見た目はできるだけ統一してユーザーが アプリごとに混乱しないですむようにしよう」っていう 思想だと思う。
36.
Materialデザインに従うかどうか • 「ユーザーがアプリごとに混乱しないですむようにしよ う」っていう思想だとすると、あえてガイドラインに従 わないのもあり。 • 例えばフォントやRippleエフェクトは、5.0以前のユー ザーには違和感でしかないかも。
37.
個人的ジャッジメント 1. ⃝ 色 2.
△ 画面遷移アニメーション 3. △ スクロールアニメーション 4. Rippleエフェクト 5. ⃝ ToolBar 6. ⃝ 上部タブ 7. フォント
38.
まとめ
39.
まとめ • Android2でもMaterial Designの適用は大体可能。 •
見た目だけの問題ではないので、デザインの適用可否を 判断する必要あり。 • 対応するって決めた時のために準備しておくのが大事。
40.
おわり
Baixar agora