Packs de interfaz

Mint Controles — casilla, interruptor y deslizador

19 controles de interfaz pizarra fría: casilla, radio, interruptor, deslizador y contador, con estados activo, inactivo, parcial y desactivado dibujados como formas.

  • ui
  • svg
  • png transparente
  • casilla
  • interruptor
  • deslizador
  • ajustes
  • controles
  • plano
  • interfaz oscura
  • estrategia
  • herramientas
Controles de ajustes sobre fondo de damero — una casilla vacía y otra marcada, un radio sin seleccionar y otro seleccionado, un interruptor apagado y encendido y la guía de un deslizador con su tirador
vista previa 1600×744la transparencia se muestra como damero

Sobre este pack

Controles a 18px, dimensionados para ir en línea dentro de una tabla de ajustes densa y no en una lista móvil espaciosa. El estado encendido es una forma rellena y el apagado un hueco vacío, así que una captura en escala de grises se sigue leyendo bien.

El set cubre lo que una pantalla de ajustes necesita de verdad: una casilla, un botón de radio, un interruptor, un deslizador con mando aparte y un par de contador para valores discretos. Cada control con estados entrega cada estado como archivo propio sobre una base de 18×18: el interruptor mide 36×18 y la guía del deslizador 144 px de ancho, para estirarla por nine-slice a cualquier longitud. El deslizador llega además vacío, lleno y vertical, porque una columna de volumen no es una fila girada.

Encendido y apagado están dibujados como formas distintas, no como colores distintos. Una casilla sin marcar es un hueco vacío; una marcada es una superficie rellena con una marca recortada. Eso importa porque la pantalla de ajustes es justo donde es más probable que un jugador tenga activado un modo para daltónicos, un shader en escala de grises o un postprocesado muy teñido — y un estado que solo se lee por el matiz desaparece bajo los tres.

El deslizador llega como guía y mando en lugar de un solo sprite. Animar un deslizador de una pieza obliga a redibujarlo por valor; con dos piezas estiras el relleno y mueves el mando, que es lo que ya espera cualquier kit de interfaz. El mando lleva una muesca central para que su giro y su posición sigan leyéndose en tamaños pequeños, y una variante pulsada añade un anillo de acento para el estado de arrastre.

Desactivado es un sprite propio en cada control con estados, no un tinte aplicado en tiempo de ejecución. Un ajuste no disponible y un ajuste apagado son cosas distintas —uno dice "apagado", el otro "no puedes tocar esto"— y una pantalla que los muestra igual manda al jugador a buscar un fallo que no existe. La casilla incluye además un estado parcial para la fila de seleccionar todo sobre una lista mixta, que es justo el caso que una casilla de dos estados informa mal.

Todo se incluye como SVG editable y como PNG transparente plano en 1x, 2x y 4x, dibujado con los mismos seis tonos de gris azulado que el resto de la familia Mint.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP72 kB

Conjunto completo — 8 fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Conjunto completo — 8 fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP72 kB Obtener →
Interruptor (estado encendido), SVG editableSVG411 B Obtener →
Guía del deslizador, SVG editableSVG371 B Obtener →

Cómo se usa

  1. Cambia la textura entera entre los estados encendido y apagado en vez de teñir un solo sprite; los dos estados se diferencian en la forma, así que un tinte por sí solo no los reproduce.
  2. La guía del deslizador admite nine-slice con 6 px de extremo a cada lado — estira el centro y los extremos redondeados quedan intactos a cualquier anchura.
  3. En Unity, conecta los dos archivos a los gráficos Background y Checkmark del componente Toggle, o cambia el sprite en un manejador onValueChanged si prefieres una sola imagen.
  4. Centra el tirador sobre el borde del relleno: mide 15 px de ancho, así que despláza­lo la mitad de eso desde el borde derecho del relleno para que quede sobre el valor y no detrás.

Licencia

Creative Commons Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica