Arbeiten mit tvOS-Symbolen und Bildern in Xamarin

Artikel
03/16/2017

Das Erstellen von faszinierenden Symbolen und Bildern ist ein wichtiger Bestandteil der Entwicklung einer immersiven Benutzererfahrung für Ihre Apple TV-Apps. In diesem Handbuch werden die Schritte behandelt, die zum Erstellen erforderlich sind, und die erforderlichen Grafikressourcen für Ihre Xamarin.tvOS-Apps enthalten:

Startbild – Ein Startbild wird angezeigt, wenn Die App zum ersten Mal gestartet wird und nach Abschluss des Starts durch den ersten Bildschirm der App ersetzt wird.
Layered Images – Spezifisch für apple TV, arbeiten die neuen Layered Images von Apple mit dem Parallax-Effekt, um einen 3D-Effekt für ausgewählte Elemente zu erstellen. Es gibt mehrere Möglichkeiten zum Erstellen von Mehrschichtbildern.
App-Symbol – Symbole sind nicht nur für den Apple TV-Startbildschirm, sondern für den App Store erforderlich. Sie müssen als Layered Image bereitgestellt werden.
Top Shelf Image – Wenn Ihre App auf der obersten Zeile des Startbildschirms platziert wird, benötigen Sie ein Top-Regalbild, um die Features Ihrer App hervorzuheben. Optional können Sie dynamische Top-Regalinhalte bereitstellen, um den Inhalt in Ihrer App hervorzuheben.
Game Center-Bilder – Wenn Ihre App ein Spiel ist und Game Center verwendet, sind mehrere zusätzliche Bilder erforderlich.
Festlegen von Xamarin.tvOS-Projektbildern – Behandelt die Schritte, die zum Festlegen des Startbilds und des App-Symbols für Ihre Xamarin.tvOS-App erforderlich sind.

Wichtig

Alle Bilder auf dem Apple TV befinden sich in der Auflösung von 1x (@1x) und Sie sollten nur Bilder dieser Größe verwenden. Das Einschließen größerer Grafiken mit höherer Auflösung benötigt nicht nur Zeit, um mehr Arbeitsspeicher und Speicher herunterzuladen und zu verwenden, sondern sie müssen zur Laufzeit dynamisch neu skaliert werden und sich negativ auf die Zeichenleistung auswirken.

Bild starten

Das Startbild ist das erste Element, das angezeigt wird, wenn Ihre Xamarin.tvOS-App anfänglich auf dem Apple TV gestartet wird, und daher muss jede tvOS-App ein Startbild bereitstellen.

Das Startbild wird schnell angezeigt und vermittelt den Eindruck, dass Ihre App schnell und reaktionsfähig ist. Das Apple TV ersetzt das Startbild kurz darauf durch den ersten Bildschirm Ihrer App.

Startbilder sind keine Möglichkeit für Anzeigen oder künstlerischen Ausdruck, sie existieren nur, um den Eindruck zu erwecken, dass Ihre App schnell gestartet wird und einsatzbereit ist.

Bildgröße starten	Hinweise
1920 × 1080 px	Nur nicht überschichtete .png Dateien

Apple macht die folgenden Vorschläge zum Entwerfen des Startimages Ihrer App:

Nahezu identisch mit dem ersten Bildschirm – Der Startbildschirm sollte so nah wie möglich am ersten Bildschirm Ihrer App sein. Das Einschließen verschiedener Grafiken oder Elemente kann zu einem lästigen "Flash" führen, wenn der erste Bildschirm angezeigt wird.
Vermeiden Sie die Verwendung von Text – Startbilder sind statisch und werden daher nicht lokalisiert, bevor sie angezeigt werden.
Downplay Launch – Da Apple TV-Benutzer häufig Apps wechseln, sollten Sie nicht auf den App-Startprozess aufmerksam machen.
Keine Anzeigen oder Branding - Ihr Startbild sollte nicht als Infobildschirm verwendet werden oder Branding enthalten, es sei denn, es ist statisch Teil des ersten Bildschirms Ihrer App. Werbung ist streng verboten.

Festlegen des Startimages

Gehen Sie wie folgt vor, um das Startbild für Ihr tvOS-Projekt festzulegen:

Doppelklicken Sie Assets.xcassets im Projektmappen-Explorer, um sie zur Bearbeitung zu öffnen:
Klicken Sie im Objekt-Editor auf die LaunchImages Ressource:
Klicken Sie auf den 1x Apple TV-Eintrag , und wählen Sie das Startbild aus, oder ziehen Sie optional ein neues Bild aus dem Dateisystem:
Speichern Sie die Änderungen.

Mehrschichtige Bilder

Neu bei Apple TV arbeiten Layered Images mit dem Parallax Effect zusammen, um einen 3D-Effekt zu erzeugen, der dazu beiträgt, dass der Benutzer auf der Couch mental mit dem Inhalt auf dem Bildschirm im Raum verbunden bleibt.

Ebenenbilder enthalten aus zwei (2) bis fünf (5) separaten Ebenen, die kombiniert werden, um ein vollständiges Bild zu bilden. Mit Ausnahme der Hintergrundebene verwendet jede Ebene ihre Z-Reihenfolge zusammen mit Transparenz, um eine Illusion der Tiefe zu schaffen. Wenn der Benutzer mit einem Ebenenbild interagiert, werden höhere Z-geordnete Ebenen skaliert und überlappend, um diesen Effekt zu erstellen.

Wichtig

Layered Images sind für die Symbole Ihrer App erforderlich und sind optional für andere fokussierbare Elemente (z. B. das Obere Regalbild). Apple schlägt jedoch vor, layered Images für jedes Bild zu verwenden, das den Fokus in Ihrer App erhalten kann.

Apple macht die folgenden Vorschläge für das Entwerfen Von Layered Images:

Machen Sie die Hintergrundebene undurchsichtig – Ihre Hintergrundebene (Ebene 1) muss undurchsichtig sein, oder Sie erhalten eine Fehlermeldung, wenn Sie versuchen, das layered Image auf Apple TV zu verwenden. Alle anderen Ebenen können mehrere Transparenzebenen enthalten, um den 3D-Effekt zu verbessern.
Vordergrund-, Mittel- und Hintergrundelemente isolieren – Platzieren Sie prominente Elemente (z. B. Spielzeichen) im Vordergrund, verwenden Sie die Mitte für sekundäre Elemente oder Schatten. Schließen Sie schließlich einen neutralen Hintergrund ein, um eine Phase für die oberen Ebenen bereitzustellen.
Text im Vordergrund behalten – Sofern Sie nicht möchten, dass der Text von höheren Ebenen verdeckt wird, sollte er sich in der Regel auf der obersten Ebene befinden.
Verwenden Sie einfache Schichtung - Der Parallax-Effekt wurde so konzipiert, dass sie subtil ist, um Ihre Schichten minimal zu halten, um jarringende, unrealistische Effekte zu verhindern.
Fügen Sie eine Tresor Zone hinzu: Da obere Ebenen während eines Parallax-Effekts zugeschnitten werden können, müssen Sie einen Tresor Zonenrahmen in jede Ebene erstellen. Wenn Sie Ihren Inhalt zu nah an den Ebenenrand erhalten, kann er abgeschnitten werden. Obere Ebenen erleben mehr Skalierung und Zuschneiden als untere Ebenen. Weitere Informationen finden Sie im Abschnitt "Größenanpassung von Bildebenen" weiter unten.
Vorschau häufig – Ebenenbilder sollten häufig in der Vorschau angezeigt werden, um sicherzustellen, dass der gewünschte 3D-Effekt auftritt und dass keiner der Inhalte auf den einzelnen Ebenen zugeschnitten wird. Sie sollten eine Vorschau ihrer Layered Images auf echter Apple TV-Hardware anzeigen, um sicherzustellen, dass sie wie erwartet gerendert werden.

Wenn möglich, sollten Sie immer die integrierten UIKit Steuerelemente verwenden, um Ihre Layered Images anzuzeigen, da sie automatisch den Parallax-Effekt erhalten, wenn sie in den Fokus gelangen.

Größenanpassung von Bildebenen

Es ist wichtig, sich daran zu erinnern, einen Tresor Zonenrahmen in jede Ebene einzuschließen, die Ihr Layered Image erstellt. Da die einzelnen Ebenen während des Parallax-Effekts skaliert und zugeschnitten werden können, kann der Inhalt der Ebenen abgeschnitten werden, wenn sie zu nah am Rand der Ebene liegt:

Erstellen von Mehrschichtbildern

tvOS funktioniert mit Layered Images in den folgenden Formaten:

CAR Files - Dies ist ein proprietäres Objektkatalog-Format, das von Apple erstellt wurde. Sie erstellen KEINE CAR-Dateien direkt, sie werden zur Kompilierungszeit aus allen LSR-Dateien erstellt und in Ihr App-Bündel eingeschlossen.
LSR Images - Dies ist ein proprietäres Bildformat, das von Apple erstellt wurde. Verwenden Sie das Parallax Exporter Adobe Fotos hop Plugin oder parallax Previewer, um Layered Images im LSR-Format zu erstellen und in der Vorschau anzuzeigen.
Assets.xcassets - Von zwei (2) bis fünf (5) standardformatierten .png Bildern, die in einem Objektkatalog enthalten sind, der zur Kompilierung in ein CAR oder LSR formatiertes Layered Image zur Kompilierungszeit kompiliert wird.
LCR Files - Dies ist ein proprietäres Dateiformat, das von Apple erstellt wurde. LCR-Dateien sollen als zusätzliche Inhalte verwendet werden, die von einem Ihrer Inhaltsserver heruntergeladen werden. LCR-Datei sollte niemals in Ihr App-Bündel aufgenommen werden. LCR-Dateien werden aus LSR- oder Fotos hop-Dateien mithilfe des Befehlszeilentools generiert, das layerutil in Xcode enthalten ist.

The Parallax Previewer

Apple hat die Parallax Previewer erstellt, um eine Vorschau anzuzeigen und layered Images zu erstellen, die für App-Symbole und optionale fokussierbare Elemente erforderlich sind. In der Vorschau wird jede Ebene angezeigt, die das fertige Ebenenbild bildet:

Beim Anzeigen einer Vorschau eines mehrschichtigen Bilds können Sie das Bild mit der Maus drehen und den Parallax-Effekt in der Vorschau anzeigen. Verwenden Sie die + Schaltflächen (Plus) und - (Minus) zum Hinzufügen und Entfernen von Ebenen.

Beim Erstellen eines neuen Ebenenbilds kann es im LSR-Format exportiert und im Bündel Ihrer App enthalten sein.

Weitere Informationen zum Erstellen und Anzeigen von Mehrschichtbildern finden Sie im Abschnitt "Erstellen von Parallax-Grafiken" von Apple im App-Programmierhandbuch für tvOS.

App-Symbole

Ihre Xamarin.tvOS-App erfordert nicht nur ein App-Symbol für den Apple TV-Startbildschirm, sondern auch ein Symbol für den App Store. Das App-Symbol ist die erste Änderung, um einen großen Eindruck von Ihrem potenziellen Benutzer zu machen und den Zweck Ihrer App auf einen Blick zu kommunizieren.

Jede App muss sowohl eine kleine als auch eine große Version des App-Symbols bereitstellen. Das kleine Symbol wird auf dem Apple TV-Startbildschirm verwendet, wenn die App installiert ist. Die große Version wird vom App Store verwendet. Das große App-Symbol sollte das Erscheinungsbild der kleinen Symbolversion nachahmen.

Kleines Symbol	Lösung	Lösung
Tatsächliche Größe	400 x 240px	1280x768px
Tresor Zonengröße	370x222px
Nicht fokussierte Größe	300x180px
Fokussierte Größe	370x222px

Wichtig

Ihre App-Symbole müssen als Mehrschichtbilder bereitgestellt werden. Weitere Informationen finden Sie im Abschnitt "Layered Image " weiter oben.

Apple bietet die folgenden Vorschläge zum Erstellen Ihrer App-Symbole:

Bereitstellen eines einzelnen Fokuspunkts – Entwerfen Sie Ihr Symbol mit einem einzelnen Fokuspunkt, der direkt in der Mitte des Symbols platziert wird.
Verwenden Sie einen einfachen Hintergrund – Halten Sie ihren Symbolhintergrund einfach, sodass sich die oberen Ebenen hervorheben. Erwägen Sie die Verwendung einer einfachen Farbe oder eines subtilen Farbverlaufs.
Beschränken Sie die Textmenge – Da der Name der App unter dem Symbol angezeigt wird, wenn sie vom Benutzer ausgewählt wird, sollten Sie nur Text einschließen, wenn es für den Entwurf des Symbols unerlässlich ist.
Verwenden Sie keine Screenshots – Screenshots sind für ein Symbol zu komplex und ermöglichen es dem Benutzer nicht, den Zweck Ihrer App auf einen Blick zu sehen.
Symbolplatz beibehalten – tvOS wendet automatisch eine Maske an, die die Ecken Ihrer Symbole subtil rundet. Schließen Sie diese Rundung nicht selbst ein.
Trennen Sie Ihre Ebenen sorgfältig – Text sollte sich auf der oberen Ebene, sekundären Elementen in der Mitte und einem neutralen Hintergrund befinden, mit dem Ihre oberen Ebenen glänzen können.
Verwenden Sie Farbverläufe und Schatten sorgfältig – Farbverläufe und Schatten können mit dem Parallax-Effekt kollidieren, damit sie sorgfältig verwendet werden sollten. Einfache Farbverlaufsarten von oben nach unten und hell zu dunkel funktionieren am besten. Schatten funktionieren normalerweise am besten als scharfe, hartgerandte Farbtons.
Ebenentransparenz variieren – Verwenden Sie unterschiedliche Transparenzstufen auf den oberen Ebenen des App-Symbols, um den 3D-Effekt zu erhöhen. Die Hintergrundebene muss undurchsichtig sein, oder dies führt zu einem Fehler.

Festlegen der App-Symbole

Gehen Sie wie folgt vor, um die für Ihr tvOS-Projekt erforderlichen App-Symbole festzulegen:

Doppelklicken Sie Assets.xcassets im Projektmappen-Explorer, um sie zur Bearbeitung zu öffnen:
Erweitern Sie im Objekt-Editor die App Icon & Top Shelf Image Ressource:
Erweitern Sie als Nächstes die App Icon - Small Ressource:
Erweitern Sie dann die Back Ressource, und klicken Sie auf den Contents Eintrag:
Klicken Sie auf den 1x Apple TV-Eintrag , und wählen Sie eine Bilddatei aus.
Wiederholen Sie die obigen Schritte für die Front Und Middle Ressourcen.
Wiederholen Sie dann die gleichen Schritte, um die App Icon - Large Ressource zu definieren.
Speichern Sie die Änderungen.

Oberes Regalbild

Wenn der Benutzer Ihre Xamarin.tvOS-App auf der Startseite von Apple TV auf der obersten Zeile platziert hat, wird ein großes Top-Regalbild angezeigt, wenn ihre App vom Benutzer ausgewählt wird. Dieses Bild sollte die Features Ihrer App hervorheben oder direkte Links zu ihren Inhalten bereitstellen.

Das Obere Regalbild kann entweder als einzelne statische .png oder .lsr Datei bereitgestellt werden (siehe Erstellen von Ebenenbildern), oder es kann dynamisch zur Laufzeit als einzelne Zeile mit fokussierbaren Elementen erstellt werden (siehe Dynamischer Top-Regalinhalt unten).

Größe des oberen Regalbilds	Hinweise
1920x720px	Statische .png- oder layered .lsr-Datei

Apple bietet die folgenden Vorschläge zum Erstellen Ihrer Top Shelf Images:

Verwenden Sie Rich Static Imagery – Wenn Ihre App keinen dynamischen Inhalt bereitstellt, ist das obere Regalbild nicht fokussierbar. Verwenden Sie dieses Bild, um die Features der App oder Ihrer Marke hervorzuheben.
Link zu App-Inhalten – Dynamische Top-Regallayouts bieten einen Schnelllink zu den Inhalten, die Der Benutzer in Ihrer App am wichtigsten findet. Verwenden Sie diesen Bereich, um einen Schnelllink bereitzustellen, um Ihre App zu starten und sofort in den angegebenen Inhalt zu springen.
Präsentieren Sie die neuesten Inhalte – Rich Top Shelf-Inhalte können einen Benutzer in Ihre App zeichnen und sie mehr nutzen möchten. Verwenden Sie dies als Bereich, um den höchsten bewerteten oder neuesten Inhalt zu präsentieren.
Personalisierte Inhalte – Benutzer platzieren ihre am häufigsten verwendeten oder bevorzugten Apps in der obersten Zeile des Startbildschirms. Verwenden Sie das obere Regal, um den Inhalt anzuzeigen, an dem sie am meisten interessiert wären.
Werbung nicht zulässig – Anzeigen sind streng verboten, im Top-Regal angezeigt zu werden. Möglicherweise zeigen Sie die neuesten bearbeitbaren Inhalte an, aber es sollten keine Preisinformationen angezeigt werden.

Festlegen des Oberen Regalbilds

Gehen Sie wie folgt vor, um das für Ihr tvOS-Projekt erforderliche Top Shelf Image festzulegen:

Doppelklicken Sie Assets.xcassets im Projektmappen-Explorer, um sie zur Bearbeitung zu öffnen:
Erweitern Sie im Objekt-Editor die App Icon & Top Shelf Image Ressource:
Klicken Sie auf das Top Shelf Image Objekt:
Klicken Sie auf den 1x Apple TV-Eintrag , und wählen Sie eine Bilddatei aus.
Speichern Sie die Änderungen.

Dynamischer Top-Regalinhalt

Statt ein statisches Bild des oberen Regals anzuzeigen, kann das obere Regal eine dynamische Zeile mit fokussierbaren Elementen oder einen dynamischen Satz von Bildlaufbannern enthalten. Mit beiden dynamischen Stilen können Sie die von Ihrer App bereitgestellten Inhalte hervorheben oder zu den am häufigsten verwendeten Features springen.

Abschnittsinhaltszeile

Dieser dynamische Inhaltstyp "Oberstes Regal" stellt eine einzelne Zeile mit Bildlauf dar, die fokussierbare Elemente optional in Abschnitte unterteilt sind. Es wird in der Regel verwendet, um neue, bevorzugte oder zuletzt angezeigte App-Inhalte hervorzuheben.

Der Inhalt wird als einzelne, horizontale Bildlaufliste mit einer Beschriftung dargestellt, die unter dem aktuell ausgewählten Inhaltsabschnitt angezeigt wird (der aktuell den Fokus hat). Wenn der Benutzer einen bestimmten Inhalt auswählt, wird Ihre App gestartet, und sie sollten direkt in diesen Inhalt aufgenommen werden.

Die folgenden Inhaltsgrößen sind erforderlich:

Size	Poster (2:3)	Quadrat (1:1)	HDTV (16:9)
Tatsächliche Größe	404x608px	608x608px	908x512px
Tresor Zonengröße	380x570px	570x570px	852x479px
Nicht fokussierte Größe	333x500px	500x500px	782x440px
Fokussierte Größe	380x570px	570x570px	852x479px

Apple bietet die folgenden Vorschläge für die Abschnittsinhaltszeile:

Füllen Sie die Zeile aus– Sie sollten genügend Inhalt bereitstellen, um die gesamte Breite des Bildschirms zu umfassen.
Skalierung gemischter Bilder – Die Abschnittsinhaltszeile wurde so konzipiert, dass sie eine Mischung aus Bildgrößen (aus der oben angegebenen Liste) enthält. Wenn Sie jedoch Bildgrößen kombinieren, beachten Sie, dass zusätzliche Skalierung angewendet wird, um die Inhaltsanzeige zu normalisieren.

Scrollen von Insetbannern

Optional kann Ihre Xamarin.tvOS-App ihren Inhalt im oberen Regal als automatisch scrollende und schleifende Sammlung von Bannern präsentieren, die den Bildschirm fast ausfüllen. Diese Formatvorlage wird in der Regel verwendet, um umfangreiche, neue Inhalte wie neue TV-Sendungen zu präsentieren.

Zusätzlich zur automatischen Bildlaufsteuerung kann der Benutzer die Kontrolle über die Banner übernehmen und in beide Richtungen mithilfe der Siri Remote scrollen. Wenn ein Banner im Fokus ist, wird der Parallax-Effekt für dieses Banner aktiviert, wenn eine kleine, kreisförmige Geste auf der Siri-Fernbedienung ausgeführt wird.

Bannerbild (extra breit)

Größe	Lösung
Tatsächliche Größe	1940x624px
Tresor Zonengröße	1740x620px
Nicht fokussierte Größe	1740x560px
Fokussierte Größe	1740x620px

Bildlaufbanner können entweder als statische .png oder überschichtete .lsr Datei bereitgestellt werden.

Apple bietet die folgenden Vorschläge für die Banner für das Scrollen von Einsets:

Inhaltsmenge – Sie sollten mindestens drei (3) Banner für den Bildlauf bereitstellen, um sich natürlich zu fühlen. Sie sollten nicht mehr als acht (8) Banner einschließen oder die Navigation für den Endbenutzer schwierig machen.
Inhaltstext – Wenn Für Ihr Banner Text erforderlich ist, sollte text in das Bannerbild aufgenommen werden. Wenn Sie Layered Images verwenden, sollte sich Ihr Text in der obersten Ebene befinden.

Weitere Informationen zum Hinzufügen einer Top-Regalerweiterung zu Ihrer App finden Sie in der TVServices Framework-Referenz von Apple, um dynamische Top-Regalinhalte bereitzustellen.

Game Center-Bilder

Wenn Es sich bei Ihrer Xamarin.tvOS-App um ein Spiel handelt und Sie die Unterstützung von Game Center hinzugefügt haben, sind mehrere weitere Bildressourcen erforderlich:

Leistungssymbole – Ein undurchsichtiges Bild ist für jede Leistung erforderlich, die automatisch in einen Kreis zugeschnitten wird. Erfolge sind nicht fokussierbare Elemente.
Dashboardgrafik – Ein optionales Bild kann bereitgestellt werden, das oben im Dashboard Ihrer App im Game Center angezeigt wird. Diese Bilder sind nicht fokussierbar.
Bestenlistenbilder – Sie müssen zwischen 1 (1) und drei (3) 16:9 Seitenverhältnisbildern für jede von Ihrer App unterstützte Bestenliste bereitstellen. Hierbei kann es sich um statische .png oder mehrschichtige .lsr Dateien handeln. Die Bestenlistengrafik ist fokussierbar.

Size	Leistungssymbole	Dashboardgrafik	Bestenlistengrafik
Sichtbare Größe	200x200px	923x150px	Nicht zutreffend
Tatsächliche Größe	320x320px	Nicht zutreffend	659x371px
Tresor Zonengröße	Nicht zutreffend	Nicht zutreffend	618x348px
Nicht fokussierte Größe	Nicht zutreffend	Nicht zutreffend	548x309px
Fokussierte Größe	Nicht zutreffend	Nicht zutreffend	618x348px

Weitere Informationen zum Arbeiten mit Game Center finden Sie im Programmierhandbuch für Apple Game Center.

Working with Images (Arbeiten mit Bildern)

Da tvOS 9 eine Teilmenge von iOS 9 ist, funktionieren dieselben Techniken zum Einschließen und Anzeigen von Bildern in einer Xamarin.iOS-App auch für eine Xamarin.tvOS-App. Weitere Informationen finden Sie in unserer Bilddokumentation .

Festlegen von Xamarin.tvOS-Projektbildern

Wie oben erwähnt, benötigen alle tvOS-Apps ein Startbild und ein App-Symbol. In diesem Abschnitt wird beschrieben, wie Sie das Startbild und das App-Symbol für Ihr Xamarin.tvOS-App-Projekt auswählen, nachdem sie in einem Objektkatalog festgelegt wurden.

Gehen Sie folgendermaßen vor:

Doppelklicken Sie im Projektmappen-Explorer auf die Info.plist Datei, um sie zur Bearbeitung zu öffnen:
Wählen Sie im Info.Plist-Editor den Ressourcenkatalog (oben im Abschnitt "App-Symbole festlegen") für die App-Symbole aus:
Wählen Sie als Nächstes den Ressourcenkatalog (oben im Abschnitt "Startabbild festlegen") für die Startimages aus.
Speichern Sie die Änderungen.

Zusammenfassung

In diesem Artikel werden alle Bildtypen und Größen behandelt, die in einer Xamarin.tvOS-App verwendet werden. Zunächst wurden Startbilder, Mehrschichtbilder, App-Symbole, Top-Regalbilder und Game Center-Bilder behandelt. Anschließend wurde das Arbeiten mit Bildern in Ihrer Xamarin.tvOS-App behandelt.

Freigeben über

Arbeiten mit tvOS-Symbolen und Bildern in Xamarin