Diseñar una página de la aplicación

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Puedes usar el modelo de diseño descrito en este artículo para diseñar elementos de interfaz de usuario en las páginas de tu aplicación. Seguir patrones coherentes para los márgenes, los encabezados de página, los márgenes internos y otros elementos de este tipo nos ayuda a mantener la unidad en las aplicaciones y permite a los usuarios comprender fácilmente las interacciones en todo el sistema.

La interfaz de usuario de Windows 8 trata de mantener una silueta coherente en todas sus aplicaciones. La firma característica de la silueta presenta un amplio margen en los bordes superior, inferior e izquierdo. Este amplio margen ayuda a los usuarios a comprender la dirección de movimiento panorámico horizontal del contenido.

Consulta estas características como parte de nuestra serie Características de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Uso del sistema de cuadrícula

Antes de describir la silueta de Windows 8, nos interesa que conozcas de qué se trata el sistema de cuadrícula de Windows 8. El sistema de cuadrícula es una herramienta de diseño que permite lograr una unidad visual a través de diferentes aplicaciones, al mismo tiempo que proporciona una estructura que hace posible la variación y mantiene al usuario interesado. El sistema de cuadrícula se basa en las plantillas para desarrolladores, y los controles y las colecciones se diseñaron con este sistema en mente.

La cuadrícula consta de unidades y subunidades. La unidad de medida básica es la unidad. Una unidad equivale a 20 × 20 píxeles. Cada unidad se divide, a su vez, en subunidades de 5 × 5 píxeles. Hay 16 subunidades por unidad cuadrada. La siguiente imagen ilustra la cuadrícula en la esquina superior izquierda de una pantalla. La imagen se agrandó para mostrar píxeles, subunidades y unidades.

Encabezado de página

La línea base del encabezado de página debe ser de 5 unidades, o 100 píxeles, desde la parte superior. El margen izquierdo para el encabezado de página es de 6 unidades, o 120 píxeles. El encabezado de página de Windows 8 es Conjunto de estilos SegoeUI 20, atenuado. Para más información sobre los conjuntos de estilos, consulta el tema sobre directrices y lista de comprobación para texto y tipografía.

Nota  En Windows 8.1 Update, los usuarios pueden mover el mouse al borde superior de la pantalla para que aparezca una barra de título. Los usuarios también pueden mover el mouse al borde inferior de la pantalla para que aparezca la barra de tareas del escritorio. Al alejar el mouse de estos bordes, la barra de título y la barra de tareas se ocultan. Los usuarios pueden hacer que aparezca la barra de título o la barra de tareas con un toque. Al aparecer, la barra de título y la barra de tareas pueden tapar la interfaz de usuario o los elementos de comando de tu aplicación, de modo que tenlo en cuenta al definir la posición de los elementos en el diseño de la aplicación.

Área de contenido

El área de contenido tiene un margen superior de 7 unidades, o 140 píxeles. El margen izquierdo es de 6 unidades, o 120 píxeles. El margen inferior es flexible. Para contenido con desplazamiento horizontal, no debe ser mayor a 6,5 unidades (130 píxeles) ni inferior a 2,5 unidades (50 píxeles). Para contenido con desplazamiento vertical, los márgenes superior e izquierdo permanecen igual. No se especifica el margen inferior porque el contenido se desplaza fuera de la pantalla.

Valores de espaciado interno horizontal

El espaciado interno horizontal entre elementos de contenido varía en función de los elementos. Los elementos de bordes marcados (como imágenes e iconos de usuario) tienen 2 subunidades, o 10 píxeles, de espaciado interno entre el icono y el texto adjunto. Las listas tienen 2 unidades, o 40 píxeles, de espaciado interno entre las columnas. Los elementos de bordes marcados tienen 2 subunidades, o 10 píxeles, de espaciado interno entre las columnas.

Valores de espaciado interno vertical

El espaciado interno vertical entre elementos de contenido también varía en función de los tipos de elementos. Los iconos y las listas de texto tienen 1 unidad, o 20 píxeles, de espaciado interno vertical entre los elementos de una fila. Los elementos de bordes marcados tienen 2 subunidades, o 10 píxeles, de espaciado interno entre los elementos de una fila.

Espaciado interno horizontal entre grupos

El espaciado interno entre grupos es de 4 unidades, u 80 píxeles. Este espaciado interno proporciona la separación suficiente para que el usuario distinga un grupo del siguiente con facilidad al desplazarse.

Temas relacionados

Directrices sobre la experiencia del usuario para diseño y escalado

Directrices y lista de comprobación para texto y tipografía