タイルの設計ガイドライン

タイルは Wear OS で最もアクセスが容易なサーフェスの一つです。

タイルを使用すると、ユーザーは、作業を数秒で完了するうえで必要な情報やアクションに容易にアクセスできます。ウォッチフェイスをスワイプするだけで、フィットネスの目標達成度や天気情報などを確認できます。タイルからアプリを起動したり、重要なタスクをすばやく実行したりできます。

ユーザーはスマートウォッチで表示するタイルを選択できます。Wear OS では、スマートウォッチとコンパニオン アプリの両方でタイルを管理できます。

UX の原則

次の表に、タイルの UX の原則を示します。

即時

予測可能

関連性が高い

タイルは、ユーザーが頻繁に行うタスクをすばやく完了できるように設計されています。重要なコンテンツを明確な情報の階層で表示し、コンテンツの理解を容易にします。 各タイル内のコンテンツは常にユーザータスクに焦点を当てています。これにより、ユーザーはタイルに表示される情報を予測でき、想起しやすくなります。 ユーザーは、外出時にスマートウォッチを着用します。タイル内のコンテンツがユーザーのコンテキストにどのように関連しているかを考慮します。

ガイドライン

タイルを作成する際は以下のガイドラインを念頭に置いてください。

単一のタスクに集中する

各タイルを、ランニングを開始などの単一のタスクにフォーカスする。
1 つのタイルで大量の異なるタスクをサポートする。

タスクごとに個別のタイルを作成する

アプリで複数のタスクをサポートする場合は、タスクごとに複数のタイルを作成することを検討してください。たとえば、フィットネス アプリでは、目標タイルとワークアウト アクティビティ タイルの両方を作成します。

タイル

グラフや表を容易に視認できるようにする

数値情報や統計情報を容易に視認できるように表示し、ユーザーが必要に応じてアプリで詳細を確認できるようにする。
タイルに詳細な数値情報や統計情報を表示する。

最新のデータ更新日時を示す

スマートウォッチに表示されているデータがいつの時点のものかをユーザーがわかるようにします。ユーザーに関連する情報の場合、キャッシュされたデータを表示する際に、最新の更新日時を合わせて表示します。

タイル

空の状態

タイルには空の状態が 2 種類あります。どちらの場合も、PrimaryLayout を使用することをおすすめします。

エラーまたは権限

タイルから設定を更新する必要があることをユーザーに伝えます。

ログイン

ログインタイルに明確な行動を促すフレーズを表示します。

ダイアログの例

ダイアログの状態を使用して、エラー、権限、設定を確認する。

タイル

進行中のアクティビティ タイル

進行中のアクティビティ タイルの状態は、アプリのアクティブな部分の状態を表します。これらのタイルは、標準のアプリタイルを置き換えることで、起動が繰り返されないようにします。

タイル

要件

アニメーション アイコン
アクティビティのウォッチフェイスに表示されるアイコンに対応します。

プライマリ データ
アクティビティの説明に関するメイン コンテンツです。

ラベル
アクティビティのステータスを表示します。

プレビュー

タイルのプレビューを追加すると、スマートウォッチやスマートフォンのタイル マネージャーに表示されるコンテンツをユーザーが確認できるようになります。各タイルに 1 点ずつ、代表的なプレビュー画像を配置できます。使用する画像は次の要件を満たす必要があります。

要件

  • 400 x 400 ピクセルのアセットをエクスポートします。
  • 円形と正方形の両方のプレビュー画像を用意します。
  • 黒一色の背景を使用します。
  • PNG または JPEG として保存します。
  • アプリの主要言語のローカライズ済みアセットを追加します。
スマートウォッチのタイル マネージャーに表示されたタイルのプレビュー。 スマートフォンのタイル マネージャーに表示されたタイルのプレビュー。
タイルにコンテンツが含まれているプレビューを表示する。
空の状態を表示する、ページネーション UI にタイルアイコンを表示する、タイルの周囲にストロークを配置する。

レイアウト例

デザインのベスト プラクティスを用いた、タイルの一般的なユースケースを以下に示します。詳しくはタイルをご覧ください。

目標のトラッキング

ワークアウトを開始

ワークアウトを開始

ワークアウトを開始

ワークアウトの概要

タイマーを開始

現在の心拍数

心拍数

次のアラーム

瞑想

瞑想

ニュース

天気情報

次の予定

ソーシャル

メディアの再生