酢ろぐ(ch3cooh.jp)

Google I/O 10で発表された5つのAndroidのApplication UIデザイン

Android

未だにピンとくるAndroidアプリのUIが思いつきません。AndroidではアプリのUIに統一感が無く、メーカー製のアプリも標準アプリとは異なるデザイン感のUIになっています。

普段仕事ではiPhone、プライベートではWindows Phone7とそれぞれの世界観があるプラットフォームで開発を行っているので、ある程度定石というか及第点を貰える様なUIを提案出来るようになっておきたいわけです。

UIの統一性がないのはWindows Mobile自体に苦労してきたので悶々と悩んでいます。この頃Facebookや勉強会の懇親会でAndroidのアプリUIのベストプラクティスについて質問する事が多くてすみません・・・

色々と探していると、FacebookやTwitter for Androidでも採用されていると思われる5つのAndroidのApplication UIデザインガイドを見つけました。Google I/O 10で発表されたもののようです。

Android UI design patterns

Dashboard

アプリのホーム画面にあたるもの。パッと見て、このアプリではどういうことが出来るのかが一目で判りやすいです。

Action Bar

その画面での使用頻度の高いアクションを行うボタンが付いたバーを画面上部に配置します。Action Barに置くアクションとして最適なのは「検索」「更新」「新規作成」。このうち「新規作成」はTwitterアプリで言えば「ツイート」に当たります。

Androidではハードキーを押下するとMenuを表示する事が出来るので、iPhoneの様に画面下部にツールバーを置いて、ボタンを並べるのは割けた方が良い。そういう意味で言うと、iPhoneでいうところのNaviBarの右ボタンとかToolbarのボタンに当たるのかなと思う。

Quick Actions

ListViewに並ぶアイテムのうち選択したアイテムに対してのアクションを行うのが「Quick Actions」。

Twitterアプリで言えばリストに並んだツイートをRTしたりFavったりするところ

Search Bar

検索を行う画面のUI。例のようにfriendsとReviewsと検索対象を切り替える場合は、ポップアップを画面上部に固定してしまった方が良さそう。

個人的には左上にボタンを設けるのは、手の小さい方が押し辛い位置にあるのであまり好きじゃないんだけど・・・

Companion Widget

ホームにWidgetとして並べる場合のUI(直近では使わなさそうなので割合)。

iPhoneアプリでは標準アプリという、お手本が用意されており、UIレイアウトはほぼ決まっています。またUIレイアウトのサポートがフレームワークとして行われています。決まった通りに組めば、それっぽく見えるようになります。（Windows Phone 7は、Silverlith Toolkitを使わないと話にならない所もあるので準標準的かな）

Androidアプリ開発を趣味でやっている方は、おそらくiPhoneのその「窮屈感」が嫌がりそうだから、声高に叫びにくいんだけど、もう少しフレームワークとしてUIレイアウトのサポートがされていると嬉しいんだけどなぁ……

モヤモヤしていたAndroidアプリのUIについてですが、なんとなくUI設計が見えてきた気がします。もう少し自分の中で煮詰めてみたいと思います。

そうそう、Androidアプリのレイアウトについて詳しく書かれた本は、僕が書店で探した限りでは「Android Layout Cookbook」がおススメでした。

Android Layout Cookbook アプリの価値を高める開発テクニック
	あんざい ゆき インプレスジャパン 2011-03-11 売り上げランキング : 10805 Amazonで詳しく見る by G-Tools

追記

「Twitter for Android」を参考にして、上記のデザインガイドを紹介しているブログを見つけましたので紹介します。

Twitter for Android: A closer look at Android’s evolving UI patterns | Android Developers Blog

ツイートする

Permalink | コメント(0) | トラックバック(0) | 00:35