Eccoci al secondo appuntamento con i Tutorial della sezione “Grafica” del nostro sito. Oggi parleremo della Splash Screen. Probabilmente conoscerete già la funzione della Splash Screen, ad ogni modo, se non sapete di cosa si tratta, sappiate che questa non è nient’altro che la schermata che compare in fase di caricamento dell’applicazione. Questa potrebbe rimanere visibile per pochi istanti come per diversi secondi, in base al tempo che occorre per il caricamento dell’applicazione vera e proria. Voi dovrete comunque prendere in considerazione il fatto che il tempo di caricamento potrebbe essere davvero minimo e di conseguenza la durata di visualizzazione di questa vista risulterebbe davvero breve. Essa dovrà contenere quindi pochi elementi tali da permettere una eventuale rapida visione e comprensione.
Solitamente questa schermata, definita tramite un’immagine, viene sfruttata per mostrare il logo o il nome dell’applicazione o dell’azienda produttrice, anche se Apple raccomanda di mostrare l’immagine di partenza del programma per dare l’impressione che il caricamento del programma sia più veloce.
Le dimensioni totali devono essere 320 pixel in larghezza per 480 pixel in altezza. Non sussiste la problematica di ridurre eventualmente l’altezza in quanto la visualizzazione sarà a pieno schermo, ovvero senza la Status Bar.
Un primo consiglio è quello di impostare l’immagine o il logo rivolto dal lato in cui si eseguirà l’applicazione, portrait o landscape (visualizzazione rispettivamente in verticale o in orizzontale), permettendo di sfruttare questi pochi attimi dall’utente per capire e rivolgere quindi il proprio dispositivo nella direzione corretta.
Ricordo a chi sfrutta grafica in stile “web 2.0” di considerare anche il relativo riflesso per il posizionamento dell’immagine, in modo da non ottenere un risultato sbilanciato nell’immagine complessiva.
Personalmente preferisco sfondi molto puliti, magari supportati da una giusta sfumatura, niente comunque di eccessivo, questo se lo scopo è semplicemente quello far risaltare il logo. Consiglio inoltre di utilizzare colori che abbiano attinenza con quelli dell’applicazione, in modo da dare una continuità grafica all’intero programma.
Per coloro che volessero inserire immagini grafiche più complesse, magari nel caso di giochi, per dar modo all’utente di “entrare fin da subito” nell’ambiente di gioco, ricordo, come già indicato sopra, che il tempo di visualizzazione della Splash Screen potrebbe essere davvero di pochi attimi rischiando di ottenere un effetto confusionario e di conseguenza sgradevole a causa della visione troppo rapida di un determinato numero di elementi, in questo caso, probabilmente inutili. Non ci sono però solo lati negativi nel mettere un’immagine complessa, se durante i vostri test di esecuzione vi accorgete che i tempi di caricamento della vostra App sono abbastanza lunghi, allora potreste approfittare di questo creando qualcosa di più di una semplice visualizzazione del nome o del logo e otterreste comunque un ottimo risultato. Potreste per esempio mostrare i comandi del gioco o informazioni e curiosità aggiuntive dell’applicazione che allieverenno sicuramente l’attesa del caricamento che non risulterà così frustrante per l’utente finale.
Altra considerazione, ricordate che l’occhio umano distribuisce la visione degli elementi in maniera occidentale (logicamente per noi abituati a leggere alla maniera occidentale) perciò se vorrete inserire più elementi, per agevolare una rapida lettura ricordatevi di effettuare il giusto bilanciamento dall’angolo superiore sinistro a quello inferiore destro. Cercate inoltre di NON inserire più di 7 parole/elementi, questo infatti è il numero ottimale per una rapida comprensione e memorizzazione.
Di seguito un semplice esempio di una Splash Screen creata per una visualizzazione rapida che mostra esclusivamente un logo:
Come vedete è un’ipotesi di Splash Screen davvero semplice, che risulta chiara e pulita. Il logo centrale, un pizzico di stile “web 2.0” grazie al riflesso e l’impostazione generale, nulla di più.
Per far si che l’immagine diventi la vostra Splash Screen non dovrete far altro che realizzarla, come detto, delle dimensioni 320×480 pixel, salvarla in formato .PNG e chiamarla Default.png. Attenzione alla prima lettera del nome “D” maiuscola. Fatto questo aprite Xcode, trascinate la vostra immagine in “Resources”, spuntate l’opzione “Copy items into destination group’s folder (if needed)” nella finestrella che si apre e cliccate infine su “Add”.
Il lavoro termina qui, potete cliccare in Xcode su “Build & Run” e provare la vostra nuova Splash Screen tramite iPhone Simulator o direttamente nel vostro “melafonino”.
10 Responses to “G#002 – Creiamo una Splash Screen”
31 Dicembre 2009
Dzamir“Solitamente questa schermata, definita tramite un’immagine, viene sfruttata per mostrare il logo o il nome dell’applicazione o dell’azienda produttrice.”
In realtà Apple raccomanda di mostrare l’immagine di partenza del programma per dare l’impressione che il caricamento del programma sia più veloce.
Ovviamente nessuno vieta di mostrare il logo, ma bisognerebbe almeno accennare a ciò nell’articolo.
31 Dicembre 2009
Staff devAPPHai ragione, effettivamente abbiamo detto solo come “solitamente viene sfruttata” la splash screen e abbiamo erroneamente omesso le raccomandazioni Apple..
Aggiorniamo subito, grazie mille ^^
31 Dicembre 2009
Ilonagrazie per la segnalazione, a volte sono tante le cose da dire che sfugge sempre qualcosa 🙂
31 Dicembre 2009
MatthewSalve ragazzi… leggendo l’articolo ho notato che si parla di un’immagine con dimensioni 320x460px… Se deve riempire tutto lo schermo dell’iPhone/iPod Touch non dovrebbe essere di 320x480px? Spero non sia una mia svista…
Ciao e grazie per i tutorial!
31 Dicembre 2009
Staff devAPPArticolo aggiornato..in effetti 460 sarebbe corretta come altezza considerando proprio la StatusBar che è alta 20 pixel.. si avvicina la fine dell’anno scusate 😛
31 Dicembre 2009
IlonaScusatemi tanto 😛 Grazie
1 Gennaio 2010
FilippoE come faccio ad impostare i tempi di visualizzazione
1 Gennaio 2010
Staff devAPPImplementando la Splash Screen tramite il file Default.png non è possibile impostare un tempo di visualizzazione, questo dipende infatti dal tempo di caricamento dell’applicazione.
Per impostare i tempi di visualizzazione non devi quindi usare questa tecnica (consigliata da Apple) ma crearti una tua vista personalizzata e scrivere un po’ di codice.
Potresti ad esempio creare due metodi (mostraSplashScreen e nascondiSplashScreen) da utilizzere in base alle tue esigenze:
-(void)mostraSplashScreen
{
UIViewController *modalViewController = [[UIViewController alloc] init];
modalViewController.view = modelView;
[self presentModalViewController:modalViewController animated:NO];
[self performSelector:@selector(nascondiSplashScreen) withObject:nil afterDelay:5.0];
}
– (void)nascondiSplashScreen{
[[self modalViewController] dismissModalViewControllerAnimated:YES];
}
22 Gennaio 2010
Mat@filippo: non è la solouzione più ideale ma io di solito utilizzo:
– (void)applicationDidFinishLaunching:(UIApplication *)application {
sleep(2);// 2 secondi
…..
}
complimenti al sito..:)
13 Marzo 2010
DavideCIao a tutti,
ho inserito la mia Default.png nella mia app. Ora sul simulatore la vedo correttamente, mentre su pubblico sul mio iPhone l’immagine si vede distorta, molto ingrandita.
La dimensioni sono quelle riportate nell articolo, qualcuno ha mai avuto questo problema?