noki雑記

iOS、ときどきAndroid

公式の Android UI デザインテンプレート

ステータスバーやアクションバーの高さってどれくらいだっけ、と思って公式サイトを眺めていたら、UIのテンプレートが用意されていた。てっきり文書で用意されていると思っていたので、とてもありがたい。

ダウンロードサイト

初心者にはとても助かる

ダウンロードできるファイルがAIファイルなので、Illustratorでそのまま開いて使用している。簡単なアプリであれば、このテンプレをそのまま使ってしまったほうが綺麗なレイアウトになるんじゃないかと思う。

ものさしツールでいろいろ計ってみる

Illustratorに慣れていないので効率的かどうか分からないけれど、マージンなどをものさしツールで計りながら構造を見てみた。アクションバーのアイコンの大きさや間隔、リストのアイテムのマージンなどを図っていると、なんとなく見えてくる。

間隔を意識してみる

せっかくなので間隔や大きさを意識してみることにした。画面の左右端のマージンを16pxとした場合、大体これを基準にマージンや大きさを揃えていく。例えばリストアイテムのアイコンと本文のマージンを16px(16px × 1)にしたり、リストのセクションバーの高さを48px(16px × 3)にするなど。デザイン経験も浅いのでこういうことから始めてみる。

デザインパターンサイトも参考にする

テンプレート通りにワイヤーフレームを作成したら、見た目はデザインパターンサイトを参考にしている。余裕があればこれらもものさしツール等でいろいろ計ってみたい。