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