Uso di icone e immagini tvOS in Xamarin

Articolo
03/16/2017

La creazione di icone accattivanti e immagini è una parte fondamentale dello sviluppo di un'esperienza utente immersiva per le app Apple TV. Questa guida illustra i passaggi necessari per creare e includere gli asset grafici necessari per le app Xamarin.tvOS:

Avvia immagine : un'immagine di avvio viene visualizzata al primo avvio dell'app e viene sostituita dalla prima schermata dell'app al termine dell'avvio.
Immagini a più livelli: specifiche della Apple TV, le nuove immagini a più livelli di Apple funzionano con l'effetto Parallasse per creare un effetto 3D per gli elementi selezionati. Esistono diversi modi per creare immagini a più livelli.
Icona dell'app : le icone sono necessarie non solo per la schermata Iniziale di Apple TV, ma per l'App Store. Devono essere forniti come immagine a più livelli.
Immagine top shelf: se l'app viene posizionata nella riga superiore della schermata Home, sarà necessaria un'immagine top shelf per evidenziare le funzionalità dell'app. Facoltativamente, puoi fornire contenuto dinamico top shelf per evidenziare il contenuto nella tua app.
Immagini di Game Center: se l'app è un gioco e usa Game Center, saranno necessarie diverse immagini aggiuntive.
Impostazione di immagini di progetto Xamarin.tvOS: illustra i passaggi necessari per impostare l'icona Avvia immagine e app per l'app Xamarin.tvOS.

Importante

Tutte le immagini in Apple TV sono alla risoluzione 1x (@1x) e dovresti usare solo immagini di queste dimensioni. L'inclusione di elementi grafici con risoluzione più elevata non solo richiede tempo per scaricare e usare più memoria e spazio di archiviazione, ma deve essere ridimensionata dinamicamente in fase di esecuzione e influirà negativamente sulle prestazioni del disegno.

Avvia immagine

L'immagine di avvio è la prima cosa che viene visualizzata quando l'app Xamarin.tvOS viene avviata inizialmente in Apple TV e, di conseguenza, ogni app tvOS deve fornire un'immagine di avvio.

L'immagine di avvio viene visualizzata rapidamente e dà l'impressione che l'app sia veloce e reattiva. Apple TV sostituirà l'immagine di avvio con la prima schermata della tua app poco dopo.

Le immagini di avvio non sono un'opportunità per annunci o espressioni artistiche, esistono solo per dare l'impressione che la tua app venga avviata rapidamente ed è pronta per l'uso.

Dimensioni immagine di avvio	Note
1920x1080px	Solo file di .png non a più livelli

Apple offre i suggerimenti seguenti per la progettazione dell'immagine di avvio dell'app:

Quasi identico alla prima schermata : la schermata di avvio dovrebbe essere il più vicina possibile alla prima schermata dell'app. L'inclusione di elementi grafici o elementi diversi può causare un fastidioso "flash" quando viene visualizzata la prima schermata.
Evitare di usare il testo : le immagini di avvio sono statiche e, di conseguenza, non verranno localizzate prima di essere visualizzate.
Avvio inattivo: poiché gli utenti di Apple TV cambiano di frequente le app, non dovresti attirare l'attenzione sul processo di avvio dell'app.
Nessun annuncio o personalizzazione : l'immagine di avvio non deve essere usata come schermata Informazioni o includere alcuna personalizzazione, a meno che non sia parte statica della prima schermata della tua app. Gli annunci sono rigorosamente vietati.

Impostazione dell'immagine di avvio

Per impostare l'immagine di avvio per il progetto tvOS, eseguire le operazioni seguenti:

Nel Esplora soluzioni fare doppio clic Assets.xcassets per aprirlo per la modifica:
Nell'Editor asset fare clic sull'assetLaunchImages:
Fare clic sulla voce 1x Apple TV e selezionare Launch Image (Avvia immagine) o, facoltativamente, trascinare una nuova immagine nel file system:
Salva le modifiche.

Immagini a più livelli

Novità di Apple TV, le immagini a più livelli funzionano con l'effetto Parallasse per produrre un effetto 3D che aiuta a mantenere l'utente sul divano connesso mentalmente al contenuto sullo schermo nella stanza.

Le immagini a più livelli contengono da due (2) a cinque (5) livelli separati combinati per formare un'immagine completa. Ad eccezione del livello di sfondo, ogni livello usa l'ordine Z insieme alla trasparenza per creare un'illusione di profondità. Quando l'utente interagisce con un'immagine a più livelli, i livelli ordinati Z più alti vengono ridimensionati e sovrapposti per creare questo effetto.

Importante

Le immagini a più livelli sono necessarie per le icone dell'app e sono facoltative per altri elementi attivabili, ad esempio l'immagine top shelf. Tuttavia, Apple suggerisce l'uso di immagini a più livelli per qualsiasi immagine in grado di ottenere lo stato attivo nella tua app.

Apple offre i suggerimenti seguenti per la progettazione delle immagini a più livelli:

Rendi opaco il livello di sfondo : il livello di sfondo (livello 1) deve essere opaco oppure riceverai un errore quando provi a usare l'immagine a più livelli in Apple TV. Tutti gli altri livelli possono contenere più livelli di trasparenza per migliorare l'effetto 3D.
Isola elementi di primo piano, intermedio e sfondo : posiziona elementi prominenti (come i caratteri del gioco) in primo piano, usa il centro per gli elementi secondari o le ombreggiature. Infine, includere uno sfondo neutro per fornire una fase per i livelli superiori.
Mantieni testo in primo piano : a meno che non si desideri che il testo venga oscurato da livelli superiori, in genere dovrebbe trovarsi nel livello superiore.
Usa la sovrapposizione semplice: l'effetto Parallasse è stato progettato per essere sottile, in modo da mantenere i livelli a un minimo per evitare effetti insoddistanti e irrealistici.
Includere una zona Cassaforte: poiché i livelli superiori possono essere ritagliati durante un effetto parallasse, è necessario creare un bordo di zona Cassaforte in ogni livello. Se si ottiene il contenuto troppo vicino al bordo dei livelli, può diventare ritagliato. I livelli superiori avranno più scalabilità e ritaglio rispetto ai livelli inferiori. Vedere la sezione Ridimensionamento dei livelli immagine di seguito.
Anteprima spesso : le immagini a più livelli devono essere visualizzate in anteprima spesso per garantire che si verifichi l'effetto 3D desiderato e che nessuno dei contenuti sui singoli livelli venga ritagliato. È consigliabile visualizzare in anteprima le immagini a più livelli su hardware Apple TV reale per assicurarsi che eseguano il rendering come previsto.

Quando possibile, è consigliabile usare sempre i controlli predefiniti UIKit per visualizzare le immagini a più livelli, in quanto otterranno automaticamente l'effetto Parallasse quando vengono attivati.

Ridimensionamento dei livelli immagine

È importante ricordare di includere un bordo zona Cassaforte in ogni livello che comporrà l'immagine a più livelli. Poiché i singoli livelli possono essere ridimensionati e ritagliati durante l'effetto Parallasse, il contenuto dei livelli può essere ritagliato se è troppo vicino al bordo del livello:

Creazione di immagini a più livelli

tvOS funziona con immagini a più livelli nei formati seguenti:

CAR Files : formato proprietario del Catalogo asset creato da Apple. I file CAR non vengono creati direttamente, vengono creati in fase di compilazione da qualsiasi file LSR e inclusi nel bundle dell'app.
Immagini LSR: formato di immagine proprietario creato da Apple. Usa il plug-in Parallax Exporter Adobe Foto hop o parallax Previewer per creare e visualizzare in anteprima immagini a più livelli nel formato LSR.
Assets.xcassets : da due (2) a cinque (5) immagini formattate standard .png incluse in un catalogo asset che verrà compilato in un'immagine a più livelli formattata car o LSR in fase di compilazione.
LCR Files : formato di file proprietario creato da Apple. I file LCR devono essere usati come contenuto aggiuntivo scaricato da uno dei server di contenuto. Il file LCR non deve mai essere incluso nel bundle dell'app. I file LCR vengono generati da file LSR o Foto hop usando lo layerutil strumento da riga di comando incluso in Xcode.

Anteprima parallasse

Apple ha creato l'anteprima parallasse per visualizzare in anteprima e creare immagini a più livelli necessarie per le icone dell'app e gli elementi attivabili facoltativi. L'anteprima mostra ogni livello che forma l'immagine a più livelli completata:

Durante l'anteprima di un'immagine a più livelli, è possibile usare il mouse per ruotare l'immagine e visualizzare in anteprima l'effetto Parallasse. Usare i + pulsanti (più) e - (meno) per aggiungere e rimuovere i livelli.

Quando si crea una nuova immagine a più livelli, può essere esportata nel formato LSR e inclusa nel bundle dell'app.

Per altre informazioni sulla creazione e l'anteprima di immagini a più livelli, vedere la sezione Creazione di immagini parallasse di Apple della Guida alla programmazione delle app per tvOS.

Icone dell'app

L'app Xamarin.tvOS richiederà non solo un'icona dell'app per la schermata iniziale di Apple TV, ma anche un'icona per l'App Store. L'icona dell'app è la prima modifica per dare una grande impressione al tuo potenziale utente e deve comunicare immediatamente lo scopo della tua app.

Ogni app deve fornire sia una versione piccola che una versione di grandi dimensioni dell'icona dell'app. L'icona piccola verrà usata nella schermata Home di Apple TV quando l'app è installata. La versione di grandi dimensioni viene usata dall'App Store. L'icona dell'app grande deve simulare l'aspetto della versione icona piccola.

Icona piccola	Risoluzione	Risoluzione
Dimensioni effettive	400x240px	1280x768px
dimensioni zona Cassaforte	370x222 px
Dimensioni non incentrate	300x180px
Dimensioni con stato attivo	370x222 px

Importante

Le icone dell'app devono essere fornite come immagini a più livelli. Per altri dettagli, vedere la sezione Immagine a più livelli sopra.

Apple offre i suggerimenti seguenti per la creazione delle icone dell'app:

Fornire un singolo punto attivo: progettare l'icona con un singolo punto attivo posizionato direttamente al centro dell'icona.
Usa uno sfondo semplice: mantieni semplice lo sfondo dell'icona in modo che i livelli superiori si distinguono. È consigliabile usare un colore semplice o una sfumatura sottile.
Limita la quantità di testo : poiché il nome dell'app verrà visualizzato sotto l'icona quando viene selezionato dall'utente, devi includere testo solo quando è essenziale per la progettazione dell'icona.
Non usare screenshot : gli screenshot sono troppo complessi per un'icona e non consentono all'utente di visualizzare lo scopo dell'app a colpo d'occhio.
Mantieni icona quadrata : tvOS applica automaticamente una maschera che arrotonda gli angoli delle icone. Non includere questo arrotondamento.
Separare attentamente i livelli: il testo deve trovarsi sul livello superiore, gli elementi secondari al centro e uno sfondo neutro che consente ai livelli superiori di brillare.
Usa sfumature e ombreggiature con attenzione : sfumature e ombre possono scontrarsi con l'effetto Parallasse in modo da usarle con attenzione. Gli stili sfumature semplici da alto a basso, chiaro-scuro funzionano meglio. Le ombre funzionano normalmente meglio come tinte taglienti e sfumati.
Variare la trasparenza del livello: usare vari livelli di trasparenza nei livelli superiori dell'icona dell'app per aumentare l'effetto 3D. Il livello di sfondo deve essere opaco oppure verrà generato un errore.

Impostazione delle icone dell'app

Per impostare le icone dell'app necessarie per il progetto tvOS, eseguire le operazioni seguenti:

Nel Esplora soluzioni fare doppio clic Assets.xcassets per aprirlo per la modifica:
Nell'Editor asset espandere l'assetApp Icon & Top Shelf Image:
Espandere quindi l'asset App Icon - Small :
Espandere quindi l'asset Back e fare clic sulla Contents voce:
Fare clic sulla voce 1x Apple TV e selezionare un file di immagine.
Ripetere i passaggi precedenti per gli Front asset e Middle .
Ripetere quindi gli stessi passaggi per definire l'asset App Icon - Large .
Salva le modifiche.

Immagine della mensola superiore

Se l'utente ha inserito l'app Xamarin.tvOS nella riga superiore nella schermata Home di Apple TV, quando l'app viene selezionata dall'utente verrà visualizzata un'immagine di grandi dimensioni. Questa immagine deve evidenziare le funzionalità dell'app o fornire collegamenti diretti al contenuto.

L'immagine top shelf può essere fornita come un singolo file statico .png o .lsr (vedere Creazione di immagini a più livelli) oppure può essere creato in modo dinamico in fase di esecuzione come una singola riga di elementi attivabili (vedere Contenuto a livello superiore dinamico di seguito).

Dimensioni immagine ripiano superiore	Note
1920x720px	.png statico o file con estensione lsr a più livelli

Apple offre i suggerimenti seguenti per la creazione delle immagini top shelf:

Usa immagini statiche avanzate: se l'app non fornisce un contenuto dinamico, l'immagine top shelf non sarà attivabile. Usa questa immagine per evidenziare le funzionalità dell'app o del tuo marchio.
Collegamento al contenuto dell'app: layout dinamici top shelf forniscono un collegamento rapido al contenuto che l'utente trova più importante nella tua app. Usa questa area per fornire un collegamento rapido per avviare l'app e passare immediatamente al contenuto specificato.
Mostrare il contenuto più recente : il contenuto Rich Top Shelf può attirare un utente nella tua app e renderlo più utile. Usa questa opzione come area per mostrare il contenuto più alto o più recente.
Contenuto personalizzato: gli utenti inseriscono le app preferite o usate più di frequente nella prima riga della schermata Home. Utilizzare la mensola superiore per visualizzare il contenuto a cui sarebbero più interessati.
Annunci non consentiti : gli annunci sono rigorosamente vietati di essere visualizzati nella parte superiore. È possibile visualizzare il contenuto più recente acquistabile, ma non devono essere visualizzate informazioni sui prezzi.

Impostazione dell'immagine dello scaffale superiore

Per impostare l'immagine top shelf necessaria per il progetto tvOS, eseguire le operazioni seguenti:

Nel Esplora soluzioni fare doppio clic Assets.xcassets per aprirlo per la modifica:
Nell'Editor asset espandere l'assetApp Icon & Top Shelf Image:
Fare clic sull'asset Top Shelf Image :
Fare clic sulla voce 1x Apple TV e selezionare un file di immagine.
Salva le modifiche.

Contenuto a scaffale principale dinamico

Invece di visualizzare un'immagine statica top shelf, il top shelf può contenere una riga dinamica di Elementi attivabili o un set dinamico di banner di scorrimento. Entrambi questi stili dinamici consentono di evidenziare il contenuto fornito dall'app o passare alle funzionalità più usate.

Riga di contenuto con sezioni

Questo tipo di contenuto Top Shelf dinamico presenta una singola riga di scorrimento, Elementi attivabili suddivisi facoltativamente in sezioni. Viene in genere usato per evidenziare il contenuto dell'app nuovo, preferito o visualizzato di recente.

Il contenuto viene presentato come un singolo elenco di contenuto a scorrimento orizzontale con un'etichetta visualizzata sotto la parte di contenuto corrente selezionata (attualmente con stato attivo). Se l'utente seleziona una determinata parte di contenuto, l'app verrà avviata e dovrà essere inserita direttamente in tale contenuto.

Saranno necessarie le dimensioni del contenuto seguenti:

Dimensione	Poster (2:3)	Quadrato (1:1)	TYPE (16:9)
Dimensioni effettive	404x608px	608x608px	908x512px
dimensioni zona Cassaforte	380x570px	570x570px	852x479px
Dimensioni non incentrate	333x500px	500x500px	782x440px
Dimensioni con stato attivo	380x570px	570x570px	852x479px

Apple fornisce i suggerimenti seguenti per la riga contenuto con sezioni:

Completare la riga : è necessario fornire contenuto sufficiente per estendersi a tutta la larghezza dello schermo.
Ridimensionamento delle immagini miste: la riga di contenuto con sezioni è stata progettata per contenere una combinazione di dimensioni di immagine (dall'elenco fornito in precedenza). Se tuttavia si combinano dimensioni dell'immagine, tenere presente che verrà applicata una scalabilità aggiuntiva per normalizzare la visualizzazione del contenuto.

Scorrere banner inset

Facoltativamente, l'app Xamarin.tvOS può presentarne il contenuto in Top Shelf come raccolta di scorrimento e ciclo automatico di banner che riempiono quasi lo schermo. Questo stile viene in genere usato per presentare contenuti ricchi e nuovi come i nuovi programmi televisivi.

Oltre allo scorrimento automatico, l'utente può assumere il controllo dei banner e scorrere in entrambe le direzioni usando Siri Remote. Facendo un piccolo movimento circolare su Siri Remote quando un banner è attivo attiverà l'effetto Parallasse per tale banner.

Immagine banner (extra wide)

Dimensione	Risoluzione
Dimensioni effettive	1940x624px
dimensioni zona Cassaforte	1740x620px
Dimensioni non incentrate	1740x560px
Dimensioni con stato attivo	1740x620px

È possibile specificare banner inset scorrevoli come file statico .png o a .lsr più livelli.

Apple fornisce i suggerimenti seguenti per gli banner inset scorrevoli:

Quantità di contenuto: è necessario fornire almeno tre (3) banner per lo scorrimento per sentirsi naturali. È consigliabile includere non più di otto (8) banner o rendere difficile lo spostamento per l'utente finale.
Testo contenuto: se il banner richiede testo in deve essere incluso nell'immagine del banner. Se si usano immagini a più livelli, il testo dovrebbe trovarsi nel livello superiore.

Per altre informazioni sull'aggiunta di un'estensione top shelf all'app per fornire contenuti dinamici top shelf, vedi Le informazioni di riferimento sul framework TVServices di Apple.

Immagini del Game Center

Se l'app Xamarin.tvOS è un gioco e hai incluso il supporto di Game Center, saranno necessari diversi asset di immagine:

Icone obiettivo: per ogni risultato è necessaria un'immagine opaca che verrà ritagliata automaticamente in un cerchio. Gli obiettivi sono elementi non attivabili.
Dashboard Artwork (Grafica dashboard) - È possibile specificare un'immagine facoltativa che verrà visualizzata nella parte superiore del dashboard dell'app all'interno di Game Center. Queste immagini non sono attivabili.
Grafica del tabellone punteggi : è necessario specificare tra una (1) e tre (3) immagini delle proporzioni di 16:9 per ogni classifica supportata dall'app. Possono trattarsi di file statici .png o a più livelli .lsr . La grafica del tabellone punteggi è attivabile.

Dimensione	Icone degli obiettivi	Dashboard Artwork	Grafica del tabellone punteggi
Dimensioni visibili	200x200px	923x150px	n/d
Dimensioni effettive	320x320px	n/d	659x371px
dimensioni zona Cassaforte	n/d	n/d	618x348px
Dimensioni non incentrate	n/d	n/d	548x309px
Dimensioni con stato attivo	n/d	n/d	618x348px

Per altre informazioni sull'uso di Game Center, vedi la Guida alla programmazione del Game Center di Apple.

Working with Images (Uso delle immagini)

Poiché tvOS 9 è un subset di iOS 9, le stesse tecniche usate per includere e visualizzare immagini in un'app Xamarin.iOS funzionano anche per un'app Xamarin.tvOS. Per altre informazioni, vedere la documentazione relativa alla visualizzazione di un'immagine .

Impostazione delle immagini del progetto Xamarin.tvOS

Come indicato in precedenza, tutte le app tvOS richiedono un'immagine di avvio e un'icona dell'app. Questa sezione illustra la selezione dell'icona Avvia immagine e app per il progetto di app Xamarin.tvOS dopo che sono stati impostati in un catalogo asset.

Effettua le operazioni seguenti:

Nella Esplora soluzioni fare doppio clic su Info.plist per aprirlo per la modifica:
Nell'Editor Info.Plist selezionare il Catalogo asset (configurato in precedenza nella sezione Impostazione delle icone dell'app) per le icone dell'app:
Selezionare quindi il Catalogo asset (configurato in precedenza nella sezione Impostazione dell'immagine di avvio) per le immagini di avvio.
Salva le modifiche.

Riepilogo

Questo articolo ha illustrato tutti i tipi di immagine e le dimensioni usati in un'app Xamarin.tvOS. In primo luogo, ha trattato immagini di avvio, immagini a più livelli, icone dell'app, immagini top shelf e immagini del Game Center. È stata quindi illustrata l'uso delle immagini nell'app Xamarin.tvOS.

Condividi tramite

Uso di icone e immagini tvOS in Xamarin