主婦でもできる Android Layout

主婦でもできる Android Layout

2011/09/17(Sat)

Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net

自己紹介：現在
● Mrs.HiromiでAndroidアプリ公開中。
● 但し、javaは書けません。
● 女子部「ネイル・ド・ロンジョ」のネイルパーツ画像。
● ドロクリ利用した「MH Clock」シリーズ。
● つ部「みんなのラーメンタイマー」画像とレイアウト。
● B社ハッカソンがきっかけの「おなまえなあに？」画像。
● 専業主婦です。子育て中です。仕事が無いです。

2011/09/17 主婦でもできる Android Layout 2

自己紹介：過去
● キャリアは大学卒業後3年間のみ。
● 資格は無かったけどCOBOLでプログラミングを少々。オフ
コンのデータベース管理とポスレジ管理。なぜか…2年目か
らは受付嬢も兼務とかしてたり…激務すぎ。
● 会社員時代に色鉛筆で20号の写実画を描いた。
● 病気して会社辞めた後、自分のホームページ作った。
● WebとかLogo・DM・名刺・看板デザイン制作とか。
● 半身麻痺になった自分のために自宅をデザイン。

自己紹介：どうしてこうなった？
● HT-03Aを購入。
● ROMをごにょってオレオレテーマに。
● 娘（当時1歳）、旦那の順にHT-03Aを与える。
● Android女子部に入る。Androidな世界が広がる。
● 名古屋Androidつくる部に入る。Androidな日々。
● 娘っ子も立派なAndroiderへと成長。
● 使いやすさ・かわいさのチェックは娘っ子が担当。

では、本題へ。


レイアウト＆デザインについて
● 良いものは真似しよう！
● 使いやすさ、見やすさを追求しよう！
● アーティストになる必要は無い！
● 人の好みは千差万別だから気にしない！
● 努力したけどわからないなら素直に質問しよう！
● 経験を積めばデザインは出来る！


アイデアが固まったらチェック
● 著作権・登録商標・ライセンス。
● アイデアの権利というのがあって…。
● 「TODO」は著作権登録されてるので要注意。
● アプリ名「Hoge Dropbox」「Dropbox Hoge」はNG。
● DropboxのIconをアプリIconの一部に使用もNG。
● アプリ名「Hoge Twitter」「Twitter Hoge」はNG。
● Droidfontの利用ライセンスは厳しいので要注意。


逆さまのピラミッド

アプリを使ってもらいたい人たちはどんな人？

ターゲットとするユーザー層によってUIは変わる
ターゲットとするユーザー層によってUIは変わる

書籍：逆さまのピラミッド（1990/05発売）より


画面の階層（Level）を描く
「みんなのラーメンタイマー」の場合


画面の階層をチェック
● ユーザーが迷子にならない画面遷移を考える。
● 同じような処理を一画面にできないか？
● タップ回数が多すぎないか？
● 階層が深くなりすぎて終りが見えなくなってないか？
● 「戻るキー」の挙動に一貫性を。
– 戻るボタンを画面に置かない。

資料 by　あんざいゆき（@yanzm）
デブサミまとめまとめ:2011
application Next Generation presented by android女子部


レイアウトの種類
● 大雑把に4種類
SmartPhone
縦と横

Tablet
横と縦

画像　
Google I/O 2011 Designing and Implementing Android UIs for Phones and Tablets
　Session presentation[PDF] より


4種類同進行は無理

どれをベースにすればいいの？


2011年6月18日
WCAN 2011 summer #wcan51

「Web？ or App？モバイル対応
を視野に入れたデザイン入門」
講演中に。


講師の矢野りんさんが、
『Small Screen first.』。

Smart Phone ＞ Tablet ＞ PC


TLで佐藤伸哉さんが、
『Mobile first.』。


ということで。

Smart Phone 向けの
レイアウトを最初に描こう！


しか～し！
マルチデバイス対応しないと！
変態端末が日本は多いし！

画面サイズの基準は？


Androidでのサイズと単位
● Supporting Multiple Screens | Android Developers
● 画像の単位は「dp(dip)」。文字の単位は「sp」。
● 解像度(dot per inch＝ピクセル解像度)が
mdpi(density=160dpi)の時、1px=1dp=1sp。
● 上記が適用される画面サイズは、
● Smart Phone が 320x480px。
● Tablet が 1280x800px。


画面サイズは
320x480px
と
1280x800px
で
レイアウトを作ろう。

文字サイズは？


iosched
- Google I/O App for Android
- Google Project Hosting

を見てみると。


http://code.google.com/p/iosched/


android/ res/ values/ dimens.xml

small=14sp
medium=18sp
large=18sp
xlarge=18sp

4種類用意されてる。


画面サイズが
320x480px(160dpi)の時、

文字サイズは
大22px・中18px・小14px。


文字サイズについて
● 大・中・小の3種類は必要。
● Google的には、18spが文字サイズのdefaultらしい。
● 2010年のioschedのソースでは、「large=22sp・
medium=18sp・small=14sp」だった。
● xlargeはTablet向け。
● 現状、『dp=sp』。


さてと、

レイアウト作成へ。

と、その前に。


Head First XML Layout on Android
あんざいゆきさん
http://www.slideshare.net/yanzm/head-first-xml-layout-on-android-5290462

見ておいてください。


画面レイアウト制作開始。


とにかく全部を、

スケッチブックに手描き。


追加で、
付箋やメモを貼りつけて。

全体がある程度決まったら。


レイアウト作成ツールなど
● Illustlator or Inkscape 。
● そのまま画像制作出来るように環境設定する。
● Photoshop or GIMP2 はベクター画像で描くこと。
● CacooなどのWebサービスは情報共有向き。
● GUIキットやStencilを利用しよう。
● http://clip.livedoor.com/clips/studiohiromi/tag/GUI


レイアウトを描く①
Cacooで描いた「みんなのラーメンタイマー」画面レイアウト


レイアウトを描く②
Cacooで描いた「みんなのラーメンタイマー」画面レイアウト


余白とUIと共通レイアウト

● 余白を決める。ボタンの誤操作を避けるために余白は重要。
● UIを考慮する。使いやすい＆わかりやすいを最優先。
● 共通レイアウト箇所を決めておく。
● 実装も画像制作も作業工程が減る。Fragment対応の場合は必須。


必要画像の一覧を作ろう
● 各画面ごとに、必要な画像の一覧を用意しよう。
● 命名規則というのがあって…。
● Icon Design Guidelines | Android Developers Use
common naming conventions for icon assets。
● 装飾画像は「img_hoge」「[画面]_btn_hoge」など。
● ボタン（タップする）画像は3種用意しよう。
– default・focused(selected)・Pressed。
– disableもあるよ。


画像の名前①
home_icon

home_appname

img_raimon

home_btn_reader (default/focused/pressed)

home_btn_timer (default/focused/pressed)

home_btn_favorite (default/focused/pressed)

home_btn_history (default/focused/pressed)

home_btn_itemlist (default/focused/pressed)

home_btn_search (default/focused/pressed)

home_tsubulogo (default/focused/pressed)


画像の名前②
ic_title_home (default/focused/pressed)

ic_title_barcode (default/focused/pressed)

ic_title_serch (default/focused/pressed)

img_raimon/img_photo

ic_popup_camera (default/focused/pressed)

ic_popup_gallery (default/focused/pressed)

ic_popup_selecter (default/focused/pressed)

timer_btn_plus (default/focused/pressed)

timer_btn_minus (default/focused/pressed)

btn_bg (default/focused/pressed)


配色を決めよう
● 中間色を使おう！ by 矢野りん
● 基本は3色！by あんざいゆき
● カラーパレットを利用しよう。
● Adobe Kuler http://kuler.adobe.com
– Highest rated or Most Popular から選ぶといい。
● COLOURlovers http://www.colourlovers.com
– Browse Palettes MOST LOVED から選ぶといい。
– http://www.colourlovers.com/palettes/most-loved/all-time/grid


配色の基本的なこと。


日本Androidの会
名古屋支部第2回勉強会
女子部が好きなアイコン♥
矢野りんさん
http://qik.com/video/5167665
2010/2/27 Sat


カラーパレットを使おう。


Adobe Kuler ①

クリック


Adobe Kuler ②
色調整
△を
左右に
スライド

RGB
HEX
コピペ


COLOURlovers ①
ダメ
鮮やかすぎる

良い
中間色の同系統

冒険
難易度高

お勧め
色の割合がポイント


COLOURlovers ②
HEXとRGB

ライセンス

登録すると
ダウンロード
可能


今できるユニバーサルデザイン
● 視覚異常の方への配慮
● 同系色でコントラストを。赤と緑は一緒に使わない。
● 参考：Visolve - 色覚異常の方の色の見え方
● 現状、端末自体がユニバーサルデザインではない。
● 私自身が経験した中で、ユニバーサルデザインな物は
今までに2個しかありません。
– TOTO NEOREST（トイレ）
– Vola（水栓）デザイン：アルネ・ヤコブセン


画像制作へ



ベクター画像とビットマップ画像

40x40 px の円を描いて。

120倍に拡大して見てみると。

上が Illustlator で描いてる状態。

下が Photoshop で描いてる状態。

上がベクター画像。

下がビットマップ画像。


画像を作る場合、
解像度320dpi端末に
対応できるよう作ろう。

『大は小を兼ねる』


Illustlatorでの
製作過程を主に説明します。


新規ドキュメントの設定
● 画面サイズ 320x480px （Illustlator標準150ppi）。


グリッドの設定
● 環境設定からグリッドを設定。
● 分割数は4か8。8分割のがいいと思う。


グリッドを設定後
● 制作サイズ 320x480px。
● グリッド分割数8。
● 1つの正方形が 8px(8dp)。
● グリッドを基準に作業。
● 480x800pxで制作する場合も
一緒です。


Inkscapeでのグリッド設定
● ファイル(F)→ドキュメントの設定(D)→グリッド。

メジャーグリッドラインの頻度

制作画面サイズ
320x480pxなら 4
640x960pxなら 8

480x800pxでも 8
がいいと思う。


パスからガイドを作成
● パスで四角を描く。
● 必要サイズに変更。
● グリッドを基準に配置。
● パスからガイドを作成。
● ひたすら繰り返してガイドを
作る。
● Inkscapeの場合も同様に。


すべての余白と配置をガイドで
● ガイドで画像と文字のサイズ
と配置箇所を作る。
● コンテンツ別の基準ガイド。
● 余白を含めた画像と文字の配
置箇所ガイド。
● 最終画像サイズ用ガイド。最
終的にスライスに変更。


サイズと余白が決まったので、
あとは絵を描くのみ。


ざっくりと作業工程を。


画像制作工程：都築の場合
● 基本的には、Illustlatorのみで制作してます。
● 必要画像をレイアウト画面内で作る。
● 最初はシェイプ（シルエット）のみで仕上げる。
● 基本となる配色を決める。背景・文字・ボタンなど。
● 必要ならPhotoshopのレイヤースタイルで仕上げ。
● 仕上がり画像サイズはhdpi(density240)用で保存。
● icon.png なら 72x72px。


さて、やるか。

良い資料があります。


Android Bazaar and
Conference 2011 Summer

デザイントラックより。


@tomorrowkey（エンジニア）
／山本麻美（WEBデザイナー）
Androidアプリデザイン入門編

講演資料
これ必読ですよ。

では、
画像制作その１。

シェイプ画像のみ配置。


レイアウトにシェイプ画像配置
● 画像を白黒のみでシェイプ
（ベースとなる形）を描く。
● 仕上がりサイズ48x48pxな
ら、40x40pxを基準に描く。
● シェイプのみで描いておけ
ば、ベクター画像なので後か
ら拡縮しても大丈夫です。


続いて、
画像制作その2。

配色を決める。


Kuler 一番人気 Honey Pot で配色

ユニバーサルデザインなら右４つ。

ボタン
　defaultは黄土色
　Focusedで黄色
　Pressedでレンガ色
装飾
　dividerにレンガ色


COLOURlovers (◕ ” ◕) で配色

やりすぎ。ある意味ありだと思う。
ユニバーサルデザインなら左４つ。

ボタン
　defaultはオレンジ
　Focusedで黄色
　Pressedで赤
装飾
　dividerに赤

配色が決まったら。


ドキュメントサイズをxhdpi向けに
● アートボードサイズを
640x960pxに変更。
● ガイドとパスで描かれた画像一
式を縦横2倍に拡大する。
● 文字はptではなくpxで指定。ア
ウトライン化しないで、文字サ
イズと配置箇所の説明を書いて
おく。


ボタン画像の作り方は、

ガイドラインのアイコンと
基本的には一緒です。


ボタン画像の制作ポイント
● ランチャーアイコンの作り方を参考に。
● 凹凸。グラデーション。光と影。
● タップする画像だよ～とわかりやすいことが大事。
● 人の指の大きさに配慮しましょう。
● Launcher Icons | Android Developers 必ず読んで
ください。


ボタン画像の作り方と
配置に関する説明は、

こちら。


Android女子部勉強会@関東（東京）
2011/04/16

Ustream Android UI モバイル
向けUI設計の基礎
by 矢野りん
http://ustre.am/_WZwf:LHY


矢野りんさん
と
あんざいゆきさん
に
頼りっぱなしですいません。


Inkscapeの場合はこちら。

Inkscapeで、タダではじめる
GUIデザイン
http://www.slideshare.net/cocopon/inkscapegui


ということで、

まとめ。


画面サイズ
480x800(854)pxで、

私がデザインしない理由。


マルチデバイス対応
● IS03のレイアウト崩れを未然に回避。
● 余白を広げて配置することは、実装時に対応可能。
● 逆に、出来上がった画像をそのまま使って、余白を
削って小さい画面に合わせるのは難しい。
● 特定の端末のみに、別レイアウトを用意するのは最終
手段。
● 作業工程が増えるのは極力避けたい。


『Small Screen first.』。


ご清聴、

ありがとうございました。


主婦でもできる Android Layout

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a 主婦でもできる Android Layout

Similar a 主婦でもできる Android Layout (20)

主婦でもできる Android Layout