Sketch Contrôles — case, interrupteur et curseur

Cases à cocher, radios, un interrupteur et un curseur, tous avec le contour dessin à la main. La coche d'une case cochée est un trait avec un vrai dépassement au bout, exactement comme une coche vient quand on ne fait pas attention.

L’ensemble couvre ce dont un écran de réglages a vraiment besoin : une case à cocher, un bouton radio, un interrupteur, un curseur avec poignée séparée et une paire de compteur pour les valeurs discrètes. Chaque contrôle à états livre chaque état dans son propre fichier sur une base de 26×26 — l’interrupteur fait 52×26 et la glissière 208 px de large, pour être étirée en nine-slice à n’importe quelle longueur. Le curseur existe aussi vide, plein et vertical, car une colonne de volume n’est pas une ligne pivotée.

Activé et désactivé sont dessinés comme des formes différentes, pas comme des couleurs différentes. Une case décochée est un creux vide ; une case cochée est une surface pleine avec une coche taillée dedans. C'est important parce que l'écran de paramètres est précisément là où un joueur a le plus de chances d'utiliser un mode daltonien, un shader en niveaux de gris ou un post-traitement fortement teinté — et un état qui ne se lit qu'à la teinte disparaît sous les trois.

Le curseur est livré en glissière et poignée plutôt qu’en un seul sprite. Animer un curseur monobloc oblige à le redessiner à chaque valeur ; avec deux pièces vous étirez le remplissage et déplacez la poignée, ce que toute boîte à outils d’interface attend déjà. La poignée porte un cran central pour que sa rotation et sa position restent lisibles en petit, et une variante maintenue ajoute un anneau d’accent pour l’état de glissement.

Grisé est un sprite à part pour chaque contrôle à états, et non une teinte appliquée à l’exécution. Un réglage indisponible et un réglage désactivé sont deux choses différentes — l’un dit « désactivé », l’autre « tu ne peux pas y toucher » — et un écran qui les montre pareil envoie le joueur chercher un bug qui n’existe pas. La case fournit en plus un état partiel pour la ligne « tout sélectionner » au-dessus d’une liste mixte, soit exactement le cas qu’une case à deux états rapporte de travers.

Tout est fourni en SVG modifiable et en PNG plat transparent à 1x, 2x et 4x, dessiné à partir des mêmes six tons papier blanc cassé que le reste de la famille Sketch.

Creative Commons Attribution 4.0 — Gratuit pour un usage commercial. Attribution obligatoire. Conditions complètes · Ce que cela veut dire en pratique