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

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

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

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