Ingeniería inversa del color del indicador de inicio del iPhone X

Noté un comportamiento inusual del indicador de inicio del iPhone X mientras trabajaba en mi aplicación más reciente. El fondo de la aplicación cerca del indicador de inicio es morado. Cuando se inicia la aplicación, el indicador de inicio es de color gris muy claro.

Pero sucedió algo extraño cuando presioné el botón "compartir" de la aplicación, que abrió una vista de actividad predeterminada de iOS (también conocida como "compartir hoja"). Cuando presioné el botón "cancelar" para cerrar la vista de actividad, el indicador de inicio se animó a un color gris oscuro.

El indicador de inicio comienza a iluminarse, luego, al pasar una hoja compartida, se oscurece.

Aunque el color de fondo era exactamente el mismo, la vista de actividad de color claro que pasaba por debajo hizo que el indicador de inicio cambiara de color. La única forma de que el indicador de inicio volviera a su color original era abandonar la aplicación y volver.

Nunca había visto esto antes, y despertó mi curiosidad.

¿Qué determina el color del indicador de inicio y por qué se comporta así? La respuesta es sorprendentemente compleja. ¡Hagamos una inmersión profunda y veamos qué podemos aprender!

Principios básicos del indicador de inicio

En septiembre de 2017, Apple presentó su última versión de teléfono móvil: iPhone X. El nuevo diseño reemplazó el icónico botón de inicio con gestos en pantalla. Para ir a casa, el usuario simplemente desliza hacia arriba desde la parte inferior de la pantalla.

https://www.apple.com/iphone-x/

El propósito del indicador de inicio

Para crear la capacidad de poder deslizar hacia arriba desde la parte inferior de la pantalla, Apple agregó una pequeña barra horizontal conocida como el indicador de inicio. El indicador de inicio siempre está presente, excepto en la pantalla de inicio y en cualquier aplicación que solicite que se oculte temporalmente (video de pantalla completa, juegos, etc.).

El indicador de inicio tiene otro propósito: proteger el borde inferior de la pantalla de elementos y gestos conflictivos de la interfaz de usuario. Debido a que el usuario debe poder deslizarse hacia arriba desde la parte inferior de la pantalla en cualquier momento, las mejores prácticas ahora dictan que los desarrolladores deben evitar colocar gestos o botones en conflicto en el borde inferior de la pantalla.

Al colocar una barra en la parte inferior, los elementos de la interfaz de usuario en la misma ubicación se ven mal: hay un conflicto visual entre la barra y otros elementos. En este sentido, el indicador de inicio "protege" esta región de la pantalla de diseñadores o ingenieros que desconocen la funcionalidad del iPhone X.

No hace falta un diseñador de interfaz de usuario para ver que algo está mal aquí.

Ahora que todos estamos en la misma página, volvamos a nuestra pregunta original: "¿De qué color es el indicador de inicio?"

Parte 1 - El comienzo

El 13 de septiembre de 2017, respondí una pregunta de desbordamiento de pila preguntando cómo cambiar el color del indicador de inicio.

En ese momento, el iPhone X no se había lanzado al público, pero la última versión de Xcode incluía un simulador de iPhone X. La ejecución de una aplicación de prueba simple en el simulador reveló que el color del indicador de inicio se basaba en el color del contenido debajo de él.

Las nuevas API para el iPhone X se lanzaron junto con esta misma versión de Xcode, y no había una API pública disponible para modificar el color del indicador de inicio (que todavía es el caso al momento de escribir esta publicación, y probablemente siempre lo será el caso).

Esto hizo que mi respuesta de Desbordamiento de pila sea simple y directa: no es posible modificar el color, y no debe preocuparse por ello, ya que está fuera de su control y se garantiza que sea visible.

Como anticipé que esta sería una pregunta común, incluí algunas capturas de pantalla del indicador de inicio además de varios colores de fondo.

Algunos ejemplos de colores del indicador de inicio de mi respuesta de desbordamiento de pila.

Esto fue lo suficientemente bueno para mí. El indicador de inicio mantiene su visibilidad al muestrear el color de la vista debajo y elegir un color gris que proporcione suficiente contraste.

Parte 2 - La trama se complica

Resulta que el color del indicador de inicio no es tan simple. Algunas observaciones adicionales abrieron agujeros en mi teoría de la "función de color sólido".

Observación # 1: Múltiples colores

La primera observación es que el indicador de inicio puede tener múltiples colores, similar a un gradiente. En el siguiente ejemplo, el lado izquierdo de la pantalla es negro y el derecho es blanco. El indicador de inicio se ajusta a esto adoptando un color más claro sobre el fondo oscuro y un color más oscuro sobre el fondo claro.

Si miras lo suficientemente cerca, puedes ver la transición del gris al negro. (simulador de iOS)

El indicador de inicio puede tener varios colores al mismo tiempo y transiciones suaves entre ellos. Esta transición suave se actualiza en tiempo real si alguna de las vistas detrás del indicador de inicio cambia.

Observe el cambio de color del indicador de inicio a medida que la vista en blanco pasa debajo. (simulador de iOS)

En el ejemplo anterior, una pequeña vista en blanco se mueve hacia adelante y hacia atrás detrás del indicador de inicio. La sección del indicador de inicio que cubre la vista en blanco se convierte en negro puro y pasa suavemente a gris.

Este comportamiento es similar a un UIVisualEffectView, que aplica un desenfoque sobre el contenido existente. Lo más probable es que el indicador de inicio tome una muestra de los colores cercanos para obtener el efecto de mezcla que se ve en la imagen de arriba.

(Además de verse bien, esta funcionalidad podría ayudar a evitar el desgaste de la pantalla OLED).

Observación # 2: Mismo fondo, diferente color del indicador de inicio

Como mencioné al principio de esta publicación, noté un comportamiento inusual cuando una hoja de compartir pasó debajo del indicador de inicio.

El indicador de inicio comienza a iluminarse, el pasar la hoja compartida lo oscurece. (iPhone real X)

Esta fue la observación más sorprendente: no existe un mapeo simple de 1 a 1 entre los colores de fondo y los colores del indicador de inicio. En este punto, estaba decidido a aprender más a través de la experimentación.

Parte 3 - Comienza la investigación

Mi primer orden del día fue determinar la fórmula para el color del indicador de inicio en el simulador de iOS. Según mis observaciones anteriores, el comportamiento del simulador de iOS era más predecible que un dispositivo real.

Creé una nueva aplicación para iOS como laboratorio para mis futuras experiencias. La aplicación era simple: todo lo que necesitaba era una manera fácil de cambiar el color de fondo detrás del indicador de inicio. Un control deslizante y un paso a paso controlan el valor gris del color de fondo, que se muestra como un gran número en el centro de la pantalla.

La aplicación creada para probar el indicador de inicio.

Mi objetivo era determinar el color del indicador de inicio para cada posible color de fondo gris. Podría graficar estos datos y ver si se le aplica una fórmula. Como solo había 256 posibilidades, adopté el enfoque manual, utilizando la aplicación integrada "Medidor de color digital" de macOS para obtener el color del indicador de inicio para cada valor.

Graficaba los resultados. No era una función lineal, una función exponencial, o cualquier tipo de función "agradable" que pudieras ver en la clase de matemáticas.

El gráfico era ... extraño.

Esto no era lo que esperaba.

Era una función de paso pero con pasos desiguales. Tenía algunas secciones distintas: un período de gris (relativamente) claro, dos pasos grandes, una serie de pasos pequeños, pasos en la dirección inversa y un período de negro puro.

La parte más inusual fue que el color del indicador de inicio no siempre disminuía. Hubo un período (alrededor de rgb 170-190) donde se hizo más claro a medida que el fondo se hizo más claro.

¿Por qué el gráfico se veía así? ¿Cuál sería el mismo experimento con resultados similares en un dispositivo real? Necesitaba saberlo

Parte 4 - La investigación continúa

Mi siguiente tarea fue realizar el mismo experimento en un dispositivo real. Era inmediatamente obvio que los resultados iban a ser dramáticamente diferentes.

Para recopilar datos en un dispositivo real, utilicé la misma aplicación de antes. Transmití una vista previa en vivo de la pantalla del iPhone a mi computadora a través de QuickTime. Esto eliminó cualquier decoloración de la pantalla True Tone, y me permitió usar la aplicación Digital Color Meter para inspeccionar fácilmente los colores.

Otro factor agregado a la complejidad en un dispositivo real: los valores rojo, verde y azul no siempre fueron los mismos. En el simulador, los valores RGB fueron idénticos, lo que resultó en colores como RGB (54, 54, 54). En un dispositivo real, casi nunca eran iguales, pero estaban muy cerca, lo que daba como resultado colores como RGB (211, 209, 212). Al registrar los resultados, tomé el promedio de los valores RGB individuales.

Aquí están los resultados, en comparación con los datos del simulador anterior.

Los colores en un dispositivo real (línea roja) siguen una tendencia similar a los del simulador (línea azul), excepto compensados ​​por un margen significativo. El indicador de inicio del simulador siempre está muy oscuro, mientras que el indicador de inicio del dispositivo es muy claro o muy oscuro.

El gráfico para el dispositivo real es ruidoso. En general, sigue una tendencia suave, pero salta hacia arriba y hacia abajo y se ve áspera. Esto es más que un simple efecto secundario de mi promedio, y el ruido es constante. Si se repite el experimento, el ruido sigue exactamente el mismo patrón.

Sin embargo, el gráfico anterior no cuenta toda la historia.

Los valores presentados anteriormente se recopilaron comenzando el fondo completamente negro e incrementando los valores RGB uno por uno (pasando de 0 a 255). Cuando los valores se recopilan en la dirección opuesta, los resultados son diferentes.

En cierto punto, el color del indicador de inicio "se cae del acantilado" en su transición de claro a oscuro u oscuro a claro, y se anima durante un breve período de tiempo, como se muestra en el gif anterior con el color de fondo púrpura. Dependiendo de si el fondo comienza claro u oscuro, el acantilado se produce en un lugar diferente.

Echemos un vistazo a un nuevo gráfico que compara los resultados de "subir" (negro a blanco) y "bajar" (blanco a negro).

La línea azul de arriba es la misma que la línea roja del gráfico anterior. Sus puntos de datos se recopilaron de izquierda a derecha (0 a 255, "subiendo"). La línea naranja es la misma información, pero se recopila en la dirección opuesta (255 a 0, "bajando"). La línea roja representa los puntos donde el indicador de inicio y el fondo de la vista son del mismo color.

Las líneas "subir" y "bajar" siguen un camino similar, pero tienen un patrón de ruido diferente. Curiosamente, tienen exactamente el mismo patrón de ruido en el rango más oscuro (0-80).

A partir de este gráfico podemos decir que los "acantilados" se producen cuando el color del indicador de inicio se acerca demasiado al color del fondo. Incluso parece que la línea roja está alejando las líneas "subiendo" y "bajando", intentando activamente resistirse a convertirse exactamente en el mismo color que el fondo. En cierto punto, el indicador de inicio cambia a estar muy oscuro o muy claro.

Esto explica el cambio de color en la aplicación con el fondo morado. El color púrpura debe estar en una región entre los dos acantilados. Según el color anterior del indicador de inicio, puede ser claro u oscuro. Cuando la vista de actividad blanca se anima detrás del indicador de inicio cuando se descarta, el indicador de inicio cambia de su estado claro a su estado oscuro, y se restablece en el valor oscuro-equivalente para el color de fondo púrpura.

Parte 5 - La investigación se vuelve colorida

Todas las pruebas hasta este punto han utilizado fondos en escala de grises. ¿Cómo diferirían los resultados si usáramos fondos de colores en su lugar?

Repetí el mismo experimento, pero en lugar de modificar el color gris, modifiqué el tono en una escala de colores HSB. Mantuve la saturación (S) y el brillo (B) en sus valores máximos para obtener los colores más vibrantes y distintos. Solo probé estos colores "subiendo", lo que en este caso significa desde el tono 0 (rojo) hasta el tono 255 (rojo) en orden de arcoíris.

La primera observación es que hay dos acantilados: una vez cuando el color se vuelve amarillo y otra vez cuando el color se vuelve azul oscuro. Esto ocurre debido al relativo "brillo" de los colores.

La siguiente observación es la diferencia entre el simulador y un dispositivo real. Los colores siguen las mismas tendencias generales, pero el color del indicador de inicio del dispositivo real es más ruidoso y puede alcanzar valores más brillantes.

Estos son hallazgos fascinantes hasta ahora. Además de probar todos los colores de fondo posibles, no hay mucho más que podamos descubrir solo con la observación. Ahora tenía curiosidad sobre cómo se implementa el indicador de inicio, ¿es una UIView? CALayer? UIVisualEffectView? ¿Algo más? ¿Qué hace que se comporte de esta manera?

Vamos a averiguar.

Parte 6 - ¡Necesitamos profundizar más!

En este punto, recurrí a mi amigo y experto en iOS, Ian McDowell. Pudo señalarme en la dirección correcta, utilizando el Simulador de iPhone X y las herramientas de depuración de Xcode para encontrar el indicador de inicio.

La "pantalla de inicio" de iOS es en realidad una aplicación llamada SpringBoard. Podemos adjuntar un depurador a la aplicación Springboard que se ejecuta en el simulador de iPhone X y usar la opción "Jerarquía de vista de depuración" para inspeccionar las vistas que conforman la pantalla de inicio, incluido el indicador de inicio.

Si desea seguir en casa, este es el proceso:

  1. Inicie un simulador de iPhone X
  2. En Xcode, seleccione Depurar> Adjuntar a proceso ...> SpringBoard.
  3. Cuando se esté ejecutando SpringBoard, seleccione el botón Debir View Heirarchy.

En lo profundo de la jerarquía de vistas, encontramos un MTLumaDodgePillView que es una subvista de un SBHomeGrabberView. ¡Parece que encontramos el indicador de inicio!

¡Encontramos el indicador de inicio!

El nombre MTLumaDodgePillView tiene sentido. Confirma nuestro comportamiento observado del indicador de inicio, que su color contrasta con el fondo en función de su brillo actual.

¿Podemos ir más profundo todavía?

SpringBoard tiene otra característica interesante: un menú de depuración oculto. Resulta que hay una sección completa para modificar las propiedades del indicador de inicio. En este menú de depuración, el indicador de inicio se denomina "capturador".

Tantos deslizadores divertidos para jugar.

Este menú de depuración contiene principalmente configuraciones visuales y de animación. Lo más probable es que se use para colaborar entre diseño e ingeniería dentro de Apple. Engineering construye el indicador de inicio, proporciona enlaces a todos los parámetros internos, permite a los diseñadores jugar con ellos hasta que estén contentos, y luego los ingenieros usan la configuración para el producto final.

Afortunadamente para nosotros, podemos acceder a este menú y ver los resultados en el simulador.

Primero jugué con la apariencia visual del indicador de inicio. Hay controles deslizantes para el ancho y la altura en varios estados.

Algunos tamaños de indicadores de inicio alternativos.

Las otras configuraciones son más difíciles de probar, ya que no parecen aplicarse al simulador. Hay configuraciones para un "umbral de luma" para luz y oscuridad, así como parámetros para la animación entre estados. Esto confirma los "acantilados" donde el color se animaría dramáticamente entre la luz y la oscuridad: hay umbrales predefinidos basados ​​en la luminosidad del fondo.

No pude determinar por qué el simulador se comporta de manera tan diferente a un dispositivo real. Supongo que el simulador está usando una combinación diferente de configuraciones, o que ciertas configuraciones solo tienen efecto en el hardware real.

¿Quieres aprender más sobre ingeniería inversa en iOS? Sash Zats publicó un sorprendente artículo en profundidad sobre el indicador de inicio. ¡Compruébalo si quieres sumergirte en más código!

Esto marca el final de la aventura del descubrimiento de indicadores caseros. ¡Espero que haya sido tan educativo para ti como lo fue para mí!

Comida para llevar de alto nivel

  1. El sistema determina el color del indicador de inicio y no se puede modificar directamente.
  2. El color del indicador de inicio está determinado por el contenido debajo, y no siempre es un color sólido.
  3. El indicador de inicio en el simulador no es una representación precisa del indicador de inicio en un dispositivo real.
  4. El indicador de inicio se anima a sus nuevos colores cuando el contenido debajo cambia.
  5. El indicador de inicio está en estado "claro" u "oscuro".

¿Pero por qué?

¿Por qué molestarse en investigar el indicador de inicio si su apariencia está fuera de nuestro control?

Hay una aplicación práctica para estos aprendizajes: si una pantalla en su aplicación tiene un color de fondo en el rango medio donde el indicador de inicio podría ser claro u oscuro, puede preferir un estilo sobre el otro. Si la barra de estado es blanca, por ejemplo, puede verse más equilibrada visualmente si el indicador de inicio también es blanco. Conocer el comportamiento matizado del indicador de inicio puede ayudar a garantizar que no se anime accidentalmente entre claro y oscuro cuando podría distraer al usuario.

¿Prefieres uno sobre el otro?

En un ejemplo anterior, la hoja de acción compartida en blanco detrás del indicador de inicio fue suficiente para cambiar el estilo del indicador de inicio.

Si quisiera evitar esto, podría fijar una vista detrás del indicador de inicio entre el área segura y el borde inferior de la pantalla. Cuando se descarta la hoja de compartir, podría darle un color de fondo más oscuro (quizás negro con 40% alfa) y agregar una animación de desvanecimiento para que sea menos notable.

Esta misma táctica podría usarse para establecer el color del indicador de inicio, forzándolo sobre uno de los "acantilados". En la gran mayoría de los casos, el indicador de inicio debe dejarse solo para hacer lo que quiera. La mayoría de los usuarios de iPhone X probablemente ya lo hayan olvidado.

La verdadera lección

Esperemos que esta breve investigación sobre el color del indicador de inicio nos ayude a apreciar la complejidad del diseño simple. "¡Es solo una barra negra / blanca!" Está lejos de la verdad. Vale la pena apreciar la cantidad de cuidado y atención al detalle que se incluyó en el indicador de inicio.

Tomar algo simple, investigar sus complejidades internas y reflexionar sobre su diseño nos ayuda a aprender sobre el proceso creativo. Al combinar diseño e ingeniería, podemos hacer mejores productos que sean simples y agradables de usar.

¿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 Ian McDowell y David Okun por ayudarnos a revisar borradores anteriores de esta publicación.