Pack d'interfaccia

Mallwave Interfaccia del negozio

12 elementi di negozio ed economia (vaporwave) per interfacce in modalità scuro — foschia prugna, accento oro sbiadito dal sole. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • negozio
  • negozio
  • economia
  • mercante
  • inventario
  • vaporwave
  • vaporwave
  • vaporwave
  • pastello
  • retrò
  • hud
Foglio con 12 elementi di negozio ed economia (vaporwave) della famiglia Mallwave, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×669la trasparenza è mostrata a scacchiera

Su questo pack

Mallwave Interfaccia del negozio è un set di 12 elementi di negozio ed economia disegnati nello stile vaporwave, dove angoli arrotondati e ripiegati portano lastre rosa e petrolio su un fondo indaco profondo. Contiene quattro stati della riga di acquisto, una scheda di categoria attiva e una a riposo, una striscia del borsellino, un selettore di quantità, una striscia di conferma acquisto e tre indicatori di scorta contabili.

Una schermata di negozio ha un compito che una schermata di inventario non ha mai: dire che cosa non ci si può permettere prima che si prema il pulsante. Quasi tutti i set gratuiti lo risolvono colorando il prezzo di rosso, cosa che non funziona per chi quel rosso non lo legge e non funziona di nuovo in uno screenshot in scala di grigi. In più va a cozzare con il colore della salute che tutto il resto dell’interfaccia già usa.

Questo è l'unico stile di cornice che ammette una curva; tutti gli altri del catalogo sono rigorosamente spigolosi. Le sfumature percorrono l'asse maggiore in due passaggi saturi invece di spegnersi su un neutro, perché una sfumatura vaporwave slavata si legge come un errore invece che come un'atmosfera.

Dentro quello stile, questa è la lettura Mallwave: un'interfaccia in modalità scuro su una palette foschia prugna con accenti oro sbiadito dal sole, costruita attorno a una cornice a bordo singolo, pulsanti smussati da 132x40, barre a nucleo cavo divise in 16 segmenti e icone in bicromia su una griglia da 16px. Sono quelle misure a spiegare perché due famiglie possono condividere uno stile artistico senza essere intercambiabili: lo stile decide come si traccia un bordo, i numeri decidono a cosa serve l'interfaccia.

I quattro stati di riga si distinguono per struttura e non per colore. La riga acquistabile porta una fascia piena sul bordo sinistro, quella fuori portata porta una fascia tratteggiata e una barra che sbarra il campo del prezzo, e quella già posseduta chiude il campo del prezzo e marca l’angolo in alto a destra. Così lo stato sopravvive a una tinta, a un filtro per daltonismo e a uno screenshot senza saturazione. L’indicatore di scorta è contabile per la stessa ragione: cinque punti, un punto e nessuno si leggono come pieno, scarso ed esaurito, senza una sola parola né una sola tinta.

Ogni sprite arriva come SVG modificabile e come PNG trasparente a 1x, 2x e 4x, così puoi buttare i PNG dritti in un motore oppure aprire il vettoriale e cambiare un colore. Disegnato con le stesse misure del resto della famiglia Mallwave, il che significa che questo kit e il kit di pannelli Mallwave si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce synthwave, crepuscolari e retroromantiche.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP88 kB

Set completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme

File inclusi in questo pack
FileFormatoPesoDownload
Set completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP88 kB Ottieni →
Riga di negozio, semplice, SVG modificabileSVG3.4 kB Ottieni →

Come si usa

  1. Applica il nine-slice alle righe sulle loro zone dritte di sinistra e di destra; il campo del prezzo a destra ha larghezza fissa, quindi un nome lungo non lo sposta mai.
  2. Per ciò che non ci si può permettere usa la fascia tratteggiata e il prezzo sbarrato invece di una tinta rossa. Sono entrambi trama e non colore, quindi reggono in scala di grigi.
  3. Metti i punti di scorta nello stesso posto usato da ogni riga e guidali per quantità invece che per colore.
  4. La striscia di conferma e il selettore di quantità hanno la stessa altezza, quindi un negozio può metterli sulla stessa riga senza ridimensionarne nessuno.

Licenza

Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica

Riga di credito da copiare
"Mallwave Interfaccia del negozio" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/mallwave-shop-ui