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

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

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

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

UX の原則

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

即時

予測可能

関連性が高い

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

ガイドライン

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

単一のタスクに集中する

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

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

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

タイル

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

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

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

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

タイル

適切なデータの更新頻度を使用する

デバイスのバッテリー駆動時間への影響を考慮して、タイルに適切な更新頻度を選択します。心拍数や歩数などのプラットフォーム データソースを使用している場合は、Wear OS が更新頻度を制御します。

空の状態

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

エラーまたは権限

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

ログイン

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

ダイアログの例

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

タイル

進行中のアクティビティを表示

アプリが長時間のアクティビティ(ワークアウトのトラッキングや音楽の再生など)を実行する場合、進行中のアクティビティの進行状況を複数のタイルに表示する必要があります。

これらのアクティビティを開始できるタイルをアプリがサポートしている場合は、ユーザーの混乱を最小限に抑えるために、次のことを行います。

  • 進行中のアクティビティがすでに実行中であることを示します。
  • ユーザーがそのようなタイルをタップした場合は、アプリを起動して進行中のアクティビティを表示します。進行中のアクティビティの新しいインスタンスを起動しないでください。

タイル

要件

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

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

タイルのモーション

タイルにアニメーションを追加する場合は、次の原則に留意してください。

変更についてユーザーが理解できるようにする

歩数グラフの進行状況など、タイルの情報を更新する場合に強調します。
値が誤って切り替わっています。

プレビュー

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

要件

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

レイアウト例

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

目標のトラッキング

ワークアウトを開始

ワークアウトを開始

ワークアウトを開始

ワークアウトの概要

タイマーを開始

現在の心拍数

心拍数

次のアラーム

瞑想

瞑想

ニュース

天気情報

次の予定

ソーシャル

メディアの再生