Home » Análisis » Diseñando para el iPhone X

Diseñando para el iPhone X

iPhone X (léase 10). El nuevo y más deseado dispositivo de Apple, no carente de polémica por la denominada zona del notch (la pestaña superior) donde están las cámaras. ¿Por qué la interfaz tiene unos cuernos en su lateral? Es decir, ¿por qué Apple ha decidido que la pantalla se extienda más allá de la zona de las cámaras para que sea un iPhone que sea todo pantalla, pero ha decidido ha puesto la zona de cámaras en el centro tapando la visión? Esa es la gran pregunta que está creando polémica y que incluso ha creado un hashtag en Twitter #embracethenotch (abraza el notch) donde la gente opina al respecto.

Personalmente pienso que el diseño es un acierto a un problema inherente. Si quieres un dispositivo todo pantalla tienes el problema que hay que colocar en algún sitio la zona de las cámaras, y crear una zona lateral a cada lado de las cámaras que muestre información que normalmente “molesta” en una interfaz convencional (la famosa status bar con la hora, la cobertura y demás) creo que es un acierto de diseño para dar más espacio y “más aire” a las apps.

Vamos a analizar qué pasos hay que dar para adaptar nuestras apps al iPhone X y qué elementos hay que tener en cuenta para hacerlo correctamente.

El tamaño

El iPhone X tiene una diagonal de 5,8″. Trabaja en una resolución (en modo vertical o portrait) de 1.125 de ancho por 2.436 de alto. Esto supone un aspect ratio de 2:17:1, algo mayor que el 18:9 o 2:1 que tienen otros dispositivos y que corresponde con el formato de producción de algunos contenidos de TV como la famosa serie “House of Cards”.

En contra de lo que pueda pensarse en un principio, la pantalla del iPhone X es equivalente al iPhone de 4,7″ no al modelo Plus. Su resolución es exactamente la magnitud @3x de dicha pantalla.

iPhone47-iPhoneX

Como puede verse en el diagrama, la resolución de un iPhone de 4,7″ es de 1136×750, con magnitud @2x. Eso significa que internamente trabaja en puntos que obtendremos de dividir entre 2. Al final nos queda una resolución de 667 puntos de alto por 375 puntos de ancho en modo portrait. Si a esta resolución por puntos le calculamos la magnitud @3x tendremos el ancho exacto del iPhone X: 1.125. La diferencia es que el X es más alto, por lo que su altura se va a 812 puntos (2.436 dividido entre 3). Esto supone que tenemos 145 puntos de más en la pantalla con respecto al iPhone de 4,7″. ¿Y para qué sirve ese excedente? Pues para darle aire a la interfaz y colocar la zona del status bar en la parte superior, a los lados del notch.

iPhone47-X-UI

Como vemos en las capturas sobre estas líneas, una interfaz de una vista de tabla adaptada a iOS 11, quedará perfectamente adaptada al iPhone X y el sistema recolocará los elementos para dar más aire a la interfaz. La hora y los indicadores de conectividad van a los lados del notch, debajo un espacio que da limpieza a la interfaz hasta los botones de la barra de navegación, debajo el título en formato grande de iOS 11 y luego la vista de tabla. Y si miramos debajo, veremos que en el iPhone 7 la tab bar tiene los textos pegados a la parte inferior de la pantalla, mientras que en el iPhone X tiene un poco más de aire por arriba y un poco más de espacio por abajo para dejar sitio a la barra inferior o barra de función HOME que siempre está presente en la interfaz (a no ser que pidamos que se oculte por algún motivo claro como reproducir vídeo, y que desaparece a los 2 segundos de no tocar la pantalla).

Area segura

El quid del diseño está en las zonas seguras de la interfaz, una zona que si no está activada en Xcode tendremos que activar. Si nuestros elementos y tablas están dentro de dicha zona, nunca nos saldremos de la pantalla del iPhone X y todo se verá perfectamente cuadrado.

Area segura iPhone X

Como puede verse en el diagrama superior, el dispositivo tiene una zona de márgenes bien definida y a su vez el área segura que impide a cualquier elemento de la interfaz ponerse encima de la zona de las cámaras o encima de la barra inferior de la función HOME.

Bastará respetar esa zona segura para garantizar que nuestra app se adapta bien y que cualquier constraint que esté unida a la super view de la pantalla, lo esté a la safe area en su lugar. Un cambio simple.

Backgrounds

En el caso de los fondos, hemos de tener cuidado con los elementos que usamos o cómo los usamos. Las imágenes, puestas en modo de contenido aspect fill (para conservar su relación de aspecto pero rellenar al máximo la pantalla) quedarían de la siguiente forma en el iPhone de 4,7″ y en el X.

iPhone X Backgrounds

Si nos fijamos, veremos que una imagen que actualmente se ajusta a la relación de aspecto 16:9 y por lo tanto a la pantalla del iPhone de 4,7″, al ponerla en el iPhone X sufrirá un recorte o crop en los laterales por lo que hemos de tener presente esa pérdida de contenido. Esto sucede igual con una imagen @3x que ya hayamos proporcionado, ya que el iPhone Plus de 5,5″ y el iPhone X comparten magnitud y, por lo tanto, recursos gráficos del sistema. Y los modelos Plus son también 16:9.

Si pusiéramos el modo aspect fit que ajusta la pantalla sin rellanarla, tendríamos un efecto de recorte con bandas negras (o letterbox) que nos dejaría la imagen con bandas superiores e inferiores. Un efecto poco elegante y que Apple no recomienda.

Lo ideal es adaptar las imágenes al iPhone X dándole un poco más de contenido en las partes superiores e inferiores, contando con el hecho que al poner en modo aspect fill en un iPhone de 16:9 como el de 4,7″ o el Plus, esa información extra que hemos dado a la imagen se cortará y no se verá.

Normas de diseño a respetar

Aparte de estas indicaciones sobre los fondos, tamaños y demás, hay que respetar una serie de reglas base a la hora de diseñar o adaptar nuestras al iPhone X:

  • Evitar poner controles de la app en la parte más baja de la interfaz o en zonas pegadas a las esquinas. Si ponemos elementos que requieran interacción en las zonas inferiores podríamos estar anulando el gesto HOME y eso daría lugar a un rechazo de la app. Si ponemos cosas pegadas en las esquinas, estaríamos dificultando el acceso ergonómico a esas zonas.
  • No podemos tocar o modificar en forma alguna las partes que corresponden a las funciones del sistema como la citada barra de HOME. No podemos señalarla, poner elementos encima o en los lados… tenemos que respetar su zona de situación y para lo demás hacernos a la idea que no existe.
  • Si disponemos de gráficos en formato de color P3 (gamut amplio) podría ser buena idea incluirlos en la app para así mejorar la experiencia visual.
  • Si hacemos un teclado personalizado para la app, debemos evitar duplicar botones como los de los emojis o el dictado y respetar la distribución que tiene por defecto el teclado.
  • Cualquier referencia textual a “Touch ID” deberá ser cambiada por otra referencia tipo “biometría” o incluso detectar si es un iPhone X y cambiar el texto por “Face ID” directamente.

Conclusiones

Son normas básicas, que luego podemos extender hasta donde queramos para según qué casos. No obstante, no debemos olvidar que todos estos cambios han de estar listos para el próximo 3 de noviembre donde el iPhone X llegará a los primeros clientes que lo adquieran. Tenemos tiempo, pero no hay que dormirse.

Si tenéis cualquier duda, en Apple Coding ofrecemos servicios de actualización de apps a nuevos sistemas y dispositivos, consultoría y, por supuesto, formación de todos los nuevos cambios de iOS 11 como las apps basadas en documentos, el drag & drop y mucho más. Si quieres saber más, no dudes en escribir a info@applecoding.com. Un saludo y Good Apple Coding.

Acerca de Julio César Fernández

Analista, consultor y periodista tecnológico, desarrollador, empresario, productor audiovisual, actor de doblaje e ingeniero de vídeo y audio.

Otras recomendaciones

ARCore

Google lanza ARCore, competencia directa de ARKit

No hace demasiado, en un programa de Applelianos, comentaba que Android tendría muy complicado el …