これだけは知っておけ！はじめてのAndroidアプリデザイン

Android
ActionBar
12:002014.3.4

•
•
「気持ちいい」をデザインする会社
PC / iPhone / iPad / Android / and more...

> Android Fragmentation Report July 2013 - OpenSignal
Android
あるある1

画面サイズの展開を見た時点で
つらい！
Android
あるある1

iOS
Android
12:00
Android
あるある2

Android
？
iOS 6
iOS 7
Android
あるある2

Why ?
Android の Default UI
iOS の UI をまねることで、
余計に工数がかかる
（こともある）
？
ANA

マネするがために、
余計に工数がかかってつらい！
iOS
Android
Android
あるある2

ふつうのスクロールですら
カクカクしてつらい！
WebView
Android
あるある3

12:00
Android
MockUp
Android - Default UI

12:00
UI
http://developer.android.com/design/patterns/index.html

Action Bar
http://developer.android.com/design/patterns/actionbar.html

Navigation Drawer
http://developer.android.com/design/patterns/navigation-drawer.html

12:00
Android
MockUp
http://developer.android.com/design/patterns/pure-android.html

Default UIを使ったほうがよい
理由を、他に3つ考えよ。
問題

• Default UI
• OS
•
•
•
答え

res/menu/activity_main.xml
<menu>
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
<item android:id="@+id/action_delete"
android:icon="@drawable/ic_action_delete"
android:title="@string/action_delete"
android:showAsIcon="ifRoom" />
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
</menu>
＃これだけだと、Android 2.x 以下ではメニューキーにて呼び出される

Good samples
iOS Android
UI
12:00
Android

Good samples
iOS と Android で
UI をうまく使い分けている例
12:00
Android
Expedia

Good samples
iOS と Android で
UI をうまく使い分けている例
12:00
Android
Dropbox

Action Bar
12:00
Android 3.0 UI
基本的な Default UI

Action Bar

Action Bar
1. App icon

Action Bar
2. View control • app name
• tab controls
• drop-down menus

Action Bar
3. Action buttons • most important actions

Action Bar
4. Action overflow • more buttons

View controls
• app name

View controls
• tab controls

5インチのスマートフォンで横持ちの場合、
Tab controlsはどのように
配置されるでしょう？
問題

5インチのスマートフォンで横持ちの場合、Tab controlsはどのように
Schoo Tab Swipe Sample
1
縦と同じように、
二段目にタブ
問題

Schoo Tab Swipe S.
2
1行でおさめて、
左側3分の1にタイトル
右側3分の2にタブ
タブはスクロールされる
問題

3
タブが5つ全部表示される
問題

Schoo Tab Swipe Sample
Schoo Tab Swipe S.
3
2
1
問題

3
タブが5つ全部表示される
答え

7 inch5 inch
等間隔に配置
縦持ち

5 inch
7 inch
等間隔に配置
等間隔に配置
横持ち

View controls
• drop-down menu

Action buttons
Action overflow

新規作成編集削除更新検索
Action buttons
Action overflow

新規作成編集削除更新検索
Action buttons
Action overflow
常に出すスペースがあれば出す出さない

Split action bar
Action bar

Split action bar
上下にわかれた Action bar
スペースがなかったら
上下に分かれなさい！

Split action bar
上下にわかれた Action bar
5インチのスマートフォンで横持ちの場合、
Split action barの指定をすると、
ボタンはどのように配置されるでしょう？
問題

5インチのスマートフォンで横持ちの場合、Split action barの
指定をすると、ボタンはどのように配置されるでしょう？
1
縦持ちのときと同じように、
上下に分かれて、すべてが出る
問題

2
スペースに余裕があるので、
右上に配置され、すべて出る
問題

3
右上に配置されるが、
全部は出ない
問題

32
1
問題

3
全部は出ない
答え

3
全部は出ない
答え
？

答え
http://developer.android.com/design/patterns/actionbar.html

混乱しやすい例

Tab bar
> iOS ヒューマンインターフェイスガイドライン p.142

Action Barのデザイン
More designs!
http://jgilfelt.github.io/android-actionbarstylegenerator/

More more designs!
http://aadesigns.info/guideline/android-4-4-kitkat-design/

http://developer.android.com/design/style/branding.html#logo

http://developer.android.com/design/style/branding.html#logo
logo.png
actionbar_bg.png
ic_menu
_plus.png
ic_menu
_search.png

AppName
TabName TabName TabName
[tuqulore] 音楽を再生するときのバグ - おせわに
なっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] Interfaceを削除する方法 - おせわに
17:49Chihiro.Akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
144
48
96
144
3624
12
54pt 42pt 36pt
よく使う余白ブロック（px）
Roboto Bold
Roboto Regular
3px
6px
9px
17:49hideki.akiba
よく使う要素ブロック（px）
画像要素などでよく使う大きさのブロックです。
よく使うフォントサイズ
フォントはあまりたくさん使わずに、
できるだけこの 3 種類におさえま
しょう。
余白で使うブロックです。
だいたいの大きさにあわせて大きさを調整
すれば、それだけできれいなレイアウトに。
コピペしてぺたぺた使えます。
よく使うフォント
英語は「Roboto」、日本語は「モ
トヤマルベリ」にしましょう。モ
トヤマルベリがない場合は「ヒラ
ギノ丸ゴ / 角ゴ」あたりが無難です。
font-weight は 2 種類（Bold/Regular）で考えましょう。
よく使うライン
むやみに太さを変えず、できるだけ
この 3 種類におさえましょう。

AppName
TabName TabName TabName
17:49hideki.akiba
[tuqulore] Interfaceを削除する方法 - おせわに
17:49Chihiro.Akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
144
48
96
144
3624
12
54pt 42pt 36pt
よく使う余白ブロック（px）
Roboto Bold
Roboto Regular
3px
6px
9px
17:49hideki.akiba
よく使う要素ブロック（px）
画像要素などでよく使う大きさのブロックです。
よく使うフォントサイズ
フォントはあまりたくさん使わずに、
できるだけこの 3 種類におさえま
しょう。
余白で使うブロックです。
だいたいの大きさにあわせて大きさを調整
すれば、それだけできれいなレイアウトに。
コピペしてぺたぺた使えます。
よく使うフォント
英語は「Roboto」、日本語は「モ
トヤマルベリ」にしましょう。モ
トヤマルベリがない場合は「ヒラ
ギノ丸ゴ / 角ゴ」あたりが無難です。
font-weight は 2 種類（Bold/Regular）で考えましょう。
よく使うライン
むやみに太さを変えず、できるだけ
この 3 種類におさえましょう。
http://goo.gl/XepQd

http://androidniceties.tumblr.com/

@tommmmy
12:00
9-patch
だよっ

レポート課題
自分ならどういうActionBarに
するかを考えて
提出してください！

Android
9-patch
12:002014.3.18

前回の
復習

画面サイズの展開を見た時点で
つらい！
前回の
復習

12:00
前回の
復習

前回の
復習
ActionBar

Action Barのデザイン前回の
復習

Androidアプリデザインのコツ
前回の
復習
余白が大小しても
違和感のないデザイン！

9-patch
こんなデザイン、
実装できないよ。

9-patchとは？
画像を意図したとおりに
引き伸ばす
A
余白を決めるB

引き伸ばされる領域
9スライス

書きだしたパーツの上下左右に
1pxずつ余白を追加する
A : 画像を意図したとおりに引き伸ばす
1

上側と左側に
黒い点（線）をかく
2
A : 画像を意図したとおりに引き伸ばす

このデザインに関しては
結果は同じ

大きな
グラデーション

このデザインに関しては
結果はビミョーにちがう

デザイナーのみなさん、
このクオリティどうする？

書きだしたパーツの上下左右に
1pxずつ余白を追加する
B : 余白を決める
1

右側と下側に
黒い点（線）をかく
2
B : 余白を決める

コンテンツが入り込むエリア

main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="撮影する"
/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="撮影する"
android:padding="15dp"
/>
main.xml

9-patchでの余白の設定と
XMLでの余白の設定、
どちらが優先される
でしょうか？
問題5px
5px

9-patchでの余白
XMLでのpadding
(15dp)

9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
1ヶ所しか伸ばせない…

9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC

左の3つの図ように、
点の領域を変えていくと
どうなるでしょうか？
問題
A
B
C

9-patchが適用できるかどうか
向き / 不向きは
デザイナーでも考えよう

logo.png
actionbar_bg.png
ic_menu
_plus.png
ic_menu
_search.png

9-patchを理解して…
質の高いデザインを！

@tommmmy
12:00
UIと画面遷移
だよっ

レポート課題
画面遷移がすぐれていると思う
Androidアプリを教えてください！

これだけは知っておけ！はじめてのAndroidアプリデザイン

More Related Content

What's hot

Viewers also liked

Similar to これだけは知っておけ！はじめてのAndroidアプリデザイン

More from schoowebcampus

Recently uploaded

これだけは知っておけ！はじめてのAndroidアプリデザイン