android uiの罠
DESCRIPTION
Androidマーケットでアプリをどんどんインストールしていくと、アプリケーションによってUIがばらばらなのに気づきます。iOSでの開発と比べて、Androidではデザインを含め多くは開発者にゆだねられています。 この発表では、Androidでのデザインについて、僕が実際にアプリケーションを開発している上ではまった内容を列挙します。TRANSCRIPT
![Page 1: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/1.jpg)
Android のUI について
@dekosuke
![Page 2: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/2.jpg)
2
Anrdoid アプリの UI の話をしますUI 全般の話というよりは、 Android の特徴的
な点についてですGoogle 推奨 UI ガイドラインに忠実な内容と
なっております
はじめに(前提)
![Page 3: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/3.jpg)
3
Android 携帯
![Page 4: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/4.jpg)
4
Android 端末は沢山ある・・・
↑ の 103 件は色違い含むので、実際はその 1/3 ぐらいですが・・・
![Page 5: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/5.jpg)
5
3ボタン (menu/home/back) or 4ボタン(+search)
ボタンの順番は端末によってばらばら( Android3.0 以降のタブレット端末は、ソフトウェアボタン)
キーボードある端末もある 解像度は 800*480 が一番多いけど、ばらばら
ハードウェアいろいろ
![Page 6: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/6.jpg)
6
下側にボタンを配置すると、 Android 固有のボタンとかぶる
後述の Action Bar/Tab Bar の利用を推奨
下側にボタンを配置するべからず
![Page 7: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/7.jpg)
7
Android で推奨されているレイアウト (Google IO 2010 で発表 )
海外のアプリはこれに沿ってるものが多い 実際に使いやすいかは (ry
Action Bar/Tab Bar
Action Bar
Tab Bar
![Page 8: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/8.jpg)
8
一番必要なボタンは画面内 (Action Bar など ) に置く
あまり頻繁には押さないが、必要なボタンはメニューに入れる
操作ボタンの配置
画面内ボタン↓
メニュー↑
![Page 9: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/9.jpg)
9
端末によって、ボタンの押しやすさには差がある
操作ボタンの配置
![Page 10: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/10.jpg)
10
Back Key を使いましょうBack Key はすべての端末にある 画面に戻るボタンをおくのはやめましょう
戻るボタン
![Page 11: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/11.jpg)
11
Tap するボタンは大きめに配置しよう (Google IO 2010)
Google+/EverNote のダッシュボード
タップのサイズ
![Page 12: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/12.jpg)
12
タッチ精度が iPhone に比べてかなり悪いのでびっくりした(元 ATOK 開発者)
http://www.atmarkit.co.jp/news/201105/27/7notes.html
タッチスクリーン精度
![Page 13: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/13.jpg)
13
タッチスクリーン精度
iPhone Android
![Page 14: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/14.jpg)
14
だめな例↓(あくまで例です)
アイコンのガイドライン
だめ
![Page 15: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/15.jpg)
15
Google 公式のアイコンガイドラインhttp://
developer.android.com/guide/practices/ui_guidelines/icon_design.html
アイコンはちゃんと余白あけないとだめ
アイコンのガイドライン
![Page 16: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/16.jpg)
16
さまざまな画面サイズに対応できる汎用リソース すっごい伸びるよ 専用のエディタあり
9-Patch 画像
![Page 17: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/17.jpg)
17
Android 標準のアイコンなどのリソースが使える (SDK 付属 )
android-sdk\platforms\android-X\data\res
Anrdoid 付属のリソース
![Page 18: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/18.jpg)
18
他のアプリを呼び出せる & 他のアプリからの呼び出しを受け取れる
iPhone より優れている数少ない点 呼び出す側の例 – twitter 連携(ブラウザ呼び
出し) 受け取る側の例 – メディアプレイヤー
インテント
![Page 19: Android UIの罠](https://reader036.vdocuments.mx/reader036/viewer/2022081413/5465e63baf795969338b502e/html5/thumbnails/19.jpg)
19
ご清聴ありがとうございました