Packs de interfaz
Hyperlane Interfaz de tienda
12 elementos de tienda y economía (arcade) para interfaces de tema oscuro — paleta violeta profundo, acento naranja de atardecer. SVG y PNG transparente en 1x/2x/4x.

Sobre este pack
Hyperlane Interfaz de tienda es un conjunto de 12 elementos de tienda y economía dibujados en estilo arcade, donde el color es el cuerpo y no el borde — losas saturadas con extremos en punta. Contiene cuatro estados de fila de compra, una pestaña de categoría activa y otra inactiva, una tira de monedero, un selector de cantidad, una tira de confirmación de compra y tres indicadores de existencias contables.
Una pantalla de tienda tiene una tarea que una de inventario nunca tiene: decir qué no se puede pagar antes de pulsar el botón. La mayoría de los sets gratuitos lo resuelven poniendo el precio en rojo, algo que falla con quien no puede leer ese rojo y vuelve a fallar en una captura en escala de grises. Además choca con el color de vida que ya usa el resto de la interfaz.
Cada losa está rellena con un degradado de dos paradas que recorre su eje largo, y las marcas están dibujadas oscuras sobre el color en vez de brillantes sobre negro. Los extremos en punta forman parte de la silueta, así que sobreviven al escalado en lugar de ser un efecto de contorno.
Dentro de ese estilo, esta es la lectura de Hyperlane: una interfaz de tema oscuro sobre una paleta violeta profundo con acentos en naranja de atardecer, construida en torno a dos marcos concéntricos, botones tipo pastilla totalmente redondeados de 192x48, barras brillantes divididas en 6 segmentos e iconos a dos tintas sobre una rejilla de 32px. Esas medidas son la razón por la que dos familias pueden compartir un estilo artístico sin ser intercambiables: el estilo decide cómo se dibuja un borde, los números deciden para qué sirve la interfaz.
Los cuatro estados de fila se distinguen por estructura y no por color. La fila asequible lleva una franja continua en el borde izquierdo, la inasequible lleva una franja discontinua y una barra que tacha su campo de precio, y la ya comprada cierra ese campo y marca su esquina superior derecha. Eso hace que el estado sobreviva a un tinte, a un filtro de daltonismo y a una captura sin saturación. El indicador de existencias es contable por lo mismo: cinco puntos, un punto y ninguno se leen como lleno, escaso y agotado sin una sola palabra ni un solo color.
Cada sprite viene como SVG editable y como PNG transparente en 1x, 2x y 4x, así que puedes soltar los PNG directamente en un motor o abrir el vector y cambiar un color. Dibujado con las mismas medidas que el resto de la familia Hyperlane, lo que significa que este kit y el kit de paneles de Hyperlane encajan sin redimensionar ninguno. Encaja bien en interfaces de carreras, arcade y basadas en puntuación.
Descarga
Enlace directo · sin registro · sin página de esperaConjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme
Cómo se usa
- Aplica el nine-slice a las filas en sus zonas rectas izquierda y derecha; el campo de precio de la derecha tiene ancho fijo, así que un nombre largo nunca lo saca de sitio.
- Para lo que no se puede pagar usa la franja discontinua y el precio tachado en lugar de un tinte rojo. Ambos son patrón y no color, así que aguantan en escala de grises.
- Coloca los puntos de existencias en el mismo lugar que usa cada fila y contrólalos por cantidad y no por color.
- La tira de confirmación y el selector de cantidad comparten altura, así que una tienda puede ponerlos en la misma línea sin redimensionar ninguno.
Licencia
Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica
"Hyperlane Interfaz de tienda" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hyperlane-shop-ui


