タイルのベスト プラクティス
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
黒地にデザイン
Wear OS では、黒い背景でデザインすることが重要です。その理由は次の 2 つです。
- バッテリーの効率: 画面上の各ピクセルが点灯すると電力を消費します。黒い背景を使用すると、アクティブなピクセルの数を最小限に抑え、バッテリーを長持ちさせることができます。
- シームレスな美しさ: 黒い背景により、スマートウォッチのベゼルが視覚的に最小限に抑えられ、デバイスの端まで連続したサーフェスがあるように見えます。このスペース内に UI 要素を配置すると、この効果がさらに高まります。
check_circle
すべきこと
背景色は常に黒に設定します。
cancel
すべきでないこと
背景を余白なしの画像またはブロックの色として設定しないでください。
必要な要素のみを追加する
有効にすると（ProtoLayout Material3 PrimaryLayout を使用するなど）、Wear OS では、ユーザーがタイル カルーセルをスクロールすると自動的に表示される、永続的なアプリアイコンが自動的に表示されます。アプリアイコンは、タイルの一部としてデザインして追加しないでください。
タイルに動的テーマ設定を使用する場合は、指定するアプリアイコンがモノクロであることを確認してください。ブランドのアプリアイコンを作成する方法については、Android プロダクト アイコンのガイドラインをご覧ください。
check_circle
すべきこと
Wear OS では、ユーザーがタイル カルーセルをスクロールするとアプリアイコンが自動的に表示される場合があります。タイルデザインにアプリアイコンを配置する必要はありません。
cancel
すべきでないこと
システム レベルでも表示される場合は、2 回表示されたり重なって表示されたりする可能性があるため、タイルデザインにアプリアイコンを追加しないでください。
アプリのタイトルを非表示にして最小タップ ターゲットを確保する
小さい画面でインタラクティブな要素に十分なスペースを確保するため、タイルが 2 行（および下部セクション）を使用する場合は、アプリのタイトルを非表示にできます。これにより、行の高さが十分に確保されます（48 dp 以上）。タイトルは、大きな画面（225 dp 以上）で再び表示できます。
check_circle
すべきこと
小さい画面では、2 つの行の高さとタップ ターゲットが 48 dp 以上になるように、アプリのタイトルは非表示になります。
cancel
すべきでないこと
小画面でアプリのタイトルを非表示にせず、2 行に表示する場合、コンポーネントの高さがユーザー補助の基準を満たしておらず、タップ対象の最小サイズを下回っています。
この例では、ボタンのスペースが 48 dp より小さいため、クリップされています。
強調する 1 つの主なユースケースを選択する
アプリの起動、アクティビティの開始、詳細情報の確認など、各タイルをどう操作すればよいかをユーザーにわかりやすく伝えるには、レイアウトにインタラクティブな要素を 1 つ以上含める必要があります。
check_circle
すべきこと
このタイルは、いくつかのオプションを表示し、さらに表示できる機能があるため効果的です。
cancel
すべきでないこと
このソリューションは、提供されるオプションが多すぎるため、ユーザーの意思決定を妨げてしまうため、ユーザーにとってあまり役に立ちません。
コンテナを 1 つ以上含める
アプリ内の各タイルに、少なくとも 1 つのコンテナ要素を含める必要があります。また、タイルは完全にタップ可能で、アプリ内の対応する画面にリンクされている必要があります。タイルの情報がコンテナ内に含まれている場合でも、別途表示されている場合でも、リンクされたコンテンツや利用可能なアクションを明確に伝える必要があります。
ボタンを使用する場合は、標準の設計規則に従い、ボタンの機能を明確に示してください。
check_circle
すべきこと
このタイルは、タップ アフォーダンスが明確であるため、ユーザーが提供されている各機能に対してアクションを実行できるため、効果的です。
cancel
すべきでないこと
このタイルは、ユーザーがコンテンツをタップして追加情報を表示できることが明確に示されていないため、効果が低くなっています
アクションをすぐに理解できるようにする
スマートウォッチでは、意味を伝えるための十分なスペースがないため、最も効果的なタイルは、簡単に予測できるインタラクティブなコンポーネントを備えています。
check_circle
すべきこと
優れたタイルは、利用可能なスペースを最大限に活用して、各アクションの結果を明確に伝えます。
cancel
すべきでないこと
このタイルのアクションが不明確です。アルバムアートが表示されたコンテナをクリックすると、ユーザーはどこに移動しますか？また、それは [再生] ボタンとは異なりますか？
視覚的にアクションの優先度を設定
タイルの最も重要なアクションをユーザーが理解できるように、インタラクティブ コンテナは視覚的に優先する必要があります。
- メインのアクション ボタンにはプライマリ カラーを使用します。
- セカンダリ アクションにセカンダリ/ターシャリ カラーを使用する
check_circle
すべきこと
このタイルは、トーン フィルスタイルを使用して、塗りつぶし（プライマリ カラーとセカンダリ カラーのロールを使用）と、下部にあるターシャリ ボタンのクリア ロールを組み合わせています。
cancel
すべきでないこと
このタイルに、塗りつぶしスタイルのボタンが過度に使用されており、さらにすべてがプライマリ カラーのロールを使用しています
コンテナを減らしてシンプルにする
タイルは、特定のアクションをトリガーするために複数のインタラクティブ コンポーネントを使用しないようにし、代わりに全体的なレイアウトをより少ないコンテナに簡素化するようにしてください。
check_circle
すべきこと
このタイルは複数のコンテナを使用しており、各コンテナはボタンとして機能し、タイマーの開始や新しいタイマーの作成などの特定のアクションを実行します。
cancel
すべきでないこと
すべての情報が同じ場所に移動するため、ここで 4 つのコンテナを使用する必要はありません。
機能的な目的でコンテナを使用する
タイル内の各コンポーネントの動作をユーザーが予測できるようにするため、何もしないタップが発生しないように、装飾や構造目的でコンテナを使用しないことをおすすめします。
check_circle
すべきこと
このソリューションは、タイルの唯一のアクションが作成フローであり、他のすべてのコンテンツが黒い背景に浮かんでいるため機能します。
cancel
すべきでないこと
このタイルは、ユーザーがすべてのコンテナを操作できると思われるため、より混乱を招きます。
グラフや表を容易に視認できるようにする
一目でわかることは、Wear OS のデザインにおいて重要です。画面表示時間は限られているため（約 7 秒）、重要な情報を優先して、ひと目で理解しやすい明確な形式で表示します。
スマートウォッチはスマートフォンを補完し、重要な詳細情報にすばやくアクセスできるようにします。
check_circle
すべきこと
数値情報や統計情報を容易に視認できるように表示し、ユーザーが必要に応じてアプリで詳細を確認できるようにする
cancel
すべきでないこと
タイルに詳細な数値情報や統計情報を表示する
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[null,null,["最終更新日 2025-07-27 UTC。"],[],[],null,["# Best practices for tiles\n\nDesign on black\n---------------\n\nDesigning on a black background is crucial for Wear OS for two key reasons:\n\n- **Battery efficiency:** Each pixel illuminated on the screen consumes power. By using a black background, you minimize the number of active pixels, extending battery life.\n- **Seamless aesthetics:** A black background helps to visually minimize the watch bezel, creating the illusion of a continuous surface that extends to the edge of the device. Containing UI elements within this space further enhances this effect.\n\n\u003cbr /\u003e\n\ncheck_circle\n\n### Do this\n\nAlways set the background color to black. \ncancel\n\n### Don't do this\n\nDon't set the background as a full bleed image or block color.\n\nInclude only necessary elements\n-------------------------------\n\nWhen opt-ed in (for example, using ProtoLayout Material3 PrimaryLayout), Wear OS will automatically display the permanent app icon, which will automatically display as the user scrolls through the Tile carousel. The app icon should not be designed and added as part of the Tile.\n\nEnsure the app icon provided is monochrome if you are having dynamic theming on your tile. Check Android product icon guidelines about how to create the app icon for your brand. \ncheck_circle\n\n### Do this\n\nWear OS may display the app icon automatically as the user scrolls through the Tile carousel. There is no need to put the app icon in the Tile design. \ncancel\n\n### Don't do this\n\nDo not add the app icon in the Tile design as it may appear twice/overlapped if also displayed at the system level.\n\nHide app titles to ensure minimum tap targets\n---------------------------------------------\n\nTo ensure enough space for interactive elements on smaller screens, the app title can be hidden when a Tile uses two rows (and a bottom section). This ensures the rows are tall enough (at least 48dp). The title can reappear on larger screens (225dp+). \ncheck_circle\n\n### Do this\n\nOn small screens, the app title is hidden to ensure the two rows have a minimum height and tap target of 48dp. \ncancel\n\n### Don't do this\n\nIf you do not hide the app title on small screen, and have two rows, the height of the components will not adhere to our accessibility standards, and be less than the minimum tap target size. In this example the space for the buttons is smaller than 48dp, so it clips.\n\nChoose a single primary use-case to highlight\n---------------------------------------------\n\nTo make sure users know what to do with each Tile - whether it's opening an app, starting an activity, or learning more - we need them to include at least one interactive element in their layout. \ncheck_circle\n\n### Do this\n\nThis specific Tile is effective because it provides a small collection of options, and then the ability to see more \ncancel\n\n### Don't do this\n\nThis solution is less helpful to user because it introduces decision paralysis because of too many provided options\n\nInclude (at least) one container\n--------------------------------\n\nEach tile in the app must contain at least one container element and be fully tappable, linking to a corresponding screen within the app. The Tile's information, whether contained within the container or presented separately, must clearly communicate the linked content or available action.\n\nIf buttons are used, they should adhere to standard design conventions and provide a clear indication of their function. \ncheck_circle\n\n### Do this\n\nThis Tile works well because the user can take action on each of the provided capabilities since they have clear tap affordances \ncancel\n\n### Don't do this\n\nThis Tile is less effective because it doesn't make it clear that the user can tap on the content to see additional information\n\nMake actions instantly understandable\n-------------------------------------\n\nExperiences on the watch don't have the luxury of having ample space to communicate their meaning, so the most effective Tiles have easily predictable interactive components. \ncheck_circle\n\n### Do this\n\nA successful TIle takes full advantage the space available to clearly communicate the outcome of each action \ncancel\n\n### Don't do this\n\nThe actions in this Tile are unclear---where does the container with the album art take the user, and is that different from the \"Play\" button?\n\nVisually prioritize actions\n---------------------------\n\nTo help users understand the most important action on a Tile, interactive containers should be visually prioritized.\n\n- Use primary colors on primary action buttons.\n- Use secondary/tertiary colors on secondary actions\n\ncheck_circle\n\n### Do this\n\nThis Tile uses a combination of filled (with primary and secondary color roles) with a clear tertiary bottom button role, using the tonal-fill style \ncancel\n\n### Don't do this\n\nThis Tile contains too many uses of filled style buttons, additionally all using the primary color role\n\nSimplify into fewer containers\n------------------------------\n\nTiles should seek to refrain from using more than one interactive component to trigger a specific action, and instead attempt to simplify the overall layout into fewer containers. \ncheck_circle\n\n### Do this\n\nThis tile is using several containers and each container acts as a button to perform a specific action like starting a timer or creating a new one \ncancel\n\n### Don't do this\n\nThe use of 4 containers here is unnecessary since all the information will navigate to the same location\n\nUse containers for functional purposes\n--------------------------------------\n\nTo ensure users can anticipate what each component within a Tile will do, we don't recommend using containers for decorative or structural purposes to avoid taps that don't do anything. \ncheck_circle\n\n### Do this\n\nThis solution works because the sole action of the Tile is a creation flow, and all other content is floating on the black background \ncancel\n\n### Don't do this\n\nThis Tile is more confusing because it seems like the user would be able to interact with all the containers\n\nShow glanceable representations of graphs and charts\n----------------------------------------------------\n\nGlanceability is key for Wear OS design. With limited screen time (around 7 seconds), prioritize essential information in a clear format, that's easy to understand at a glance.\n\nRemember, the watch complements the phone experience, providing quick access to key details. \ncheck_circle\n\n### Do this\n\nShow quick, glanceable representations of numerical or statistical information and allow the user to tap to see more in an app if needed \ncancel\n\n### Don't do this\n\nShow detailed numerical or statistical information on the Tile"]]
