ホーム‎ > ‎Patterns‎ > ‎

Widgets

ウィジェット


ウィジェットはホーム画面をカスタマイズする上で非常に重要な概念です。ウィジェットにより、ひと目でアプリの最も重要なデータを明らかにしたり、ホームスクリーンから直接データにアクセスすることができます。ユーザはウィジェットをホームスクリーン間で動かしたり、自分の好みにあわせてサイズを変更することができます。

デベロッパードキュメント
App Widgets


ウィジェットの種類
ウィジェットを考案する際には、構築するウィジェットの種類を考えてください。ウィジェットは通常は次のいずれかのカテゴリに分類されます。

情報ウィジェット
情報ウィジェットは一般的にユーザにとって重要な情報を示し、その情報が時間経過とともにどのように変わっていくかを表示します。情報ウィジェットとしては、天気ウィジェットや時計ウィジェットやスポーツスコアの追跡が挙げられます。情報ウィジェットにタッチすると、通常は関連するアプリが起動し、ウィジェット情報の詳細のビューを開きます。

コレクションウィジェット
名前が示すように、コレクションウィジェットは、ギャラリーアプリの画像のコレクションや、ニュースアプリの記事のコレクションや、連絡アプリのemail/メッセージのコレクションのような、同じタイプの多数の要素を表示するのに特化したウィジェットです。コレクションウィジェットは一般的に、コレクションを閲覧し、その詳細ビューにコレクションの要素を開いて使うという2つの使用法に焦点が当てられています。コレクションウィジェットは垂直方向にスクロールすることができます。
リストビューウィジェット
グリッドビューウィジェット

コントロールウィジェット
コントロールウィジェットの主な目的は、アプリを開くことなくホーム画面からアプリの重要な機能にアクセスできるようにすることです。アプリのリモコンと考えると良いでしょう。コントロールウィジェットの典型的な例として、音楽アプリの外からユーザに音楽の再生、一時停止、トラックのスキップができるようにする音楽アプリウィジェットが挙げられます。

検索ウィジェットと同様に、コントロールウィジェットとのやり取りは、ウィジェットの機能によりデータセットが生成されたかどうかによって、関連する詳細ビューに進むかどうかが定まります。

ハイブリッドウィジェット
すべてのウィジェットは、上記の3つのタイプのどれかに当てはまりますが、実際の多くのウィジェットは異なるタイプの要素を組み合わせたハイブリッドなものです。

ウィジェット設計の目的にあわせて、ウィジェットの基本的なタイプを決めた後、必要に応じて要素を追加してください。
例えば音楽プレイヤーウィジェットは主にコントロールウィジェットですが、現在再生中のトラックを表示することも同時に行います。これはコントロールウィジェットと情報ウィジェットの要素が組み合わされていることを意味します。

ウィジェットの制限

ウィジェットを「小さなアプリ」と捉えることもできますが、ウィジェットの設計に着手する前に理解しておくべき一定の制限があります。

ジェスチャ
ウィジェットはホーム画面に存在するので、そこで確立されたナビゲーションと共存しなければなりません。このため、フルスクリーンのアプリに比べて、ウィジェットで利用可能なジェスチャの種類が制限されます。例えば、アプリが画面間を横方向に移動するためのビューページャをサポートしているとしても、このジェスチャはホームスクリーンでホームパネル間を移動するためにすでに使用されています。

ウィジェットで利用可能なジェスチャ：
  • タッチ
  • 垂直スワイプ


要素
上記で示した操作の制限により、制限されたジェスチャに依存するUIビルディングブロックの一部は、ウィジェットとして使用することができません。サポートされるビルディングブロックの完全なリストやレイアウト制限のさらなる情報については、"Creating App Widget Layouts"セクションのApp Widgets APIガイドを参照してください。

デザインガイドライン

デザインの中身
ウィジェットは、「広告」（アプリ内でも特に目を引き、新しい興味深いコンテンツ）としてユーザーを引き付けるための素晴らしいメカニズムです。

ちょうど新聞一面の好奇心を掻き立てる広告のように、ウィジェットはアプリの情報を統合・集中し、リッチなアプリの詳細な情報を提供します。言い換えれば、言い換えれば、ウィジェットは情報のスナックであり、アプリは食事のようなものです。要点として、アプリは常に、ウィジェットが常時表示している情報よりも詳細な情報を表示することを確認してください。

ウィジェットのナビゲーション
純粋な情報コンテンツの他に、アプリの使用頻度の高い作業項目へのナビゲーションリンクを実装することを、ウィジェットを完成させるために検討すべきです。これにより、ユーザは迅速に作業を完了することができ、ホーム画面でのアプリの機能範囲が拡がります。

ウィジェット上に表示するナビゲーションリンクの候補を以下に示します。
  • 新規作成機能：これらは、ユーザが新しいドキュメントやメッセージのような、新しいコンテンツをアプリで作成するための機能です。
  • トップレベルのアプリを開く：画面上の情報を示す項目をタップすると、通常は詳細画面が表示されます。アプリのトップレベルへのアクセスを提供することで、よりナビゲーションが柔軟になり、主なアプリをホーム画面から開くための専用アプリのショートカットをウィジェットで置き換えることができます。

ウィジェットのリサイズ
バージョン3.1では、Androidはサイズ変更可能なウィジェットを導入しました。サイズ変更は、ユーザがホームパネルの配置グリッドの制約範囲内でウィジェットの高さと（または）幅の調整することができます。ウィジェットのサイズを自由に変更できるのか、水平・垂直方向のサイズ変更を制限するのかを決めることができます。特定のウィジェットが本質的に固定サイズである場合は、サイズ変更をサポートする必要はありません。

ユーザがウィジェットのサイズを変更できることには以下の重要なメリットがあります。
  • それぞれのウィジェットでどのくらい情報を見たいか微調整できます。
  • ホームパネル上のウィジェットやショートカットのレイアウトに良い影響を与えることができます。
長押しをして離すと、サイズ変更可能なウィジェットがサイズ変更モードになります。ユーザは希望するサイズを設定するために、ハンドルやウィジェットの角をドラッグすることができます。

ウィジェットのサイズ変更のやり方や設計は、作成するウィジェットのタイプに依存します。リストやグリッド形式のコレクションウィジェットは、垂直スクロールエリアを拡大または縮小するだけなのて、一般的にサイズ変更が簡単です。ウィジェットサイズにかかわらず、ユーザは今まで通りビュー内の全ての情報をスクロールすることができます。一方、情報ウィジェットはスクロールできず、すべてのコンテンツが所定のサイズに収まる必要があるので、より高度な設計が必要になります。設計者はユーザーが変更したサイズに合わせて、ウィジェットのコンテンツやレイアウトのサイズを調節する必要があります。


このシンプルな例では、ユーザは天気ウィジェットを水平に4段階でリサイズできます。ウィジェットのサイズに合わせて表示されている現在地の天気の情報が豊富になります。

各サイズのウィジェットにあわせて、情報をどのくらい表示するべきなのか決める必要があります。小さなサイズでは本質的な要素に集中し、ウィジェットの表示範囲の拡大に合わせて、さらにコンテキスト情報を追加します。

レイアウトの考慮
現在使用中で、開発を行っている特定のデバイスで、配置した時の寸法がぴったり合うレイアウトのウィジェットを使用したいと多くの開発者は考えるでしょう。これはウィジェットのレイアウトの大まかな概要を決めるには役に立ちますが、以下の点に留意してください。
  • 数、サイズ、セルの空白はデバイスごとに大きく異なります。そのため、ウィジェットが柔軟であることはとても重要で、予想よりも多いもしくは少ないスペースにウィジェットを適応させることができます。
  • ウィジェットのサイズを変更する際には、ウィジェットのサイズを自由に変更できるようにするよりも、デバイスのサイズに合わせてウィジェットのサイズを決めるやり方のほうが、より信頼出来る結果を得られるでしょう。

ウィジェットの設定
ユーザがウィジェットを使う前に、場合によってセットアップが必要になることがあります。例えばEmailウィジェットでは、受信トレイを表示する前にアカウントを提供する画面を表示する必要があります。また、写真ウィジェットでは、ギャラリーが表示される前に表示する写真を選択する必要があります。

ウィジェットがホームパネルに置かれた直後、Androidウィジェットは設定についての選択肢を表示します。ウィジェットの設定画面を分かりやすくするため、2～3以上の設定要素を表示してはいけません。たとえ複数のダイアログを使用することになっても、設定の選択肢の提示やユーザのコンテキストの場所を保持するために、フルスクリーンアクティビティの代わりにダイアログスタイルを使用します。

通常、一度セットアップすれば再度セットアップする必要性がほとんどないので、Androidウィジェットのセットアップが終わったあとには、「セットアップ」や「設定」ボタンを表示してはいけません。
ホームパネルにPlayウィジェットを追加した後、ウィジェットはユーザにウィジェットを表示するべきメディアタイプを指定するように要求します。

チェックリスト

  • ウィジェット上の、ひと目で見ることができる小さな部分に情報を集中させます。それをアプリ内の情報とリンクさせ、展開します。
  • 目的に合わせた適切なウィジェットのタイプを選択します。
  • サイズの変更が可能なウィジェットは、ウィジェットのコンテンツをどのように異なるサイズの端末に適応するべきかを考えて設計します。
  • ウィジェットの向きや、拡大・縮小可能なレイアウトを保証してデバイスに依存しないことを確認します。


原文はこちら > Widgets

Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.

Comments