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

Esta ferramenta mostra a pré-visualização de um mostrador redondo no navegador. Ela desenha um layout estilo executivo com a hora, a data, uma contagem de passos e a frequência cardíaca, e permite recolorir cada elemento. A pré-visualização é atualizada conforme as cores mudam, e o design finalizado pode ser baixado como uma imagem PNG.

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

O que a pré-visualização mostra

O mostrador usa o layout que a maioria dos relógios redondos adota:

• 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
• um aro com marcações de hora ao redor da borda

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

Por que esquemas de cores escuros

A maioria dos relógios Garmin redondos usa uma tela memory-in-pixel ou OLED. Em uma tela OLED, um fundo escuro consome menos energia, porque os pixels pretos simplesmente ficam desligados. Mostradores escuros também são mais fáceis de ler sob luz solar forte, onde um fundo claro reflete o brilho.

As predefinições desta ferramenta são todas escuras por esse motivo. Ainda é possível escolher um fundo claro, e a ferramenta indicará que essa escolha foge da prática usual.

Contraste e legibilidade

Um relógio é lido rapidamente, muitas vezes com pouca luz ou em movimento, então o contraste importa mais do que em um celular. A ferramenta mede a relação de contraste entre cada elemento e o fundo usando a fórmula do WCAG 2.1.

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

contrast = (L1 + 0.05) ÷ (L2 + 0.05)

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

Dois limites valem a pena conhecer:

• 3:1 é o mínimo para textos grandes
• 4.5:1 é o mínimo para textos de tamanho normal

A hora é exibida em tamanho grande, então 3:1 basta em princípio, mas uma relação maior é melhor ao ar livre. Os rótulos menores se beneficiam de 4.5:1 ou mais.

Exemplo

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

Mude a cor da contagem de passos para #2a3a5e, um azul próximo do fundo, e a relação cai para cerca de 1.6:1. O número fica então quase invisível a uma distância de braço, e a ferramenta sinaliza o problema.

Baixando o design

O botão de download transforma a pré-visualização ao vivo em um PNG de 320 por 320 pixels. A imagem é gerada no navegador; nada é enviado para a internet. O arquivo pode ser usado como um mock-up, compartilhado para receber feedback ou mantido como referência ao construir o mostrador real nas ferramentas Connect IQ da Garmin.

Perguntas frequentes

Isso cria um mostrador que posso instalar?

Não. A ferramenta produz apenas uma imagem do design. Criar um mostrador instalável exige o SDK Connect IQ da Garmin ou o Garmin Watch Face Builder.

Por que a pré-visualização é quadrada se o relógio é redondo?

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

Qual deve ser o tamanho de um mostrador real?

Depende do modelo. Telas redondas comuns da Garmin têm 240 por 240, 260 por 260 e 416 por 416 pixels. A pré-visualização usa 320 por 320 como um meio-termo.

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 memory-in-pixel mostram uma paleta limitada. Trate a pré-visualização como um guia e depois verifique na tela real.

O que significam os números de contraste?

São relações do padrão de acessibilidade WCAG 2.1, a mesma medida usada em sites. Números mais altos são mais fáceis de ler.