Cómo implementar un diseño de interfaz de usuario de iOS perfecto para píxeles

Probablemente haya escuchado la frase "diseño de píxeles perfectos" innumerables veces, sin siquiera considerar lo que significa o lo que debería significar. En los últimos meses, existe la posibilidad de que haya escuchado sobre el declive del concepto de diseño de píxeles perfectos, pero hay un pequeño problema con esas afirmaciones, especialmente cuando se trata del diseño de la interfaz de usuario de iOS.

Es decir, la definición de diseño de píxeles perfectos no está tallada en piedra como la mayoría de las pautas de la interfaz de usuario de iOS. Las personas lo interpretan de diferentes maneras, de ahí el problema: la perfección de píxeles puede parecer pasada de moda para algunos, pero otros continuarán usando el principio en los años venideros, aunque con un nombre diferente. Es sobre todo un problema de nomenclatura.

¿Qué es el diseño de interfaz de usuario con píxeles perfectos?

Dado que no existe una definición clara de la perfección de píxeles, mi comprensión del concepto de diseño de píxeles perfectos es que todo se hace para maximizar la nitidez y la fidelidad. Una vez que se implementa el diseño, se ve idéntico en cualquier pantalla de iPhone sin artefactos ni problemas de ningún tipo.

Crear una interfaz de usuario de aplicación para iOS con píxeles perfectos significa que está creando un diseño con píxeles en mente e implementando exactamente el mismo diseño en la pantalla, hasta cada píxel en el diseño de referencia, todo mientras se asegura de que se adapte de manera receptiva a otros dispositivos.

Pero, ¿por qué un diseño perfecto para píxeles?

Los diseñadores de UI hacen todo lo posible para crear interfaces que sean fáciles de percibir e interactuar. Es deber profesional del desarrollador respetar el trabajo del diseñador e implementar la interfaz exactamente como se entregó.

Con las aplicaciones que no tienen píxeles perfectos, es poco probable que los usuarios experimenten problemas significativos que les impidan usar y disfrutar de la aplicación, pero las aplicaciones con píxeles perfectos definitivamente se ven más nítidas, limpias y consistentes.

Debido a la naturaleza altamente competitiva de la tienda de aplicaciones de Apple, cualquier retoque que mejore la apariencia general y la experiencia del usuario es bienvenido. Puede ayudar a diferenciar su aplicación y hacerla más visible y, por lo tanto, más rentable.

Esta guía rápida de diseño de la interfaz de usuario de iOS lo guiará a través del proceso desde la etapa de diseño básico hasta la implementación, desde la perspectiva de un diseñador y un desarrollador.

Creación de un diseño de interfaz de usuario de iOS

Empecemos. Las aplicaciones de píxeles perfectos obviamente comienzan como diseños de píxeles perfectos, y todos sabemos de dónde vienen estos hoy en día.

Herramientas esenciales de diseño de interfaz de iOS

Creo que estoy en lo cierto al decir que Sketch se ha convertido en el estándar de facto para los diseñadores de UI/UX web y móviles. Si bien Adobe XD es una alternativa prometedora, va a la zaga de Sketch en términos de popularidad.

A continuación, elegiremos el tamaño de la mesa de trabajo. Hoy en día, tenemos dispositivos iOS con diferentes tamaños de pantalla y relaciones de aspecto y necesitamos elegir un tamaño para crear nuestro diseño. Gracias a Auto Layout, se adaptará perfectamente a otros tamaños de pantalla. Si es necesario, puede crear diferentes variaciones de diseño para diferentes clases de tamaño .

La única pregunta real aquí es: ¿Cómo debe el diseñador compartir información sobre la adaptación de diseños para diferentes pantallas con el desarrollador?

Afortunadamente, no hay necesidad de anotar las especificaciones para cada uno, ya que el complemento Auto Layout para Sketch se encargará de eso. El diseñador simplemente necesita configurar el diseño automático deseado, exportar a diferentes tamaños de pantalla con un clic y el desarrollador entenderá cómo colocar restricciones de diseño y asegurarse de que todo se vea bien, ya sea en un iPhone X o en el viejo iPhone 5.

Nota: desde la versión 44, el equipo de Sketch ha mejorado drásticamente los controles de cambio de tamaño, lo que brinda a los usuarios más poder y control sobre cómo deben comportarse las capas cuando se cambia el tamaño de su capa principal.

Configuración de su diseño

Eso suena genial, pero aún no hemos elegido el tamaño que usaremos para crear nuestro diseño. Según las estadísticas de iOS de David Smith, el 57% de todos los usuarios de iPhone confían en pantallas de 4,7 pulgadas, introducidas en el iPhone 6/6s y posteriormente utilizadas en el iPhone 7 e incluso en el recientemente lanzado iPhone 8.

Estoy seguro de que ya están familiarizados con las pantallas de 4,7 pulgadas de Apple, pero en caso de que no sea una persona de números, estamos hablando de pantallas de 750x1334 píxeles con 326 píxeles por pulgada (PPI). Esta es una pantalla Retina estándar y en el código tendremos la mitad de la resolución. Por lo tanto, le sugiero que comience con 375x667 píxeles.

A continuación, debemos asegurarnos de que el diseño de la interfaz de usuario de iOS maximice la nitidez. Para alcanzar este objetivo, debe activar el ajuste de píxeles :

Aquí hay un ejemplo de un rectángulo simple con y sin ajuste de píxeles:

Use Redondo: Píxeles completos al editar objetos vectoriales:

Obviamente, estos son solo los conceptos básicos, y para ver más de cerca los elementos de la interfaz de usuario de iOS con píxeles perfectos en Sketch, debe consultar el tutorial oficial.

Siéntase libre de usar animaciones vectoriales complejas, porque un desarrollador puede reproducirlas fácilmente usando la biblioteca Lottie. Puede reproducir animaciones de Adobe After Effects en un dispositivo móvil sin sufrir ningún artefacto de escala. Simplemente proporcione el archivo JSON al desarrollador y listo.

Utilice el perfil de color sRGB tanto como sea posible. Si sRGB no es suficiente en pantallas de gama amplia, deberá proporcionar colores o recursos gráficos (uno sRGB y otro con perfil de color integrado). La información detallada sobre los perfiles de color está disponible en las pautas HID de Apple en caso de que la necesite.

Código personalizado para resultados de píxeles perfectos

¡Genial! Ahora sabemos lo suficiente para crear un diseño de píxeles perfectos; ¿Cómo lo compartimos con el desarrollador? Obviamente necesitamos llegar a nuestra caja de herramientas.

Elegir las herramientas adecuadas

Hay herramientas increíblemente útiles para compartir el trabajo del diseñador con los desarrolladores: Zeplin. Solo úselo y el desarrollador tendrá casi toda la información necesaria para garantizar que su diseño de interfaz de usuario funcione: activos gráficos, fuentes y colores utilizados en el diseño, texto y mucho más. Prácticamente lo único que el diseñador puede necesitar proporcionar en este punto son los archivos de fuentes, en caso de que hayan usado fuentes que no están incluidas en iOS.

Otra herramienta interesante es PaintCode, que puede generar código a partir de imágenes vectoriales. PaintCode usa sus rutas SVG y datos de color para generar clases Swift u ObjC. Con PaintCode, puede usar expresiones, variables, etc. para crear estados pasivos/activos de sus botones, estados arriba/abajo, texto dinámico, animación a partir de variables y mucho más.

Obviamente, deberá confiar en Xcode y algunas herramientas de desarrollo estándar de iOS, pero hablaremos de eso más adelante.

Es extremadamente útil si tiene que actualizar dinámicamente solo una parte específica de un activo de diseño, por ejemplo, cambiar el color base para un fondo degradado en el ícono de chat. Y, como bonificación conveniente, su aplicación perderá peso.

Ok, el desarrollador finalmente tiene todo lo que necesita, entonces, ¿cómo implementamos perfectamente el diseño de píxeles perfectos (perdón por el juego de palabras)?

Configuración y sincronización de sus herramientas

Con Zeplin, debe obtener casi todo lo que necesita, siempre que el diseñador configure todo correctamente. Si algo se pasa por alto o no está claro, Zeplin proporciona una función de comentarios eficaz, lo que permite al diseñador y al desarrollador identificar y resolver problemas potenciales rápidamente. Incluso si todo se hace correctamente, los comentarios se pueden utilizar para comentarios y mejoras menores.

Sin embargo, como todos sabemos, las cosas no siempre salen según lo planeado, por lo que a veces el desarrollador deberá elegir un color, incluso si el diseñador proporcionó la paleta de colores utilizada en la aplicación.

Para hacer esto correctamente, necesita sincronizar sus herramientas:

• Establezca el perfil de color de su pantalla en sRGB: vaya a Preferencias del sistema - Pantallas - Color y elija sRGB IEC61966-2.1 .

• En Medidor de color digital , o cualquier otra herramienta de selección de color, elija mostrar en sRGB .

• Verifique que el perfil de color en la paleta de colores Xcode esté configurado en Dispositivo RGB.

Nota: las imágenes pueden tener un perfil de color incrustado. Si este es el caso, deberá adaptar sus herramientas a este perfil si desea obtener el color correcto de esta imagen. Afortunadamente, esto debería ser una excepción, y no debería experimentar estos casos con demasiada frecuencia.

En Xcode 9, recuerde conservar los datos vectoriales cuando sea necesario. Si bien aumentará el tamaño de la aplicación, esto también le permitirá usar su imagen para cualquier tamaño de pantalla. Sin embargo, en iOS 10 y versiones anteriores del sistema operativo móvil de Apple, las imágenes no se ampliarán utilizando los datos vectoriales adicionales.

En su lugar, las versiones anteriores del sistema operativo utilizarán mecanismos de escala heredados y le dejarán una imagen borrosa al escalar más allá del tamaño original. Puede consultar la documentación oficial de Apple para obtener información adicional sobre este problema en particular.

Finalmente, el desarrollador deberá asegurarse de que los tamaños y las distancias coincidan lo más posible con el diseño original. Si hay información cuestionable en Zeplin, puede medir las distancias entre los diferentes componentes de la interfaz de usuario de iOS con variaciones en las reglas de pantalla. Uno de ellos es xScope, una regla en pantalla con muchas funciones prácticas.

Dando vida al diseño de la interfaz de usuario de iOS

Cuando se trata de implementar el diseño de la interfaz de usuario de iOS, hay algunos enfoques para elegir: Guión gráfico, XIB y código personalizado.

• Guión gráfico : visualiza pantallas y la navegación entre ellas, pero no hay opciones para heredar un diseño de un controlador a otro.

• XIBs - Visualiza una pantalla o su parte, fácil de heredar. Antes de Xcode 9, no había opción para usar guías de diseño superior/inferior, mientras que en Xcode 9 podemos usar Área segura .

• Código : con mucho, la opción más flexible, pero no proporciona una visualización inmediata.

Para guiones gráficos, deberá dividir su diseño en flujos, por ejemplo, LoginFlow.storyboard, SettingsFlow.storyboard o NewsFeedFlow.storyboard. De esa manera, mantendrá sus guiones gráficos livianos.

Agrupe los elementos de la interfaz de usuario en bloques. Esto simplifica el soporte para todas las restricciones. No sea perezoso y coloque las vistas con nombre en orden, tal como aparecen en la pantalla de arriba hacia abajo. Tenga en cuenta que la parte inferior se mostrará encima de la superior. Esto le ayudará a encontrar diferentes vistas más rápido.

Consulte el siguiente ejemplo para elementos agrupados y desagrupados:

Si tiene varios objetos alineados a la izquierda o a la derecha, no los alinee con el borde con desplazamiento. El mejor enfoque es alinear con el elemento anterior o implementar una vista _offset especial_con una restricción de ancho. Si necesita cambiar el desplazamiento en algún momento en el futuro, esto lo hará un poco más fácil.

Para usar colores en IB, puede preparar una paleta en la parte inferior de Xcode Color Picker.

Nota: Si la versión mínima de iOS de su aplicación es 11, puede usar la opción "Colores con nombre" en el catálogo de activos.

Terminando

Eso es todo. Ahora solo nos falta enviar el resultado al equipo de control de calidad, comprobar que todo está en orden, ¡y listo! Nuestra aplicación de píxeles perfectos está lista.

El objetivo de este artículo era proporcionar un ejemplo lineal y simple del diseño de la interfaz de usuario de iOS con píxeles perfectos, obteniendo los mejores resultados en el menor tiempo posible. La colaboración entre los diseñadores y desarrolladores de la interfaz de usuario no siempre es tan simple y fluida, pero ese es un tema para otro artículo.