GDD2011のセッションメモ。
1つめは、「Android の優れたユーザーエクスペリエンス」 by Ryosuke Matsuuchiさん。
個人的にとっても有意義なセッションでした。
AndroidアプリにおけるUI品質とUIパターン、4.0でのUIなどについて、幅広く・でもわかりやすく納得できる内容でした。
自分が日々感じている、Androidアプリらしさ、っていうものをよりわかりやすく、意図を持って紹介されていました。
# Androidアプリで戻るボタンや下タブなiPhone的UIとか、もっとむちゃくちゃな独自UIとか見ると、なんとも言えない気持ちになる派です。
特にUIクオリティ5箇条!
すごいわかりやすいし、一緒に作る企画者やデザイナーにも念頭に置いて欲しいものばかり。
キレイにサンプルと併せてまとめられれば、すごいいいものになりそうだなぁ。
Android公式サイトとかで、うまくガイドライン化して告知・周知してほしい、と切に願います。
(&実際にオフィスアワーでリクエストさせていただきましたが。)
# むしろここに書いてあることを知らない・無視する人とは仲良くなれない気がしてきました(え
以下、セッションメモです。
-
-
- -
-
UI Quality (UIクオリティ5箇条?)
- be fast 〜 速く
- be usable 〜 使いやすく
- be beautiful 〜 美しく
- be android 〜 Androidらしく
- listen to your users 〜 ユーザの声を聞け
- based on simple, beautiful, beyond smart
be fast 〜 速く
- メインスレッドで、IO処理はしない
- strictモードを使ってチェックする
- ASyncTask, Intentservice, Loader を使う
- TraceViewで確認する(カンや推測に頼らない)
- 処理に時間がかかるなら、ユーザに状況を伝える
- SpinnerやProgressBarによる明示
- キャンセルボタンを実装する
be usable 〜 使いやすく
- 独自・自己流でインターフェースを作らない
- UIパターンを考慮する
- ActionBar
- Multi-pane Layouts
- App Navigation
be beautiful 〜 美しく
- タイポグラフィ(フォント、大きさ、行間など)
- 色彩
- レイアウト
- 動き
- 可能なら、ビジュアルデザイナー・インタラクションデザイナーと一緒にやれるのが望ましい
listen to your users 〜 ユーザの声を聞け
- フィードバックを受けるフォームを用意し、アプリケーション上からアクセスできるようにする
- Google Analytics等、行動解析を行う
Android4.0における具体例
UIパターン
ActionBar
- 左:アプリケーションアイコン (ただの画像ではなく、最初に戻る「ボタン」)
- 中:ビューの詳細(タブや検索、ドロップダウンメニューなどの機能も)
- フットパスのような役割も求められる
- 右:アクションボタン
- ボタンとメニュー(Overflowメニュー=旧来のオプションメニュー)
- action mode
- Stacked Actionbar
- landscapeでは収まるけど、portraitで収まらない場合に2段にする
- Split Actionbar
- 上記と同じ場合に、上下に分ける
- APILevel 10(=Android2.3)以下の場合、ActionBarCompat を使う
Multi-Pane Layouts
- 携帯電話の場合は画面A->画面Bという遷移、タブレットの場合は画面A+画面Bという並列配置
- Fragmentを使う
- 非対応な場合は、こちらも Compatible libraryを使う
Dos and Dont's − やるべきこと、やってはいけないこと
- APKはひとつにしましょう
- MultipleAPKをマーケットでサポートしているが、なるべくやらない)
- Compatibility Libraryを使いましょう
- Dimensionsを定義して使いましょう(サイズの定数)
- 9patch bitmap を使いましょう
- android-ui-utils を使いましょう
- アイコンの整形・ジェネレートやUIプロトタイプツール、アイコンテンプレートなどがある
- http://code.google.com/p/android-ui-utils/
- xlarge = タブレット、ではない (xlargeなphone、largeなタブレットもある)
- dont overuse fill parent for large screen
- ioschedデモを参考にしよう
- http://code.google.com/p/iosched
- using compatibility library