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. デザインルールを整備する • ルールを決めると同時に例外が生まれる ◦ ルールでは 14sp だけど目立たせたいのでここだけ16sp ◦ ここは普通のグレーじゃなくて暖かみのあるグレーにしたい •

    デザインにおいて例外は悪ではない ◦ デザイナーが必要だと判断したならそれは正しい • 例外を例外として認識できる仕組みが重要
  2. Style定義の注意点 • 定義しないほうが良い属性 ◦ layout_width ◦ layout_height ◦ layout_margin ◦

    layout_gravity など • layout_* は View ではなく LayoutParams の属性 • layout.xml の include との使い分けが大事
  3. Styleのネーミングルール • CookpadStyle(prefix) • Screen(画面) ◦ 例外的な Style 定義のために用意された領域 ◦

    アプリ全体で利用する Style では General • View(対象Viewの種類) ◦ Button / Switch などのView名 • Variation(バリエーション) ◦ 最も基本的なView定義では省略する(継承用) ◦ 派生系の Style を基本形を継承しつつ定義できる
  4. Styleのネーミング例 • CookpadStyle.General.Button.Recipe ◦ アプリ全体で利用するレシピ表示用のボタンスタイル ◦ 自動的に CookpadStyle.General.Button を継承する •

    CookpadStyle - Style であることを示す prefix • General - アプリ全体で利用する • Button - ボタンスタイル • Recipe - レシピ表示用
  5. 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種類から選択
  6. TextAppearanceのネーミングルール • CookpadFont(prefix) • Screen(画面) ◦ 例外的なStyle定義のために用意された領域 ◦ アプリ全体で利用するStyleでは General

    • Purpose(目的) ◦ どういった目的に利用するのかを書く • Style(書体) ◦ Style の Variation と違い必須 ◦ Emphasis / Main / Sub / Weaken の4段階 ◦ 文字サイズの 5段階 とは独立した概念 ◦ Main / Sub 以外は例外として極力避ける