#cookpad_tech_kitchen 6回目の「Androidアプリのデザイン整理への取り組み」に関しての資料です https://cookpad.connpass.com/event/51959/
発表の翌日に dimen のネーミングルールが改善されたので18/19Pを更新しました。
Androidアプリのデザイン整理への取り組み技術部 モバイル基盤グループ 児山千尋
View Slide
自己紹介● 児山 千尋(@nein37)● Androidアプリ開発のための仕組み作り● 端末のdp解像度まとめ○ 2014年○ 2015年○ 2016年
今日の発表内容
関連記事
当時のアプリ
現在のアプリ
比較→
前回のリソース整備の反省点● 基本ルールだけではカバーできない部分が多かった○ ルールでは 14sp だけど目立たせたいのでここだけ16sp○ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい● 例外的なデザインを定義する方法が未定○ 追加の度に色々な質問が来ることに…● どれが基本ルールでどれが例外なのかわからない
ルールの再整備
デザインルールを整備する● ルールを決めると同時に例外が生まれる○ ルールでは 14sp だけど目立たせたいのでここだけ16sp○ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい● デザインにおいて例外は悪ではない○ デザイナーが必要だと判断したならそれは正しい● 例外を例外として認識できる仕組みが重要
基本的な方針● ネーミングルールを決めておく● ネーミングルールに例外の書き方を含める● ルールはドキュメントにまとめる
デザインリソースの種類● Color● Dimen● Style● TextAppearance● Theme
Color
Color● 実装上の制限がない限りリソースを参照させる● 基本的な色には汎用的な名前をつける● ColorStateList や gradient 用の色は名前を揃える
Color● リソースの参照を使って別名をつけることができる● リソース数を減らすことよりも自然なネーミングを優先したほうが維持しやすい
Dimens
Dimens● クックパッドではDP指定を全てDimen化するルール● Dimenを厳密なルールで管理することはできない● 必要最低限のルールを決めておく
dimens_base.xml● 基本的な定義を dimens_base.xml に記述する○ 利用可能な値のリスト(dimen_ を prefix とする)○ margin / padding など(general_ を prefix とする)
dimens.xml● 画面ごとの定義を dimens.xml に記述する○ 画面ごとにセクションを分ける○ 可能な限り @dimen/base_*dp を参照する○ 画面名を prefix としてつける
Style
Styleとは● Viewの属性をまとめて設定できる仕組み● Styleを再利用することでアプリ全体の統一感を出す● 再利用性を高めることが大事
Style定義の注意点● 定義しないほうが良い属性○ layout_width○ layout_height○ layout_margin○ layout_gravity など● layout_* は View ではなく LayoutParams の属性● layout.xml の include との使い分けが大事
Styleの継承● 継承をうまく使ってStyle定義を効率化する● parent 定義による継承○ Android標準のStyleを継承する場合○ 名前での継承が使えない場合● 名前による継承○ ドット区切りにすると自動的に上位のStyleを継承する
Styleのネーミングルール● CookpadStyle(prefix)● Screen(画面)○ 例外的な Style 定義のために用意された領域○ アプリ全体で利用する Style では General● View(対象Viewの種類)○ Button / Switch などのView名● Variation(バリエーション)○ 最も基本的なView定義では省略する(継承用)○ 派生系の Style を基本形を継承しつつ定義できる
Styleのネーミング例● CookpadStyle.General.Button.Recipe○ アプリ全体で利用するレシピ表示用のボタンスタイル○ 自動的に CookpadStyle.General.Button を継承する● CookpadStyle - Style であることを示す prefix● General - アプリ全体で利用する● Button - ボタンスタイル● Recipe - レシピ表示用
TextAppearance
TextAppearance とは● 文字表示に関する属性をまとめたStyle● 継承などの仕組みはStyleと同じ● 画面毎に例外的な定義を行う場合が多い
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種類から選択
TextAppearanceのネーミングルール● CookpadFont(prefix)● Screen(画面)○ 例外的なStyle定義のために用意された領域○ アプリ全体で利用するStyleでは General● Purpose(目的)○ どういった目的に利用するのかを書く● Style(書体)○ Style の Variation と違い必須○ Emphasis / Main / Sub / Weaken の4段階○ 文字サイズの 5段階 とは独立した概念○ Main / Sub 以外は例外として極力避ける
TextAppearance のネーミング例● CookpadFont.General.RecipeTitle.Main○ アプリ全体で利用するレシピタイトル用の標準TextAppearance○ CookpadFont.Base.Large.Green.Bold を明示的に継承させている● CookpadFont - TextAppearance● General - アプリ全体で利用する● RecipeTitle - レシピタイトル用● Main - 標準サイズ
まとめ
まとめ● デザインの整理はまずルールの整理から● デザインルールには例外がつきもの● 各リソースのルールで例外をうまく識別する● デザインの変化にあわせてルールも見直すことが大事