android uiの罠

19
Android の UI のののの @dekosuke

Upload: dekosuke

Post on 12-Nov-2014

6.447 views

Category:

Documents


2 download

DESCRIPTION

Androidマーケットでアプリをどんどんインストールしていくと、アプリケーションによってUIがばらばらなのに気づきます。iOSでの開発と比べて、Androidではデザインを含め多くは開発者にゆだねられています。 この発表では、Androidでのデザインについて、僕が実際にアプリケーションを開発している上ではまった内容を列挙します。

TRANSCRIPT

Page 1: Android UIの罠

Android のUI について

@dekosuke

Page 2: Android UIの罠

2

Anrdoid アプリの UI の話をしますUI 全般の話というよりは、 Android の特徴的

な点についてですGoogle 推奨 UI ガイドラインに忠実な内容と

なっております

はじめに(前提)

Page 3: Android UIの罠

3

Android 携帯

Page 4: Android UIの罠

4

Android 端末は沢山ある・・・

↑ の 103 件は色違い含むので、実際はその 1/3 ぐらいですが・・・

Page 5: Android UIの罠

5

3ボタン (menu/home/back) or 4ボタン(+search)

ボタンの順番は端末によってばらばら( Android3.0 以降のタブレット端末は、ソフトウェアボタン)

キーボードある端末もある 解像度は 800*480 が一番多いけど、ばらばら

ハードウェアいろいろ

Page 6: Android UIの罠

6

下側にボタンを配置すると、 Android 固有のボタンとかぶる

後述の Action Bar/Tab Bar の利用を推奨

下側にボタンを配置するべからず

Page 7: Android UIの罠

7

Android で推奨されているレイアウト (Google IO 2010 で発表 )

海外のアプリはこれに沿ってるものが多い 実際に使いやすいかは (ry

Action Bar/Tab Bar

Action Bar

Tab Bar

Page 8: Android UIの罠

8

一番必要なボタンは画面内 (Action Bar など ) に置く

あまり頻繁には押さないが、必要なボタンはメニューに入れる

操作ボタンの配置

画面内ボタン↓

メニュー↑

Page 9: Android UIの罠

9

端末によって、ボタンの押しやすさには差がある

操作ボタンの配置

Page 10: Android UIの罠

10

Back Key を使いましょうBack Key はすべての端末にある 画面に戻るボタンをおくのはやめましょう

戻るボタン

Page 11: Android UIの罠

11

Tap するボタンは大きめに配置しよう (Google IO 2010)

Google+/EverNote のダッシュボード

タップのサイズ

Page 12: Android UIの罠

12

タッチ精度が iPhone に比べてかなり悪いのでびっくりした(元 ATOK 開発者)

http://www.atmarkit.co.jp/news/201105/27/7notes.html

タッチスクリーン精度

Page 13: Android UIの罠

13

タッチスクリーン精度

iPhone Android

Page 14: Android UIの罠

14

だめな例↓(あくまで例です)

アイコンのガイドライン

だめ

Page 15: Android UIの罠

15

Google 公式のアイコンガイドラインhttp://

developer.android.com/guide/practices/ui_guidelines/icon_design.html

アイコンはちゃんと余白あけないとだめ

アイコンのガイドライン

Page 16: Android UIの罠

16

さまざまな画面サイズに対応できる汎用リソース すっごい伸びるよ 専用のエディタあり

9-Patch 画像

Page 17: Android UIの罠

17

Android 標準のアイコンなどのリソースが使える (SDK 付属 )

android-sdk\platforms\android-X\data\res

Anrdoid 付属のリソース

Page 18: Android UIの罠

18

他のアプリを呼び出せる & 他のアプリからの呼び出しを受け取れる

iPhone より優れている数少ない点 呼び出す側の例 – twitter 連携(ブラウザ呼び

出し) 受け取る側の例 – メディアプレイヤー

インテント

Page 19: Android UIの罠

19

ご清聴ありがとうございました