fbpx Skip to content

Cómo diseñar para IPhone X

Diseñar para el iPhone X traerá nuevos retos, pero también nuevas oportunidades de diseño. En este artículo, compartiré algunas sugerencias que te ayudarán a diseñar aplicaciones y juegos que se vean y se sientan bien en el iPhone X.

Especificaciones de la pantalla

El iPhone X tiene una nueva pantalla Super Retina de alta resolución, redondeada y de borde a borde, con una resolución de 1125×2436px. Aunque ofrece a los diseñadores más espacio para el contenido de la pantalla y les permite crear una experiencia realmente envolvente, hay algunas cosas que deben tenerse en cuenta a la hora de diseñar para este dispositivo:

1. 3x Factor de escala de imagen

iPhone X tiene 3x factores de escala de imagen (@1x,@2x, y @3x). Cuando se necesiten imágenes rasterizadas, asegúrese de incluir resoluciones de imagen 2x y 3x en su catálogo de resolución de imagen de la aplicación. Además, se recomienda utilizar SVGs para glifos y otras ilustraciones planas que requieran escalado de alta resolución porque son independientes de la resolución.

2. Nuevas dimensiones de la pantalla: Más espacio en pantalla, más contenido

Las dimensiones de la pantalla X del iPhone son de 375pt de ancho * 812 pt de alto. En una pantalla 3x esto equivale a 1.125 px @3x de ancho * 2.436 px @3x de alto. En orientación vertical, el ancho de la pantalla del iPhone X coincide con el ancho de las pantallas 4.7″ de iPhone 6, iPhone 7 y iPhone 8, por lo que no debería haber ninguna diferencia en la cantidad de información presentada junto con las estrechas dimensiones de estos dispositivos. Pero la pantalla tiene una altura diferente: la altura de 812pt es 145pt más alta que la de 667pt de 4,7″. Esta altura adicional del iPhone X proporciona un 20% más de espacio para el contenido.

3. Considerar la relación de aspecto al crear imágenes de fondo

Al diseñar imágenes de fondo, tenga en cuenta que el iPhone X también tiene una relación de aspecto diferente a la de una pantalla de 4,7″. Los gráficos de fondo creados para la relación de aspecto 8 16:9 del iPhone deben ajustarse para satisfacer los requisitos técnicos del iPhone X. Para evitar el resultado negativo, es mejor componer las imágenes de modo que la información visual crítica permanezca visible independientemente de la relación de aspecto de la pantalla.

4. No coloque los elementos en las esquinas de los bordes de la pantalla

Las esquinas redondeadas suponen otro reto para los diseñadores: cada elemento que se coloca demasiado cerca de los bordes del mirador puede quedar enganchado o cubierto por la carcasa del sensor. Es fundamental insertar controles y otros elementos para evitarlo.

5. Usar el diseño del área segura para mostrar contenido

El diseño del área segura ayuda a evitar que los elementos de la interfaz de usuario del sistema se solapen al posicionar el contenido y los controles. En el iPhone 8, el área segura tiene el mismo tamaño que el visor cuando no hay barras visibles. En el iPhone X, el diseño del área segura se inserta desde la parte superior e inferior de los bordes de la pantalla, incluso cuando no hay barras visibles en la pantalla. Esto le ayuda a evitar que los elementos de la interfaz se recorten o se cubran.

Sin embargo, hay dos excepciones para el Área Segura: el fondo de la aplicación y las vistas que se pueden desplazar verticalmente. Las vistas que se pueden desplazar verticalmente, como las tablas y las colecciones, deben extenderse hasta la parte inferior de la pantalla y extenderse hasta los bordes en lugar de limitarse a la zona de seguridad.

6. No se preocupe por los componentes nativos

Si su aplicación utiliza el componente iOS nativo (como barras de navegación, tablas, vistas de colecciones, barras de pestañas, etc.) y le preocupa cómo se adaptarán al iPhone X, ¡no se preocupe! Se insertarán y se posicionarán automáticamente.

Indicador de casa

iPhone X cambió una de las interacciones básicas del iPhone, el botón Inicio es ahora un legado. Antes de que los usuarios de iPhone X que querían acceder al conmutador de aplicaciones o a la pantalla de inicio, hacían clic en el botón de inicio del iPhone para hacerlo. En el caso del iPhone X, el mismo proceso está disponible cuando los usuarios pasan el dedo por cualquier parte del borde inferior de la pantalla. Los swipes son los nuevos clics.

En el intento de sustituir el botón de inicio por un gesto y hacerlo intuitivo, Apple ofrece información sobre la interacción en el formato de un indicador en el borde inferior de la pantalla; una pequeña línea que vive en la parte inferior de una pantalla. Este indicador se muestra en la interfaz de la aplicación iPhone X. Tendrás que tener esto en cuenta cuando diseñes tu aplicación.

Observe una línea blanca en la parte inferior, que es el nuevo indicador de casa. Le notifica que puede deslizarse hacia arriba para volver a la pantalla de inicio o a la multitarea.

7. Evite colocar elementos interactivos cerca del indicador de casa

Es mejor evitar colocar elementos interactivos como botones cerca del indicador o se arriesgará a que se superpongan con el indicador de inicio. Simplemente deje algunos espacios en blanco cerca del indicador de inicio colocando elementos no desplazables dentro del área segura.

8. No preste especial atención al indicador de casa

El indicador de casa no es un elemento decorativo. No lo enmascares y no le prestes atención especial.

9. Usar Auto-Hide para experiencias en pantalla completa

Al presentar contenido visual a pantalla completa, como vídeos, es posible utilizar la función de ocultación automática para ocultar el indicador de inicio.

Área de muesca

El área de muesca es quizás la parte más controvertida del diseño del iPhone X. Algunas personas piensan que es visualmente atractivo; otras piensan que es feo. Pero como diseñadores, podemos utilizar el espacio de la pantalla disponible en el área de la muesca para siempre.

10. No enmascarar la muesca

Algunos diseñadores intentan hacer que la experiencia en iPhone X parezca similar a la experiencia en iPhone 8; colocan barras negras en la parte superior para que parezca una aplicación de la vieja escuela. Es mejor evitar eso – esto sólo hará que tu aplicación se sienta inconsistente con otras aplicaciones en iPhone X. Tu aplicación o juego siempre debe llenar toda la pantalla en la que se ejecuta.

11. No oculte la barra de estado

Si actualmente ocultas la barra de estado en tu aplicación, es mejor que reconsideres esta decisión. Dado que el área de la barra de estado es más alta (anteriormente era de 20 puntos de alto, ahora es de 44 puntos) y usted tiene más espacio para mostrar su contenido. Añada contenido que sea útil para sus usuarios.