Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
El tema anterior era Portar capas empresariales y de datos.
Las aplicaciones de Windows comparten una apariencia común entre equipos, dispositivos móviles y muchos otros tipos de dispositivos. Los patrones de interfaz de usuario, entrada e interacción son muy similares y un usuario que se mueve entre dispositivos le dará la bienvenida a la experiencia familiar. Diferencias entre dispositivos, como el tamaño físico, la orientación predeterminada, y el factor de resolución de píxeles efectivo, influyen en la forma en que Windows 10 representa una aplicación para la Plataforma universal de Windows (UWP). La buena noticia es que el sistema realiza gran parte del trabajo pesado mediante conceptos inteligentes como píxeles efectivos.
Diferentes factores de formato y experiencia del usuario
Diferentes dispositivos tienen múltiples resoluciones verticales y horizontales posibles, en una variedad de relaciones de aspecto. ¿Cómo se escalarán los aspectos visuales de la interfaz, texto y recursos de su aplicación UWP? ¿Cómo se puede admitir la entrada táctil, el mouse y el teclado? Y con una aplicación que admite la entrada táctil en dispositivos de diferentes tamaños y distancias de visualización, ¿cómo puede un control ser un objetivo táctil correcto en diferentes densidades de píxeles (como y) y tener su contenido legible a distintas distancias? En las secciones siguientes se abordan las cosas que necesita saber.
¿Cuál es el tamaño de una pantalla, en realidad?
La respuesta corta es que es subjetiva, ya que depende no solo del tamaño objetivo de la pantalla, sino también de la distancia que está lejos de ella. La subjetividad significa que tenemos que ponernos en los zapatos del usuario, y eso es algo que hacen los desarrolladores de buenas aplicaciones en cualquier caso.
Objetivamente, una pantalla se mide en unidades de pulgadas y píxeles físicos (sin procesar). Conocer ambas métricas le permite saber cuántos píxeles caben en una pulgada. Esa es la densidad de píxeles, también conocida como PPP (puntos por pulgada), también conocida como PPI (píxeles por pulgada). Y la recíproca del PPP es el tamaño físico de los píxeles como una fracción de una pulgada. La densidad de píxeles también se conoce como resolución, aunque ese término se usa a menudo de forma flexible para indicar el recuento de píxeles.
A medida que aumenta la distancia de visualización, todas esas métricas objetivas parecen más pequeñas y se transforman en el tamaño efectivo de la pantallay en su resolución efectiva. Su teléfono generalmente se sostiene más cerca de su ojo; luego, su tableta, después su monitor de PC, y más lejos están los dispositivos Surface Hub y los televisores. Para compensarlo, los dispositivos tienden a ser objetivamente más grandes con la distancia de visualización. Al establecer tamaños en los elementos de la interfaz de usuario, se establecen esos tamaños en unidades denominadas píxeles efectivos (epx). Y Windows 10 tendrá en cuenta los puntos por pulgada (DPI) y la típica distancia de visualización desde un dispositivo, para calcular el tamaño óptimo de los elementos de la interfaz de usuario en píxeles físicos y así brindar la mejor experiencia visual. Consulte Vista/píxeles efectivos, distancia de visualización, y factores de escala.
Incluso así, te recomendamos que pruebes la aplicación con muchos dispositivos diferentes para que puedas confirmar cada experiencia por ti mismo.
Resolución táctil y resolución de visualización
Los elementos de interacción (widgets de la interfaz) deben ser del tamaño adecuado para permitir la interacción. Por lo tanto, un destino táctil debe conservar más o menos su tamaño físico en diferentes dispositivos que podrían tener densidades de píxeles diferentes. Los píxeles efectivos también te ayudan aquí: se escalan en diferentes dispositivos, teniendo en cuenta la densidad de píxeles, con el fin de lograr un tamaño físico casi constante que sea ideal para los objetivos táctiles.
El texto debe ser el tamaño correcto para leer (el texto de 12 puntos a una distancia de visualización de 20 pulgadas es una buena regla general) y una imagen debe ser el tamaño correcto y la resolución efectiva, para la distancia de visualización. En diferentes dispositivos, ese mismo escalado de píxeles efectivo mantiene los elementos de la interfaz de usuario de tamaño correcto y legibles. Texto y gráficos basados en vectores escalan automáticamente y muy bien. Los gráficos basados en ráster (mapa de bits) también se escalan automáticamente si el desarrollador proporciona un recurso en un único tamaño grande. Pero es preferible que el desarrollador proporcione cada recurso en un intervalo de tamaños para que se pueda cargar automáticamente el adecuado para el factor de escalado de un dispositivo de destino. Para obtener más información sobre eso, consulta Ver/píxeles efectivos, distancia de visualización y factores de escala.
Diseño de disposición y Administrador de Estado Visual adaptable
Hemos descrito los factores implicados en una comprensión significativa del tamaño de la pantalla. Ahora, vamos a pensar en el diseño de la aplicación y cómo usar el espacio de pantalla adicional cuando esté disponible. Considere esta página desde una aplicación muy sencilla diseñada para ejecutarse en un dispositivo móvil estrecho. ¿Qué aspecto debería tener esta página en una pantalla más grande?
La versión móvil está restringida únicamente a la orientación vertical porque esa es la mejor proporción para la lista de libros; haríamos lo mismo para una página de texto, ya que lo ideal es que se mantenga en una sola columna en dispositivos móviles. Sin embargo, las pantallas pc y tabletas son grandes en cualquiera de las orientaciones, por lo que la restricción del dispositivo móvil parece una limitación innecesaria en dispositivos más grandes.
El zoom óptico de la aplicación para parecerse a la versión móvil, solo más grande, no aprovecha el dispositivo y su espacio adicional, y eso no sirve bien al usuario. Deberíamos considerar mostrar más contenido, en lugar de simplemente ampliar el mismo contenido. Incluso en un phablet, podríamos mostrar algunas filas más de contenido. Podríamos usar espacio adicional para mostrar contenido diferente, como anuncios, o podríamos cambiar el cuadro de lista en una vista de lista y hacer que encapsula los elementos en varias columnas, cuando pueda, para usar el espacio de esa manera. Consulte Directrices para los controles de lista y vista de cuadrícula.
Además de los nuevos controles, como la vista de lista y la vista de cuadrícula, la mayoría de los tipos de diseño establecidos de Windows Phone Silverlight tienen equivalentes en la Plataforma universal de Windows (UWP). Por ejemplo, Canvas, Gridy StackPanel. La migración de gran parte de la interfaz de usuario que utiliza estos tipos debería ser sencilla, pero siempre debe buscar formas de aprovechar las capacidades de disposición dinámica de estos paneles de diseño para cambiar el tamaño y reorganizar automáticamente en dispositivos de diferentes tamaños.
Más allá del diseño dinámico integrado en los controles del sistema y los paneles de diseño, podemos usar una nueva característica de Windows 10 denominada Administrador de estado visual adaptable.
Modalidades de entrada
Una interfaz de Windows Phone Silverlight es específica para táctiles. Y la interfaz de la aplicación portada también debe admitir la interacción táctil, pero puedes optar por admitir, además, otras modalidades de entrada, como el ratón y el teclado. En UWP, la entrada de mouse, lápiz y táctil se unifican como entrada de puntero. Para obtener más información, consulta manejo de entradas de puntero, y interacciones del teclado.
Maximizar el lenguaje de marcado y la reutilización de código
Consulte la lista de maximización del marcado y la reutilización de código para técnicas sobre cómo compartir su interfaz de usuario con dispositivos de destino que abarcan una amplia gama de factores de forma.