Diseño para iPhone X

El iPhone X (léase: iPhone diez) está oficialmente aquí, bueno, será el 3 de noviembre. Oscila una pantalla Super Retina de borde a borde con una resolución de 1125 × 2436px. También tiene un recorte en la parte superior de la pantalla donde puedes encontrar algunas funciones futuristas de desbloqueo facial.

Diseñar para esta hermosa máquina traerá algunos nuevos desafíos, pero también algunas nuevas oportunidades de diseño. El ancho del dispositivo en modo vertical es el mismo que el del iPhone 6, 7 y 8, pero es 145 puntos más alto, lo que resulta en un ± 20% más de espacio vertical. Al diseñar @ 1x, necesita una mesa de trabajo de 375 × 812 px. No exportará imágenes @ 2x como el iPhone 8, pero @ 3x como el iPhone 7-8 Plus, debido a la nueva pantalla Retina.

Al crear su diseño, debe asegurarse de no ocultar su interfaz de usuario con las características únicas del dispositivo (los bordes redondos, el corte en la parte superior y el indicador de inicio). Por cierto, el indicador de inicio es esa pequeña línea que vive en la parte inferior de la pantalla, reemplaza el botón de inicio físico. Desliza el dedo hacia arriba desde cualquier aplicación para volver a la pantalla de inicio o para realizar múltiples tareas.

^ Vea esa línea blanca, ese es el nuevo indicador de inicio.

Si actualmente tiene una aplicación que utiliza el componente nativo de iOS, estará bien y su aplicación ya estará adaptada para este nuevo iPhone. Pueden ser barras de navegación, tablas, vistas de colección y barras de pestañas. Se insertarán y posicionarán automáticamente.

^ Diseño del iPhone 8 a la izquierda, adaptado automáticamente al iPhone X a la derecha

Si usa un diseño personalizado, es posible que su aplicación deba actualizarse al nuevo diseño de pantalla. Sin embargo, si usa el diseño automático, eso podría ser bastante fácil.

Empecemos

En primer lugar, adopte el diseño de los dispositivos, los empleados de Apple no trabajaron tan duro para que ocultara las maravillosas características de esta costosa pieza de hardware.

Asegúrate de crear una experiencia de pantalla completa. Permita que las vistas de desplazamiento se desplacen hasta la parte inferior de la pantalla, incluso más allá de los bordes de la parte inferior curva de la pantalla. Apple también le pide amablemente que no oculte el corte en la parte superior y los bordes curvos en la parte inferior, así que no coloque barras negras para que se vea como un iPhone 8 de la vieja escuela.

Centrar e insertar información importante. Asegúrate de que el contenido importante esté alineado en el centro y usa inserciones simétricas, para que tu interfaz de usuario no sea recortada por los sensores o esquinas del dispositivo. Si usa el diseño automático, su contenido se colocará automáticamente dentro de un área segura para que su diseño no se oculte detrás de las esquinas, los sensores o el indicador de inicio.

La nueva barra de estado. Debido a los sensores en la parte superior de la pantalla, la nueva barra de estado se divide en 2 partes. Si su interfaz de usuario está haciendo algo especial con ese espacio (anteriormente 20 puntos de altura, ahora 44 puntos), necesitará actualizar su interfaz porque será más alta en el iPhone X. Asegúrese de que se pueda cambiar dinámicamente en altura. Una gran cosa es que la altura no se cambiará si un usuario hace una llamada telefónica o está usando una aplicación de navegación, que anteriormente era el caso en otros iPhones.

^ barra de estado dividida y más alta

Muestra la nueva barra de estado. Si actualmente oculta la barra de estado en su diseño, Apple le pide que reconsidere esta decisión. Como la pantalla es más alta y tiene más espacio para mostrar su contenido, puede ser útil mostrar esa barra de estado. Los usuarios pueden encontrar información útil allí y la mayoría de las veces el espacio no será utilizado por otros elementos de la interfaz de usuario.

Imágenes de pantalla completa. Si actualmente está utilizando imágenes de pantalla completa en su diseño, deberá actualizarlas para el nuevo iPhone. Pueden recortarse y una parte esencial de lo visual puede estar oculta.

No coloque controles interactivos en la parte inferior de la pantalla. El espacio alrededor del indicador de inicio está creado exclusivamente para gestos, deslice hacia arriba para ir a casa. Es posible que colocar botones cerca de este indicador o en las esquinas redondas inferiores de la pantalla no sea excelente. Los usuarios pueden usar accidentalmente el gesto de inicio y su IU será difícil de alcanzar. Sin embargo, aún puede usar barras de pestañas y barras de funciones, pero tenga en cuenta que no deben interferir con el indicador de inicio.

No ocultes el indicador de inicio (todo el tiempo). iOS permite ocultar el indicador de inicio en su aplicación, esto lo ocultará automáticamente cuando el usuario no toque la pantalla durante unos segundos. Volverá a aparecer cuando el usuario toque la pantalla nuevamente, esto debería usarse principalmente para experiencias inmersivas como ver videos o fotos. El indicador de inicio también cambiará de color automáticamente según el fondo de su aplicación.

Mas colores. La nueva pantalla Super Retina muestra más colores, color P3 en lugar de sRGB. Esto significa que mostrará colores más ricos y más saturados. Especialmente el video y las fotos se beneficiarán de esta gama de colores más amplia.

(Actualización: el espectro de color P3 se agregó desde el iPhone 7, gracias Marcelo Ávalos)

Desliza hacia arriba, ten en cuenta el uso de gestos. Dado que el botón de inicio físico desapareció, interactúas con tu iPhone (más que nunca) mediante gestos. Cuando deslizas hacia arriba, vas a casa o vas a la vista multitarea. Al deslizar hacia la izquierda y hacia la derecha en el indicador de inicio, cambia entre sus aplicaciones multitarea abiertas. Al deslizar hacia abajo desde la parte superior de la pantalla, irá a su Centro de notificaciones o control. Más aún, en los juegos, puede usar gestos personalizados que pueden anular los gestos nativos de iOS. Puede usar sus propios gestos implementando la "protección de borde", que es una característica que preferirá el gesto específico de la aplicación primero, antes del gesto del sistema operativo, aunque solo una vez. Use esto con moderación, ya que dificultará que su usuario use las funciones del sistema.

Identificación de la cara. El iPhone anterior tiene una gran característica Touch ID, que permite a los usuarios desbloquear su dispositivo o realizar acciones bloqueadas con contraseña dentro de las aplicaciones mediante el uso de su huella digital. Este sensor estaba oculto dentro del botón de inicio, ya que se ha introducido en el iPhone X, Apple lo reemplazó con una forma más avanzada y segura de desbloquear su dispositivo. Ingrese Face ID, utiliza algunos algoritmos realmente geniales para detectar su rostro y desbloquear su dispositivo. Esto mostrará una nueva interfaz de usuario en las aplicaciones, asegúrese de implementarla para sus usuarios (ricos) que tienen un iPhone X. También asegúrese de que ya no haga referencia a Touch ID en su incorporación o menú, reemplácelo con Face ID .

Teclados personalizados. Cuando esté diseñando un teclado personalizado, no debe agregar un Emoji o un botón de dictado a su teclado. Porque se agregará automáticamente debajo del teclado alrededor del indicador de inicio.

Barras de navegación más grandes. Con iOS 11, el diseño de las barras de navegación nativas recibió una actualización, ahora son mucho más altas. Este diseño será especialmente bueno en el iPhone X más alto y se combinará muy bien con esa nueva barra de estado. Así que considere usarlo en su diseño. Estos también tendrán algunas animaciones nativas agradables al desplazarse.

TL; DR

  • El iPhone X es 145 puntos más alto, por lo que está diseñado para 375 × 812 puntos en lugar de 375 x 667 puntos
  • El iPhone X utiliza @ 3x activos.
  • Cree una experiencia de pantalla completa, no oculte las características únicas del dispositivo.
  • Centra el contenido importante de tu IU para asegurarte de que siempre esté visible y no oculto por los sensores o las esquinas del dispositivo.
  • Una nueva barra de estado más alta dividida en dos, anteriormente 22 puntos, ahora 44 puntos de altura.
  • Las imágenes de pantalla completa pueden / deben actualizarse para que se muestren completamente.
  • No agregue botones en la parte inferior de la pantalla, cerca del indicador de inicio.
  • No oculte el indicador de inicio, solo cuando sea realmente necesario.
  • Colores más ricos y saturados gracias al espectro de color P3.
  • Tenga en cuenta los gestos personalizados cerca del indicador de inicio y la barra de estado, no se meta con los gestos nativos esperados por el usuario.
  • Face ID reemplaza Touch ID, actualiza tu IU y reemplaza las referencias textuales a Touch ID.
  • Los teclados personalizados no necesitan agregar Emoji y botones de dictado.
  • Las barras de navegación más grandes se verán y animarán genial en esta pantalla alta.

O mira el video de Apple sobre Diseño para iPhone X.

¿Cómo obtengo una vista previa de la interfaz de usuario de mi aplicación?

Puede usar el simulador Xcode 9 para obtener una vista previa de su aplicación, esto le mostrará inmediatamente si su IU necesita ser actualizada.

¿Dónde puedo encontrar recursos para iOS 11 y iPhone X?

Tienes suerte, Apple tiene algunos nuevos recursos excelentes para Sketch, Photoshop y Adobe XD. Puede encontrarlos aquí: Recursos de diseño de Apple.

Nota: la mayor parte de esta información proviene de las Pautas de IU de Apple.