Saltar al contenido

Herramienta de vista previa de diseño de esfera Garmin

Diseña y previsualiza una esfera de reloj redonda con hora, fecha, pasos y frecuencia cardíaca. Elige esquemas de color oscuros, comprueba el contraste WCAG para la legibilidad y descarga el diseño como PNG.

Vista previa de diseño de esfera Garmin

Diseña una esfera de reloj redonda de estilo clásico y observa cómo se actualiza al modificarla. Elige un esquema de colores oscuro, define los valores de ejemplo, comprueba el contraste y descarga el resultado como PNG.

MON 2110:098,432PASOS62PPM
Preajuste de color
Colores de los elementos
Valores de ejemplo

Contraste con el fondo

Hora
18.9:1
Fecha
7.3:1
Pasos
9.8:1
Frecuencia cardíaca
6.9:1

Según la norma WCAG 2.1, una proporción de 3:1 es el mínimo para texto grande y de 4.5:1 para texto más pequeño. Cuanto más alta sea, más fácil será leerla bajo el sol.

Calculadora de carga...
📚

Documentación

Esta herramienta previsualiza una esfera de reloj redonda en el navegador. Dibuja un diseño de estilo profesional con la hora, la fecha, el número de pasos y la frecuencia cardíaca, y permite cambiar el color de cada elemento. La vista previa se actualiza al cambiar los colores, y el diseño terminado se puede descargar como imagen PNG.

Solo es una vista previa del diseño. No se conecta a ningún reloj ni produce una esfera de reloj instalable.

Qué muestra la vista previa

La esfera utiliza la disposición habitual de la mayoría de las esferas redondas:

  • la fecha en la parte superior
  • la hora en grande, en el centro
  • el número de pasos y la frecuencia cardíaca, uno junto al otro debajo
  • un bisel con marcas horarias alrededor del borde

Las lecturas de ejemplo se pueden cambiar para evaluar el diseño con números realistas. Un número de pasos de cuatro cifras ocupa más espacio que uno de dos cifras, y un reloj de 12 horas añade un indicador de a. m. o p. m.

Por qué se utilizan esquemas de colores oscuros

La mayoría de los relojes Garmin redondos utilizan una pantalla de memoria en píxel o una pantalla OLED. En una pantalla OLED, un fondo oscuro consume menos energía, porque los píxeles negros simplemente se apagan. Las esferas oscuras también son más fáciles de leer a plena luz del sol, cuando un fondo claro refleja el resplandor.

Los ajustes preestablecidos son todos oscuros por ese motivo. Aun así, se puede elegir un fondo claro, y la herramienta indicará que se aparta de la práctica habitual.

Contraste y legibilidad

Un reloj se lee de un vistazo, a menudo con poca luz o en movimiento, por lo que el contraste importa más que en un teléfono. La herramienta mide la relación de contraste entre cada elemento y el fondo mediante la fórmula WCAG 2,1.

La relación compara la luminancia relativa de dos colores:

C=L1+0.05L2+0.05C = \frac{L_{1} + 0.05}{L_{2} + 0.05}

donde C es la relación de contraste.

L1 es la luminancia más clara y L2, la más oscura. El resultado va de 1:1, que significa colores idénticos, a 21:1 para negro sobre blanco.

Conviene conocer dos umbrales:

  • 3:1 es el mínimo para texto grande
  • 4,5:1 es el mínimo para texto de tamaño normal

La hora aparece en grande, por lo que 3:1 basta en principio, pero una relación más alta es preferible en exteriores. Las etiquetas más pequeñas se benefician de 4,5:1 o más.

Ejemplo resuelto

Tomemos como fondo #0b1020, un azul marino muy oscuro, con texto blanco en #ffffff. El contraste es de aproximadamente 18:1, lo que resulta cómodo con cualquier iluminación.

Cambiemos el color del número de pasos a #2a3a5e, un azul cercano al fondo, y la relación baja aproximadamente a 1,6:1. Entonces el número es casi invisible a la distancia de un brazo, y la herramienta lo señala.

Descarga del diseño

El botón de descarga convierte la vista previa en tiempo real en un PNG de 320 por 320 píxeles. La imagen se genera en el navegador; no se sube nada. El archivo se puede utilizar como maqueta, compartir para recibir comentarios o conservar como referencia mientras se crea la esfera real con las herramientas Connect IQ de Garmin.

Preguntas frecuentes

¿Esto crea una esfera de reloj que pueda instalar?

No. Produce una imagen del diseño. Para crear una esfera instalable se requiere el SDK de Connect IQ de Garmin o Garmin Watch Face Builder.

¿Por qué la vista previa es cuadrada si el reloj es redondo?

La imagen es un lienzo cuadrado con una esfera redonda dibujada dentro, que es la forma habitual de crear los gráficos de una esfera de reloj. Las esquinas simplemente no se muestran en el reloj.

¿Qué tamaño debe tener una esfera de reloj real?

Depende del modelo. Las pantallas redondas habituales de Garmin son de 240 por 240, 260 por 260 y 416 por 416 píxeles. La vista previa utiliza 320 por 320 como término medio.

¿Por qué mi color se ve diferente en el reloj?

Las pantallas de los relojes varían en brillo y reproducción del color, y las pantallas de memoria en píxeles muestran una paleta limitada. Considera la vista previa como una guía y comprueba después la pantalla real.

¿Qué significan los números del contraste?

Son relaciones de la norma de accesibilidad WCAG 2,1, la misma medida que se utiliza para los sitios web. Los números más altos son más fáciles de leer.