Sketch Controles — caixa, interruptor e deslizante

Caixas de seleção, rádios, um interruptor e um deslizante, todos com o contorno desenho à mão. A marca de uma caixa selecionada é um traço com um excesso real no final, como uma marca sai quando não se está com cuidado.

O conjunto cobre o que uma tela de configurações realmente precisa: uma caixa de seleção, um botão de rádio, uma chave, um deslizante com manopla separada e um par de contador para valores discretos. Cada controle com estados entrega cada estado como arquivo próprio numa base de 26×26 — a chave é 52×26 e a trilha do deslizante tem 208 px de largura, para esticar por nine-slice até qualquer comprimento. O deslizante vem também vazio, cheio e vertical, porque uma coluna de volume não é uma linha girada.

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 trilha e manopla em vez de um sprite único. Animar um deslizante de peça única significa redesenhá-lo a cada valor; com duas peças você estica o preenchimento e move a manopla, que é o que qualquer kit de interface já espera. A manopla tem um entalhe central para que rotação e posição continuem legíveis em tamanhos pequenos, e uma variante pressionada acrescenta um anel de acento para o estado de arraste.

Desativado é um sprite próprio para cada controle com estados, não um tingimento aplicado em tempo de execução. Uma configuração indisponível e uma desligada são coisas diferentes — uma diz "desligado", a outra "você não pode mexer nisso" — e uma tela que mostra as duas igual manda o jogador procurar um bug que não existe. A caixa também traz um estado parcial para a linha "selecionar tudo" acima de uma lista mista, que é justamente o caso que uma caixa de dois estados reporta errado.

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

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