Conceptos básicos de diseño de contenido para aplicaciones de WindowsContent design basics for Windows apps

El propósito principal de cualquier aplicación es proporcionar acceso a contenido.The main purpose of any app is to provide access to content. Como hay aplicaciones con distintas finalidades, el contenido adquiere diversas formas: en una aplicación de edición de fotos, la fotografía es el contenido; en una aplicación de viajes, los mapas y la información acerca de los destinos de viaje son el contenido, etc.Since apps exist for many different purposes, content comes in many forms: in a photo-editing app, the photo is the content; in a travel app, maps and information about travel destinations is the content; and so on.

Este artículo proporciona una introducción a cómo puedes presentar el contenido en tu aplicación.This article provides an overview of how you can present content in your app. Se describen patrones de página comunes y elementos de la interfaz de usuario que puedes usar para mostrar el contenido, sea cual sea la forma que tenga.We describe common page patterns and UI elements that you can use to display your content, whatever form it may be in.

Patrones de página comunesCommon page patterns

Muchas aplicaciones usan algunos o todos estos patrones de página comunes para mostrar diferentes tipos de contenido.Many apps use some, or all, of these common page patterns to display different types of content. De igual modo, no dudes en mezclar y combinar estos patrones para optimizar el contenido de la aplicación.Likewise, feel free to mix and match these patterns to optimize for your app's content.

Página de aterrizajeLanding

página de aterrizaje

Las páginas de aterrizaje, también conocida como pantallas prominentes, suele aparecer en el nivel superior de la experiencia de una aplicación.Landing pages, also known as hero screens, often appear at the top level of an app experience. El gran área de superficie actúa como una fase para que las aplicaciones resalten el contenido que los usuarios puedan querer explorar y consumir.The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.

ColeccionesCollections

galería

Las colecciones permiten a los usuarios examinar grupos de contenido o datos.Collections allow users to browse groups of content or data. La vista de cuadrícula es una buena opción para las fotos o el contenido centrado en multimedia, y la vista de lista es una buena opción para el contenido con mucho texto o datos.Grid view is a good option for photos or media-centric content, and list view is a good option for text-heavy content or data.

Maestro y detallesMaster/detail

Maestro/detalles

El modelo maestro y detalles consta de una vista de lista (maestra) y una vista de contenido (detalles).The master/details model consists of a list view (master) and a content view (detail). Ambos paneles son fijos y tienen un desplazamiento vertical.Both panes are fixed and have vertical scrolling. Hay una relación clara entre el elemento de lista y la vista de contenido: el elemento de la vista maestra se selecciona y la vista de detalles se actualiza en consonancia.There is a clear relationship between the list item and the content view: the item in the master view is selected, and the detail view is correspondingly updated. Además de proporcionar navegación por la vista de detalles, los elementos de la vista maestra pueden agregarse y quitarse.In addition to providing detail view navigation, items in the master view can be added and removed.

DetallesDetails

varias vistas

Cuando los usuarios encuentren el contenido que buscan, piensa en la posibilidad de crear páginas de visualización de contenido para que puedan ver la página sin distracciones.When users find the content they are looking for, consider creating a dedicated content-viewing page so that users can view the page free of distractions. Si es posible, crea una opción de vista de pantalla completa que expanda el contenido hasta llenar toda la pantalla y oculte todos los demás elementos de la interfaz de usuario.If possible, create a full-screen view option that expands the content to fill the entire screen and hides all other UI elements.

Para ajustar los cambios del tamaño de la pantalla, también podrías crear un diseño adaptativo que oculte o muestre elementos de interfaz de usuario según corresponda.To adjust for changes in screen size, also consider creating a responsive design that hides/shows UI elements as appropriate.

FormulariosForms

formulario

Un formulario es un grupo de controles que recopila y envía datos de los usuarios.A form is a group of controls that collect and submit data from users. La mayoría, si no todas las aplicaciones, usan algún tipo de formulario para las páginas de configuración, iniciar sesión en portales, los centros de comentarios, la creación de cuentas u otros fines.Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.

Elementos de contenido comunesCommon content elements

Para crear estos patrones de página, debes usar una combinación de elementos de contenido individuales.To create these page patterns, you'll need to use a combination of individual content elements. A continuación se facilitan algunos elementos de interfaz de usuario que se utilizan frecuentemente para mostrar contenido.Here are some UI elements that are commonly used to display content. (Para obtener una lista completa de los elementos de la interfaz de usuario, consulta controles y patrones).(For a complete list of UI elements, see controls and patterns.

CategoríaCategory ElementosElements DescripciónDescription
Audio y vídeoAudio and video

media transport control
Controles de transporte y reproducción de contenido multimediaMedia playback and transport controls Reproduce audio y vídeo.Plays audio and video.
Visores de imágenesImage viewers

flip view
Vista invertida, imagenFlip view, image Muestra imágenes.Displays images. El control de vista de volteo muestra una a una las imágenes de una colección, como las fotos de un álbum o los elementos de una página de detalles de un producto.The flip view displays images in a collection, such as photos in an album or items in a product details page, one image at a time.
ColeccionesCollections

list view
Vista de lista y vista de cuadrículaList view and grid view Presenta los elementos en una lista interactiva o una cuadrícula.Presents items in an interactive list or a grid. Usa estos elementos para permitir a los usuarios seleccionar una película de una lista de nuevos lanzamientos o administrar un inventario.Use these elements to let users select a movie from a list of new releases or manage an inventory.
Texto y entrada de textoText and text input

text box

Bloque de texto, cuadro de texto, cuadro de edición enriquecidoText block, text box, rich edit box

Muestra texto.Displays text. Algunos elementos permiten al usuario editar texto.Some elements enable the user to edit text. Para obtener más información, consulta Controles de texto.For more info, see Text controls.

Para obtener instrucciones sobre cómo mostrar texto, consulta Tipografía.For guidelines on how to display text, see Typography.

MapsMaps

map control
MapControlMapControl Muestra un mapa simbólico o fotorrealista de la Tierra.Displays a symbolic or photorealistic map of the Earth.
WebViewWebView WebViewWebView Representa contenido HTML.Renders HTML content.