Pack d'interfaccia

Caricamento Hyperlane

20 indicatori di caricamento e attesa (arcade) per interfacce in modalità scuro — viola profondo, accento arancio del tramonto. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • caricamento
  • rotella
  • avanzamento
  • scheletro
  • arcade
  • arcade
  • arcade
  • corse
  • sfumatura
  • hud
Foglio con 20 indicatori di caricamento e attesa (arcade) della famiglia Hyperlane, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×1363la trasparenza è mostrata a scacchiera

Su questo pack

Caricamento Hyperlane è un set di 20 indicatori di caricamento e attesa disegnati nello stile arcade, dove il colore è il corpo e non il bordo — lastre sature con estremità appuntite. Contiene una rotella a otto fotogrammi, un ciclo di tre punti, una cornice di barra di caricamento con quattro passi di riempimento, una barra rigata indeterminata, due righe di testo scheletro e un blocco immagine scheletro.

La schermata di caricamento è quella che il giocatore guarda più a lungo e quella per cui nessuno fa grafica. È anche l’unico posto in cui una barra significa una cosa diversa dal resto: una barra di risorsa mostra un valore, una di caricamento mostra un processo, e usare lo stesso sprite per entrambe è il modo in cui una barra della salute finisce su una schermata di caricamento.

Ogni lastra è riempita con una sfumatura a due passaggi lungo l'asse maggiore, e i segni sono disegnati scuri sopra il colore invece che chiari sopra il nero. Le estremità appuntite fanno parte della silhouette, quindi sopravvivono alla scalatura invece di essere un effetto di contorno.

Dentro quello stile, questa è la lettura Hyperlane: un'interfaccia in modalità scuro su una palette viola profondo con accenti arancio del tramonto, costruita attorno a due cornici concentriche, pulsanti a pillola completamente arrotondati da 192x48, barre lucide divise in 6 segmenti e icone in bicromia su una griglia da 32px. 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.

La rotella arriva in otto fotogrammi invece che come un solo sprite da ruotare. La rotazione esiste in ogni motore, il numero di fotogrammi no; e in uno stile pixel una rotella che gira liscia è sbagliata, deve scattare. Un atlante di otto fotogrammi è corretto in entrambi i casi e funziona ovunque. Gli scheletri sono qui per lo stesso motivo della rotella: uno schermo vuoto mentre il contenuto carica si legge come rotto, e un blocco grigio con la forma di ciò che sta arrivando si legge come attesa.

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 Hyperlane, il che significa che questo kit e il kit di pannelli Hyperlane si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce di corse, arcade e basate sul punteggio.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP95 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 readmeZIP95 kB Ottieni →
Rotella, fotogramma 1 di 8, SVG modificabileSVG883 B Ottieni →

Come si usa

  1. Riproduci i fotogrammi della rotella in ordine a circa 12 al secondo; più lento sembra bloccato, più veloce sembra rumore.
  2. Usa la barra indeterminata quando non puoi riportare una percentuale e passa ai riempimenti a passi appena puoi: una percentuale inventata è peggio di nessuna.
  3. Metti la riga e il blocco scheletro nelle stesse posizioni del contenuto reale, così all’arrivo non salta nulla.
  4. Tieni la barra di caricamento nel colore d’accento e non in un colore di risorsa; una barra di caricamento che sembra una barra della salute viene letta come tale.

Licenza

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

Riga di credito da copiare
"Caricamento Hyperlane" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hyperlane-loading