Androidアプリのデザイン整理への取り組み

 Androidアプリのデザイン整理への取り組み

#cookpad_tech_kitchen 6回目の「Androidアプリのデザイン整理への取り組み」に関しての資料です
https://cookpad.connpass.com/event/51959/

発表の翌日に dimen のネーミングルールが改善されたので18/19Pを更新しました。

B61a8b5e5ce71ea4796afaea614bbb19?s=128

こやまカニ大好き

March 23, 2017
Tweet

Transcript

  1. Androidアプリのデザイン整理への取り組み 技術部 モバイル基盤グループ 児山千尋

  2. 自己紹介 • 児山 千尋(@nein37) • Androidアプリ開発のための仕組み作り • 端末のdp解像度まとめ ◦ 2014年

    ◦ 2015年 ◦ 2016年
  3. 今日の発表内容

  4. 関連記事

  5. 当時のアプリ

  6. 現在のアプリ

  7. 比較 →

  8. 前回のリソース整備の反省点 • 基本ルールだけではカバーできない部分が多かった ◦ ルールでは 14sp だけど目立たせたいのでここだけ16sp ◦ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい •

    例外的なデザインを定義する方法が未定 ◦ 追加の度に色々な質問が来ることに… • どれが基本ルールでどれが例外なのかわからない
  9. ルールの再整備

  10. デザインルールを整備する • ルールを決めると同時に例外が生まれる ◦ ルールでは 14sp だけど目立たせたいのでここだけ16sp ◦ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい •

    デザインにおいて例外は悪ではない ◦ デザイナーが必要だと判断したならそれは正しい • 例外を例外として認識できる仕組みが重要
  11. 基本的な方針 • ネーミングルールを決めておく • ネーミングルールに例外の書き方を含める • ルールはドキュメントにまとめる

  12. デザインリソースの種類 • Color • Dimen • Style • TextAppearance •

    Theme
  13. Color

  14. Color • 実装上の制限がない限りリソースを参照させる • 基本的な色には汎用的な名前をつける • ColorStateList や gradient 用の色は名前を揃える

  15. Color • リソースの参照を使って別名をつけることができる • リソース数を減らすことよりも自然なネーミングを優先したほ うが維持しやすい

  16. Dimens

  17. Dimens • クックパッドではDP指定を全てDimen化するルール • Dimenを厳密なルールで管理することはできない • 必要最低限のルールを決めておく

  18. dimens_base.xml • 基本的な定義を dimens_base.xml に記述する ◦ 利用可能な値のリスト(dimen_ を prefix とする)

    ◦ margin / padding など(general_ を prefix とする)
  19. dimens.xml • 画面ごとの定義を dimens.xml に記述する ◦ 画面ごとにセクションを分ける ◦ 可能な限り @dimen/base_*dp

    を参照する ◦ 画面名を prefix としてつける
  20. Style

  21. Styleとは • Viewの属性をまとめて設定できる仕組み • Styleを再利用することでアプリ全体の統一感を出す • 再利用性を高めることが大事

  22. Style定義の注意点 • 定義しないほうが良い属性 ◦ layout_width ◦ layout_height ◦ layout_margin ◦

    layout_gravity など • layout_* は View ではなく LayoutParams の属性 • layout.xml の include との使い分けが大事
  23. Styleの継承 • 継承をうまく使ってStyle定義を効率化する • parent 定義による継承 ◦ Android標準のStyleを継承する場合 ◦ 名前での継承が使えない場合

    • 名前による継承 ◦ ドット区切りにすると自動的に上位のStyleを継承する
  24. Styleのネーミングルール • CookpadStyle(prefix) • Screen(画面) ◦ 例外的な Style 定義のために用意された領域 ◦

    アプリ全体で利用する Style では General • View(対象Viewの種類) ◦ Button / Switch などのView名 • Variation(バリエーション) ◦ 最も基本的なView定義では省略する(継承用) ◦ 派生系の Style を基本形を継承しつつ定義できる
  25. Styleのネーミング例 • CookpadStyle.General.Button.Recipe ◦ アプリ全体で利用するレシピ表示用のボタンスタイル ◦ 自動的に CookpadStyle.General.Button を継承する •

    CookpadStyle - Style であることを示す prefix • General - アプリ全体で利用する • Button - ボタンスタイル • Recipe - レシピ表示用
  26. TextAppearance

  27. TextAppearance とは • 文字表示に関する属性をまとめたStyle • 継承などの仕組みはStyleと同じ • 画面毎に例外的な定義を行う場合が多い

  28. Base TextAppearance の定義 • 文字サイズ 5種類 ◦ ExtraLarge / Large

    / Default / Small / ExtraSamll • 文字色 7種類 ◦ Black / Gray / LightGray / Green / Orange / Red / White • 書体 2種類 ◦ Normal / Bold • 5 x 7 x 2 の 70種類 をあらかじめ定義 ◦ 実際に利用する TextAppearane は Base のいずれかを継承する ◦ あたらしく TextAppearance を作る場合も70種類から選択
  29. TextAppearanceのネーミングルール • CookpadFont(prefix) • Screen(画面) ◦ 例外的なStyle定義のために用意された領域 ◦ アプリ全体で利用するStyleでは General

    • Purpose(目的) ◦ どういった目的に利用するのかを書く • Style(書体) ◦ Style の Variation と違い必須 ◦ Emphasis / Main / Sub / Weaken の4段階 ◦ 文字サイズの 5段階 とは独立した概念 ◦ Main / Sub 以外は例外として極力避ける
  30. TextAppearance のネーミング例 • CookpadFont.General.RecipeTitle.Main ◦ アプリ全体で利用するレシピタイトル用の標準TextAppearance ◦ CookpadFont.Base.Large.Green.Bold を明示的に継承させている •

    CookpadFont - TextAppearance • General - アプリ全体で利用する • RecipeTitle - レシピタイトル用 • Main - 標準サイズ
  31. まとめ

  32. まとめ • デザインの整理はまずルールの整理から • デザインルールには例外がつきもの • 各リソースのルールで例外をうまく識別する • デザインの変化にあわせてルールも見直すことが大事