Mint Kit di pannelli — pannelli con barra del titolo e pulsanti

Design piatto con il raggio quasi del tutto rientrato. La famiglia piatto chiara usa angoli da 20px e pulsanti a pillola perché punta al gioco casual; questa usa 8px e pulsanti quadrati perché una schermata di strategia è fatta soprattutto di righe e un raggio generoso spreca proprio la larghezza dove vanno i numeri. Non ci sono contorni né ombreggiature da nessuna parte — la profondità sono tre passate d'ombra sovrapposte e nient'altro.

Due pannelli nine-slice — una cornice finestra con barra del titolo con angoli da 8 px e una cornice interna incassata con angoli da 6 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Una fascia del titolo è integrata nella parte alta del pannello, quindi l'intestazione di un dialogo non richiede un secondo sprite né un allineamento manuale. Entrambi si stirano in modo pulito a qualsiasi dimensione perché gli angoli non scalano mai e il centro è un riempimento piatto.

Sopra i pannelli si appoggiano quattro stati di pulsante ad angoli retti: normale, hover, premuto e disabilitato. Sono disegnati sulla stessa base 120×36 con angoli da 6 px, quindi cambi la texture su un unico widget di pulsante e ottieni l'intero ciclo di interazione senza spostare un rettangolo. Lo stato premuto abbassa la sua faccia di due pixel e toglie il riflesso in alto invece di limitarsi a scurire, ed è questo a far sentire un pulsante cliccato e non semplicemente ricolorato.

Tutto arriva due volte. I sorgenti SVG sono i file in cui il kit è stato disegnato — aprili, cambia i sei toni grigio bluastro o l'unico accento verde menta, e riesporta. Le esportazioni PNG sono piatto, 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