これだけは知っておけ！はじめてのAndroidアプリデザイン〜ActionBar編　先生：秋葉ちひろ

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

株式会社ツクロア　秋葉ちひろ
2014.3.4 スクー

12:00

「気持ちいい」
をデザインする会社

秋葉ちひろ

デザイナー / アートディレクター

•見た目だけでなく機能のデザインを
•デザインと技術、双方からのアプローチ
PC / iPhone / iPad / Android / and more...

これだけは知っておけ！シリーズ
本日

Action Bar

3/18

9-patch

未定

UIと画面遷移

これだけは知っておけ！シリーズ
Androidアプリ制作に携わる

• デザイナー
• 企画をする人
• 開発者

今日の授業

• 導入
• Action Bar

〜導入〜
Androidのアプリデザインをとりまく環境と実情

12:00

Android
るある1
あ

画面サイズが多様すぎる！

12:00

Android
るある1
あ

> Android Fragmentation Report July 2013 - OpenSignal

> Android Fragmentation Report July 2013 - OpenSignal

Android
るある1
あ

画面サイズが多様すぎる！

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

Android
るある2
あ

まずは iOS 版のデザインをつくってから、
それ Android 版でも使ってよ。

12:00

Android
るある2
あ
iOS 6

iOS 7

？

Android も同じものに？

Why ?
Android の Default UI

？

iOS の UI をまねることで、
余計に工数がかかる
（こともある）

ANA

Android
るある2
あ

まずは iOS 版のデザインをつくってから、
それ Android 版でも使ってよ。

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

Android
るある3
あ

全部WebViewでつくるから、
ネイティブの実装いらないよ！

Android
るある3
あ

全部WebViewでつくるから、
ネイティブの実装いらないよ！

ふつうのスクロールですら
カクカクしてつらい！

Android - Default UI

12:00

Android
MockUp

あらかじめ用意されたコードをかけば、
デザインをしなくても実装されるUIのこと
http://developer.android.com/design/patterns/index.html

12:00

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 がバージョンアップしても安心。
• ユーザーが慣れている。
• 多様な画面サイズに最適化される。
• などなど

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

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

12:00

Android

Good samples
iOS と Android で

12:00

Android
Expedia

Good samples
iOS と Android で

12:00

Android
Dropbox

基本的な Default UI

〜Action Bar〜
Android 3.0 以降で採用された UI

12:00


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.

1行でおさめて、

2

左側3分の1にタイトル
右側3分の2にタブ
タブはスクロールされる

問題



3

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


問題


1

Schoo Tab Swipe Sample

2

Schoo Tab Swipe S.

3

答え


3

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


5 inch

7 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
スペースがなかったら
上下に分かれなさい！


問題

Split action ？
bar

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

？

問題


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

1

縦持ちのときと同じように、
上下に分かれて、すべてが出る

問題



2

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

問題



3

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


問題


1

2

3

答え


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


logo.png

ic_menu
_plus.png

ic_menu
_search.png

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

よく使う余白ブロック（px）

AppName
TabName

TabName

Chihiro.Akiba

TabName
17:49

余白で使うブロックです。
だいたいの大きさにあわせて大きさを調整
すれば、それだけできれいなレイアウトに。
コピペしてぺたぺた使えます。

12

24

36

48

96

144

[tuqulore] Interfaceを削除する方法 - おせわに
なっております、秋葉です。さきほどは ...

よく使う要素ブロック（px）

hideki.akiba

17:49

画像要素などでよく使う大きさのブロックです。

hideki.akiba

17:49

[tuqulore] 音楽を再生するときのバグ - おせわに


hideki.akiba

17:49


hideki.akiba

17:49

hideki.akiba

17:49



hideki.akiba

17:49


144

よく使うフォントサイズ
フォントはあまりたくさん使わずに、
できるだけこの 3 種類におさえま
しょう。

54pt

42pt 36pt

よく使うフォント
英語は「Roboto」
、日本語は「モ
Roboto Bold
トヤマルベリ」にしましょう。モ
Roboto Regular
トヤマルベリがない場合は「ヒラ
ギノ丸ゴ / 角ゴ」
あたりが無難です。
font-weight は 2 種類（Bold/Regular）で考えましょう。

よく使うライン
むやみに太さを変えず、できるだけ
この 3 種類におさえましょう。

3px
6px
9px

よく使う余白ブロック（px）

AppName
TabName

TabName

Chihiro.Akiba

TabName
17:49

余白で使うブロックです。
だいたいの大きさにあわせて大きさを調整
すれば、それだけできれいなレイアウトに。
コピペしてぺたぺた使えます。

12

24

36

48

96

144

[tuqulore] Interfaceを削除する方法 - おせわに

よく使う要素ブロック（px）

hideki.akiba

17:49

画像要素などでよく使う大きさのブロックです。

hideki.akiba

17:49



hideki.akiba

17:49


hideki.akiba

17:49

hideki.akiba

17:49



hideki.akiba

17:49


144

よく使うフォントサイズ
フォントはあまりたくさん使わずに、
できるだけこの 3 種類におさえま
しょう。

54pt

42pt 36pt

よく使うフォント
英語は「Roboto」
、日本語は「モ
Roboto Bold
トヤマルベリ」にしましょう。モ
Roboto Regular
トヤマルベリがない場合は「ヒラ
ギノ丸ゴ / 角ゴ」
あたりが無難です。
font-weight は 2 種類（Bold/Regular）で考えましょう。

よく使うライン
むやみに太さを変えず、できるだけ
この 3 種類におさえましょう。

http://goo.gl/XepQd

3px
6px
9px

http://androidniceties.tumblr.com/

また再来週！
おつかれさまでした！
秋葉ちひろ @tommmmy

12:00

3/18

9-patch

だよっ

レポート課題
スクーの Android アプリを作るとして、

自分ならどういうActionBarに
するかを考えて
提出してください！
デザイン、アイコンなど

これだけは知っておけ！はじめてのAndroidアプリデザイン〜ActionBar編　先生：秋葉ちひろ

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to これだけは知っておけ！はじめてのAndroidアプリデザイン〜ActionBar編　先生：秋葉ちひろ

Similar to これだけは知っておけ！はじめてのAndroidアプリデザイン〜ActionBar編　先生：秋葉ちひろ (20)

More from schoowebcampus

More from schoowebcampus (20)

Recently uploaded

Recently uploaded (12)