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

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

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

Transcript

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

   View Slide

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

   View Slide

3. 今日の発表内容
   

   View Slide

4. 関連記事
   

   View Slide

5. 当時のアプリ
   

   View Slide

6. 現在のアプリ
   

   View Slide

7. 比較
   →
   

   View Slide

8. 前回のリソース整備の反省点
   ● 基本ルールだけではカバーできない部分が多かった
   ○ ルールでは 14sp だけど目立たせたいのでここだけ16sp
   ○ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい
   ● 例外的なデザインを定義する方法が未定
   ○ 追加の度に色々な質問が来ることに…
   ● どれが基本ルールでどれが例外なのかわからない
   

   View Slide

9. ルールの再整備
   

   View Slide

10. デザインルールを整備する
    ● ルールを決めると同時に例外が生まれる
    ○ ルールでは 14sp だけど目立たせたいのでここだけ16sp
    ○ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい
    ● デザインにおいて例外は悪ではない
    ○ デザイナーが必要だと判断したならそれは正しい
    ● 例外を例外として認識できる仕組みが重要
    

    View Slide

11. 基本的な方針
    ● ネーミングルールを決めておく
    ● ネーミングルールに例外の書き方を含める
    ● ルールはドキュメントにまとめる
    

    View Slide

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

    View Slide

13. Color
    

    View Slide

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

    View Slide

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

    View Slide

16. Dimens
    

    View Slide

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

    View Slide

18. dimens_base.xml
    ● 基本的な定義を dimens_base.xml に記述する
    ○ 利用可能な値のリスト(dimen_ を prefix とする)
    ○ margin / padding など(general_ を prefix とする)
    

    View Slide

19. dimens.xml
    ● 画面ごとの定義を dimens.xml に記述する
    ○ 画面ごとにセクションを分ける
    ○ 可能な限り @dimen/base_*dp を参照する
    ○ 画面名を prefix としてつける
    

    View Slide

20. Style
    

    View Slide

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

    View Slide

22. Style定義の注意点
    ● 定義しないほうが良い属性
    ○ layout_width
    ○ layout_height
    ○ layout_margin
    ○ layout_gravity など
    ● layout_* は View ではなく LayoutParams の属性
    ● layout.xml の include との使い分けが大事
    

    View Slide

23. Styleの継承
    ● 継承をうまく使ってStyle定義を効率化する
    ● parent 定義による継承
    ○ Android標準のStyleを継承する場合
    ○ 名前での継承が使えない場合
    ● 名前による継承
    ○ ドット区切りにすると自動的に上位のStyleを継承する
    

    View Slide

24. Styleのネーミングルール
    ● CookpadStyle(prefix)
    ● Screen(画面)
    ○ 例外的な Style 定義のために用意された領域
    ○ アプリ全体で利用する Style では General
    ● View(対象Viewの種類)
    ○ Button / Switch などのView名
    ● Variation(バリエーション)
    ○ 最も基本的なView定義では省略する(継承用)
    ○ 派生系の Style を基本形を継承しつつ定義できる
    

    View Slide

25. Styleのネーミング例
    ● CookpadStyle.General.Button.Recipe
    ○ アプリ全体で利用するレシピ表示用のボタンスタイル
    ○ 自動的に CookpadStyle.General.Button を継承する
    ● CookpadStyle - Style であることを示す prefix
    ● General - アプリ全体で利用する
    ● Button - ボタンスタイル
    ● Recipe - レシピ表示用
    

    View Slide

26. TextAppearance
    

    View Slide

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

    View Slide

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種類から選択
    

    View Slide

29. TextAppearanceのネーミングルール
    ● CookpadFont(prefix)
    ● Screen(画面)
    ○ 例外的なStyle定義のために用意された領域
    ○ アプリ全体で利用するStyleでは General
    ● Purpose(目的)
    ○ どういった目的に利用するのかを書く
    ● Style(書体)
    ○ Style の Variation と違い必須
    ○ Emphasis / Main / Sub / Weaken の4段階
    ○ 文字サイズの 5段階 とは独立した概念
    ○ Main / Sub 以外は例外として極力避ける
    

    View Slide

30. TextAppearance のネーミング例
    ● CookpadFont.General.RecipeTitle.Main
    ○ アプリ全体で利用するレシピタイトル用の標準TextAppearance
    ○ CookpadFont.Base.Large.Green.Bold を明示的に継承させている
    ● CookpadFont - TextAppearance
    ● General - アプリ全体で利用する
    ● RecipeTitle - レシピタイトル用
    ● Main - 標準サイズ
    

    View Slide

31. まとめ
    

    View Slide

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

    View Slide