iphonex

Como desarrolladores y diseñadores de app nos afectará en la forma de pensar y diseñar nuestros proyectos para el iPhone X, te explicamos que hacer para adaptarnos a este nuevo dispositivo. 

Y AHORA, ¿CÓMO DISEÑAR PARA EL IPHONE X?

7 8 9 1

Diseñadores y desarrolladores debemos pensar en nuestra forma de diseñar para este nuevo dispositivo que será lanzado oficialmente el 3 de noviembre. Así que aún tenemos tiempo de repasar algunos puntos clave que nos ayudarán en este proceso de adaptación.

FIMiguel2

AUTOR

Miguel Rios

Director UX

Llegó el día más esperado, pues Apple, una de las compañías tecnológicas más importantes del mundo, dio a conocer sus más recientes productos. Y como era de esperarse, la mayor atención la obtuvo el nuevo iPhone X, el cual posee una pantalla nueva OLED y extendida a los bordes. Sin embargo, dicha resolución no es el único gran cambio, pues con él llega una enorme cantidad de pautas para todos los diseñadores y desarrolladores.

Tamaño de Pantalla  ‘Super Retina’

El nuevo tamaño de pantalla es de 1125px × 2436px, es decir, agrega un 20% más de espacio adicional de forma vertical.

Así que ahora agrega 145pt más de alto a la pantalla de 4.7 pulgadas.

iphoneXtamano

Suena simple, ya que sólo se vuelve más alto, pero debemos pensar en que la proporción ahora es diferente y será importante saber qué elementos se verán en iPhone X que en las versiones anteriores no.

Resolución @3x

Recuerda, para diseñar en alta calidad de resolución para retina, solemos trabajar nuestros documentos por un factor de escala de ‘@2x’, pero ahora será ese factor cambiado a ‘@3x’ debido al aumento de pixeles. Por ejemplo, las imágenes de 100px x 100px para pantallas regulares, en lugar de manejarlas para retina de 200px × 200px tendrán que ser de 300px × 300px.

ImageResolution-Graphic_2x

Nuevo Layout

Los puntos anteriores resultan muy simples al compararse con el relacionado al nuevo layout; este debe ser respetado para asegurar una correcta experiencia de usuario. En primer lugar, habrá que colocar márgenes adecuados y para ello existen nuevas reglas generadas a partir de las nuevas esquina redondeadas del nuevo iPhone X, la barra de espacio para el micrófono/cámara en el centro superior de la pantalla y en el nuevo ‘botón’ de home.

Esquinas Redondeadas

En las versiones anteriores no contábamos con esquinas redondeadas, pero es un elemento más para considerar en diseños futuros. Sí, lo sabemos, esto significa menos pixeles, pero siguen siendo importantes, pues los bordes ya no serán como en el clásico rectángulo perfecto de las versiones anteriores.

iphoneXcurvas

Espacio de micrófono/cámara invasor.

Ahora bien, también tenemos el llamado ‘sensor housing’ justo en medio de la pantalla. Es otro espacio negativo con el que no podemos contar, pero el que de igual forma debemos considerar. Estéticamente debemos buscar un contraste adecuado, ya que entre las reglas nuevas no está permitido rellenarlo con negro. ¿Por qué? Aún no existe una razón oficial, pero piensen un momento en lo parecido que sería al Samsung S8, como lo vemos en el siguiente ejemplo:

iphoneXreglas

El Nuevo ‘botón’ de home.

La línea negra o blanca -dependiendo del color de fondo- ubicada en la parte inferior dentro de la pantalla es el nuevo “botón” de home, así que de manera “imaginaria” debemos considerar que este gesto de home tiene un área de protección como regla, ya que siempre estará presente en nuestras apps. Esta barra sólo desaparecerá cuando utilices alguna función de ‘Full screen’ en alguna app.

iphonex-newhome

A continuación podemos apreciar todos los nuevos elementos adicionales que terminarán transformando nuestra rectangular y clásica pantalla en el siguiente layout disponible con una ‘area segura’.

iphonex-safe

Márgenes

Ya que conocemos el área disponible restaría solamente aplicar los márgenes cuando estemos trabajando en el contenido de nuestra app, ya que estas reglas son esenciales para que Apple pueda aceptar tu producto en su iTunes Store.

iphonex-safe2

A continuación tenemos un pequeño ejemplo de lo que se puede hacer y que no. En el caso de tener controladores dentro de nuestra app, deben de tener siempre un margen.

iphonex-safe3

Adicional a esto, debemos pensar en que para cada forma anteriormente menciona, aplican de diferente forma ‘landscape’, pues ahora existe el botón de home si volteas tu iPhone y ese es otro punto a considerar.

Consideraciones para versiones anteriores

Finalmente, no sólo debemos pensar en una versión especial para iPhone X, sino también que nuestra app o desarrollo esté pensado en todas las versiones anteriores de iPhone. Por ello hay ciertas reglas de proporción para los fondos y elementos gráficos a considerar.

Proporción para los fondos

Prácticamente lo más fácil será tener un color sólido para nuestros diseños. Pero, en caso de que sea una imagen o fondo con elementos, debemos de revisar cómo va crecer dicho fondo para el nuevo iPhone X. La recomendación es que te asegures de que el contenido visual importante permanezca en el visor para ambas pantallas.

iphonex-resolusion

Elementos gráficos antiguos

Si en tu app ya lanzada contaba con elementos gráficos considerados y pensados en el rectángulo y esquinas rectas de los viejos iPhones, ahora hay que sacar una nueva versión para todos esos elementos que, ten en cuenta, se verán terriblemente cuando los abran, tan cual vemos a continuación.

iphonex-resolusion2

Para más especificaciones en diseño y desarrollo para el iPhone X les recomendamos revisar la información detallada de la fuente oficial de Apple

En resumen, prácticamente los nuevos espacios promocionados para el iPhone sólo serán ‘una pantalla’, ya que no te dejará utilizarlos más que para fondos, es decir, este ‘gran’ cambio es meramente estético y no funcional.

Pareciera que será un gran reto implementar diseño y desarrollos de apps bien adaptadas para el nuevo celular de Apple, pero cuéntanos aquí ¿tú qué opinas? ¿consideras un acierto de Apple el retirar la proporción anterior e incluir elementos restringidos con el nuevo diseño del iPhone X?  bullet-final

FIMiguel2

Miguel Ríos

Director UX

Director de UX en Danilo Design. Apasionado por el diseño e interesado por dejar la mejor experiencia al usuario.

PROYECTOS RELACIONADOS