Directrices para controles y patrones

En esta sección se proporcionan directrices de diseño para los controles y patrones de aplicación de Plataforma universal de Windows (UWP) en un solo lugar para facilitar el acceso y la referencia rápida.

  • Un control es un elemento de interfaz de usuario que hemos creado para ti. Puedes usarlos directamente o puedes personalizar su apariencia para ajustarla al estilo de la aplicación.

    El uso de nuestros controles te puede suponer un ahorro de tiempo al crear interacciones comunes. Funcionan correctamente sin necesidad de personalizarlos con todos los tipos de entradas. Al colaborar con un desarrollador, puedes hacer referencia a estos controles de tu diseño para, así, emplear una jerga común. Para obtener información de desarrollador sobre los controles, consulta la lista de controles (XAML) o la lista de controles (HTML).

  • Un patrón es un recibo que usa uno o varios controles para proporcionar un tipo específico de funcionalidad.
Nota   Todos los controles de esta sección se incluyen en las plantillas para Microsoft PowerPoint y Adobe Illustrator. Consulta Descargas para conseguir las plantillas.

En esta sección

TemaDescripción

Lienzo activo

Un patrón con un área de contenido y un área de comando de aplicaciones de vista única o experiencias modales, como visores y editores de fotos, visores de documentos, mapas, dibujo u otras aplicaciones que hagan uso de una vista de desplazamiento libre.

Cuadro de sugerencias automáticas

Un cuadro de entrada de texto que proporciona sugerencias como tipos de usuarios.

Botón Atrás

Un botón Atrás permite retroceder en la navegación.

Botón

Un botón, también conocido como botón de comando, da al usuario la posibilidad de desencadenar una acción inmediata.

Selector de fecha del calendario

Permite a los usuarios ver y establecer una fecha determinada o un intervalo de fechas.

Vista del calendario

Permite a los usuarios ver una fecha o un intervalo de fechas.

Casilla

Sigue estas directrices para agregar casillas a tu aplicación.

Barras de comandos

Las barras de la aplicación proporcionan a los usuarios acceso fácil a los comandos cuando los necesitan. Las barras de la aplicación también sirven para mostrar comandos u opciones que sean específicos del contexto del usuario, como el modo de dibujo o selección de fotos. También se pueden usar para ir de una página o una sección de la aplicación a otra.

Menú contextual

Un menú contextual muestra una lista breve de comandos y opciones que están disponibles para el usuario en el contexto actual.

Selector de fecha

El selector de fecha ofrece una forma estandarizada de permitir a los usuarios seleccionar una fecha localizada usando la entrada táctil, de mouse o de teclado.

Controles de diálogo

Los cuadros de diálogo son superposiciones de interfaz de usuario modales que solicitan una acción al usuario.

Listas desplegables

Una lista desplegable permite al usuario elegir valores mutuamente excluyentes de una lista.

Filtrar y ordenar

Los comandos de filtrado y ordenación permiten que el usuario decida cómo ver el contenido.

Invertir vista

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.

Control flotante

Un control flotante es un elemento emergente ligero que se usa para mostrar temporalmente opciones de la interfaz de usuario relacionadas con lo que el usuario esté haciendo en ese momento.

Concentrador

El control de navegación centralizada usa un patrón de navegación jerárquico para ser compatible con aplicaciones con una arquitectura de información relacional.

Hipervínculos

Directrices para agregar vínculos a tus aplicaciones de la Tienda Windows.

Etiquetas

Una etiqueta es el nombre o título de un control o grupo de controles relacionados. No proporciona ninguna funcionalidad.

Cuadro de lista (o selección)

Un cuadro de lista le ofrece al usuario la posibilidad de elegir uno (lo habitual) o varios elementos de una lista. Si no hay espacio para mostrar todos los elementos de una lista, es posible desplazarse por ellos.

Vista de lista y vista de cuadrícula

Directrices para agregar controles ListView a tu aplicación de la Tienda Windows con JavaScript.

Asignaciones

En el control de mapa se pueden mostrar mapas y vistas aéreas, indicaciones, resultados de búsqueda y el estado del tráfico.

Maestro y detalles

El patrón de maestro y detalles muestra una lista maestra y los detalles del elemento seleccionado actual. Este patrón se usa con frecuencia para listas de correo electrónico y contactos y para libretas de direcciones.

Reproductor multimedia

Reproduce audio y vídeo.

Cuadros de diálogo de mensaje

Un cuadro de diálogo de mensaje es un elemento de UI superpuesto que proporciona una superficie estable y contextual que siempre es modal y se descarta expresamente.

Panel de navegación

Proporciona navegación de nivel superior mientras conserva espacio de la pantalla.

Controles de progreso

Un control de progreso proporciona información al usuario sobre el hecho de que se está llevando a cabo una operación de ejecución larga.

Botón de radio

Los botones de radio permiten a los usuarios seleccionar una opción entre dos o más opciones

Clasificación

El control de calificación permite a los usuarios realizar una clasificación haciendo clic en un icono que representa una clasificación. Puede mostrar tres tipos de clasificaciones: una media, una provisional y la calificación del usuario.

Buscar

Buscar es una de las formas principales mediante las que los usuarios pueden buscar contenido en tu aplicación. Las instrucciones de este artículo tratan los elementos de la experiencia de búsqueda, los ámbitos de búsqueda, la implementación y los ejemplos de la búsqueda en contexto.

Zoom semántico

Un control de zoom semántico permite que el usuario haga zoom entre dos vistas semánticas distintas del mismo conjunto de datos.

Barra de desplazamiento

El movimiento panorámico y el desplazamiento permite a los usuarios acceder a contenido que se extiende más allá de los límites de la pantalla.

Control deslizante

Sigue estas directrices para agregar controles deslizantes a tu aplicación de la Tienda Windows.

Vista en dos paneles

Un control de vista en dos paneles tiene un panel expandible y contraíble y un área de contenido. El área de contenido siempre está visible. El panel puede expandirse y contraerse, o permanecer en un estado abierto, y puede presentarse desde el lado izquierdo o desde el lado derecho de una ventana de la aplicación. El panel tiene tres modos:

Pestañas y tablas dinámicas

Las pestañas y los controles dinámicos permiten a los usuarios navegar entre contenido al que se accede con frecuencia.

Selector de hora

El selector de hora proporciona una forma estandarizada de permitir a los usuarios seleccionar una hora localizada mediante entrada táctil, de mouse o de teclado.

Modificador para alternar

El modificador para alternar imita el comportamiento de un conmutador físico que permite a los usuarios activar o desactivar opciones. Usa estas directrices para agregar controles de modificador para alternar a tu aplicación de la Tienda Windows.

Información sobre herramientas

Usa información sobre herramientas para ofrecer más información sobre un control antes de pedirle al usuario que realice una acción.

Vista web

Un control de vista web incrusta en tu aplicación una vista con el aspecto y el comportamiento de Internet Explorer. En un control de vista web también pueden aparecer y funcionar hipervínculos.

 

 

 

Mostrar:
© 2015 Microsoft