デザイナに知っていて欲しい10個のAndroidのUIルール - ReDo

2011年6月25日

デザイナに知っていて欲しい10個のAndroidのUIルール

iPhoneのそれと比較して、よくかっこわるいと評価されてしまうAndroidですが、正しくは「標準UI同士で比べた際にイケてない」のが真実だと思っています。


今現実として、Androidアプリにイケてないものが多いのですが、そもそもデザインを考慮するプロセスが省略されてしまっていたり、時間(コスト)が無いとかそういうこともあったと思いますが、流石にこれだけメジャーなデバイスになってしまうとそれが許される時代は終わってしまいました。

ドットコム全盛期の様なGeocities+IBMホームページビルダーのデザインがはるか昔にキャハハされた様に、もうそろそろ標準UIで未カスタマイズのAndroidアプリもキャハハされる時代です。


そんな中、効率よくかっこいいUIを構築するために頭の片隅で把握しておくとちょっと幸せになれる、独断と偏見で捻りあげた10個のAndroidのUIルールを紹介します。

1. ステータスバーを消すのは最終手段。

画面上部のステータスバー(通知バー)を消すのは簡単ですが、Androidのいいところを色々不自由にしてしまうため、全画面動画/カメラプレビュー等の再生、次いでゲームでのみやむをえず許容されるべきで、なるべく避けてください。

android_ui_01.jpg android_ui_02.jpg

「タイトルバーをカスタマイズする」>「タイトルバーを消す」>「 ステータスバー(通知バー)を消す。」の順番に検討してください。

【Notificationはとっても便利で大事です】
Androidのド肝:ステータスバーに通知する(NotificationとNotificationManager)
http://blog.haw.co.jp/android/?p=332

android_ui_06.jpg
EverNoteのAction Barの例。

【タイトルバーの右上によく使う操作を入れ込むAction Barというのが最近の定番です】
Y.A.Mの雑記帳: Android UI Design Tips
http://y-anz-m.blogspot.com/2010/07/android-ui-design-tips.html


2. 標準UI部品は機能そのままカスタマイズが可能。

Form Widgetsと呼ばれる標準のUI部品は、機能そのまま画像や、フォントサイズ等をカスタマイズすることが可能です。
※ ホーム画面に配置することができるウィジェット(AppWidget)とは別物です。

android_ui_03.png android_ui_04.png android-ui-ics.png
上記キャプチャはいずれも同一コードの標準UI。左からGingerbread(2.3.x)、Honeycomb(3.x)、IceCreamSandwich(4.x)。

・画像は基本的に置き換えが可能。

・「押した際/離した際」「ToggleButton:ONの時/OFFの時」「有効な時/無効な時」それぞれの状態別の画像を、組み合わせごとに指定することが可能。

【XMLによる状態別ボタン画像の指定】
Android Wiki:ボタンの画像変更(CheckBox,RadioButton)
http://wikiwiki.jp/android/?%A5%DC%A5%BF%A5%F3%A4%CE%B2%E8%C1%FC%CA%D1%B9%B9(CheckBox%2CRadioButton)

・ProgressBarは標準で2段階のゲージに対応。
・SeekBarの背景やツマミ部分の画像ももちろん置き換えが可能。


3. アニメーションはそこそこできるけど部位によって使い勝手がバラバラでちょっと面倒。

・アプリ起動時・画面遷移時(Activity遷移時)アニメーションはデフォルト設定があって、それを変更することができる。

「スライドして次の画面」「拡大・縮小」「ふわっと透明から非透明にだんだん変化」とかそんな感じの画面遷移アニメーションは実現が可能です。ただし、(非力なAndroidデバイスを考慮して)設定でアニメーションそのものをオフにすることができるので過信は禁物です。有機的アニメーションの過剰導入は慎重に。

※UIを持つアプリの構成要素のことをActivityと言います。「≒画面」と考えてもらえればだいたいあってます。

【画面遷移時のアニメーションのカスタマイズ】
throw Life:ActivityのOpenとCloseをアニメーションさせる
http://www.adamrocker.com/blog/289/activity_open_close_animation.html


・オブジェクト(View)に対する平行移動・拡大/縮小・回転・透明度変更アニメーションがつけられる。

【エフェクトとしてのアニメーションは昔からきちんと揃っている】
@IT:Androidアプリで"アニメーション"するための基礎知識
http://www.atmarkit.co.jp/fsmart/articles/android20/android20_1.html

ただし、古いAnimation機能はあくまでエフェクトでしかなく、例えばButtonに設定してもヒット判定は別だったりします。移動先や移動途中でもヒット判定が追従する新しいアニメーションはAndroid 3.0で導入されました。


・gifアニメの様なコマ送りアニメーションもある。

【Frame Animationって言います。Tweenと組み合わせると良いローディング画面ができたりするよ。】
ソフトウェア技術ドキュメントを勝手に翻訳:View アニメーション
https://sites.google.com/a/techdoctranslator.com/jp/android/guide/graphics/view-animation#frame-animation

・これらは「Acvitiy Animation」「Tween Animation」「Frame Animation「Property Animation」って公式ドキュメントで書かれているけど名称と実態とクラス名があってないので分かりにくい。

# どうにかして!


4. スクロールバーはカスタマイズが可能、ただし画面端のびよーんは端末・バージョン差がけっこうある。

・スクロールバーは「常時表示するか」「レール部を含むサイズ・色」をカスタマイズ可能。

・分かりにくいけど、標準UIのスクロールの端には「ここから先まだスクロールができるよ」ということを示すフェード(影)が表示されている。ここの色も変更可能。

android_ui_7.png android_ui_8.png

・画面端びよーんは「勢いがついたらちょっとはみ出る(OverScroll)」がAndroid 2.3から対応。ただしHTCやSamsungは独自にそれ以前から対応している。

android_ui_05.png

Y.A.Mの雑記帳:Android Overscroll を使う簡単な方法
http://y-anz-m.blogspot.com/2011/01/androidoverscroll.html

・iOSにある「ゴムをある程度引っ張って戻したら」というのは標準UIにはない。


5. マルチタッチ・ピンチインアウト・左右フリックに基づく機能はちょっと特別なことをしようとすると泥臭い実装が必要で調整にはノウハウが居る。

・抽象的なジェスチャ動作の検出までは標準でサポートされているけど、これとUIがセットになってる便利な標準ライブラリはない

ハードキーや長押しをメインとする操作ポリシーに後付けで対応したせいか、今でも重要視されておらず、標準ギャラリー(OpenGLでがっつり書かれている)の様な3DのUIを実現するのは結構困難です。

# 電子書籍ビューアとか画像ビューア系のアプリのUIが比較して貧弱なのはこういう理由だよ!
# 先読みに対応した便利なライブラリが早く流行するといいですね!


6. ダイアログはカスタマイズが可能。

・標準のAlertDialogはそこそこ種類があり、独自のレイアウトを挟み込むことも可能。

ソフトウェア技術ドキュメントを勝手に翻訳:ダイアログの作成
http://www.techdoctranslator.com/android/guide/ui/dialogs

・見た目を変えたい際にはTheme・Styleを変更すればいい。

Androidメモ:カスタムボタンとカスタムダイアログ
http://www.saturn.dti.ne.jp/~npaka/android/CustomDialogEx/index.html

・イマイチいうことを聞かなかったら「見た目ダイアログの別画面」でいい。


7. MENUキーメニューはアイコン・文言だけ変えるのはカンタン、それ以上は自前でやった方がいい。

・MENUキーで下からヒョコっと出てくるOptionメニューはアイコン・文字の変更、もうちょっとカスタマイズして背景の変更まではさほど難しくない。

・配置や表示するものを大幅に変えたい際にはMENUキーをフックして自前で実装することになる。


8. ウィジェット・LiveWallpaper(動く壁紙)はユーザに近い(すぐ目に届く位置に配置できる)が、制限されている。

・ホーム画面に配置することができるウィジェットとLiveWallpaperは、通常のアプリほど自由ではない。

・ウィジェット:設計思想として頻繁な画面更新には向かない。使えるUI部品が限られている。ボタンは配置できるが操作をUIに書き戻すリアクトは苦手。

・LivewallPaper:描画能力は高い。タッチイベントは座標で取れる。OpenGLやpixel単位のDraw系APIによる表示領域いっぱいのベタ書きに向いている。


# どちらも複雑なものを安定させるほど作ったことがないのであんまり詳しくないです。ごめんなさい。


9. ホームアプリは暴君になったつもりで傲慢にやるべし。ただしユーザは自由に革命する。

・まれによく「HOMEキーを押したとしても勝手に終了されないアプリにしたい」と言われるが、必然的にホームアプリになる。

ホームアプリは「アプリランチャー」「設定へのジャンプ」「ウィジェット」「LiveWallpaper(動く壁紙)」を取り扱う機能を安定して提供する必要があるため、これらを満たした上で+αの快適さ・機能が無いと当然の様にクビにされます。

コンセプトデモとして作成する際にもそのあとのマーケティングにはご留意を...。


10. Androiderが他のプラットフォームを嫌うことは稀である。単に自分の恋人が魅力的で、しかし、じゃじゃ馬過ぎて他を見ている余裕が無くなるだけである。

僕と契約して、Androiderになってよ!

※追記1 2011.12.14
サービスを自社開発するのではなく、受託ベースのビジネスの際など、「そうそう都合よくAndroidのプロフェッショナルが揃っているはずはないよね」という前提のもと、プログラマとデザイナの意識あわせのための資料を別エントリで作成しております。

よろしければ合わせて参考にしてください。

プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
http://greety.sakura.ne.jp/redo/2011/08/uiandroid10.html

プログラマとデザイナが共有すべきUIに関するAndroidの10の機能・改
http://dl.dropbox.com/u/22653168/file/20111001_android_ui_dp10info_kai.pdf
※発表用資料としての修正版。少し内容は変わっています。

コメントする