¿Tienes adaptadas tus apps al iPhone 5? Será obligatorio a partir del 1 de mayo

Se van a cumplir 7 meses de la presentación del iPhone 5. Este terminal llegaba al mercado con una novedad que le hacía diferenciarse sustancialmente de su antecesor: el nuevo formato de pantalla de 960 x 1136 píxeles. Este cambio de dimensiones en la pantalla nos rompió los esquemas a los diseñadores, porque hasta entonces habíamos trabajado los diseños para un único terminal con un ancho y alto de pantalla fijo y ahora nos encontrábamos con esta nueva variable.

En este tiempo, las aplicaciones que no estaban adaptadas a la resolución del iPhone 5 no sufrían ningún problema de compatibilidad con el dispositivo. No era obligatorio y automáticamente el terminal centraba la aplicación, dejando dos bandas de 88 píxeles tanto en la parte superior como en la parte inferior. Pero una app así no está optimizada a nivel visual y no se saca el máximo partido al dispositivo.

Con las nuevas Guidelines de Apple, que entrarán en vigor el próximo 1 de mayo, no adaptar las apps al iPhone 5 ha dejado de ser una opción. De no hacerlo, vuestras apps serán rechazadas. Os enseñamos cómo trabajamos nosotros.

Conceptos a tener en cuenta

Como os decíamos, el iPhone 5 pilló a los diseñadores por sorpresa debido al aspect ratio, término con el que nos referimos a la relación que existe entre el ancho y el alto de una pantalla. 

Este nuevo terminal apostó por un aspect ratio de 16:9 (hasta entonces había sido de 3:2), el mismo que el HDTV y por tanto, reproducción de vídeo a “fullscreen”. Sin embargo, las aplicaciones deberían adaptarse igualmente a este nuevo formato, lo que derivó en un problema a nivel de diseño.

La densidad de pantalla es la cantidad de pixeles que se representan por pulgada. A continuación os mostramos cómo calcular la densidad de cualquier pantalla, y las variables que necesitamos para ello. Esta fórmula presenta distintas variables, tamaño físico en pulgadas de la pantalla y alto y ancho en píxeles del display.

Conociendo la resolución y tamaño de pantalla en pulgadas de ambos terminales, podemos obtener la densidad, es decir el número de píxeles por pulgada.

A efectos prácticos no ha disminuido de manera significativa la densidad en píxeles de la pantalla, pero sí ha aumentado el tamaño de ésta, lo que conlleva un cambio en el aspect ratio. Por otro lado no importa el tamaño de la pantalla si no una adecuada densidad de pantalla. Es decir, una pantalla de 7 pulgadas con una densidad de pixeles muy baja se percibe como una pantalla muy pequeña con respecto a una de 5 pulgadas con una densidad de pixeles elevada.

¿Cómo afecta a los diseñadores este cambio de formato?

El tamaño de pantalla del iPhone 5 ha aumentado verticalmente en 176 píxeles, de 960 a 1136, influyendo así en las vistas de las aplicaciones y, por lo tanto, en algunos elementos. A continuación os explicamos los aspectos a tener en cuenta.

Tipos de vista

Cuando vamos a empezar a diseñar una app seguimos creando el documento para iPhone 4. En el caso de una vista estática, tendremos que reordenar los elementos para aprovechar de forma más eficiente los 176 pixeles de altura adicionales. Siempre es más sencillo reubicar elementos en un espacio más grande que pasar de un espacio grande a uno pequeño.

Las vistas que no se ven afectadas son aquellas que ya eran dinámicas en iPhone 4, por ejemplo, un listado con scroll.


Elementos

Otro de los problemas que nos surgirán a la hora de adaptar una aplicación de iPhone 4 a iPhone 5 son los fondos. En el caso de utilizar fondos con texturas o dibujos habrá que invertir un poco más de tiempo, ya que tendremos que dibujar y exportar el mismo elemento para formato iPhone 4 y iPhone 5. El motivo es que un fondo de un color plano puede estirarse sin ser deformado, pero un fondo con textura no, ya que la imagen representada quedará estirada y por lo tanto deformada.

La splash es el último elemento que está condicionado por el tamaño de la pantalla e igualmente deberemos adaptarla a la nueva resolución.

Cómo nombrar elementos para iPhone 5

Cualquier elemento exportado específicamente para iPhone 5 como por ejemplo un fondo o la splash se deberán nombrar igual que en iPhone 4, pero con el sufijo −568h.

Esperamos que este post os ayude a adaptar vuestras apps al iPhone 5.
Anuncios

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s