Ferramenta de Design e Pré-visualização de Mostrador Garmin

Esta ferramenta exibe uma prévia de um mostrador de relógio redondo no navegador. Ela desenha um layout de aparência corporativa, com a hora, a data, a contagem de passos e a frequência cardíaca, e permite alterar a cor de cada elemento. A prévia é atualizada conforme as cores mudam, e o design finalizado pode ser baixado como uma imagem PNG.

É apenas uma prévia de design. Ela não se conecta a um relógio nem produz um mostrador instalável.

O que a prévia mostra

O mostrador usa o layout adotado pela maioria dos mostradores redondos:

• a data na parte superior
• a hora em tamanho grande no centro
• a contagem de passos e a frequência cardíaca lado a lado, abaixo
• uma luneta com marcas das horas ao redor da borda

As leituras de exemplo podem ser alteradas para que o design seja avaliado com números realistas. Uma contagem de passos com quatro dígitos ocupa mais espaço que uma com dois, e um relógio de 12 horas acrescenta um indicador de AM ou PM.

Por que os esquemas de cores escuras

A maioria dos relógios Garmin redondos usa uma tela de memória em pixel ou OLED. Em uma tela OLED, um fundo escuro consome menos energia, pois os pixels pretos são simplesmente desligados. Os mostradores escuros também são mais fáceis de ler sob luz solar intensa, quando um fundo claro reflete o brilho.

As predefinições aqui são todas escuras por esse motivo. Ainda é possível escolher um fundo claro, e a ferramenta indicará que ele se distancia da prática habitual.

Contraste e legibilidade

Um relógio é lido de relance, muitas vezes em condições de pouca luz ou em movimento, portanto o contraste é mais importante que em um celular. A ferramenta mede a relação de contraste entre cada elemento e o fundo usando a fórmula da WCAG 2,1.

A relação compara a luminância relativa de duas cores:

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

em que C é a razão de contraste.

L1 é a luminância mais alta, e L2, a mais baixa. O resultado varia de 1:1, que significa cores idênticas, a 21:1 para preto sobre branco.

Vale conhecer dois limites:

• 3:1 é o mínimo para textos grandes
• 4,5:1 é o mínimo para textos de tamanho normal

A hora é grande, portanto 3:1 é suficiente para ela em princípio, mas uma relação maior é melhor em ambientes externos. As etiquetas menores precisam de 4,5:1 ou mais.

Exemplo prático

Considere um fundo de #0b1020, um azul-marinho muito escuro, com texto branco em #ffffff. O contraste é de aproximadamente 18:1, confortável em qualquer condição de luz.

Altere a cor da contagem de passos para #2a3a5e, um azul próximo ao fundo, e a relação cai para aproximadamente 1,6:1. O número fica quase invisível à distância de um braço, e a ferramenta sinaliza isso.

Baixando o design

O botão de download transforma a prévia ao vivo em um PNG de 320 por 320 pixels. A imagem é gerada no navegador; nada é enviado. O arquivo pode ser usado como maquete, compartilhado para obter feedback ou mantido como referência durante a criação do mostrador real nas ferramentas Connect IQ da Garmin.

Dúvidas frequentes

Isso cria um mostrador que posso instalar?

Não. Ele produz uma imagem do design. Para criar um mostrador instalável, é necessário usar o SDK Connect IQ da Garmin ou o Garmin Watch Face Builder.

Por que a prévia é quadrada se o relógio é redondo?

A imagem é uma tela quadrada com um mostrador redondo desenhado dentro dela, que é como os gráficos de mostradores normalmente são criados. Os cantos simplesmente não aparecem no relógio.

Qual deve ser o tamanho de um mostrador real?

Depende do modelo. As telas redondas comuns da Garmin têm 240 por 240, 260 por 260 e 416 por 416 pixels. A prévia usa 320 por 320 como valor intermediário.

Por que minha cor parece diferente no relógio?

As telas dos relógios variam em brilho e reprodução de cores, e as telas de memória em pixel exibem uma paleta limitada. Use a prévia como orientação e depois verifique na tela real.

O que significam os números do contraste?

São razões definidas pela norma de acessibilidade WCAG 2,1, a mesma medida usada em sites. Números maiores são mais fáceis de ler.