Byte Controles — caixa, interruptor e deslizante

Caixa de seleção, rádio, interruptor e deslizante em 20px — pequenos, porque uma linha de configurações numa interface em modo claro tem mais espaço percebido ao redor e um controle de 24px começa a parecer um botão. O estado marcado é um quadrado preenchido com uma marca em degraus, não suave.

O conjunto cobre os quatro controles de que uma tela de configurações realmente precisa: uma caixa de seleção, um botão de rádio, um interruptor e um deslizante com alça separada. Cada controle com estados traz os dois estados no próprio arquivo, sobre uma base 20×20 — o interruptor tem 40×20 e o trilho do deslizante 160 px de largura para poder receber nine-slice em qualquer comprimento.

Ligado e desligado são desenhados como formas diferentes, não como cores diferentes. Uma caixa não marcada é um recesso vazio; uma marcada é uma superfície preenchida com uma marca recortada dentro. Isso importa porque a tela de configurações é justamente onde é mais provável que um jogador esteja usando um modo para daltônicos, um shader em escala de cinza ou um pós-processamento muito tingido — e um estado que só se lê pelo matiz some sob os três.

O deslizante vem como trilho e alça em vez de um único sprite. Animar um deslizante de peça única obriga a redesenhá-lo a cada valor; com duas peças você estica o preenchimento e move a alça, que é justamente o que todo toolkit de interface já espera. A alça tem um entalhe central para que sua rotação e sua posição continuem legíveis em tamanhos pequenos.

Tudo está incluído como SVG editável e como PNG chapado transparente em 1x, 2x e 4x, desenhado com os mesmos seis tons osso frio do resto da família Byte.

Creative Commons Atribuição 4.0 — Grátis para uso comercial. Atribuição obrigatória. Termos completos · O que isso significa na prática