Diseño de apps II – Diferencias de Layouts y densidades de pantalla en apps Android, iOS y Windows Phone
Al hilo de lo que te contábamos en el post de la semana pasada sobre las Diferencias de flujos de navegación en apps multiplataforma, hoy te dejamos la segunda parte de este post y explicamos las diferencias de Layouts y densidad de pantalla en apps Android, iOS y Windows Phone.
Layouts y densidades de pantalla
Layouts en Android
En Android el diseño del Layout se tendrá que optimizar para que, por ejemplo, en los dispositivos con una pantalla más grande se aproveche el espacio adicional. Para conseguir esto se crean vistas compuestas que combinan varias vistas para ofrecer mayor contenido y una fácil navegación. Para ello, se tendrán que proporcionar los recursos gráficos necesarios para las diferentes densidades de pantalla (DPI) para asegurar su adaptabilidad a la pantalla de cualquier terminal en MDPI, HDPI, XHDPI, XXHDPI y XXXHDPI.
Lo anterior para que no sea lioso, vamos a explicarlo con un ejemplo, suponiendo que partimos de una densidad MDPI:
- MDPI: 1 X (Medium Density per Inch o Densidad por Pulgada Media 160 DPI)
- HDPI: 1,5X (High Density per Inch o Densidad por Pulgada Alta 240 DPI)
- XHDPI: 2X ( Extra High Density per Inch Densidad por Pulgada Extra Alta 320 DPI)
- XXHDPI: 3X (XX High Density per Inch 480 DPI)
- XXXHDPI: 4X (XXX High Density per Inch 640 DPI)
Que aplicándolo, si estamos trabajando en una imagen de 48×48 pixeles sería:
- MDPI: 48 X 48
- HDPI: 72 X 72
- XHDPI: 96 X 96
- XXHDPI: 144 X 144
- XXXHDPI: 192 X 192
Esta es la razón por la que si queremos diseñar para diferentes pantallas, se tendrá que empezar por la norma básica (tamaño normal y MPDI) y escalar hacia arriba y hacia abajo para el resto de tamaños. Otra forma de hacerlo sería empezar a diseñar para las pantallas más grandes y después ir bajando la escala hacia las más pequeñas.
Layouts en iOS
El layout de iOS tendrá que adaptarse a todos los dispositivos (iPhone 4 y superiores, iPad e iPad Mini). En iOS8 y versiones siguientes se pueden usar diferentes clases de tamaño y Auto Layout que ayudarán a cumplir con esta exigencia.
El sistema operativo iOS determina dos clases de tamaños: regulares y compactos. El tamaño regular se relaciona con espacios grandes y el compacto con espacio limitado. Un dispositivo iOS podrá usar un conjunto de diferentes clases de tamaño para la orientación vertical y otro conjunto diferente para la orientación horizontal. iOS automáticamente hará cambios de diseño cuando las clases de tamaño den un cambio de entorno de visualización.
Con el diseño de la interfaz de usuario se mostrará lo más relevante, las opciones disponibles y como se relacionan unas con otras. Las tareas deberán ser fácilmente accesibles para poder centrarse en ella sin obstáculo, para conseguir esto Apple recomienda colocar los elementos más importantes en la mitad superior de la pantalla y de izquierda a derecha. En la imagen a continuación puedes ver una relación de los diferentes tamaños de pantalla que hay en Iphone.
Layouts en Windows Phone
Aquí, los usuarios pueden navegar por las aplicaciones hacia adelante mediante diferentes pantallas de contenido y hacia atrás pulsando el botón “Back” de hardware de Windows Phone. Este estilo nos ofrece la posibilidad de crear aplicaciones cuyas pantallas se ajustan al modelo de navegación nativo.
Esta plataforma nos ofrece distintas clases de tramas y páginas para hacer más fácil la navegación entre secciones separadas de contenido. Podemos crear tantas páginas como requiera el contenido de la aplicación y después hacer que se vayan a las páginas de trama.
El marco se integrará en la aplicación con el look and feel predeterminado de Windows Phone y permitirá mostrar las características de las páginas alojadas como la orientación de la pantalla, por ejemplo; un espacio para mostrar las páginas; asistencia de navegación entre páginas y un espacio reservado para la barra de aplicaciones y la barra de estado. Las páginas serán las que llenen el espacio de contenido de la trama.
Esperamos que estos 2 post sobre el diseño de aplicaciones móviles te sirvan para comprender las principales diferencias entre las plataformas.
Si tienes alguna idea de desarrollo de apps multiplataforma o relacionado con esto, no dudes en contactarnos. Te ayudaremos en todo lo que necesites.
Síguenos en Facebook, Google+, Linkedin y Twitter.
