[&] Android App Designs Vol.1
----------------------------------------------------------------
Android App Designs
〜デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
----------------------------------------------------------------
http://www.ladybeetle-design.com/androidappdesigns/
@tommmmy
この勉強会を始めようとしたきっかけ。
エンジニアに渡したデザインが思わしくない見栄えになって帰ってくることが多い。
自分で XML 書いたらなんか変わるかと思ってはじめた勉強会です。
@asamieee7
Androidのデザインは 9patch 重要
お客様から要求されるレベルと実現できるものの違いに
変態9patch で、新境地が開けた。そこで勉強会をしようと考えた。
エンジニアから帰ってくるデザインを見て、はきそうになっていた。
計算しつくした余白が崩れて帰ってくるとがっかりする。
@adamrocker
広い気持ちで、つきあってもらえれば.....
サブタイトル：がんばって作ったデザインが、実装後に残念な結果にならないために
■第1回：導入と9-patch編
@tommmmy
なぜ残念になるのか？
エンジニアまかせだから
デザイナーは実装のことがわからない。
エンジニアはデザインのことをわからずに実装しているから。
実装のことをわかっていたら、組みやすい、理にかなったデザインができる。
■制作のフロー
Web: Visual Design -> Coding(HTML/CSS) -> System
Android: Visual Design -> Coding (XML) -> System
Android の場合、XML まで手を出しているデザイナーは少ない。
■XMLの実装
ちょっとでも知識があれば、実装可能かどうかがわかる
100% できなくてもいいので、ちょっとでも知っておこう
余白を詰めれることがわかるので、エンジニアと話ができる。
■デザイナーが教える Android XML レイアウト
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
■最近よくみているサイト。
http://www.android-app-patterns.com/
海外のアプリがたくさん紹介されていて、どれもとても奇麗。
すごい細かいが、余白が奇麗についている。
グレーの線の下にハイライトの白い線が入っている。
■magic hour カメラアプリ
アナログ感がとても好き。
実装してくれるエンジニアもいるかもしれないが、
こんなデザインを提示しても、リジェクトされる。
カスタムUI のスライダーが奇麗。
ダイアログのカスタマイズも、今回 simeji でやらせてもらった。
こういう風に手をいれれば、良くなるので、エンジニアにやってもらいたい。
■1. 導入
Android アプリを作るには？
デザイナーにとってはむずかしくないの？
アプリのデザインで気をつけることは？
軽量化のために？
■Android アプリを作りには
Eclipse, Android SDK が必須。
デザイナーにとっては敷居が高い。ターミナルの黒い画面が「嫌！」
ターミナル画面を白くすれば、怖く無い。「茶色とかもあるよ！」
git とか svn とか意味わからない。教えてもらって乗り越えて欲しい。
■なにでできているの？
レイアウトまわり XML
ロジックまわり Java
HTML も XML , ぱっと見わかる。
LinearLayout div みたいなもの
TextView h, p みたいなもの
ImageVIew img
CheckBox input type=checkbox
■resディレクトリ
drawable-xx 解像度ごとの画像ファイル
layouts HTMLみたいなもの
values CSS みたいなもの
■ここがわかると、まず一つ進む。
Q. デザイナーにとってむずかしくないの？
A. 環境構築さえできればなんとかなります。
■画面解像度と、画面サイズ
なぜこんなに苦労する
画面解像度がバラバラ
iPhone の場合、density 等、同じ
Android の場合、同じ画面密度でも画面サイズが違ったり、縦横比も違ったり。
画面比を考えないと、余白が違ってくる。
160dpi = mdpi
240dpi = hdpi
320dpi = xhdpi
画像のパーツを作るときにどういう比率かが大事になる。
mdip を 1として考えると、hdpi が 1.5倍、xhdpi が2倍。
hdpi = XPeria arc, INFOBAR Galaxy S2
xhdpi = Galaxy Nexus, Galaxy Note
■Q. こんなにいっぱいあるのにアプリのデザインはどうつくる？
A. xhdpi まず 720x1280 xhdpi 用につくる。
もし xhdpi で作れば、0.75倍、反対なら 1.33倍しなければいけない。
実際、
1pixel の線を表現したかった。1.33倍すると、ぼやけるのが嫌だったので
Photoshop でそれぞれ作った。
アイコンのパーツ、細い白い線がぼやけてしまうのが嫌だった。
両方サイズ用を作らなくても、
片方分でも表示はされるが、画像のサイズを指定しないと、大きく表示される。
逆に、小さいものを大きな端末で見ようとすると、
画像が眠くなる。ぼやけてしまう。
Redita ディスプレイで見た感じ。
大きい方で作って、小さい方にあわせ、微調整する。
■Q. 解像度違いのデザインはどうやってつくるの？
A. 大きいものから作るとらくちん（ただし微調整）
■Android デザインで気をつけること
画面サイズ。iPhone 2種類。Android 星の数。
画面の縦横比：iPhone 同じ。Android 種類によって違う
フォント：iPhone ヒラギノ。Andorid 機種によって違う。
文字により変化する部分がある。フォントが機種依存だから。
Q. Androidアプリデザインを考えるときに気をつけること
A. 画面サイズが多少変化しても耐えられるデザインにすること。
■simeji PhotoShop 最初の画面がキュウキュウ。
多少画面サイズが違っても大丈夫なよう、余裕のある画面デザインにしておく。
HTC と Galaxy での比較。
端末の解像度や画面サイズが違うので、絶対さけられないこと。
デザイナーもそのことを知っておいて欲しい。
タブレットの場合、出来ないことは無いのですが、非常に大変でした。
タブレットは文字のサイズも違う。原因はわからないのだが、文字の表示が変。
余白をじゃっかん大小して自然に組めるデザインがいちばんうれしい。
■アプリの軽量化も考える
重いのは画像です。
コードで書けるものはコードで書こう（→２回目に詳しく）
アプリも Web も共通している。
XMLの実装
ちょっとでも知識があれば、実装可能かどうかわかる
100% できなくてもいいので。
今日のメインイベント！
9-patch
グラフィックを作っていくのにはどうしたら良いのかをお話ししていきます。
9patch とは
なぜひつようなの？
知っておく必要？
ツール
応用
●9-patch とは
Android アプリのデザインでキモとなる9-patch
CSS(CSS3) でいうと border image と同じようなもの。
画像を9分割して、４隅は固定、その他を伸びてもいいようにする。
Fireworks の 9スライスと同じ。
Q. なぜ必要なの？
A. 伸縮のことを考えないといけないから。
ボタンの文言が変わったら、横に伸びる。
背景画像、角丸が4隅にある。4隅を保護しながら、伸張する。
この角丸の分を、9patch をせずに、拡大しようとすると、
縦横比が違うので、ちょっと縦長になり、微妙に違う。
画面にフィットするようにのばすと、角丸が歪んでしまう。
普通の人は気づかないと思うが、角丸が縦長になってしまう。
エンジニアさんは気にしないですよね！
口をすっぱくして言いたいのは
縦横比を勝手に変えないでください！！
絶対やらないでください。
やり方がめんどくさいのであれば、デザイナーに相談してください。
絶対タブーですね。
デザインを最初知らない時に、文字を勝手に長体にした時に、すごい怒られました。
縦横比を変えるのは絶対NG!
Q. 知っておく必要があるの？
A. あると思います。エンジニアにもの申すために！
仕組みと作り方。
伸びる部分と伸びない部分を決める
中のコンテンツが入り込むエリアを決める
黒い点（線）で表現
かきだしたパーツの上下左右に 1px ずつ余白を追加する。
伸びる部分と、伸びない部分
上部と左側に黒い点（線）をかく
ピクセルを打ったところが伸びるところ。
これを頭に叩き込んでください！
小学生くらいでもわかると思います。
線になると、今度はピンクの領域が伸びる部分になります。
想像することが大事です。
黒く指定した部分が伸びます。
このデザインに関しては、結果が同じです。
これは伸びても耐えられるデザインです。
グラデーションがはいった場合、頭を使います。
これで9patch で奇麗に表現しようとしたら、どうしますか？
まず、1ピクセルずつのばしてみます。
縦のラインに関しては結果は同じです。
問題は、縦方向です。同じ色で伸びます。
くどいと思っているでしょ。これ大事なんです。
線で指定した場合は、おおきなグラデーョンになります。
のびても大きなグラデーションになります。
今度は、1px 2点うちます。同じ色が並んでいる部分があります。
ここで3種類やりましたが、結果は微妙に違います。
もっこり感がビミョーに変わる
デザイナーはグラデーションを重視して作っているので、
どれが一番いいのかは、場合によって変わるし、色数によっても違います。
色の差があまりないグラデーションの場合、横縞が出てします。
仕組みとして、どこをのばすか、何個点をうつとどう変わっているのかを
理解して欲しい。
@asamieee7
■デザインをしていて、これでオッケーです。となった後。
パーツの書き出しの作業がある。
認識が異なる。
パーツを書き出すのなんてすぐでしょ？と言われるが....
画面サイズによって4種類のパーツを用意しなければいけないが、
それをマッハでやらなければいけない。
一個一個やっていると間に合わない。バッチ処理。
720px → 100%
640px → 90% iphone4
480px → 65%
320px → 43% iphone3GS
パソコンが勝手に計算してくれるので、マッハで終わります。
xxx.png を xxx@2x.png のファイル名をつけてあげるとイイじゃないでしょうか？
@tommmmy 鬼のような仕事ですね！
@asamieee7 いや、楽しいです。
休憩
@adamrocker
コネタを。
KUSOムズイ！
知っておくとお得なことをお知らせします。
タテスクロールたくさんしたら、気持ち悪くなるので、気に入ってます！
Google Developer Expert (Android)
ディスプレイの種類、KUSO多いわっ！
Android は 200種類あると言われているが...
エミュレーターの中でも、何にするのか選ばされるのが、Androidの良いところ！
OSバージョン互換。KUSOやわ！
バーの色が微妙な感じ。
なんかしらんが、ほかの会社は黒かったりする。
さらにひどいのは、Andorid 3 からは黒くなりました。
この下に、ナビゲーションバーがでて、変なハードボタンを止めますとなって、
ソフトウェア的にボタンが出てきて、ディスプレイのサイズがめちゃくちゃになっています。
全部に対応しようず！
理解不能、理解不能、理解不能
どうするといいのか？
I phone
最近は両方しないといけない？
答え
小さくスタート
たくさん端末があるが、メジャーな端末は決まっている。
Screen sizes and densities
http://developer.android.com/about/dashboards/index.html
最近 xxlarge というサイズがでてきた。
hdpi normal, xhdpi normal をカバーすれば 7割対応。
その他は、自分の持っている端末に対応すればいいんじゃないかと。
3パターンやれば、いい！
これならなんとかなるんじゃないかと。
小さくスタート
大切なのは完成度の高いアプリを作ること
Google のランキングを考え、評価が高くなる。
iPhone は 2種類、Android は 3種類作るのがおすすめです。
@tommmmy
9patch
仕組みと作り方。
中のコンテンツが入り込むエリア。
右側と下側に点を打つ。
黒い線で指定していない部分は余白になる。
文字を入れてみるとわかる。
余白の部分が大きくなったり、小さくなったりする。
コンテンツをもてあそぶところの長さを変えてあげるだけで余白が違うものができる。
9patch で余白を調整できる。
伸びる部分と伸びない部分を決める。
双方は独立していて、干渉することは無い
button_bg.9.png と .9 の名前をつけて保存すると、9patch扱いになる。
■作成ツール
パーツを書き出したあと、android SDK の draw9patch を使う。
デザイナーさんね、これ嫌なんですよ。
tools の中に、良くわからないファイルが入っていて、
「何この黒いアイコン！」と思います。
でもダブルクリックすると立ち上がります。
左に元画像、右側にのばされた後の画像が表示されます。
奇麗に引き延ばされます。
コンテンツエリア "Show content" にチェックを入れると確認できます。
Shift 押しながらのばしても一本線が書けません。速すぎるとかすれます。
draw9patch どう？ 使いにくい！
真ん中はどこ？ 目分量
左右対称とかどうやるの 目分量
線の指定。かすれる。。。。
Photoshop の落とし穴
このまま書き出しても適応されない
Fireworks でもダメ。
9patch を作るには draw9patch を使う。
Photoshop とかでもできる.... パーツを書き出します。
PNGをもう一回開いて、点をうって上書き保存する。
できると思うが、確証はない。
■応用「このデザインはできます！」
もう少し知識を。
のばす点はいくつでも、のばす点の割合を調整できる
これをわかっていると、いろいろな表現ができる。
simejiの背景画像の例。
上と下に線を入れると、等間隔で隙間ができる。
注意：のばすしかできません。
縮むことができないので、最初の大きさで作るとGood!
9patch で小さくなることは無い。
無理矢理縮むと、重なってしまい、半透明部分の色が濃くなってしまう。
■9patch の3ヶ条
伸ばす点はいくつでも打てる ・伸び率も比例する ・小さめに作る
draw9patch 一度やってみてください。
吐くくらいめんどうくさいです。
9patch に不向きな例。
ストライプ、ドット
ストライプの場合は、全部の縞に点をうっていく。
こいったらできるよ！というのをエンジニアに示してあげてください。
テクスチャはのばすと汚くなります。
これもおすすめしない例です。
カンペを出すアプリのデザイン。
アナログ感を出しています。紙の感じとか。
エンジニアに言っても実装してくれないなと思ったので。
破れた感を出したかった。それをはぶいた部分をのばす設定に。
左上のキャラクタ部分、テキストを入れる部分。紙（上の左側一カ所しかのばす設定をしていないが、
タブレットで見た時も奇麗にのびている。
マーケットにはあがっていないのですが、ブログの方で紹介しています。
■最後に
別にデザイナーがやらなくてもいいけど、仕組みは知っておいてください。
時間があったらやってみてください。（ちょーめんどくさい）
お互い苦労を知りましょう
まきまきになってしまいましたが、ありがとうございました！
Q. 9patch を指定した時に、最大この幅以上に大きくならないでくれ？という指定はできますか？
A. できません。永遠に伸びます。
Draw 9-patch
http://developer.android.com/tools/help/draw9patch.html
<< Home