Cómo hice que las cifras de Mole encajaran en la barra de menús
Mole puede mostrar dos cifras junto al pequeño topo de la barra de menús, CPU y memoria por defecto. Hace tiempo que la gente me dice que nunca terminaba de encajar con los iconos de alrededor, aunque nadie sabía decir exactamente por qué. Esta vez hice una captura de mi propia barra de menús y la revisé elemento por elemento. El problema no era ninguna cifra en concreto. El tamaño de letra, el grosor y el espaciado parecían aceptables por separado, y juntos hacían que Mole destacara sobre todo lo demás en la barra.
Empezar por los vecinos
En mi captura, el elemento a la izquierda de Mole era Stats, un monitor de código abierto para la barra de menús. Leí el código con el que dibuja la barra de menús: sus celdas pequeñas colocan una etiqueta de 7 pt en light sobre un valor de 12 pt en regular, su velocidad de red en dos líneas es de 9 pt y no hay negrita en ninguna parte de la barra. Mole usaba dos líneas de texto de 8 pt en semibold. Medido en la misma captura, el texto de Mole tenía 12 píxeles de alto y el de Stats entre 13 y 16, así que Mole era un tamaño más pequeño que sus vecinos y el único texto en negrita de la barra, lo que lo convertía en una pequeña mancha gris.
Ya lo había ajustado varias veces, pasando de 10 pt a 9 pt y luego a 8 pt, y siempre miraba el topo por sí solo en lugar de junto a otros elementos de estado. Así que el texto no dejaba de encoger mientras el grosor nunca cambiaba. La barra de menús es un espacio compartido y nadie lee el elemento de una app de forma aislada, así que esta vez seguí el estilo que la gente ya lee a diario: etiquetas de 7 pt en light, valores de 12 pt en regular, 9 pt en regular para el diseño de dos líneas y la velocidad de red, nada en negrita y la jerarquía marcada solo por el tamaño.
Medir la tinta, no la caja
Una vez decidida la tipografía, salieron a la luz los problemas de espaciado. El hueco entre el topo y la primera cifra, el hueco entre dos métricas y el hueco entre una etiqueta y su valor se calculaban cada uno a su manera, así que el elemento nunca se leía como un conjunto. El código antiguo medía las distancias desde los bordes de la imagen o desde las cajas de maquetación del texto, pero el ojo ve la tinta, y el espacio en blanco entre la caja y la tinta cambia de un glifo a otro. Dos huecos fijados ambos en 3 pt podían parecer el doble de distintos.
El topo lo mostraba con más claridad que nada. La hoja de sprites de cada personaje lleva su propio margen transparente, así que una distancia fija desde el borde de la imagen dejaba solo 6,5 pt junto al topo y más junto a otro personaje. Ahora Mole busca el píxel opaco más a la derecha en todos los fotogramas de la animación y mide desde ahí, de modo que, elijas el personaje que elijas, la distancia hasta las cifras es de unos 12 pt.
El hueco entre dos métricas escondía una trampa parecida. Cada celda reserva espacio para su lectura más ancha, 100% en el caso de los porcentajes, para que la barra de menús no se desplace cuando una lectura pasa de 9% a 44%, y con valores de dos dígitos eso deja unos 13 pt entre celdas. Pero cuando las dos celdas llegan a 100%, el margen reservado desaparece. Una versión durante este trabajo dejaba solo 3 pt entre celdas, y a plena carga el diseño de dos líneas mostraba 100%999 KB/s como un solo bloque. Ahora las celdas mantienen al menos 6 pt de separación, así que siguen separadas incluso a plena carga. Etiquetas y valores quedan a 3,5 pt en vertical, igual que en Stats.
Las líneas alineadas a la izquierda también pueden parecer torcidas
En las celdas antiguas la etiqueta iba centrada sobre la cifra y parecía un pie de foto flotando encima. Esta vez tanto la etiqueta como el valor están alineados a la izquierda y se dibujan desde la misma coordenada x, así que deberían quedar alineados. Con zoom, la etiqueta siempre quedaba un poco a la izquierda de la cifra. La causa está en la fuente: cada glifo lleva un pequeño margen incorporado en su lado izquierdo. Los dígitos tabulares de 12 pt tienen de 0,7 a 1,0 pt, el dígito 1 tiene 1,7 pt y las mayúsculas de una etiqueta de 7 pt solo de 0,3 a 0,6 pt. Empiezan en el mismo punto y, aun así, los trazos visibles acaban separados de 1 a 3 píxeles, sobre todo cuando una lectura empieza por 1.
La solución mueve la etiqueta sobre el primer trazo del valor y deja el valor donde está. La lectura cambia cada segundo, y si se desplazara cada vez que cambia su primer dígito, la cifra que estás mirando bailaría de un lado a otro. Mover la pequeña etiqueta de arriba lo evita; solo se mueve, menos de 1 pt, cuando la lectura pasa a otra decena.
Incluso con los trazos alineados con exactitud, el valor seguía pareciendo un poco desplazado a la derecha. Es una ilusión habitual cuando una cifra grande está bajo un texto pequeño: un dígito redondo de 12 pt es mucho mayor que una etiqueta de 7 pt en light, y el ojo percibe el borde del glifo más grande como más hacia dentro. Comparé 0, 0,5 y 1 pt. Con 1 pt la cifra ya parecía empujar hacia fuera, así que ahora el valor sobresale 0,3 pt hacia la izquierda, algo más de medio píxel, justo lo necesario para que las dos líneas parezcan apoyarse en el mismo borde.
Reservar el ancho de cada cifra
Cuando algo cambia de ancho en la barra de menús, todos los iconos a su derecha se mueven con ello, así que cada tipo de lectura necesita espacio reservado para su forma más ancha. Aparecieron dos huecos. La velocidad del ventilador se escribe 850 por debajo de 1000 rpm y 2.1k por encima, y las dos formas reservaban anchos distintos, así que toda la barra de menús daba un salto cuando el ventilador cruzaba las 1000 rpm. La memoria swap usaba directamente el formato de bytes del sistema, que producía 10.52 GB, o 1,2 Go en un sistema en francés: demasiado largo para una celda de 12 pt, y su ancho cambiaba con la lectura. Ahora las dos formas del ventilador comparten un mismo ancho, y la swap aparece siempre en la barra de menús en una forma corta de tres dígitos como máximo, como 512 MB, 1.2 GB o 12 GB. El valor completo sigue en la ventana emergente.
La velocidad de red recibió un arreglo de paso. Por debajo de 10 KB/s mostraba antes un decimal, así que en reposo 0.0 KB/s quedaba encima de 86 KB/s, con punto decimal en una línea y no en la otra, y la pareja alineada a la derecha nunca parecía pareja. Una décima de kilobyte por segundo dice muy poco, así que KB/s es ahora siempre un número entero. MB/s conserva un decimal por debajo de 10, donde la diferencia entre 1.5 MB/s y 1 MB/s sí importa.
Cómo configurarlo
En los Ajustes de Mole, abre la pestaña Barra de menús. La fila Pantalla tiene tres opciones: Corredor muestra solo el topo, Métricas muestra solo los números, y Ambos muestra el topo con los números al lado, así que elige Métricas o Ambos para ver los números de este artículo. Entonces aparecen algunas filas más debajo. Disposición en Fila da las celdas con la etiqueta sobre el valor, y Apilado da las dos líneas de texto pequeño. Indicador 1 e Indicador 2 eligen las dos métricas, CPU y memoria por defecto, y cualquiera de las dos puede cambiarse a GPU, temperatura, potencia, ventilador, swap o la batería de un dispositivo Bluetooth. Al activar Velocidad de red se añaden la subida y la bajada a la derecha. El propio topo se puede cambiar por otro personaje en Estilo, y el botón de al lado le da la vuelta al personaje.
A veces me preguntan por qué el topo corre tan rápido. Su ritmo es la lectura de la CPU: cuanto más ocupado está el Mac, más rápido corre. Sigue el valor más alto entre el uso total de la CPU y la carga media de un minuto. En reposo total da un paso cada 1,3 segundos más o menos, y a partir del 70% deja de acelerar, en torno a cuatro pasos por segundo. La curva sube más deprisa con carga baja para que 10% y 30% se vean claramente distintos, lo que significa que con un navegador abierto y algo de escritura en marcha ya corre casi el doble de rápido que con el Mac en reposo, y compilar código o exportar un vídeo lo pone a correr de verdad. El ritmo es una señal deliberada, por eso no hay un ajuste de velocidad aparte. Los demás personajes van a su propio ritmo, porque cada uno tiene un número distinto de fotogramas de animación. Cuando solo se muestra el topo, al pasar el puntero sobre él aparece también el aviso «Corre más rápido cuanto más ocupada está la CPU».
Lo que probé y dejé como estaba
En un momento dado la celda de temperatura me pareció demasiado grande. Hice una versión con la unidad a 9 pt y otra a 10 pt, y en las dos el ° más pequeño bajaba hacia la línea base, así que 58°C se leía como la errata 58°c, y el signo de porcentaje quedaba claramente más pequeño que el que muestra Stats justo al lado. Al medir de nuevo vi que la cifra tenía exactamente el mismo tamaño que la de la celda de CPU; solo parecía más grande porque 58°C tiene una mayúscula más que 44%. Así que el tamaño se quedó como estaba.
También había una regla antigua según la cual junto al personaje solo podía aparecer el diseño de dos líneas, nunca estas celdas con la etiqueta sobre el valor. La versión contra la que se escribió esa regla usaba 12 pt en semibold. Sin la negrita, el motivo ya no existe, así que ahora los dos diseños pueden aparecer junto al personaje, y las celdas son la opción por defecto.
Mirando atrás, ninguno de estos cambios es grande. Son medios píxeles, un decimal y unos pocos puntos de espaciado, y juntos deciden si un icono se integra en la barra de menús o salta a la vista. Si haces una app para la barra de menús, pon tu elemento y algunos vecinos populares en una misma captura y compáralos, mide la tinta y no la caja, y reserva el ancho máximo de cada lectura. Con esas tres cosas, probablemente ya no desentonará.
Ahora todos estos valores están cubiertos por pruebas, una para el grosor, otra para el ancho y otra para la alineación de las etiquetas, así que es menos probable que un cambio posterior los deshaga. Es la misma idea que en Diseñar Mole para no estorbar: lo que vive en la barra de menús funciona mejor cuando lo miras cada día y nunca te fijas en ello.