Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

こやまカニ大好き

March 23, 2017
Tweet

More Decks by こやまカニ大好き

Other Decks in Programming

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