[&] Android App Designs Vol.4
デザイナーがコードから読み解く、
Androidアプリのデザインの幅を広げるコツとTips
http://www.ladybeetle-design.com/androidappdesigns/
----------------
第4回 レイアウト編
@tommmmy
小さなチップスではありますが、デザイナーの方に広めたいとおもっている事柄を
協力して頂いて、勉強会を開催できているのはありがたいことです！
GMO稲守さん : Zuck「（HTML5は）早すぎたんだ腐ってやがる」（ナウシカの巨神兵）
@tommmmy
最終回ですね〜
ドキドキですね〜
4回これで、今日最終回ですが、総集編として 11/8 木曜日に GDG Tokyo 主催で、
現在募集が始まってしまいました！
まず、今日、今までで一番多いような気がするんですが、
アンケートをきいてみました。圧倒的にエンジニア／開発者の方が多いです。
デザイナーさんも来てくれているのがうれしいです。
この勉強会３回やってこれました。
がんばって作ったデザインが
実装後に残念な結果にならないために
最終的にレイアウトの話をしますが、
デザイナーがわかっていると、思った通りの実装になるとうれしいです。
前回カスタムUIの話をしました。
スライダーがカスタムデザインにすると、つまみのデザインに注意
しなければいけないという話をしましたが、
あんざいゆきさんが解析してくれました。
レイアウト編
1. よくつかうレイアウト
2. 単位と空白
3. PSやWFでデザイン案を作るときの３ヶ条
●デザイナー向けレイアウト入門
デザイナーはどうやって実装されているかなかなか分からないと思うので。。。
1.よくつかうレイアウト
wrap_content インライン要素っぽい
fill_parent/match_parent ブロック要素っぽい
常に指定していかなければいけません。
android:layout_width="fill_parent"
android:layout_height="wrap_content"
一番簡単なのをみてみます。
pulse アンドロイドアプリのページ。
テキストビューが4つ並んでいて、ImageVIew が並んで、
上から順番に並べていくだけという書き方をしています。
このTextView 一個一個に対して設定しなければいけないので、面倒です。
これをまとめて
LinearLayout というタグで囲んであげます。
中身が横並びなのか、縦並びなのかを教えてあげれます。
単純なものだと良いのですが、タイムライン的なものだとややこしくなります。
横に並べというものを一番大きなものを横に並べます。
さらに中にある部品を縦に並べてあげて、その中をまた横に並べます。
ややこしいことではないのですが、
後でソースコードを見るとややこしくなっています。
LinearLayout の難点
構造が複雑で、階層が深い
数が多いと、重い原因となる
今ある要素以外の領域を示すことができて
android:layout_weight="1"
残りの領域全部を埋めることができます。
縦も同じなので、上下に部品があって、間を広くとるときは、
layout_width="fill_parent"
layout_height="0dp" とします。
Androidいろんな画面サイズがありますが、中央をいっぱいいっぱい使えるようになります。
[ cancel ] [ OK ]
layout_weight="1" 両方1にすると、同じ幅になります。
layout_wight を 1:2 にすると、
ボタンが 1:2 のサイズ、その割合で、表示してもらえます。
LinerLayout の得意なこと
等分割や割合を指定した分割が得意
使わないスペースを最大限にのばすことが得意
●RelativeLayout
基本どんなレイアウトでも、どっちでも組めるのですが、
表示が重くなったりするので、最大のパフォーマンスはどれなのかを
考えながら実装していかなければいけません。
Twitter のタイムラインのような場合、
Relative は「相対」という意味があるので、
まずは「親」となるものを決めます。
それに対して、自分がどこにあるのかというのを設定してあげます。
何が便利かというと、構造が簡単になります。
これを頭に入れておいて.....
ぼく親だよー android:id="@+id/Oya"
ぼく親の右どなりAだよー android:layouttoRightOf="@it/Oya"
ぼくAの右どなりのBだよー android:layout_toRightOf="@id/A"
ぼくAの下でAと左端が同じなCだよー
いろいろありますが、構造がなんとなくわかれば、
調べて使うことができます。
RelativeLayout の得意なこと。
LinearLayoutだと階層が深くなってしまうところを、
軽々と1階層で表現できる！
パフォーマンスとやりやすさを考えながら、トライ＆エラーで。
●FrameLayout
重ねるときに使おう
Facebookアプリで、一回タップすると、下にコメントなどが出ますよね？
下の方がグラデーションで暗くなっていますよね？
写真が白っぽかったりすると、白背景に白い文字だと見にくくなります。
なので、少し暗くなって見やすくなっています。
最近、こういうのが増えてきています。
Google+アプリ、文字の背景の透明が少し暗くなるようになっています。
写真の背景に黒いグラデーションを入れて白い文字を
見やすくしています。
一番下に ImageView があります。fill_Parent にすると画面いっぱいに広がってくれます。
真ん中のグラデーションは Shape でやります。
startColor #8000
endColor #0000
これで綺麗に実装できます。
他にも pulse の写真画面。
あと、よく使うレイアウトで、
スクロールも必須ですよね？
スクロールもすごく簡単です。
最初は Java を触らないとスクロールできないと思っていました。
ScrollView の中に要素をいれます。
要素はひとつだけです。
複数使いたい場合は、一度リニアレイアウトを入れます。
リニアレイアウトの中には何個も入れられます。
pulse は全体がスクロールしますが、各要素も横スクロールします。
スクロールに horizontalScrollview を入れると、横スクロールしてもらえます。
これをデザインするときに考えるというと....
知らなくてもいいですが、デザインする時にプラスになることも多いと思います。
後半は単位の話からはじめていきます！
------------------------------------------
●コネタ：山本さん
XMLは書けないデザイナーです
FWでデザインして、切り出して、エンジニアの人に使ってもらうしかできないのですが、
あちこちで聞く話、問題なんじゃないかという話をします。
エンジニアの人に聞く話ですが、
PhotoShop を使っていると思うのですが、
パースを切り出してお渡ししているのですが、
多くのデザイナーは PhotoShop PSD のデータのまま渡しています。
「はい、これで私の仕事は終わり」とか。
その後、エンジニアの人は、レイヤーを切り替えて、自分でスライスをして、
ファイル名をつけて、作業をしています。
エンジニアの人にパーツを切り出して渡す時に、一緒にわたした書類です。
パーツ名の一覧を書いてCSSも書いて渡しました。
＃書きすぎて、半分くらいしかいらないんだよ！と言われてしまいました。
Q : 結構時間かかりますよね？
A : 一日じゃ終わらないです。
添付しないとどういうことになるかというと....
パーツというフォルダの中身をお見せしていますが、
Native と HTML が混在していたアプリです。
相当の数の画像パーツが入っています。
それとは別に Native 用のパーツ、Android用、iPhone用、
さらに画面サイズ用のパーツがあり、
切り出したパーツがボコボコあります。
PhotoShop PSDファイルごと渡されたとしても、大量の画像が送られてきた時に、
わけがわからなくなりますね。
毎回スゲーありがとう！と感謝してくれます。
どうすれば良いかというと、PhotoShop PSDだけの人は、突っ返すべきだと思います！
どこの画面をどこに実装するのかわかんない！と言うべきだと思います。
画像ファイル一覧、どの画面でどこで使うのか、一覧を書くべきだと思います！
------------------------------------------
●コネタ：@adamrocker
実践！Android Design
今日はログが書けないくらいのスピードで話します！
Android Design のページにいろいろ載ってます。
http://developer.android.com/design/index.html
設計指針 Get Started
様式 Style
パターン Patterns
準備されているもの Download
気になるところから読んでみてください。
Pattenrns のところをいくつか読んでみました。
デザインテクニックとは関係無しで、エンジニアもある程度理解できます。
実際は.... というと ActionBar Pattern を使え！
と声を大にして言いたい！
絶対使ってください。
いろんな端末がありますよね。
ActionBar は端末に応じて、自動でいい感じにしてくれます。
ActionBar にタブをおさめてくれるとか、
タブレットの時とか、小さい端末でもうまく動いてくれます。
ActionBar にいろいろ入れて、調整してもらえるので、
自由に使える領域にもなります。
ActionBar の機能は Android OS 3.0 からなので、つかえないかな?!と思ったときは
ActionBarSherlock を使えば Android OS 2.X からサポートしているので使えます。
http://actionbarsherlock.com/
Drawer （スライドメニュー）が流行です。
どんなものかというと、
facebook アプリ youtube アプリなど画面遷移することなく、横に移るものです。
simple-side-drawer というのをつくりました。
さらっと使えるので、よろしく。
https://github.com/adamrocker/simple-side-drawer
コードを2行足してもらうだけでOKです。
taggleDrawer で閉じたり開いたりもできます。
コードメンテナンスの必要があるので、誰か手伝って欲しいです！
simple-side-drawer の特徴は...
●2行で組み込めます。
●他のライブラリとの親和性もあります。
●なによりも、軽量ライブラリです、6.4kbyte 画像1枚分にも及びません。
これがどうなっているかというと......
実は Android の一番上に
decar の上にレイアウトが載るのが一般的です。
decar の上に FrameLayout を載せて、
元々あるものを載せています。
概念的にはこうです。
300行ぐらいなので、メンテナンスしやすいので、だれか手伝ってください！
（僕はもう作りたくないです。）
あと、Android Bazaar でも話してきたんで、よろしく。
http://goo.gl/igbpB
■まとめ
●Android Design を読んでくださいね。
●ActionBar を使いましょう〜
●simple-side-drawer をよろしく！
---------------------------------------
2.単位と余白
後半戦20分ほど、がんばります。
まずはちょっと地味な話、単位の話です。
Android アプリで使う単位の話です。
dp と sp です。
Density-independent Pixels, Scale-independent Pixels
なぜ説明をさけてきたかというと、わかりにくくて、説明しづらいからです。
エンジニアの人も理解していると思うのですが、
言語化して説明するのは難しいのです。
dp について。
考えないといけないのは Andorid は画像サイズとか、解像度の違いです。
GDD Phone Galaxy S2
320px x 480px 480px x 800px
160 dpi 240 dpi
1 1.5
320dp 320dp
画像解像度、画面密度も違います。
同じ数値で扱えれば便利ですよね？
160dpi 240dpi 320 dpi
mdpi hdpi xhdpi
1 1.5 2
1dp 1dp 1dp
1px 1.5px 2px
mdpi の端末は少ないので、hdpi と xhdpi を考えればいいです。
小さく作ったものを大きくするのは面倒なので、
大きく作ったものを、小さくするのが楽なので、
xhdpi 用につくるのが便利な方法です。
●sp について。
主にテキストに使います。
4.0 からフォントサイズを setting で変えられるようになっています。
フォントスケールということです。
Small 1.7
Normal 2.0
Large 2.3
Extra Large 2.6
xhdpi を中心としてデザインを作っていきましょう。
pulse アプリをキャプチャして確かめてみました。
比べてみた時にかなり同じだったので、推測はあたっていると思います。
重要なのは dp/sp を意識すること。
dp と sp
Density-independent Pixels, Scale-independent Pixels
Photoshop には sp/sp は無いので、
結局はピクセルで扱うことになりますが、
デザイナーもそこを考えてみようというものです。
ガイドラインに書かれているものも全て単位が dp です。
タブレットは 960dp 1280dp とか。
その中で、
メトリクスグリッド 余白の取り方の例も dp で書いてあります。
さらにサンプルも dp、テキストも sp という単位で書かれています。
デザイナーがドキュメントを読むときに、dp, sp あっても、
どうやって作ったらいいか分からない。
自分は今 xhdpi と考えて、今何ピクセルなのかを考えて作っていけばよいです。
実施は.....
PHONEサイズの場合、横幅が 320sp か 360 dp に。
縦幅は端末によって違いますが、
320dp
xhdpi で作って、Photoshop を開いて、横幅何ピクセルにすればいいの？
1dp = 2px なので、360dp なら 720px
ガチガチに合わせるのではなく、多少高さが変わっても合うものを作るのが
ポイントです。
横幅もおなじコードで表現した方が良いです。
実際にガイドラインでダウンロードできるステンシルは、
360px なので、高解像度になっていません。
単純に 2倍に拡大してから使わないといけません。
実際に作ってみました。
xhdpi 用なので、横幅を720px にしています。
ここで考えていかなければいけないのは dp をどう基準につくっていかなければいけないか？
360dp の横幅
タブビューは 48dp の幅にします。
なんで 48dp に決まっているのですか？
端末で見た時に、7mm から 8mm になるので、指で押しやすい幅。
押すボタンとかは 48 dp を守りましょう。となっています。
さっきの計算式でいくと、720px の横幅、96px でデザインすると
綺麗にあがってきます。
余白、細かいですが、すごく重要なので聞いて欲しいです。
この写真の上側 12 dp 下側、内側の余白が 12 dp
画像と文字の間も 12dp
これもまた、それぞれを 2倍していくと、何ピクセルで作るのかが
決まってきます。簡単ですよね？
次は文字のサイズです。
ガイドラインにもありましたが、4種類のサイズを推奨しています。
タブのところは 12sp など。
結構 dp sp で考えていないので、フォントのサイズは結構目分量でした。
端末で見て、目分量のことが多かったです。
ガイドラインのように綺麗に作っていかないといけません。
余白、マージンの値を入れてみました。
実際に実装してみました。
左側が Photoshop でピクセル換算して作ったデザインです。
右側が Galaxy Nexus で実装したものです。
Photoshop のものと見比べて、全然違いは無いですよね？
あえていうと、タイトルの上下に隙間が入っている分がちょっと違うくらい。
ちなみに、HTC Desire 解像度 320dp 横の端末。
ただ単純に文字群の幅が違うだけで、余白は綺麗に実装されています。
デザイナーは Photoshop ぐらい余白やフォントも考えて実装して、
sp, dp で仕様書を書くと、デザインしたものが綺麗に仕上がっています！
基本的なことがわかれば、同じ配置にして色を変えたりもできますし、
枠を入れたりして、可愛い感じにすることもできます。
全然簡単です。
枠を入れたところについて言うと、
隙間は 8dp で入れています。全然綺麗です。
ということでまとめ。
●Photoshop や Fireworks でデザインを作るときの３ヶ乗
1. サイズは（ほぼ）２種類
320dp と 360 dp の横幅があり、大きいもので作った方が良く、
両方のサイズがあることを考えながらルクレバ、両方にあいます。
2. xhdip の余白は 4nお倍数の dp だとベスト！
hdpi になっても整数になる。
1.5:2 なわけです。何をするにも。
1.5:2 = hdpi の余白 : xhdpi の余白
比の勉強になり、3/4 になります。
4の倍数になれば、いかなる時にも割り切れます。
デザインガイドも、みごとに4の倍数になっています。
4の倍数で考えておけば、どこでも綺麗になります。
3. 作ったあとは、実機で確認（要ものさし）
何mm になるのかを実際にチェック
dropbox に入れて実機で見る他に、
Android Design Preview というツールを使います。
http://code.google.com/p/android-ui-utils/
パソコン場面を USBでつないだ Android 端末の画面にそのまま送ることができます。
実際に触って大きさを確認することができます（動きませんけど）
Photoshop 上で、360dp 用に作った素材は 320dp 端末の時には Photoshop の表示を75% にすれば良いです。
その後は物差しで計って、48dp だと 9mm 前後なので、チェックします。
デザイナーにも広めたいと思ってはじめた勉強会です。
結構な人に共有できたのかな〜と思います。
デザイナーがこういう気持ちでデザインしているのかがわかれば、
エンジニアがデザイナーに伝える時に分かりやすさが通じれば満足です。
Android Layout Cookbook を読みました。
何の知識も無くて読むとハードルが高いですが、勉強会を聞いてからだと、
分かりやすく入ってきます。ICSの本はデザイナーが読んでもわからないです。
11/8（木）に総集編をやります！
http://goo.gl/iLBpo
