Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Una app es una de las plataformas principales de Wear OS. Las apps son diferentes de las complicaciones o tarjetas, que son representaciones visibles del contenido de una app.
Las apps muestran más información y admiten una interactividad más enriquecida. El usuario suele ingresar a una app desde otra plataforma, como una notificación, complicación, tarjeta o acción de voz.
Principios
Ten en cuenta los siguientes principios cuando diseñes apps:
Enfocado: Enfócate en las tareas esenciales para ayudar a los usuarios a completar tareas en segundos.
Superficial y lineal: Evita crear jerarquías de más de dos niveles.
Intenta mostrar contenido y navegación intercalados cuando sea posible.
Desplazamiento: Las apps pueden desplazarse. Este es un gesto natural para que los usuarios vean más contenido en el reloj.
Lineamientos
Sigue estos lineamientos cuando diseñes apps.
Optimiza para diseños verticales
Simplifica el diseño de tu app usando diseños verticales, que permiten a los usuarios desplazarse en una sola dirección para moverse por el contenido.
check_circle
Qué debes hacer
El objetivo de esta app es llevar al usuario del punto A al punto B.
cancel
Qué no debes hacer
No uses el desplazamiento vertical y horizontal, ya que esto puede confundir la experiencia de tu app. La excepción son algunos casos de uso específicos, incluida la reproducción de contenido multimedia, que puede admitir el desplazamiento vertical y horizontal.
Muestra la hora
Los usuarios suelen pasar más tiempo en las apps, por lo que es importante proporcionar un acceso rápido a la hora.
check_circle
Qué debes hacer
Muestra la hora en la parte superior de la app, ya que es un lugar coherente para que el usuario pueda verla.
cancel
Qué no debes hacer
No muestres la hora en un diálogo, una pantalla de confirmación ni un selector, ya que posiblemente los usuarios solo pasen unos segundos en ellas.
Para obtener más información sobre el diseño y el uso, consulta Texto de la hora.
Puntos de entrada intercalados accesibles
Asegúrate de que todas las acciones se muestren intercaladas con iconografías y etiquetas claras para la accesibilidad. Esto incluye puntos de entrada a la configuración y las preferencias.
check_circle
Qué debes hacer
Utiliza íconos y etiquetas cuando sea posible.
cancel
Qué no debes hacer
No uses únicamente íconos para solicitarle al usuario que realice una acción.
Mejora las acciones principales
Para facilitar que los usuarios realicen acciones en tu app, arrastra las acciones principales hacia la parte superior de la app. Destaca las acciones principales no ambiguas en la parte superior de la app.
Usa etiquetas para orientar a los usuarios
Para apps más largas, ayuda a orientar a los usuarios con etiquetas mientras se desplazan por el contenido.
check_circle
Qué debes hacer
Usa saltos de sección, etiquetas y otros elementos para organizar el contenido y orientar a los usuarios mientras se desplazan por vistas más largas con contenido mixto.
cancel
Qué no debes hacer
No agregues una etiqueta para las apps que contengan un solo tipo de contenido.
Muestra la barra de desplazamiento
Muestra la barra de desplazamiento si se desplaza toda la vista, como se muestra en la siguiente imagen.
Para obtener más información, consulta el Indicador de posición.
Contenedores de contenido
Consulta los siguientes ejemplos de contenedores de contenido.
Figura 1: Contenedor de altura fija
Figura 2: Contenedor de altura variable
Figura 3: El contenedor de altura y ancho es mayor que el viewport
Figura 4: Un contenedor paginado
Figura 5a: Son páginas de contenido que ocupan toda la pantalla y se paginan de forma vertical.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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."]]
