タイルの一般的なレイアウト

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

レスポンシブで最適化されたデザインを作成する

デザイン レイアウトを大きな画面サイズに対応させるため、レイアウトとコンポーネントの動作を更新し、パーセントベースの余白とパディングなど、レスポンシブな動作を組み込みました。

ProtoLayout テンプレートを使用している場合は、Wear ProtoLayout Jetpack ライブラリの最新のベータ版リリースを通じて、これらの更新を自動的に継承できます。また、画面サイズのブレークポイントの後にコンテンツやコンポーネントを追加したレイアウトのみを指定する必要があります。大きな画面サイズを活用する方法に関する完全な ガイダンスと推奨事項については、 タイルのガイダンスをご覧ください。タイルの画面の高さは固定されているため、不要なクリッピングが発生しないように、限られた画面領域を最大限に活用できるようにパディングを調整しました。

コンポーネントが使用可能な幅を埋めていることを確認する

アダプティブで差別化されたデザインを作成する

大きな画面サイズで追加されたスペースを最大限に活用するには、225dp にサイズのブレークポイントを追加します。このブレークポイントを使用すると、追加のコンテンツを表示したり、ボタンやデータを追加したり、大きな画面に合わせてレイアウトを変更したりできます。

これには、ブレークポイントごとに異なるデザインが必要です。大きな画面のデザイン（225dp 以上）には、次の追加要素を含めることができます。

以前は非表示だったタイトル スロットを表示する

既存のコンポーネントのサイズを大きくするか、状態を変更する

現在のレイアウト内にコンポーネント スロットを追加する

下部に追加のコンテンツを追加する

レスポンシブでアダプティブな動作

レスポンシブでアダプティブな動作は、レイアウトの 3 つのスロット（セクション）によって異なります。

アプリアイコンとタイトル スロット

システムが提供するアプリアイコンの動作は変更されません。タイトル スロットは、画面サイズが大きくなると自動的に調整され、追加の文字が表示されます。画面サイズが大きくなってもクリッピングされないように、上部には比例（パーセント）の内部余白があります。

メイン スロット（コンポーネント）

メイン スロット内のすべてのコンポーネントは、画面サイズが大きくなると自動的に調整されるように、幅と高さを「expand」に設定する必要があります。画面サイズが大きくなってもクリッピングされないように、メイン スロット セクションと、場合によってはこのスロット内の各行に比例（パーセント）の内部余白があります。角の丸みとレイアウトを組み合わせて使用する場合は、メイン スロットに大きな余白が必要になることがあります。

下部スロット

下部のボタンやテキストの動作は変更されませんが、ボタンとテキスト ボックスの幅は画面サイズが大きくなると自動的に調整され、文字数が増えます。画面サイズが大きくなってもクリッピングされないように、下部スロットには比例（パーセント）の内部余白があります。下部スロットがない場合は、デフォルトの余白が自動的に追加されます。

差別化されたエクスペリエンスを作成する

完全にカスタマイズ可能なレイアウトが 1 つあり、60 以上の順列が組み込まれているため、実質的に無制限のカスタマイズが可能です。タイルはスロットベースのシステムで構築されているため、正規のレイアウトのスロットを任意のコンテンツやコンポーネントに置き換え、コンポーネントをさまざまなバリアントや色の組み合わせのいずれかに設定できます。この場合は、レスポンシブな動作を維持し、デザインに関する推奨事項に従ってください。

これらのカスタマイズは制限する必要があり、タイル テンプレートから逸脱しないようにしてください。これは、ユーザーが Wear OS デバイスでタイルのカルーセルをスクロールするときに一貫性を維持するためです。