Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os apps são uma das principais plataformas do Wear OS. Eles são
diferentes das complicações ou dos blocos, que são representações visíveis do conteúdo do app.
Os apps exibem mais informações e oferecem mais interatividade. Geralmente, o usuário
entra em um app quando vem de outra plataforma, como uma notificação, complicação, bloco
ou ação por voz.
Princípios
Tenha em mente os seguintes princípios ao criar apps:
Focada:dê prioridade a tarefas essenciais que ajudem as pessoas a executar ações em
segundos.
Superficial e linear:evite criar hierarquias com mais de dois níveis.
Procure mostrar o conteúdo e a navegação inline sempre que possível.
Rolar:os apps podem rolar. Esse é um gesto natural que os usuários fazem para conferir
mais conteúdo no relógio.
Diretrizes
Siga estas diretrizes ao criar apps.
Otimize o app para layouts verticais
Simplifique o design do app usando layouts verticais, que permitem que os usuários
rolem a tela em uma única direção para navegar pelo conteúdo.
check_circle
O que fazer
O objetivo do app é levar o usuário do ponto A ao ponto B.
cancel
O que não fazer
Não use dois tipos de rolagem, vertical e horizontal, em um mesmo app. Isso pode
confundir a experiência do usuário. A exceção são alguns casos de uso
específicos, incluindo a reprodução de mídia, que pode oferecer suporte à rolagem vertical e
horizontal.
Mostre a hora
Geralmente, os usuários passam bastante tempo em um app. Por isso, é importante incluir
um acesso rápido para visualizar a hora.
check_circle
O que fazer
Mostrar a hora na parte de cima do app, assim, o usuário poderá olhar sempre para um mesmo lugar.
cancel
Errado
Mostrar a hora em caixas de diálogo, telas de confirmação ou seletores, porque é provável que o usuário passe apenas alguns segundos nessas telas.
Para mais informações sobre design e uso, consulte
Marcação de hora.
Pontos de entrada inline acessíveis
Confira se todas as ações são exibidas inline, usando ícones e rótulos claros para
fins de acessibilidade. Isso inclui pontos de entrada para configurações e preferências.
check_circle
Certo
Usar ícones e rótulos sempre que possível.
cancel
Errado
Usar apenas ícones para solicitar ações do usuário.
Destaque as ações principais
Coloque as ações principais na parte de cima do app para ajudar os usuários a
realizar ações. Coloque as ações principais que não são não ambíguas na parte de cima do
app.
Use rótulos para orientar os usuários
Para apps maiores, use rótulos para ajudar a orientar o usuário ao rolar a tela para ver o
conteúdo.
check_circle
Certo
Usar quebras de seção, rótulos e outras indicações para organizar o conteúdo e ajudar a orientar o usuário ao rolar a tela em visualizações mais longas com conteúdo misto.
cancel
Errado
Adicionar rótulos para apps com um único tipo de conteúdo.
Mostre a barra de rolagem
Mostre a barra de rolagem se a visualização inteira rolar, conforme mostrado na imagem a seguir.
Para mais informações, consulte o Indicador de posição.
Contêineres de conteúdo
Veja os exemplos de contêiner de conteúdo a seguir.
Figura 1. Contêiner com altura fixa.
Figura 2. Contêiner com altura variável.
Figura 3. Contêiner com altura e largura maiores que a janela de visualização.
Figura 4. Contêiner paginado.
Figura 5a. Páginas de conteúdo que ocupam a dimensão total da tela e são
paginadas verticalmente.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-27 UTC."],[],[],null,["# App design principles\n\nAn app is one of the primary surfaces on Wear OS. Apps are different from\ncomplications or tiles, which are glanceable representations of app content.\nApps display more information and support richer interactivity. The user often\nenters an app from another surface, such as a notification, complication, Tile,\nor voice action.\n\nPrinciples\n----------\n\nKeep the following principles in mind when designing apps:\n\n- **Focused:** Focus on critical tasks to help people get things done within\n seconds.\n\n- **Shallow and linear:** Avoid creating hierarchies deeper than two levels.\n Aim to display content and navigation inline when possible.\n\n- **Scrolling:** Apps can scroll. This is a natural gesture for users to see\n more content on the watch.\n\nGuidelines\n----------\n\nFollow these guidelines when designing apps.\n\n### Optimize for vertical layouts\n\nSimplify your app's design by using vertical layouts, which allow users to\nscroll in a single direction to move through content. \ncheck_circle\n\n### Do\n\nThis app's goal is to take the user from point A to point B. \ncancel\n\n### Don't\n\nDon't use both vertical and horizontal scrolling, as this can make your app experience confusing. The exception is some specific use cases, including media playback, which can support both vertical and horizontal scrolling.\n\n### Show the time\n\nUsers tend to spend more time in apps, so it's important to provide\nquick access to the time. \ncheck_circle\n\n### Do\n\nDisplay the time at the top of the app, as this provides a consistent place for the user to view the time. \ncancel\n\n### Don't\n\nDisplay the time in a dialog, confirmation screen, or picker, as users are likely to spend only a few seconds on those screens.\n\nFor more information about design and usage, see\n[Time text](/training/wearables/compose/time-text).\n\n### Accessible inline entry points\n\nEnsure all actions are displayed inline, using clear iconography and labels for\naccessibility. This includes entry points to settings and preferences. \ncheck_circle\n\n### Do\n\nUse both icons and labels when possible. \ncancel\n\n### Don't\n\nRely solely on icons to prompt the user to take action.\n\n### Elevate primary actions\n\nHelp users take action in your app by pulling primary actions to the top of the\napp. Elevate non-ambiguous primary actions to the top of the app.\n\n### Use labels to orient users\n\nFor longer apps, help orient the user with labels as they scroll through the\ncontent. \ncheck_circle\n\n### Do\n\nUse section breaks, labels, and other cues to organize content and help orient users as they scroll through longer views with mixed content. \ncancel\n\n### Don't\n\nAdd a label for apps that contain a single content type.\n\n### Show the scrollbar\n\nShow the scrollbar if the entire view scrolls, as shown in the following image.\nFor more information, see [Position indicator](/training/wearables/compose/position-indicators).\n\nContent containers\n------------------\n\nSee the following examples of content containers.\n\n\n**Figure 1.** Container of fixed height. \n\n**Figure 2.** Container of variable height.\n\n\u003cbr /\u003e\n\n\n**Figure 3.** Container of height and width greater than the viewport. \n\n**Figure 4.** A paginated container.\n\n\u003cbr /\u003e\n\n\n**Figure 5a.** Content pages that take the full dimension of the screen and are\npaginated vertically. \n\n\u003cbr /\u003e\n\n| **Note:** Users find vertical layouts much easier to navigate than paginated UI's. Paginated UI's are best for situations when the user needs to navigate content using gross gestures, such as when working out or on the go. Because of this, they are generally used in workout and media app UIs."]]
