Androidアプリはどのように見えるべきですか？

Androidプラットフォームには、アプリケーションの外観と動作に関する厳密な推奨事項がありません。 Googleは当初から、何が受け入れられ、何が受け入れられないかを口述する計画はないことを明らかにしました。 UIの推奨事項のセットがありますが、それらは主にアイコン、ウィジェット、メニューなどのささいなことに集中しています。



プラットフォームの発売以来、何百もの異なるインターフェースのアイデアがあり、アプリケーションの外観は非常に多様でした。 プラットフォームが成熟し、アプリケーションの数が劇的に増加した今、Androidユーザーインターフェイスが形成されています。 いくつかのインターフェース機能が一般的になり、そのうちのいくつかはAndroid SDKライブラリーに組み込まれています。 すぐに、ユーザーはアプリケーションからのより一貫した作業を期待するようになります。 一部のコントロールと対話モデルは、Androidプラットフォームに統合されます。



この記事では、Android UIが通常より高いレベルでどのように機能するかを一般化したいと思います。 以前は多くのユーザーインターフェイスの原則について書いていましたが、それらは一般的なスキームから分離されていました。 次に、Androidアプリケーションをどのように表示すべきかについて私が考えていることを示すために、それらをまとめます。

アイスクリームサンドイッチ

Androidの最新バージョン（4.0）が最近リリースされました。 このリリースでは、これまでにない最大のカスタムプラットフォーム拡張セットが提供されました。 これらの変更は、将来のAndroidアプリの外観に自然に影響します。 一部の拡張機能は以前のバージョンに移植される場合がありますが、すべてではありません。 この記事では、主にAndroidアプリの現在の外観について説明します。 ICSインターフェースの進化がすぐに見られることを期待していますが、実際には、バージョン2.1から2.3のAndroidデバイスが約2億台あるという事実です。

アプリケーションのホーム画面

「コントロールパネル」インターフェイスの原理は、多くのアプリケーションで使用されています。 アプリケーションに複数のコア機能がある場合、これは非常に良い出発点になる可能性があります。 ダッシュボードには、アプリケーションの最も重要な機能が表示され、それらに簡単にアクセスできます。







コントロールパネルは、Androidアプリケーションのユーザーになじみのあるものです。 これは、アプリケーションが正しく使用されていれば、ユーザーにアプリケーションの最初の画面でくつろいでもらう確実な方法です。

アプリケーション共通画面

実際、アクティビティは多くの形式で表示されますが、一部の機能は非常に一般的になり、ユーザーはそれらを理解して期待することを学びました。 画面上部のアクションバーは非常に一般的で読みやすい概念です。

• 左上隅にあるのはアプリケーションアイコンで、メイン画面に戻ります。 クリックすると、ユーザーはアプリケーションのメインページに戻る必要があります。 新しいアクションパネルはユーザーをメインページに戻さないことに注意してください;代わりに、メニュー階層の1レベル上に遷移が行われます。
• アクションパネルの中央部には、画面の名前と商標の色、またはアプリケーションの現在のセクションの色が表示されます。
• 画面の右上隅には、この画面で実行できる最も重要なアクションのアイコンがあります。 同時に、画面のこの部分には、現在の画面のコンテンツに関連するアクションのみを含める必要があります。 検索機能はこのルールの例外になりました。

ActionBarSherlock （Jake Wharton）プロジェクトにより、アクションパネルを簡単に実装できます。

リスト

リストは、Androidユーザーインターフェイスの最も一般的なコンポーネントの1つです。 リストは、データを表示する場合、特にリストの大きさがわからない場合に非常に役立ちます。



リストには欠点があります。 リストの各要素は比較的小さく、リストの内容を簡単に表示できるようにする必要があります。 一方、小さな領域に多くの情報があると、ユーザーがリストを使用して、やり取りしたい要素を検索するのが非常に難しくなります。



Androidリストの一般的な動作方法に関するガイドがいくつかあります。 ユーザーは特定の要素や機能に慣れており、リストがこのように機能する場合、ユーザーは快適になります。

リスト画面のアクションバー。

リスト画面では、アクションバーを使用して、リスト全体に向けられたアクションを表示できます。 複数のリストアイテムに対する操作の画面上のアクションバーは、1つのリストアイテムに対するアクションを実行するときとは異なる必要があることに注意してください。

リスト項目とチェックボックス

原則として、要素のリストにはテキストといくつかのグラフィック要素が含まれます。 多くの場合、各要素にチェックボックスがあり、1つまたは複数のリストアイテムを選択して操作を実行できます。



リスト項目の左側にチェックボックスを配置すると、次の利点があります。

1. 選択した要素の左側にチェックボックスが表示されるのに慣れています。 これは、Web、デスクトップ、およびその他のモバイルアプリケーションに当てはまります。
2. アイテムの端にあるチェックボックスを使用すると、クリック用の大きな領域を作成できます。これにより、ユーザーはリストアイテムをクリックするか、1つのアイテムを選択するかを簡単に区別できます。
3. 要素の左側にあるグラフィカルコンポーネントは、1つの要素が終了し、別の要素が開始する視覚的なヒントを作成します。これにより、ユーザーはリストをすばやく簡単に表示できます。

二次制御

一部の要素には、単純な選択（チェックボックス）やナビゲーション（クリック）よりも相互運用性が必要です。 この要素の最も一般的な使用例は、評価管理またはブックマークです。 セカンダリコントロールの唯一の自然な場所は、要素の右端です。 他の場所は、場所の問題につながる可能性があります。







AldikoとGoogle Mailは、ナイスリストを使用するアプリの良い例です。 Aldikoは、右側のボックスをチェックすることにしました。これにより、視覚的にユーザーインターフェイスが不均衡になります。

無限のリスト

多くのリストには、ネットワーク経由でダウンロードされるアイテムが含まれています。 この状況では、ダウンロードプロセスに時間がかかる可能性があり、ユーザーがリストをスクロールするほど速くリストを埋めることができません。 ユーザーがリストの最後に達した場合、アプリケーションは次のアイテムのダウンロードを自動的に開始します。 このインジケータは、次にロードされるアイテムがリストの最後にあることをユーザーに伝えます。 たとえば、いくつかの種類のアニメーションの読み込みを含めると、進行状況インジケーターをお勧めします。 アニメーションにより、ユーザーはデータのロードが進行中であることを理解できます。







AndroidマーケットとTwitterは、リストの最後に到達すると、複数のアイテムを自動的にダウンロードします。

要素に対するアクション-長押し-クイックアクション

画面の上部に移動することなく、リストの1つの要素で操作を実行できるようにする必要があります。



電話やタブレットコンピューターにはマウスを右クリックする機能がないため、タッチスクリーンの「右クリック」の詳細は進化しています。 要素を長押しすると、現在の要素に対して操作を実行したいことがユーザーに明確になります。



リストアイテムのアクションを表示する「クイックアクション」と呼ばれるユーザーインターフェイスモデルがあります。 元のグラフィカルなアプローチの使用はほぼ消滅しましたが、本質は変わりません。 これは、非常に単純なアクションのリストを表示するメニューオーバーレイの形式です。 通常は3〜5です。 アクションが視覚的にどれだけ速く実現されるかに関係なく、次のことに留意してください。

• 選択したアイテムを閉じないでください！ 特に、ユーザーが削除操作を実行する場合。 ユーザーは、アイテムを常に表示している場合、アクションに自信があります。
• 単純なアクションのみを表示します。 複雑な相互作用を必要とするものはすべて、クイックアクションよりも別の画面で処理する方が適切です。

Aldiko、Asto File Manager、およびGoogle+は異なる視覚スタイルを使用します。 すべての場合において、これらのアクションは画面要素を長押しすると表示されます。



AldikoとAstroは良いデザインの例ですが、Google +はシンプルなポップアップを使用しているため、ターゲット要素を隠すルールを破ります。 将来のバージョンでこの欠点を修正することを願っています。

複数のアイテムに対するアクション

リストにチェックボックスコントロールが含まれている場合、ユーザーは複数のアイテムを選択できます。 複数のアイテムを選択する場合、ユーザーは選択したすべてのアイテムに対して一度にアクションを実行できます。



複数の要素のアクションを処理する一般的な方法は、選択したすべての要素のすぐ上に可能なアクションのボタンがある画面の下部にパネルを追加することです。 優れた滑空アニメーションは、ユーザーインターフェイスに滑らかさと洗練を追加します。 最後の選択が削除されるか、アクションが完了すると、パネルは自動的に非表示になります。







AldikoとGMailは、選択した要素の操作方法の良い例です。 両方のアプリケーションは、下部パネルが表示されたときに良好なスライドアニメーションを持ちます。 また、Aldikoはインポートボタンに数字を追加し、ユーザーが選択したアイテムの数を示します。 これは非常に便利な追加機能ですが、すべての場合に当てはまるわけではありません。

その他のリスト情報

リストの操作の技術的な詳細については、次の2つの優れたシリーズの記事を参照してください。



Androidのマークアリソンのスタイリング：

ListView-パート1

リストビュー-パート2

リストビュー-パート3

リストビュー-パート4



AndroidDevBlogのCyril Mottier：

ListViewのヒントとコツ＃1：空の処理

ListViewのヒントとコツ＃2：ListViewをセクション化する

ListViewのヒントとコツ＃3：派手なListViewを作成する

ListViewのヒントとコツ＃4：クリック可能な領域をいくつか追加する

タブ

多くのアプリケーションは、何らかの形でタブを使用して、ユーザーがページ間を移動するのを支援します。 AndroidバージョンのHoneycomb（3.0）とIce Cream Sandwich（4.0）は、タブの動作と外観をわずかに変更しました。 私の意見では、動作するバージョンに関係なく、すべてのアプリケーションでこの技術革新を使用する必要があります。



私は最近この記事でICSについて書いたので、ここでは内容を繰り返しません。 簡単に言うと、タブ間を移動する方法が変更されました。 アプリケーションがタブを使用する場合、ユーザーは指をスワイプするだけでタブ間を移動できることを期待しています。







スライドを使用してタブ間を移動するアプリの良い例は、AndroidマーケットとGoogle+です。





Mark Allisonは、このトピックの技術的な実装に関するいくつかの優れた記事を書いています。

ViewPager-パート1

ViewPager-パート2

ViewPager-パート3



Jake Whartonのプロジェクトは、タブの操作方法を示しています。

GitHubのViewPagerIndicator

おわりに

Androidは急速に成熟した一貫したプラットフォームになりつつあります。 アプリケーションの外観と動作は互いに似たものになり始め、ユーザーはユーザーインターフェイスとの特定の対話を期待し始めます。 公式の推奨事項はありませんが、最も有名なアプリケーションを詳しく見ると、何をすべきかをよく理解できます。



PS記事は少し埃っぽいですが、役に立つと思います。