{"id":5619,"date":"2011-07-11T20:02:10","date_gmt":"2011-07-11T18:02:10","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=5619"},"modified":"2012-05-10T11:56:37","modified_gmt":"2012-05-10T09:56:37","slug":"linee-guida-per-la-creazione-di-icone-e-splashscreen-per-applicazioni-iphone-e-ipad","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/linee-guida-per-la-creazione-di-icone-e-splashscreen-per-applicazioni-iphone-e-ipad\/","title":{"rendered":"Linee guida per la creazione di icone e splashscreen per applicazioni iPhone e iPad [AGGIORNATO]"},"content":{"rendered":"<p>Ciao a tutti, viste le numerose richieste ricevute, sia via mail che tramite il nostro forum, vi proponiamo oggi una pratica guida di riferimento, un mix di informazioni prelevate e tradotte direttamente dalla documentazione ufficiale Apple, che si riveler\u00e0 molto utile durante lo sviluppo delle nostre applicazioni iPhone e iPad e che riguarda la creazione delle icone e della splashscreen. In questo articolo non parleremo di &#8220;cose da grafici&#8221;, ma vedremo piuttosto i requisiti che questi elementi dovranno rispettare per essere ottimizzati al meglio all&#8217;interno delle nostre app, utile sia nel caso in cui realizzeremo noi stessi questi elementi, che nel caso in cui decidessimo di affidare lo studio grafico e la realizzazione a terzi (magari professionisti) a cui dovremo fornire le giuste indicazioni e specifiche.<!--more--><\/p>\n<h4>Tipi di icone per applicazioni iOS<\/h4>\n<p>Partiamo da un punto fermo: tutte le applicazioni necessitano almeno di un&#8217;icona e di una splashscreen. Qesto non \u00e8 un consiglio, ma un requisito essenziale per poter pubblicare le nostre applicazioni in App Store. E non possiamo certo aggiungere immagini completamente a nostro piacere, dovremo infatti rispettare formati e dimensioni particolari imposte proprio da Apple. Inoltre, se avete fatto caso, nel titolo di questa guida non abbiamo indicato &#8220;icona&#8221;, ma &#8220;icone&#8221;, infatti, spesso e volentieri nelle nostre app ci saranno icone differenti, ognuna indicata ad un particolare uso specifico.<\/p>\n<p>Vediamo un breve elenco delle tipologie di icone possibili:<\/p>\n<ul>\n<li>icona applicazione (quella che viene visualizzata nella springboard) &#8211; <strong>RICHIESTA<\/strong><\/li>\n<li>icona per App Store &#8211; <strong>RICHIESTA<\/strong><\/li>\n<li>icona mostrata nei risultati delle ricerche Spotlight &#8211; <strong>RACCOMANDATA<\/strong><\/li>\n<li>icona mostrata nelle impostazioni<\/li>\n<li>icona mostrata nei documenti propri della vostra applicazione<\/li>\n<li>icona per eventuali webapp o siti web<\/li>\n<li>icone per toolbar e navigation bar<\/li>\n<li>icone per le tabbar<\/li>\n<li>Icona Newstand<\/li>\n<\/ul>\n<p>Come vedete esistono differenti tipi di icone e, anche se non tutte ci serviranno sempre, due di queste sono obbligatorie (quella dell&#8217;app stessa e quella per l&#8217;App Store) mentre, anche se non obbligatoria, \u00e8 fortemente raccomandata la personalizzazione dell&#8217;icona che verr\u00e0 visualizzata dopo una ricerca in Spotlight. Per tutte le altre tipologie, occorrer\u00e0 realizzarle (ed eventualmente personalizzarle) solo se la vostra app integra gli elementi che le richiedono (TabBar, NavigationBar, Impostazioni, ecc.).<\/p>\n<h4>Specifiche per icone e splashscreen<\/h4>\n<p>A differenza di altre personalizzazioni grafiche presenti nelle nostre applicazioni, le icone e la splashscreen (anche questo ultimo elemento \u00e8 obbligatorio) devono rispettare determinati criteri in modo tale che iOS possa visualizzarli in modo appropriato. Questi criteri riguardano il formato del file, le dimensioni e in alcuni casi il nome da assegnare al file grafico stesso.<\/p>\n<p>La tabella seguente, ripresa dalla documentazione ufficiale Apple, contiente proprio questi requisiti da rispettare:<\/p>\n<table>\n<tr>\n<td><strong>Descrizione<\/strong><\/td>\n<td><strong>Dimensioni per iPhone e iPod touch (in pixels)<\/strong><\/td>\n<td><strong>Dimensioni per iPad (in pixels)<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Icona Applicazione (<strong>richiesta<\/strong>)<\/td>\n<td>57 x 57<br \/>114 x 114 (alta risoluzione)<\/td>\n<td>72 x 72<br \/>144 x 144 (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Icona per App Store (<strong>richiesta<\/strong>)<\/td>\n<td>512 x 512<br \/>1024 x 1024 (raccomandata)<\/td>\n<td>512 x 512<br \/>1024 x 1024 (raccomandata)<\/td>\n<\/tr>\n<tr>\n<td>Icona per risultati ricerche Spotlight e Impostazioni (<strong>raccomandata<\/strong>)<\/td>\n<td>29 x 29<br \/>58 x 58 (alta risoluzione)<\/td>\n<td><strong>Risultati Spotlight:<\/strong><br \/>50 x 50<br \/>100 x 100 (alta risoluzione)<br \/><strong>Impostazioni:<\/strong><br \/>29 x 29<br \/>58 x 58 (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Icona Documenti personalizzati dell&#8217;app<\/td>\n<td>22 x 29<br \/>44 x 58 (alta risoluzione)<\/td>\n<td>64 x 64<br \/>128 x 128 (alta risoluzione)<\/p>\n<p>320 x 320<br \/>640 x 640 (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Icone per WebApp e siti web<\/td>\n<td>57 x 57<br \/>114 x 114 (alta risoluzione)<\/td>\n<td>72 x 72<br \/>144 x 144 (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Icone per Toolbar e Navigation Bar<\/td>\n<td>circa 20 x 20<br \/>circa 40 x 40 (alta risoluzione)<\/td>\n<td>circa 20 x 20<br \/>circa 40 x 40 (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Icone TabBar<\/td>\n<td>circa 30 x 30<br \/>circa 60 x 60 (alta risoluzione)<\/td>\n<td>circa 30 x 30<br \/>circa 60 x 60 (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Icona copertina Newstand per App Store (richiesta per app Newsstand)<\/td>\n<td>Almeno 512 pixel sul lato pi\u00f9 lungo<br \/>Almeno 1024 pixel sul lato pi\u00f9 lungo (alta risoluzione)<\/td>\n<td>Almeno 512 pixel sul lato pi\u00f9 lungo<br \/>Almeno 1024 pixel sul lato pi\u00f9 lungo (alta risoluzione)<\/td>\n<\/tr>\n<tr>\n<td>Splashscreen (<strong>richiesta<\/strong>)<\/td>\n<td>320 x 480<br \/>640 x 960 (alta risoluzione)<\/td>\n<td><strong>Modalit\u00e0 portrait:<\/strong><br \/>768 x 1004<br \/>1536 x 2008 (alta risoluzione)<br \/><strong>Modalit\u00e0 landscape:<\/strong><br \/>1024 x 748<br \/>2048 x 1496 (alta risoluzione)<\/td>\n<\/tr>\n<\/table>\n<p>Oltre le dimensioni Apple raccomanda di utilizzare il formato .PNG per tutte le immagini e icone che inseriremo nelle nostre applicazioni.<\/p>\n<h4>Icona Applicazione<\/h4>\n<p>L&#8217;icona dell&#8217;applicazione la conosciamo tutti, \u00e8 quella che viene mostrata nella home dei nostri iPhone, iPod o iPad ed \u00e8 la stessa che dobbiamo &#8220;tappare&#8221; per poter avviare la nostra applicazione. E&#8217; importante che questa sia gradevole e riconoscibile, in modo tale che i nostri utenti la trovino &#8220;al volo&#8221; tra la moltitudine di app scaricate. Se la vostra app \u00e8 un gioco e implementa Game Center, questa icona sar\u00e0 la stessa visualizzata all&#8217;interno della piattaforma di Social Gaming di Apple.<\/p>\n<p>Occorrer\u00e0 creare differenti versioni della stessa icona, ognuna ottimizzata per il device su cui sar\u00e0 visibile. Se ad esempio l&#8217;applicazione in oggetto fosse un&#8217;universal app, dovremmo prevedere di realizzare l&#8217;icona dell&#8217;app in tutti i formati richiesti:<\/p>\n<ul>\n<li>57 x 57 pixels<\/li>\n<li>114 x 114 pixels (alta risoluzione per device con retina display)<\/li>\n<li>72 x 72 pixels (per iPad)<\/li>\n<li>144 x 144 (alta risoluzione)<\/li>\n<\/ul>\n<p><strong>ATTENZIONE:<\/strong> Per far capire ad iOS quale icona mostrare in base al device in uso baster\u00e0 semplicemente nominare le icone in un determinato modo (maggiori info pi\u00f9 avanti in questa stessa guida).<\/p>\n<p>Nel realizzare questo tipo di icona dovremo inoltre tener presente che iOS, durante la visualizzazione, aggiunger\u00e0 per noi:<\/p>\n<ul>\n<li>Angoli arrotondati<\/li>\n<li>Ombra<\/li>\n<li>Effetto riflesso (se volessimo aggiungere un nostro riflesso possiamo disabilitare quello imposto di default inserendo la chiave &#8220;Icon already includes gloss and bevel effects&#8221; nel file &#8220;&#8230;Info.plist&#8221; della nostra applicazione)<\/li>\n<\/ul>\n<h4>Icona App Store<\/h4>\n<p>Come detto poco fa anche questa icona \u00e8 richiesta. Occorrer\u00e0 creare un&#8217;icona di dimensioni 512 x 512 pixel (1024 x 1024 pixels in alta risoluzione raccomandata) che verr\u00e0 mostrata nell&#8217;App Store. Questa icona, non deve essere necessariamente identica all&#8217;icona precedente, anzi, viste le dimensioni maggiori \u00e8 consigliabile arricchirla con maggiori dettagli, tenendo per\u00f2 conto che questra dovr\u00e0 richiamare fortemente quella dell&#8217;applicazione stessa. Per questo tipo di icona non verr\u00e0 aggiunto alcun tipo di effetto alla vostra realizzazione grafica, pertanto dovrete prevedere eventuali rifiniture voi stessi. <\/p>\n<p>Dovreste prevedere l&#8217;implementazione di questa icona anche nel caso in cui foste al lavoro su un&#8217;applicazione da distribuire Ad-Hoc (in-house, ovvero internamente all&#8217;azienda e fuori dall&#8217;App Store) in quanto questa icona sar\u00e0 la stessa mostrata nella libreria iTunes, insieme a tutte le altre applicazioni scaricate, installate e sincronizzate con i devices interessati.<\/p>\n<p>Inoltre questo tipo di icona, potrebbe essere utilizzato da iOS quando, ad esempio, nella vostra app avete documenti personalizzati e non avete implementato l&#8217;apposita icona dedicata a questo scopo.<\/p>\n<h4>Icona per risultati ricerche Spotlight e Impostazioni<\/h4>\n<p>Tutte le applicazioni dovrebbero prevedere l&#8217;implementazioni di questo tipo di icone. Se non doveste fare ci\u00f2 iOS modificher\u00e0 direttamente l&#8217;icona della vostra app riducendola e mostrandola, anche se studiarne una appositamente pu\u00f2 rendere tutto pi\u00f9 gradevole e riconoscibile.<\/p>\n<p>Per iPhone e iPod Touch l&#8217;icona sar\u00e0 la stessa, sia per i risultati delle ricerche spotlight che per le impostazioni, dovrete solo pensare alle differenti risoluzioni:<\/p>\n<ul>\n<li>29 x 29 pixels<\/li>\n<li>58 x 58 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p>Per iPad invece:<\/p>\n<p><strong>Per le impostazioni:<\/strong><\/p>\n<ul>\n<li>29 x 29 pixels<\/li>\n<li>58 x 58 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p><strong>Per i risultati delle ricerche fatte con spotlight:<\/strong><\/p>\n<ul>\n<li>50 x 50 pixels<\/li>\n<li>100 x 100 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p>Attenzione, la dimensione finale visualizzata di quest&#8217;ultima icona sar\u00e0 48&#215;48 pixel (96 x 96 pixels in alta risoluzione). iOS, infatti, taglier\u00e0 1 pixel per lato dalla nostra realizzazione grafica per aggiungere l&#8217;ombra. Occorrer\u00e0 quindi assicurarsi che la nostra rappresentazione grafica stia all&#8217;interno di questo limite.<\/p>\n<h4>Icona Documenti personalizzati dell&#8217;applicazione<\/h4>\n<p>Come sempre \u00e8 preferibile prevedere icone personalizzate in ogni caso, le icone per documenti personalizzati dell&#8217;app non fanno eccezione, anche se Apple prevede di riutilizzare (modificando opportunamente e automaticamente) l&#8217;icona dell&#8217;applicazione da destinare a questo tipo di uso quando non presente una versione apposita.<\/p>\n<p>Se vogliamo rifinire al meglio la nostra app anche con queste icone, questo \u00e8 quanto dobbiamo tenere in considerazione:<\/p>\n<p><strong>Versioni per iPhone e iPod Touch:<\/strong><\/p>\n<ul>\n<li>22 x 29 pixels<\/li>\n<li>44 x 58 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p>Per le versioni iPhone e iPod Touch nulla di particolare da segnalare, occorre semplicemente creare le icone in formato .PNG delle dimensioni indicate sopra e iOS provveder\u00e0 ad aggiungere la simpatica e tipica ombra.<\/p>\n<p>Per le versioni iPad le cose si complicano un pochino, ma nulla di che. Vediamo di cosa si tratta.<\/p>\n<p><strong>Versioni per iPad:<\/strong><\/p>\n<p>Innanzitutto, anche qui, dovremo creare icone di dimensioni differenti, e nello specifico:<\/p>\n<ul>\n<li>64 x 64 pixel<\/li>\n<li>320 x 320 pixel<\/li>\n<\/ul>\n<p>L&#8217;area utile, per\u00f2, non \u00e8 tutta questa, ma occorrer\u00e0 lasciare dello spazio per gli effetti grafici che verranno inseriti automaticamente da iOS.<\/p>\n<p>Per creare l&#8217;icona 64 x 64 pixel seguite questi semplici passi:<\/p>\n<ul>\n<li>Create un&#8217;immagine di dimensioni 64 x 64 pixel in formato PNG<\/li>\n<li>Inserite (tramite ad esempio le linee guida) un margine superiore di 1 pixel nella parte superiore<\/li>\n<li>Inserite un margine inferiore di 4 pixel<\/li>\n<li>Inserite un margine di 10 pixel a sinistra e a destra nell&#8217;immagine<\/li>\n<\/ul>\n<p>L&#8217;area utile ottenuta, di 44&#215;59 pixel, sar\u00e0 lo spazio in cui dovrete inserire la vostra rappresentazione grafica per l&#8217;icona. iOS sfrutter\u00e0 lo spazio riservato tramite margini per inserire l&#8217;effetto &#8220;page curl&#8221; in alto a destra e la relativa sfumatura).<\/p>\n<p>Per la versione da 320 x 320 pixel discorso analogo, ma dovrete lasciare rispettivamente:<\/p>\n<ul>\n<li>5 pixels di margine nella parte superiore<\/li>\n<li>20 pixels di margine nella parte inferiore<\/li>\n<li>50 pixels di margine nei lati dell&#8217;immagine<\/li>\n<\/ul>\n<p>Anche in questo caso l&#8217;area utile \u00e8 inferiore e sar\u00e0 pari a 220 x 295 pixel.<\/p>\n<p>In entrambi i casi considerate che l&#8217;effetto &#8220;page curl&#8221; oscurer\u00e0 parte della vostra rappresentazione.<\/p>\n<h4>Icone per WebApp e siti web<\/h4>\n<p>Per questo tipo di icona nulla di complesso o particolare da aggiungere. Potete far riferimento a quanto spiegato per l&#8217;icona dell&#8217;applicazione stessa. L&#8217;unica differenza sta nel fatto che qui potrete decidere di disattivare tutti gli effetti automatici aggiunti da iOS semplicemente rinominando il file in &#8220;apple-touch-icon-precomposed.png&#8221; prima di pubblicarlo online (compatibile da iOS 2.0 in poi).<\/p>\n<h4>Icone per Navigation Bars, Toolbars, e Tab Bars<\/h4>\n<p>Ogni qual volta sia possibile, Apple raccomanda di utilizzare bottoni e icone standard all&#8217;interno delle proprie applicazioni iOS. Tuttavia, le funzionalit\u00e0 delle nostre applicazioni non sempre sono standard e pu\u00f2 capitare di dover disegnare le proprie icone anche per questo tipo di uso.<\/p>\n<p>Ecco cosa conviene tenere a mente durante la realizzazione delle nostre icone:<\/p>\n<ul>\n<li>Questo tipo di icona deve essere semplice, troppi dettagli potrebbero rendere la rappresentazione irriconoscibile e l&#8217;uso dell&#8217;app risulterebbe meno intuitivo.<\/li>\n<li>Le icone non devono poter essere scambiate per quelle standard, piuttosto usate quelle gi\u00e0 realizzate e fornite da Apple.<\/li>\n<li>Sforzatevi di creare icone fortemente riconoscibili e che i cui contenuti non siano offensivi per gli utenti delle vostre app.<\/li>\n<li>Assicuratevi di non rappresentare nelle vostre icone prodotti Apple, i quali sono protetti da copyright e, se riconoscibili, faranno si che la vostra app non venga accettata nello store.<\/li>\n<\/ul>\n<p>Una volta deciso l&#8217;aspetto che avr\u00e0 la nostra icona, dovremo realizzarla. Per questo seguite queste semplici linee guida:<\/p>\n<ul>\n<li>Utilizzate come colore il bianco unito alla giusta trasparenza<\/li>\n<li>Non includete ombre nella rappresentazione grafica di questo tipo di icone<\/li>\n<li>Usate l&#8217;anti-aliasing<\/li>\n<li>Se decideste di aggiungere uno smusso, assicuratevi che sia di 90\u00b0 (per aiutarvi in questo, immaginate una sorgente luminosa posizionata in alto sull&#8217;icona)<\/li>\n<\/ul>\n<p>Le dimensioni delle icone per toolbar e navigation bar sono:<\/p>\n<p>Per iPhone, iPod Touch e iPad:<\/p>\n<ul>\n<li>Circa 20 x 20 pixels<\/li>\n<li>Circa 40 x 40 pixels (in alta risoluzione)<\/li>\n<\/ul>\n<p>Le dimensioni, invece, delle icone per le Tab Bar sono:<\/p>\n<p>Per iPhone, iPod touch e iPad:<\/p>\n<ul>\n<li>Circa 30 x 30 pixels<\/li>\n<li>Circa 60 x 60 pixels (in alta risoluzione)<\/li>\n<\/ul>\n<p><strong>ATTENZIONE:<\/strong> Le rappresentazioni grafiche che creerete per questi tipi di icona verranno utilizzati come maschera per la creazione delle icone vere e proprie, non \u00e8 necessario, quindi, creare icone a colori. Inoltre non \u00e8 necessario studiare una versione dell&#8217;icona standard ed una equivalente a item premuto, iOS far\u00e0 questo per noi. Gli effetti aggiunti saranno automatici e non potremo cambiare il loro aspetto.<\/p>\n<p><center><br \/>\n<strong>ICONE STANDARD PER LE TabBar<\/strong><br \/>\n<\/center><\/p>\n<p><center><\/p>\n<table>\n<tr>\n<td><strong>Icona<\/strong><\/td>\n<td><strong>Nome<\/strong><\/td>\n<td><strong>Significato<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarBookmarks.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarBookmarks.jpg\" alt=\"UITabBarBookmarks\" title=\"UITabBarBookmarks\" width=\"28\" height=\"20\" class=\"aligncenter size-full wp-image-7215\" \/><\/a><\/td>\n<td>Bookmarks<\/td>\n<td>Mostra i &#8220;segnalibri&#8221; dell&#8217;applicazione<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarContacts.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarContacts.jpg\" alt=\"UITabBarContacts\" title=\"UITabBarContacts\" width=\"32\" height=\"29\" class=\"aligncenter size-full wp-image-7216\" \/><\/a><\/td>\n<td>Contacts<\/td>\n<td>Mostra i contatti<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarDownloads.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarDownloads.jpg\" alt=\"UITabBarDownloads\" title=\"UITabBarDownloads\" width=\"29\" height=\"29\" class=\"aligncenter size-full wp-image-7217\" \/><\/a><\/td>\n<td>Downloads<\/td>\n<td>Mostra i download<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarFavorites.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarFavorites.jpg\" alt=\"UITabBarFavorites\" title=\"UITabBarFavorites\" width=\"29\" height=\"28\" class=\"aligncenter size-full wp-image-7218\" \/><\/a><\/td>\n<td>Preferiti<\/td>\n<td>Mostra i preferiti<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarFeatured.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarFeatured.jpg\" alt=\"UITabBarFeatured\" title=\"UITabBarFeatured\" width=\"38\" height=\"25\" class=\"aligncenter size-full wp-image-7219\" \/><\/a><\/td>\n<td>Featured<\/td>\n<td>Mostra contenuto in evidenza dell&#8217;applicazione<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarHistory.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarHistory.jpg\" alt=\"UITabBarHistory\" title=\"UITabBarHistory\" width=\"25\" height=\"25\" class=\"aligncenter size-full wp-image-7220\" \/><\/a><\/td>\n<td>History<\/td>\n<td>Mostra la storia delle azioni degli utenti<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarMore.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarMore.jpg\" alt=\"UITabBarMore\" title=\"UITabBarMore\" width=\"29\" height=\"7\" class=\"aligncenter size-full wp-image-7221\" \/><\/a><\/td>\n<td>More<\/td>\n<td>Mostra ulteriori Tab Bar Item<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarMostRecent.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarMostRecent.jpg\" alt=\"UITabBarMostRecent\" title=\"UITabBarMostRecent\" width=\"23\" height=\"23\" class=\"aligncenter size-full wp-image-7222\" \/><\/a><\/td>\n<td>MostRecent<\/td>\n<td>Mostra gli oggetti recenti<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarMostViewed.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarMostViewed.jpg\" alt=\"UITabBarMostViewed\" title=\"UITabBarMostViewed\" width=\"35\" height=\"21\" class=\"aligncenter size-full wp-image-7223\" \/><\/a><\/td>\n<td>MostViewed<\/td>\n<td>Mostra gli oggetti pi\u00f9 popolari<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarRecents.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarRecents.jpg\" alt=\"UITabBarRecents\" title=\"UITabBarRecents\" width=\"25\" height=\"25\" class=\"aligncenter size-full wp-image-7224\" \/><\/a><\/td>\n<td>Recents<\/td>\n<td>Mostra gli oggetti recenti visualizzati in un periodo definito<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarSearch.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarSearch.jpg\" alt=\"UITabBarSearch\" title=\"UITabBarSearch\" width=\"24\" height=\"24\" class=\"aligncenter size-full wp-image-7225\" \/><\/a><\/td>\n<td>Search<\/td>\n<td>Entra in modalit\u00e0 ricerca<\/td>\n<\/tr>\n<tr>\n<td><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarTopRated.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/07\/UITabBarTopRated.jpg\" alt=\"UITabBarTopRated\" title=\"UITabBarTopRated\" width=\"29\" height=\"28\" class=\"aligncenter size-full wp-image-7214\" \/><\/a><\/td>\n<td>TopRated<\/td>\n<td>Mostra gli elementi pi\u00f9 votati dagli utenti<\/td>\n<\/tr>\n<\/table>\n<p><\/center><\/p>\n<h4>Nomi dei file di icona<\/h4>\n<p>Vediamo ora un elenco che ci torner\u00e0 utile quando dovremo nominare i nostri file di icona, in base al tipo di uso e dispositivo in cui verr\u00e0 visualizzata. Ci baster\u00e0 utilizzare questi nomi per far s\u00ec che iOS sappia quale mostrare. Fate attenzione a maiuscole e minuscole, i nomi dovranno essere esattamente cos\u00ec come li vedete:<\/p>\n<ul>\n<li><strong>Icon.png<\/strong> &#8211; Icona applicazione iPhone e iPod Touch<\/li>\n<li><strong>Icon@2x.png<\/strong> &#8211; Icona applicazione iPhone e iPod Touch in alta risoluzione<\/li>\n<li><strong>Icon-72.png<\/strong> &#8211; Icona applicazione iPad<\/li>\n<li><strong>Icon-72@2x.png<\/strong> &#8211; Icona applicazione iPad in alta risoluzione<\/li>\n<li><strong>Icon-Small.png<\/strong> &#8211; Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i device).<\/li>\n<li><strong>Icon-Small@2x.png<\/strong> &#8211; Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i device) in alta risoluzione<\/li>\n<li><strong>Icon-Small-50.png<\/strong> &#8211; Icona risultati ricerche spotlight in iPad<\/li>\n<li><strong>Icon-Small-50@2x.png<\/strong> &#8211; Icona risultati ricerche spotlight iPad in alta risoluzione<\/li>\n<\/ul>\n<h4>Splashscreen<\/h4>\n<p>Per migliorare l&#8217;esperienza dell&#8217;utente durante l&#8217;uso della nostra applicazione, utile nella fase di lancio dell&#8217;applicazione stessa, \u00e8 necessario fornire una splashscreen. La splashscreen dovrebbe essere sempre un&#8217;immagine molto simile alla prima schermata che si presenter\u00e0 a caricamento avvenuto.<\/p>\n<p>Molti di noi, spesso, inseriscono il proprio logo, o un&#8217;immagine di presentazione, come splashscreen e, anche se Apple approva comunque queste app, converrebbe seguire le sue linee guida anche per questo tipo di elemento. Insomma, se il vostro logo fa parte della grafica della prima schermata che verr\u00e0 visualizzata (in modo statico, in una porzione del display) allora \u00e8 consigliato inserirlo anche nella splashscreen, in caso contrario occorrer\u00e0 mettere semplicemente &#8220;lo sfondo&#8221; della prima schermata, o meglio l&#8217;insieme di elementi statici presenti all&#8217;interno della stessa. In questo modo l&#8217;utente avr\u00e0 l&#8217;impressione che l&#8217;app sia gi\u00e0 quasi completamente caricata fin dall&#8217;avvio.<\/p>\n<p>Per la splashscreen di iPhone e iPod touch occorre creare una rappresentazione grafica delle seguenti dimensioni (che includono l&#8217;area solitamente dedicata alla Status Bar):<\/p>\n<ul>\n<li>320 x 480 pixels<\/li>\n<li>640 x 960 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p>Le dimensioni della splashscreen per le applicazioni iPad, invece, non includono l&#8217;area occupata dalla Status Bar e le dimensioni da considerare sono:<\/p>\n<p><strong>Modalit\u00e0 portrait:<\/strong><\/p>\n<ul>\n<li>768 x 1004 pixels<\/li>\n<li>1536 x 2008 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p><strong>Modalit\u00e0 landscape:<\/strong><\/p>\n<ul>\n<li>1024 x 748 pixels<\/li>\n<li>2048 x 1496 pixels (alta risoluzione)<\/li>\n<\/ul>\n<p>Ricordate che se la vostra applicazione \u00e8 in grado di avviarsi in entrambe le modalit\u00e0 di visualizzazione (portrait e landscape) occorrer\u00e0 inserire una splashscreen per ogni tipo di orientamento previsto.<\/p>\n<h4>Approfondimenti<\/h4>\n<p>>> <a href=\"http:\/\/developer.apple.com\/library\/ios\/#documentation\/UserExperience\/Conceptual\/MobileHIG\/UIElementGuidelines\/UIElementGuidelines.html#\/\/apple_ref\/doc\/uid\/TP40006556-CH13-SW41\" target=\"_blank\">iOS UI Element Usage Guidelines<\/a><\/p>\n<p>>> <a href=\"http:\/\/developer.apple.com\/library\/ios\/#documentation\/UserExperience\/Conceptual\/MobileHIG\/IconsImages\/IconsImages.html\" target=\"_blank\">Custom Icon and Image Creation Guidelines<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ciao a tutti, viste le numerose richieste ricevute, sia via mail che tramite il nostro forum, vi&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[70,8],"tags":[814,813,815,816,811,810,812,818,817],"class_list":["post-5619","post","type-post","status-publish","format-standard","hentry","category-grafica-e-design","category-guide-varie","tag-icona-document-iphone","tag-icona-game-center","tag-icona-iphone-e-ipad","tag-icona-universal-app-ios","tag-icone-applicazioni-iphone","tag-icone-ios","tag-icone-tabbar-ios","tag-linee-guida-icone-e-splashscreen-ios","tag-splashscreen-iphone-e-ipad"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/5619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=5619"}],"version-history":[{"count":49,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/5619\/revisions"}],"predecessor-version":[{"id":8907,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/5619\/revisions\/8907"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=5619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=5619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=5619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}