2012年2月13日

Android アプリを美しくみせるUIデザイン10のヒント

20120212_photo.jpg
Androidアプリの開発で、デザインはとても重要なファクターです。
そこで今回は、Androidアプリにおける UI デザインのヒントを10個紹介します。

その1:最適なサイズのグラフィックを用意しよう
多くのAndroidアプリ開発者は「どのサイズのスクリーンでもそこそこ適合可能」なグラフィックを使いがちです。
しかし、ユーザーに対する視覚的なアピールという観点から考えれば、アプリの外見を最良のものにするには、デバイスのスクリーンサイズに合わせたグラフィックを用意しなければなりません。
アプリの実行時に、最適なサイズのグラフィックスがロードされてこそ、ベストなユーザー体験を提供できるのです。


その2:最適なフォーマットのグラフィックを用意しよう
グラフィックのファイルサイズが大きすぎるために、ファイルのロードで動作が一時停止してしまうアプリは少なからず存在します。
Androidプラットフォームは、PNG、JPEG、GIF、BMPなど、多くの画像フォーマットをサポートしています。
この中で、ロスレス画像イメージを提供する理想の画像フォーマットは「PNG」形式だ。
通常は、この形式のファイルを利用したいですね。

また、Android 4.0以降を対象に開発をするのであれば、ファイル形式はWebPを利用した方が良いでしょう。
これにより、アプリのファイルサイズを縮小し、Android Marketからのダウンロード時間を短縮することが可能となるためです。


その3:画面転換時には、アニメーションを活用しよう
画面の切り替え時にアニメーションを挿入したり、ボタンなどのUIコントロールでカラ―変更を上手に活用すると、利用者のユーザー体験は向上し、そのアプリがプロの手によるものだと感じてくれるようになります。
例えば、画面の切り替え時にフェードを利用すれば、利用者のいらいらを減らすことができます。
利用者がボタンを押したときにボタンのカラ―を変更するようにすれば、利用者は操作がアプリに伝わったことを実感しやすくなります。


その4:ボタンなどは角は丸めて、UIをソフトにしよう
ボタンやImageViewなどは、四角形が基本です。
しかし、角を丸めて、見た目の印象を柔らかなものにしましょう。


その5:コントラスト比の高い配色を採用しよう
アプリ開発においては画面の配色を誤り、目に負担をかけるアプリを製作してしまう人がいます。
画面の背景色には、コントラストの高いカラ―を利用し、画面が見やすいものになるよう心がけましょう。
システムリソースとして用意されているカラ―スキームを利用することから始めれば、間違いが少ないです。


その6:大きく読みやすいフォントを使おう
カラ―スキーム同様、読みにくいフォントをアプリで使用してはいけません。
フォントサイズも重要な要素です。
全体のデザインとのバランスを失わない範囲で、可能な限り大きなサイズのフォントを利用しましょう。
英文フォントであれば、12 ptより小さなサイズのフォントは使用しない方が良いですね。


その7:プラットフォーム標準からはそれないようにしよう
人気アプリのUIは、利用者が戸惑うことがないよう標準的な様式に沿って設計されています。
UIや画面のデザインをする際には、このような標準から外れたことをしない方が良いですね。
できるだけシンプルで、他のAndroidアプリと同じような動作をするものを設計しましょう。


その8:AndroidドキュメントのUIガイドラインに従おう

Androidドキュメントの「User Interface Guidelines」には、アプリで採用すべきUIガイドラインが示されています。
ですが、このガイドラインは、Androidのバージョンによって異なっていることがありますので、常に新しいものに更新していきましょう。


その9:UIのベータテストを実施しよう
アプリが安定してきたら、そのアプリをまったく知らない人にベータテストを依頼しましょう。
アプリの開発者や設計者は、自分の作ったアプリのUIが利用者にとってわかりやすいものだと思い込みがちです。


その10:プロのアーチストやグラフィックデザイナーの助けを借りることも検討しよう
最近の利用者は、アプリに対してより洗練され、プロフェッショナルな外見を求めるようになってきています。
そのため、プロのデザイナーの助けを借り、デザイン面でのアドバイスをもらうことも、場合によっては検討してみてはいかがでしょうか。

このエントリーをはてなブックマークに追加

トラックバックURL

このエントリーのトラックバックURL:
http://nexus-news.net/mt/mt-tb.cgi/437