Por qué su aplicación se ve mejor en Sketch

Explorando las diferencias de renderizado entre Sketch e iOS

Encuentra la diferencia

¿Puedes ver las diferencias entre estas dos imágenes?

Si te fijas lo suficiente, puedes notar algunas diferencias sutiles:

La imagen de la derecha:

  1. Tiene una sombra más grande.
  2. Tiene un gradiente más oscuro.
  3. Tiene la palabra "in" en la línea superior del párrafo.

La imagen de la izquierda es una captura de pantalla de Sketch, y la imagen de la derecha es una reproducción en iOS. Estas diferencias surgen cuando se representan los gráficos. Tienen exactamente la misma fuente, interlineado, radio de sombra, colores y atributos de gradiente: todas las constantes son idénticas.

Como puede ver, algunos aspectos del diseño original pueden perderse durante la conversión del archivo de diseño a código real. Vamos a explorar algunos de estos detalles para que pueda saber qué observar y cómo solucionarlos.

Por qué nos importa

El diseño es crítico para una aplicación móvil exitosa. Especialmente en iOS, los usuarios están acostumbrados a las aplicaciones que funcionan bien y se ven bien.

Si es diseñador o desarrollador de una aplicación móvil, sabe lo importantes que son los pequeños detalles para la experiencia del usuario final. El software de alta calidad solo puede provenir de personas que se preocupan profundamente por su oficio.

Hay muchas razones por las cuales las aplicaciones podrían no verse tan bien como sus diseños originales. Vamos a investigar una de las razones más sutiles: las diferencias en el renderizado entre Sketch e iOS.

Perdido en la traducción

Ciertos tipos de elementos de la interfaz de usuario tienen diferencias notables entre Sketch e iOS. Vamos a explorar los siguientes elementos:

  1. Tipografía
  2. Oscuridad
  3. Gradientes

1. tipografía

La tipografía se puede implementar de varias maneras, pero para esta prueba voy a usar etiquetas (elemento "Texto" en Sketch, UILabel en iOS).

Veamos algunas de las diferencias:

La mayor diferencia en el ejemplo anterior es la ubicación de los saltos de línea. La tercera agrupación de texto que comienza con "Este texto es SF Semibold" se rompe después de la palabra "25" en el diseño, pero después de la palabra "puntos" en la aplicación. Este mismo problema ocurre con el párrafo de texto: los saltos de línea son inconsistentes.

Otra diferencia menor es que el inicio (espacio entre líneas) y el seguimiento (espacio entre caracteres) son ligeramente mayores en Sketch.

Es más fácil ver estas diferencias cuando se superponen directamente:

¿Qué pasa con otros tipos de letra? Reemplazando San Francisco con Lato (una fuente gratuita ampliamente utilizada), obtenemos los siguientes resultados:

¡Mucho mejor!

Todavía hay algunas diferencias en el liderazgo y el seguimiento, pero en general son pequeñas. Sin embargo, tenga cuidado: si el texto necesita alinearse con otros elementos como las imágenes de fondo, estos pequeños desplazamientos pueden ser notables.

Como arreglar

Algunos de estos problemas están relacionados con la fuente predeterminada de iOS: San Francisco. Cuando iOS representa la fuente del sistema, incluye automáticamente el seguimiento basado en el tamaño en puntos. Esta tabla de seguimiento aplicada automáticamente está disponible en el sitio web de Apple. Hay un complemento de Sketch llamado "SF Font Fixer" que refleja estos valores en Sketch. Lo recomiendo si su diseño usa San Francisco.

(Nota al margen: recuerde siempre hacer que el cuadro de texto se ajuste firmemente alrededor del texto en Sketch. Esto se puede hacer seleccionando el texto y alternando entre la alineación "Fija" y "Auto", luego restableciendo el ancho del cuadro de texto. Si hay cualquier espacio adicional, esto puede conducir fácilmente a la introducción de valores incorrectos en el diseño).

2. Sombras

A diferencia de la tipografía que tiene reglas de diseño universal, las sombras están menos definidas.

Como podemos ver en la imagen de arriba, las sombras en iOS son más grandes por defecto. En los ejemplos anteriores, esto hace la mayor diferencia en los bordes superiores de los rectángulos.

Las sombras son complicadas porque los parámetros entre Sketch e iOS no son los mismos. La mayor diferencia es que no hay un concepto de "propagación" en un CALayer, aunque esto se puede superar aumentando el tamaño de la capa que contiene la sombra.

Las sombras pueden variar enormemente en su diferencia entre Sketch e iOS. He visto que algunas sombras con exactamente los mismos parámetros se ven geniales en Sketch pero son casi invisibles cuando se ejecutan en un dispositivo real.

Como arreglar

Las sombras son difíciles y requieren un ajuste manual para que coincida con el diseño original. A menudo, el radio de la sombra deberá ser menor y la opacidad deberá ser mayor.

// antiguo
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.2
layer.shadowOffset = CGSize (ancho: 0, altura: 4)
layer.shadowRadius = 10
// nuevo
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize (ancho: 0, altura: 6)
layer.shadowRadius = 7

Los cambios requeridos varían según el tamaño, el color y la forma; aquí, solo necesitamos algunos ajustes menores.

3. Gradientes

Los gradientes también resultan problemáticos.

De los tres gradientes, solo el "naranja" (arriba) y el "azul" (abajo a la derecha) difieren.

El degradado naranja se ve más horizontal en Sketch, pero más vertical en iOS. Como resultado, el color general del gradiente es más oscuro en la aplicación final que en el diseño.

La diferencia es más notable en el gradiente azul: el ángulo es más vertical en iOS. Este gradiente está definido por tres colores: azul claro en la esquina inferior izquierda, azul oscuro en el medio y rosa en la esquina superior derecha.

Como arreglar

Es posible que sea necesario ajustar los puntos inicial y final si el gradiente está en ángulo. Intente compensar ligeramente el startPoint y endPoint de su CAGradientLayer para tener en cuenta estas diferencias.

// antiguo
layer.startPoint = CGPoint (x: 0, y: 1)
layer.endPoint = CGPoint (x: 1, y: 0)
// nuevo
layer.startPoint = CGPoint (x: 0.2, y: 1)
layer.endPoint = CGPoint (x: 0.8, y: 0)

Aquí no hay una fórmula mágica *: los valores deben ajustarse e iterarse hasta que los resultados coincidan visualmente.

* Jirka Třečák publicó una excelente respuesta con enlaces que explican cómo funciona la representación de degradado. ¡Compruébalo si quieres profundizar en más código!

Ver por ti mismo

Creé una aplicación de demostración para ver fácilmente estas diferencias en un dispositivo real. Incluye los ejemplos anteriores, junto con el código fuente y el archivo Sketch original para que pueda ajustar las constantes al contenido de su corazón.

Esta es una excelente manera de aumentar la conciencia dentro de su equipo: simplemente entrégueles su teléfono y podrán verlo por sí mismos. Simplemente toque cualquier parte de la pantalla para alternar entre las imágenes (similar a los gifs anteriores).

Obtenga la aplicación de demostración de código abierto aquí: https://github.com/nathangitter/sketch-vs-ios

La aplicación de demostración Sketch vs iOS: ¡pruébela usted mismo!

Comida para llevar

No asuma que valores iguales implican resultados iguales. Incluso si los números coinciden, la apariencia visual puede no serlo.

Al final del día, debe haber una iteración después de implementar cualquier diseño. La buena colaboración entre diseño e ingeniería es crucial para un producto final de alta calidad.

¿Disfrutaste la historia? Deja algunos aplausos aquí en Medium y compártelo con tus amigos de diseño / desarrollo de iOS. ¿Quiere mantenerse actualizado sobre lo último en diseño / desarrollo de aplicaciones móviles? Sígueme en Twitter aquí: https://twitter.com/nathangitter

Gracias a Rick Messer y David Okun por revisar los borradores de esta publicación.