Blocks Kit di pannelli — pannelli a cornice singola e pulsanti

Pannelli disegnati come blocchi pieni e non come rettangoli: ciascuno porta una faccia superiore estrusa e una faccia destra a un angolo di luce fisso, così il kit ha profondità senza una sola sfumatura. Gli angoli sono retti perché un voxel non ha raggio, e tutto il set si aggancia a una griglia da 6px.

Due pannelli nine-slice — una cornice finestra a cornice singola con angoli da 0 px e una cornice interna incassata con angoli da 0 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Un unico bordo continuo tiene il pannello abbastanza discreto da stare dietro a testo denso. Entrambi si stirano in modo pulito a qualsiasi dimensione perché gli angoli non scalano mai e il centro è un riempimento piatto.

Sopra i pannelli stanno dodici sprite pulsante squadrati: normale, hover, premuto e disattivato, ciascuno disegnato tre volte — una barra standard 132×48, un pulsante icona squadrati quadrato e un pulsante compatto per barre strumenti e azioni in linea. Le tre misure sono file separati e non uno sprite scalato perché il disegno dipende dalla misura: lo smusso calcolato a 48 px viene ricalcolato in quelli più piccoli, non rimpicciolito. Lo stato premuto abbassa la faccia di due pixel e toglie la luce superiore invece di limitarsi a scurire: è questo che fa sentire un pulsante cliccato e non semplicemente ricolorato.

Quattro pezzi più piccoli coprono ciò che serve a un menu tra i pannelli: un tooltip con punta, una barra del titolo che poggia sul bordo superiore di un pannello, un separatore di sezione con segno centrale e un chip etichetta per contatori e stati. Nessuno di essi è il pannello finestra a un’altra misura: un nine-slice si estende già a qualsiasi dimensione, quindi un secondo file di larghezza diversa sarebbe riempitivo e non un componente.

Tutto arriva due volte. I sorgenti SVG sono i file in cui il kit è stato disegnato — aprili, cambia i sei toni pietra fredda o l'unico accento arancio di segnale, e riesporta. Le esportazioni PNG sono piatte, trasparenti e pre-scalate a 1x, 2x e 4x per i motori che vogliono bitmap, senza alfa premoltiplicato e senza ombre cotte fuori dai limiti dello sprite.

Creative Commons Zero 1.0 — Dominio pubblico. Nessuna attribuzione. Termini completi · Cosa significa in pratica