Android UI Design Tips

Android UI Design Tips
という資料があったので、日本語でまとめてみました。

Android UI Design Tips

View more presentations from Android Developers.

■ UIを意識すべきなのはどうして？
　　良いUI　
　　　→ ユーザーが洗練された質に気が付く
　　　　　→ 評価が良くなる
　　　　　　→ アプリのランキングが良くなる
　　　　　　　　→ さらにたくさんのインストール＆購入につながる

■ Agenda

　　1. やるべきことと、やっちゃいけないこと

　　2. デザイン哲学と考慮すること

　　3. 絶対に使うべき UI framework の機能・特徴

　　4. 新しい UI デザインパターン

　　5. アイコンとガイドライン



■ やるべきことと、やっちゃいけないこと

　＊ やっちゃいけないこと

　　・単に他のプラットフォームのUIを移植しない！
　　　　・ユーザーがプラットフォームとアプリが合っていると感じるべき
　　　　・アプリのブランドとプラットフォームとのバランス

　　・modal progress と確認用ダイアログを使い過ぎない！

　　・柔軟性を持つ！（absolute-positioned layout はダメ）

　　・px単位を使わない！（dp(dip)やspを使う）

　　・小さい文字はダメ！


　＊ やるべきこと

　　・すべてのリソースに対して、high density screen 用バージョンを用意する

　　・ボタンやリストアイテムなど、明らかにタップするものは大きくする

　　・Android のアイコンガイドラインにしたがう

　　・適切なマージン／パディングを使う

　　・D-pad とトラックボールをサポートする

　　・activity stack を適切に運用する

　　・orientation changes（画面回転）を適切に処理する

　　・theme/style, dimension, color resources を使用して
　　　冗長性を減らす

　　・visual and interaction designer(s) と一緒に仕事する!!!



■ デザイン哲学と考慮すること

　＊ Android デザイン哲学

　・ Clear vs. "simple"
　　　明確 vs シンプル

　・ Conetnt vs chrome
　　　内容 vs 外観のカスタマイズ

　・ Consistent yet engaging
　　　一貫性があり魅力的
　　　　- エレガントなバリエーション

　・ Enhanced by the cloud
　　　クラウドで機能強化
　　　　- ユーザー環境をデスクトップとモバイルで維持する


　＊ good interface design の原理

　　1. ユーザーにフォーカスする

　　2. 正しいものを可視化する

　　3. 適切なフィードバックを示す

　　4. 予測可能にする

　　5. fault-tolerant にする


　＊ ユーザーにフォーカスする

　　・自分のアプリのユーザーを知る
　　　　- 年齢・スキルレベル・文化・身体障害、などなど
　　　　- あなたのアプリで彼らが何をしたいのか？
　　　　- 彼らはどんな種類のデバイスを使うのか？
　　　　- どこで／いつ／どのように 彼らがそのデバイスをつかうのか？
　
　　・'user-first' mentality （ユーザーを第１に考えて）でデザインする

　　・実際のユーザーに早く／しばしばテストしてもらう


　＊ 正しいもの可視化する

　　・もっとも一般的な（頻繁に使われる）操作が、すぐ見えてすぐ操作できるべき
　　　　＝ 左上が一番目がいきやすい

　　・付属的な機能は MENU ボタンに割り当てることができる


　＊ 適切なフィードバックを示す

　　・ すべてのインタラクティブなUI要素は、少なくとも4個の状態
　　　（default, desabled focused, pressed など）を
　　　を使って持つようにする

　　・ 1つのアクションの効果は、明確に見える（＝わかる）ようにする

　　・ 控えめだけど十分なプログレスインジケータを表示する


　＊ 予測可能にする

　　・ ユーザーが期待することをする
　　　　- activity stack の適切な運用
　　　　- ユーザーが見ることを期待する情報とアクションを示す
　　　　（テストと観測が必要）

　　・ 適切なアフォーダンスを使う
　　　　- もしそれがクリック可能なら、クリック可能だとわかるようにする！！

　　＊＊　もし複雑な操作が必要ならば、デザインを考えなおすべき！　＊＊


　＊ fault-tolerant にする

　　・意味があるものだけ、操作可能にする
　　　　- UI要素を適切に Enable/Disable する

　　・不可逆的なアクションの数を制限する

　　・確認ダイアログは '使わない'('undo') ようにする
　　　　- 実際は、できるだけ少ない modal dialog を使う
　　　　　だって目障りだもん

　　"If an error is possible, someone will make it. "
　　　- Donald Norman, author, The Design of Everyday Things



　＊ デザインで考慮すること

　　・物理的なスクリーンサイズ
　　・解像度
　　・縦画面 ＆ 横画面
　　・主要なUIインタラクションメソッド
　　　　- タッチスクリーン
　　　　- Dパッド／トラックボール
　　・ソフト／ハードキーボード

　　・デバイスによって、方法が異なる可能性があるということに対する
　　　意識はすごく重要

　　・デバイスのUIバリエーションについてCDDを読んで学ぶ
　　　　- http://source.android/com/compatibility

　　・スクリーンサイズと解像度に対応する
　　　　- http://developer.android.com/resources/dashboard/screens.html



■ 絶対に使うべき UI framework の機能・特徴

　・<RelativeLayout>

　・１つの .apk にすべてのリソースを含む
　　　- drawable
　　　- drawable-hdpi
　　　- drawable-mdpi
　　　- layout
　　　- layout-port
　　　- layout-land
　　　- layout-large-land
　　　- layout-large-port

　　・システムが runtime時にどのリソースを使うか選択する

　・9-patch drawables (foo.9.png)
　　・CSS3 border-image に似てる
　　・border pixels が拡張可能な領域を示す
　　・ -mdpi と -hdpi バージョンを用意する！！

　・Selector (state list) drawables
　　・状態(state) （desabled, pressed, focused, default...）
　　　によってボタンの色や画像をかえる

　・Layer drawables (XML + PNGs)
　　　foo_border.9.png + foo_mask.9.png
　　　　　　　+ Drawable.setColorFilter(0xA4C639, ...);
　　　　　→ Rendered output (resizable w/9-patch)


■ 新しい UI デザインパターン

もともとは、Google I/O 2010 の Android UI design patterns で話された内容
http://code.google.com/events/io/2010/sessions/android-ui-design-patterns.html

　・Dashboard

　・Action Bar

　・Quick Actions

　Google I/O 2010 では、これに加えて

　・Search Bar

　・Companion Widget

　が紹介されている

　詳しくはこちら http://dl.google.com/googleio/2010/android-android-ui-design-patterns.pdf


　＊ Dashboard



　　"このアプリで何ができるのか？"
　　"新しくなったことはなにか？"

　　を表示

　　- Recommendations
　　　・ 3 - 6 個の重要なアプリセクションにフォーカス
　　　・ what's new にハイライトする
　　　・ Be flavorful （魅力的に！）ー ここが第一印象


　＊ Action Bar



　　"よく使うアクションをすばやく行う"
　　　・検索、リロードなど

　　- Recommendations
　　　・アプリのキーやアプリ全体のアクションを画面上にみせる
　　　・場所の感覚を伝えるのに役立つ
　　　・アプリ内で一貫して使う
　　　・'home'メカニズムを提供する - logo や 専用ボタン
　　　・状況に依存したアクションは使わない！！


　＊ Quick Actions



　　"このオブジェクトで何ができるのか？"


■ アイコンとガイドライン

　http://developer.android.com/quide/practices/ui_guidelines/icon_design.html

　新しいアイコンスタイル
　　・Tactile（触感）

　　・Rendered

　　・Forward Facing（正面向き）

　　・Top-lit（トップから照明）

　　・Synecdoche（提喩法、代喩：一部で全体を、
　　　または全体で一部を比喩で表現する方法）

　　・Diverse shapes, materials（さまざまな形状、質感）