Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Android2でも動くMaterialデザイン実装

LTで話した内容です。

  • Soyez le premier à commenter

Android2でも動くMaterialデザイン実装

  1. 1. Android2でも動く Materialデザイン実装 2015/01/14(水)Yusuke Konishi
  2. 2. 今日話すこと 1. とにかく色々試してみたので紹介 2. そもそも下位OSで対応すべきなのか所感 3. まとめ
  3. 3. 色々試してみた
  4. 4. キャッチアップの手順 1. まずGoogle純正のアプリ、Materialデザイン対応した アプリ(Airbnb、Twitter、Path)をよく見る 2. Materialデザインガイドラインと照らし合わせて作る
  5. 5. 今回試してみたところ 1. 色 2. 画面遷移アニメーション 3. スクロールアニメーション 4. Rippleエフェクト 5. ToolBar 6. タブ 7. フォント
  6. 6. 1. 色
  7. 7. 1. 色 デザインガイドラインで推奨カラーが定められている。こ の色を使うと、Materialデザインに対応した時に違和感な いよ、という指針。
  8. 8. 他のアプリでは? Google純正のアプリは当然この色に沿ってテーマカラー を設定してる。
  9. 9. 実装するには 難易度 ★☆☆☆☆ appcompat v21使ってテーマの色を変えるだけ。
 日本語訳はこちら。
 
 どこの色の設定がどこのパーツに影響するかは、Android 5.0 でのカラーカスタマイズと属性名の関係にまとめられ てる。

  10. 10. 2. 画面遷移アニメーション
  11. 11. 2. 画面遷移アニメーション デザインガイドラインのアニメーションの項目。 ActivityTransition、Shared Elementsと呼ばれるもの。 ふわっと浮き上がるような画面遷移や、前の画面の一部が 拡大して次の画面の一部になるようなアニメーションで、 操作している時に前後関係が把握しやすい。あと触ってて 気持ちいい。
  12. 12. 他のアプリでは? Google純正のアプリは、無理せずある程度やってる。 Airbnbのアニメーションはいい感じ。
  13. 13. 実装するには 難易度 ★★☆☆☆ ActivityOptionsCompatを使ったり、アニメーションを自作 すれば対応可能。
 [参考]
 ・YouTubeのAndroidアプリと同じ検索ビューを作ってみる
 ・v21未満の端末で、AirbnbアプリのようなShared Elementっぽい動きを実装する ただ、同じような見た目なのにアニメーションついたりつい てなかったりすると強烈な違和感を感じるので、やるなら統 一して対応する必要あり。
  14. 14. 3. スクロールアニメーション
  15. 15. 3. スクロールアニメーション デザインガイドラインのスクロールテクニックの項目。 スクロールすると上部がパララックスっぽく動いたり、 Toolbarが隠れたり、透明度が変わったりするやつ。
  16. 16. 他のアプリでは? GooglePlayStoreの詳細画面や、Airbnbの詳細画面はさ りげなくていい感じ。Pathはめっちゃやってる。
  17. 17. 実装するには 難易度 ★★★☆☆ 単純なパララックス効果だけなら簡単。5.0くらい気持ちのよい アニメーションにするのは大変。NotBoringActionBarのコード が参考にしやすいかも。
  18. 18. 4. Rippleエフェクト
  19. 19. 4. Rippleエフェクト Materialデザインの動画でも紹介されてる、水の波紋のよ うなエフェクト。
  20. 20. 他のアプリでは? Google純正のアプリや他の有名なアプリはAndroid5.0以 上で対応。5.0未満は諦めてる。たぶんあえてやってな い。 Materialデザインガイドラインの本質は、画面を似せるこ とではなく、同じ基準で作ることによってユーザーが操作 する時に頭を使わないですむようにすることだと思うので、 Android5.0未満のRippleエフェクトが標準でない端末の 場合は逆に従来のタップフィードバックの方がいいよねと いう判断?
  21. 21. 実装するには 難易度 ★★☆☆☆ material-rippleを使うと導入は比較的簡単。
 参考 : [Materialデザイン] Android5.0未満でRipple effectを実装する ただ、既存アプリを対応させる場合は全てのタップフィー ドバックで対応する必要があるのでかなり面倒。
  22. 22. 5. ToolBar
  23. 23. 5. ToolBar 上部のバー。旧ActionBar。 以前の48dpから56dpになってる。NavigationDrawerの アイコンや表示の仕方も変わってる。
  24. 24. 他のアプリでは? Google純正のアプリはほとんど対応。Airbnbは対応して るけどDrawerの表示がちょっと古い。
  25. 25. 実装するには 難易度 ★★☆☆☆ 普通のActionBarの場合は割と簡単に移行可能。Drawer もそんなに難しくない。AndroidのToolBar(新しい ActionBar)メモを見れば大体問題ない。
 
 ToolBarはただのViewなので、スクロールしたら隠すみた いな動きもわりと簡単。
  26. 26. 6. 上部タブ
  27. 27. 6. 上部タブ YouTubeやGooglePlayにあるやつ。Materialデザインだ と、ここはテーマカラーにそろえるよう推奨されている。
  28. 28. 他のアプリでは? Google純正のアプリは完全対応。他のアプリは、なんか 納得できていないのか色を変えてる場合もある。
  29. 29. 実装するには 難易度 ★☆☆☆☆ PagerSlidingTabStripを使うと簡単。attrを調整すればマ テリアルデザインっぽくなる。
  30. 30. 7. フォント
  31. 31. 7. フォント ガイドラインのTypographyの項目。アルファベット&数 字はRoboto、それ以外はNotoフォントを使うことが推奨 されている。デフォルトと違って、太さを細かく指定でき る。
  32. 32. 他のアプリでは? Google純正アプリは、5.0未満は非対応。Airbnbは違う フォントに変えているが、日本語のフォントは標準のまま。
  33. 33. 実装するには 難易度 ★★★★☆ Calligraphyというライブラリを使うと全体に反映できるが、フォ ントファイルのサイズが大きいのと、Google公式のNotoフォント otfファイルを使うと変な余白が出るので微妙な感じになる。
  34. 34. そもそも下位OSで
 対応すべきなのか
  35. 35. Materialデザインの本質 • Material Designのガイドラインは、「見た目を えよ う!」というものではない。 • 「共通の動作や見た目はできるだけ統一してユーザーが アプリごとに混乱しないですむようにしよう」っていう 思想だと思う。
  36. 36. Materialデザインに従うかどうか • 「ユーザーがアプリごとに混乱しないですむようにしよ う」っていう思想だとすると、あえてガイドラインに従 わないのもあり。 • 例えばフォントやRippleエフェクトは、5.0以前のユー ザーには違和感でしかないかも。
  37. 37. 個人的ジャッジメント 1. ⃝ 色 2. △ 画面遷移アニメーション 3. △ スクロールアニメーション 4. Rippleエフェクト 5. ⃝ ToolBar 6. ⃝ 上部タブ 7. フォント
  38. 38. まとめ
  39. 39. まとめ • Android2でもMaterial Designの適用は大体可能。 • 見た目だけの問題ではないので、デザインの適用可否を 判断する必要あり。 • 対応するって決めた時のために準備しておくのが大事。
  40. 40. おわり

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • shg25

    Jan. 14, 2015
  • promisedhill

    Jan. 14, 2015
  • shinojapan

    Jan. 15, 2015
  • ayuzaki1

    Mar. 12, 2015
  • Khu-Chan

    Mar. 13, 2015
  • takaochiba

    May. 1, 2015
  • Tei1988

    May. 20, 2015

LTで話した内容です。

Vues

Nombre de vues

3 869

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

153

Actions

Téléchargements

7

Partages

0

Commentaires

0

Mentions J'aime

7

×