El iPhone X ha cambiado fundamentalmente el diseño de aplicaciones. Con su formato único y los nuevos elementos de interfaz de usuario, los diseñadores deben demostrar más flexibilidad y creatividad para crear aplicaciones impresionantes. Esta guía explica paso a paso cómo puedes utilizar Sketch para adaptar tu diseño a los requisitos del iPhone X.
Principales conclusiones
- La altura de la pantalla del iPhone X es de 812 píxeles, lo que crea espacio para nuevos elementos de UI.
- La navegación y la barra de pestañas son más altas y requieren ajustes en el diseño.
- Es importante tener en cuenta el Safe Area para asegurarte de que no haya contenido en la zona redondeada de la pantalla.
- El Home Indicator es un nuevo elemento de interfaz que debe ser considerado en el diseño.
Guía paso a paso
Comienza creando un nuevo diseño para el iPhone X en Sketch. Presiona A para agregar un nuevo elemento y haz clic en el diseño del iPhone X.
El ancho se mantiene en 375 píxeles, mientras que la altura se establece en 812 píxeles. Esto te da más espacio para el diseño de tu interfaz de usuario. Ten en cuenta que las esquinas redondeadas de la pantalla son importantes para el diseño.
Replica el Home Controller y ajusta el diseño. Es recomendable no utilizar las bibliotecas estándar, sino la biblioteca específica de iPhone X para una adaptación más precisa. Ve a las configuraciones en Sketch y activa la biblioteca de iOS 11 si aún no está disponible.
Agrega una barra de navegación estándar para mantener la consistencia de la interfaz. Asegúrate de que la altura de la barra de navegación sea de 88 píxeles en comparación con los 44 píxeles del iPhone 8.
Busca la Status Bar en la biblioteca de iOS 11 y agrégala también. Debe estar alineada en el borde superior de la pantalla.
Para la Tab Bar, aplica lo mismo: elige una versión con tres pestañas de la biblioteca de iOS 11 y asegúrate de que tenga 83 píxeles de altura para que encaje bien en el diseño.
Asegúrate de que al diseñar, ningún elemento sobresalga en la zona redondeada. En programación, esto se llama Safe Area Layout Guide: es el espacio que necesitas para una vista segura.
Agrega el Home Indicator como un componente esencial de tu diseño. Este debe colocarse en el centro del borde inferior.
Una vez que hayas agregado los elementos básicos, puedes copiar toda la sección y pegarla en el lugar deseado. Recuerda ajustar los márgenes después de copiar.
Repite este proceso para el Chat Controller. Crea una copia del diseño y renómbrala adecuadamente.
Sustituye los iconos de las pestañas y ajusta la presentación. Es importante seleccionar la simbología y los textos correctos cuidadosamente.
Presta atención a los márgenes, especialmente entre las burbujas de chat y la Tab Bar. Mantén un espacio de 16 píxeles para asegurarte de que los elementos armonicen bien entre sí.
Estos pasos muestran cuán rápido puedes adaptar tu diseño al nuevo formato. Sin embargo, en caso de dudas, no hay problema en seguir refinando el diseño.
En la siguiente lección, aprenderás a trabajar con efectos adicionales en el área de perfil, incluidos los efectos de desenfoque.
Resumen – Diseño efectivo de iPhone X en Sketch
Adaptar tus diseños al iPhone X abre nuevas posibilidades. Con la comprensión adecuada de los nuevos formatos de pantalla y elementos de UI, puedes crear interfaces de usuario impresionantes.
Preguntas frecuentes
¿Cuál es la altura de la pantalla del iPhone X?La altura de la pantalla del iPhone X es de 812 píxeles.
¿Cómo ajusto la Tab Bar?La Tab Bar debe tener una altura de 83 píxeles para funcionar bien en el diseño.
¿Qué debo tener en cuenta al diseñar?Presta atención al Safe Area y asegúrate de que los elementos no sobresalgan en las áreas redondeadas.
¿Cómo hago las modificaciones en Sketch?Duplica los elementos de controlador existentes y ajústalos utilizando la biblioteca de iOS 11.
¿Debo ajustar la barra de navegación?Sí, la barra de navegación tiene una altura de 88 píxeles y debe ajustarse para mantener la consistencia visual.
