Diseño dinámico y factores de forma

Las aplicaciones de la Tienda se encuentran en casa en equipos de escritorio, equipos portátiles, tabletas y teléfonos. Diseña tu aplicación para que se ajuste como un guante a los distintos factores de forma. Los usuarios pueden alternar entre diferentes dispositivos, cambiar el método de entrada, cambiar la orientación de la pantalla o apagar y encender todo, y la aplicación deberá moverse, cambiar y reaccionar con ellos.

Vistas fluidas de la aplicación

Con Windows, los usuarios están al mando. Deseas que la interfaz de usuario de la aplicación destaque en cualquier dispositivo, con cualquier modo de entrada, en cualquier orientación, en cualquier circunstancia en la que el usuario decida usarla.

Si diseñas la aplicación con vistas fluidas, la interfaz de usuario de la aplicación se redistribuye naturalmente en respuesta a los cambios de la orientación del monitor del usuario, su dispositivo móvil o el método de entrada. Windows administra estos comportamientos por ti.

Orientación

Horizontal   Diseña primero la vista horizontal para que tu aplicación se vea bien en todos los factores de forma. Ten en cuenta el modo en que los distintos factores de forma influyen en la vista horizontal. Los nuevos tipos de diseño pueden implicar cambios en la superficie de la pantalla.

Vertical    Recuerda que algunos dispositivos se usan más frecuentemente en orientación vertical, y que muchos dispositivos giran. Optimiza el diseño del contenido en vista vertical y conserva la funcionalidad siempre que sea posible. Al cambiar de la vista horizontal a la vertical, el ancho de la aplicación se reduce a casi un tercio, así que es importante que tengas en cuenta el aspecto que tendrá el diseño en formato vertical.

Diseño fluido con varias aplicaciones:

Windows: diseña tu aplicación para dar cabida a la flexibilidad de las ventanas que se pueden cambiar de tamaño. La clave de una buena apariencia (independientemente de cómo se cambie la aplicación de tamaño) reside en definir diseños para vistas únicas y concretas y emplear controles flexibles que dispongan y distribuyan el contenido automáticamente.

Escala gráfica integrada

Si los usuarios puede acceder a la aplicación en varios factores de forma, ¿esto significa que tienes que diseñar una UI diferente para cada posible tamaño de pantalla con el que trabaje Windows? ¡Las posibilidades son muchísimas! La respuesta es: no necesariamente. Escala integrada significa que la aplicación y el contenido siempre se ven genial, ya sea en un dispositivo pequeño de 7" o en un monitor grande de 30". Simplemente tienes que usar un diseño fluido y asegurarte de que los gráficos de la aplicación se vean bien al ampliarse.

Para obtener más información, consulta Directrices sobre escalado a la densidad de píxeles.

Patrones de entrada:

Windows: si diseñas una aplicación para interacciones táctiles, obtienes soporte para interacciones de lápiz, mouse y teclado de forma gratuita. Los usuarios pueden pasar de un método de entrada a otro sin perder ni un ápice de la experiencia de la aplicación. ¿Deseas conectar el teclado a una tableta? No hay ningún problema. La aplicación responde de manera coherente y predecible a las elecciones de los usuarios.

Para obtener más información, consulta Diseño de interacción táctil y Responder a la interacción del usuario.

Funcionalidades del dispositivo

Las grandes aplicaciones aprovechan al máximo los dispositivos en los que se ejecutan. Windows 8.1 ofrece compatibilidad integrada para estas funcionalidades de dispositivos.

	Acelerómetros y otros sensores  Hoy en día, los dispositivos vienen con diversos sensores. La aplicación puede atenuar o iluminar la pantalla según la luz ambiental, cambiar la distribución de la interfaz de usuario si el usuario gira la pantalla o reaccionar a un movimiento físico. Obtén más información sobre los sensores.
	Ubicación geográfica   Usa la información sobre la ubicación geográfica de datos web estándar o de sensores de ubicación geográfica para que los usuarios puedan desplazarse, encontrar su posición en un mapa u obtener avisos sobre personas, actividades o destinos cercanos. Obtén más información sobre la ubicación geográfica.
	Cámaras   Conecta a los usuarios con sus cámaras integradas o conectadas para conversar, realizar conferencias, grabar vídeo blogs, tomar fotografías del perfil, documentar hechos del mundo que los rodea o cualquier otra actividad para la que destaque la aplicación.
	Proximidad   Permite que los usuarios conecten dispositivos tocándolos físicamente al mismo tiempo, para mejorar las experiencias en las que esperas que haya varios usuarios físicamente próximos (juegos multijugador). Obtén más información sobre los gestos de proximidad.

Cuando planees las características de tu aplicación, ten en cuenta los dispositivos en los que podría ejecutarse. ¿Se necesita alguna funcionalidad del dispositivo para que la aplicación funcione correctamente? ¿O puedes arreglártelas sin ellas? En el manifiesto de la aplicación debes declarar qué funcionalidades admite tu aplicación, pero en la aplicación misma puedes crear reservas para capacidades opcionales. Por ejemplo, supongamos que una aplicación de mapas para viajes permite a los usuarios hacer un seguimiento de sus viajes en el mapa, etiquetar sitios, incluir comentarios de bitácora, enviarlos a los medios sociales y agregar fotografías o vídeos del viaje. La ubicación geográfica sería una funcionalidad obligatoria, pero la compatibilidad con la cámara podría ser opcional. Si el dispositivo no tiene cámara, los usuarios podrían cargar vídeos o fotografías tomadas en otro dispositivo. Las grandes aplicaciones cubren todas las opciones.

Datos de movilidad

¿Qué sucede si los usuarios pasan del equipo de escritorio de la oficina a la tableta de casa? Los archivos, el estado y las preferencias de la aplicación van con ellos. Pueden retomar directamente desde donde los dejaron, en diferentes máquinas y sesiones de usuario.

Obtén más información sobre movilidad y cómo administrar datos de la aplicación.

Temas relacionados

Directrices sobre tamaños de ventana y escalado en pantallas

Directrices para cambiar el tamaño a diseños alargados y estrechos

Elección de un diseño