Praca z ikonami i obrazami systemu tvOS na platformie Xamarin

Artykuł
03/16/2017

Tworzenie atrakcyjnych ikon i obrazów jest krytyczną częścią tworzenia immersyjnego środowiska użytkownika dla aplikacji Apple TV. Ten przewodnik obejmuje kroki wymagane do utworzenia i uwzględnienia niezbędnych zasobów graficznych dla aplikacji platformy Xamarin.tvOS:

Uruchom obraz — obraz uruchamiania jest wyświetlany po pierwszym uruchomieniu aplikacji i jest zastępowany przez pierwszy ekran aplikacji po zakończeniu uruchamiania.
Obrazy warstwowe — specyficzne dla urządzenia Apple TV, nowe obrazy warstwowe firmy Apple współpracują z efektem Parallax, aby utworzyć efekt 3D dla wybranych elementów. Istnieje kilka sposobów tworzenia obrazów warstwowych.
Ikona aplikacji — ikony są wymagane nie tylko dla ekranu głównego apple TV, ale dla sklepu App Store. Należy je podać jako obraz warstwowy.
Obraz z górną półką — jeśli aplikacja zostanie umieszczona w górnym wierszu ekranu głównego, będzie potrzebny obraz z najwyższej półki, aby wyróżnić funkcje aplikacji. Opcjonalnie możesz podać zawartość dynamicznej górnej półki, aby wyróżnić zawartość w aplikacji.
Game Center Images — jeśli Twoja aplikacja jest grą i używa usługi Game Center, wymagane będzie kilka dodatkowych obrazów.
Ustawianie obrazów projektu platformy Xamarin.tvOS — obejmuje kroki wymagane do ustawienia ikony Uruchom obraz i aplikację dla aplikacji Xamarin.tvOS.

Ważne

Wszystkie obrazy w apple TV są w rozdzielczości 1x (@1x) i należy używać tylko obrazów tego rozmiaru. Dołączenie większej grafiki o większej rozdzielczości nie tylko zajmuje trochę czasu, aby pobrać i używać większej ilości pamięci i miejsca do magazynowania, ale muszą być dynamicznie ponownie skalowane w czasie wykonywania i negatywnie wpływają na wydajność rysunku.

Uruchamianie obrazu

Uruchom obraz jest pierwszą rzeczą, która jest wyświetlana, gdy aplikacja Xamarin.tvOS jest początkowo uruchamiana na urządzeniu Apple TV TV, a w związku z tym każda aplikacja tvOS musi podać obraz Launch.

Obraz uruchamiania jest wyświetlany szybko i sprawia wrażenie, że aplikacja jest szybka i elastyczna. Urządzenie Apple TV zastąpi obraz Launch Image pierwszym ekranem aplikacji wkrótce potem.

Uruchamianie obrazów nie jest okazją do reklam ani ekspresji artystycznej, istnieją tylko w celu uzyskania wrażenia, że aplikacja szybko się uruchamia i jest gotowa do użycia.

Uruchamianie rozmiaru obrazu	Uwagi
1920x1080 pikseli	Pliki .png niewarstwowe

Firma Apple udostępnia następujące sugestie dotyczące projektowania obrazu uruchamiania aplikacji:

Prawie identyczny z pierwszym ekranem — ekran uruchamiania powinien być jak najbardziej zbliżony do pierwszego ekranu aplikacji. Dołączenie innej grafiki lub elementu może spowodować irytujące "flash", gdy pojawi się pierwszy ekran.
Unikaj używania tekstu — uruchamianie obrazów jest statyczne i w związku z tym nie zostanie zlokalizowane przed wyświetleniem.
Uruchamianie bagatelizować — ponieważ użytkownicy usługi Apple TV często przełączają aplikacje, nie należy zwracać uwagi na proces uruchamiania aplikacji.
Brak reklam ani znakowania — Obraz startowy nie powinien być używany jako ekran Informacje ani zawierać żadnych znakowania, chyba że jest to statyczna część pierwszego ekranu aplikacji. Reklamy są ściśle zabronione.

Ustawianie obrazu uruchamiania

Aby ustawić uruchamianie obrazu dla projektu tvOS, wykonaj następujące czynności:

W Eksplorator rozwiązań kliknij Assets.xcassets dwukrotnie, aby otworzyć go do edycji:
W Edytorze zasobów kliknij element LaunchImages zawartości:
Kliknij pozycję 1x Apple TV i wybierz pozycję Uruchom obraz lub opcjonalnie przeciągnij nowy obraz z systemu plików:
Zapisz zmiany.

Obrazy warstwowe

Nowość w Apple TV, Layered Images współpracować z Efektem Parallax w celu uzyskania efektu 3D, który pomaga utrzymać użytkownika na kanapie psychicznie połączone z zawartością na ekranie w całym pokoju.

Obrazy warstwowe zawierają od dwóch (2) do pięciu (5) oddzielnych warstw połączonych w celu utworzenia kompletnego obrazu. Z wyjątkiem warstwy tła każda warstwa używa swojej kolejności Z wraz z przezroczystością, aby stworzyć iluzję głębokości. Gdy użytkownik wchodzi w interakcję z obrazem warstwowym, wyższe warstwy uporządkowane za pomocą warstwy Z są skalowane i nakładają się na siebie, aby utworzyć ten efekt.

Ważne

Obrazy warstwowe są wymagane dla ikon aplikacji i są opcjonalne dla innych elementów z możliwością koncentracji uwagi (takich jak obraz z górną półką). Firma Apple sugeruje jednak używanie obrazów warstwowych dla dowolnego obrazu, który może skupić się na aplikacji.

Firma Apple przedstawia następujące sugestie dotyczące projektowania obrazów warstwowych:

Ustaw warstwę tła jako nieprzezroczystą — warstwa tła (warstwa 1) musi być nieprzezroczysta lub podczas próby użycia obrazu warstwowego w usłudze Apple TV zostanie wyświetlony błąd. Wszystkie inne warstwy mogą zawierać wiele poziomów przezroczystości, aby zwiększyć efekt 3D.
Izoluj elementy pierwszego planu, środka i tła — umieść widoczne elementy (takie jak znaki gry) na pierwszym planie, użyj środka dla elementów pomocniczych lub cieni. Na koniec dołącz neutralne tło, aby zapewnić etap górnej warstwy.
Zachowaj tekst na pierwszym planie — jeśli nie chcesz, aby tekst był zasłonięty przez wyższe poziomy, zazwyczaj powinien znajdować się na najbardziej górnej warstwie.
Używanie prostego warstwowania — efekt parallax został zaprojektowany tak, aby zachować warstwy do minimum, aby zapobiec jarring, nierealistyczne efekty.
Uwzględnij strefę Sejf — ponieważ górne warstwy można przycinać podczas efektu parallax, należy utworzyć obramowanie strefy Sejf do każdej warstwy. Jeśli zawartość zostanie zbyt blisko krawędzi warstw, może zostać przycięta. Górne warstwy będą bardziej skalowane i przycinane niż niższe warstwy. Zobacz sekcję Ustalanie rozmiaru warstw obrazów poniżej.
Podgląd często — podgląd obrazów warstwowych powinien być często wyświetlany, aby upewnić się, że występuje żądany efekt 3D i że żadna z zawartości poszczególnych warstw nie jest przycinana. Należy wyświetlić podgląd obrazów warstwowych na rzeczywistym sprzęcie Apple TV, aby upewnić się, że są one renderowane zgodnie z oczekiwaniami.

Zawsze, gdy jest to możliwe, należy zawsze używać wbudowanych UIKit kontrolek do wyświetlania obrazów warstwowych, ponieważ automatycznie uzyskają efekt parallax, gdy wejdą w fokus.

Ustalanie rozmiaru warstw obrazów

Należy pamiętać, aby uwzględnić obramowanie strefy Sejf do każdej warstwy, która będzie tworzyć obraz warstwowy. Ponieważ poszczególne warstwy można skalować i przycinać podczas efektu parallaxu, zawartość warstw można przycinać, jeśli jest zbyt blisko krawędzi warstwy:

Tworzenie obrazów warstwowych

System tvOS współpracuje z obrazami warstwowymi w następujących formatach:

PLIKI CAR — jest to zastrzeżony format wykazu zasobów utworzony przez firmę Apple. Pliki CAR nie są tworzone bezpośrednio, są tworzone w czasie kompilacji z żadnych plików LSR i zawarte w pakiecie aplikacji.
Obrazy LSR — jest to zastrzeżony format obrazu utworzony przez firmę Apple. Użyj wtyczki Adobe Photoshop Eksportera Parallax lub Podglądu Parallax, aby utworzyć i wyświetlić podgląd warstwowych obrazów w formacie LSR.
Assets.xcassets — od dwóch (2) do pięciu (5) standardowych .png obrazów sformatowanych w wykazie zasobów, które zostaną skompilowane w modelu CAR lub LSR sformatowanym obrazem warstwowym w czasie kompilacji.
Pliki LCR — jest to zastrzeżony format pliku utworzony przez firmę Apple. Pliki LCR mają być używane jako dodatkowa zawartość pobierana z jednego z serwerów zawartości. Plik LCR nigdy nie powinien być uwzględniony w pakiecie aplikacji. Pliki LCR są generowane na podstawie plików LSR lub Photoshop przy użyciu narzędzia wiersza polecenia dołączonego layerutil do programu Xcode.

Podgląd parallax

Firma Apple utworzyła podgląd Parallax Previewer i utworzyła obrazy warstwowe wymagane dla ikon aplikacji i opcjonalne elementy z możliwością koncentracji uwagi. Podgląd przedstawia każdą warstwę, która tworzy ukończony obraz warstwowy:

Podczas wyświetlania podglądu obrazu warstwowego możesz użyć myszy, aby obrócić obraz i wyświetlić podgląd efektu parallax. + Użyj przycisków (plus) i - (minus), aby dodawać i usuwać warstwy.

Podczas tworzenia nowego obrazu warstwowego można go wyeksportować w formacie LSR i uwzględnić w pakiecie aplikacji.

Aby uzyskać więcej informacji na temat tworzenia i wyświetlania podglądu obrazów warstwowych, zobacz sekcję Tworzenie obrazów parallax firmy Apple w przewodniku programowania aplikacji dla systemu tvOS.

Ikony aplikacji

Aplikacja Xamarin.tvOS będzie wymagać nie tylko ikony aplikacji dla ekranu głównego apple TV, ale także ikony sklepu App Store. Ikona aplikacji jest pierwszą zmianą, która sprawi, że twój potencjalny użytkownik będzie mieć duże wrażenie i powinien na pierwszy rzut oka komunikować się z celem aplikacji.

Każda aplikacja musi podać zarówno małą, jak i dużą wersję ikony aplikacji. Mała ikona będzie używana na ekranie głównym apple TV po zainstalowaniu aplikacji. Duża wersja jest używana przez sklep App Store. Duża ikona aplikacji powinna naśladować wygląd i działanie małej wersji ikony.

Mała ikona	Rozwiązanie	Rozwiązanie
Rzeczywisty rozmiar	400x240px	1280x768px
rozmiar strefy Sejf	370x222px
Rozmiar bez fokosu	300x180px
Rozmiar fokusu	370x222px

Ważne

Ikony aplikacji muszą być udostępniane jako obrazy warstwowe. Aby uzyskać więcej informacji, zobacz sekcję Obraz warstwowy powyżej.

Firma Apple udostępnia następujące sugestie dotyczące tworzenia ikon aplikacji:

Podaj pojedynczy punkt koncentracji uwagi — zaprojektuj ikonę za pomocą pojedynczego punktu koncentracji uwagi umieszczonego bezpośrednio w środku ikony.
Użyj prostego tła — zachowaj proste tło ikony, aby wyróżnić górne warstwy. Rozważ użycie prostego koloru lub subtelnego gradientu.
Ogranicz ilość tekstu — ponieważ nazwa aplikacji będzie wyświetlana poniżej ikony wybranej przez użytkownika, należy uwzględnić tekst tylko wtedy, gdy jest niezbędny do projektowania ikony.
Nie używaj zrzutów ekranu — zrzuty ekranu są zbyt złożone dla ikony i nie zezwalają użytkownikowi na błyskawiczne wyświetlanie przeznaczenia aplikacji.
Zachowaj kwadrat Ikony — system tvOS automatycznie stosuje maskę, która subtelnie zaokrągla rogi ikon. Nie dołączaj tego zaokrąglania samodzielnie.
Ostrożnie oddzielaj warstwy — tekst powinien znajdować się na górnej warstwie, elementach pomocniczych w środku i neutralnym tle, które pozwala na świecenie górnej warstwy.
Należy ostrożnie używać gradientów i cieni — gradienty i cienie mogą starć się z efektem parallax, więc należy je ostrożnie używać. Proste style gradientu od góry do dołu, od góry do dołu, działają najlepiej. Cienie zwykle działają najlepiej jak ostre, twarde odcienie.
Różna przezroczystość warstwy — użyj różnych poziomów przezroczystości na wyższych poziomach ikony aplikacji, aby zwiększyć efekt 3D. Warstwa tła musi być nieprzezroczysta lub spowoduje wystąpienie błędu.

Ustawianie ikon aplikacji

Aby ustawić ikony aplikacji wymagane dla projektu tvOS, wykonaj następujące czynności:

W Eksplorator rozwiązań kliknij Assets.xcassets dwukrotnie, aby otworzyć go do edycji:
W Edytorze zasobów rozwiń element App Icon & Top Shelf Image zawartości:
Następnie rozwiń element App Icon - Small zawartości:
Następnie rozwiń element Back zawartości i kliknij Contents wpis:
Kliknij pozycję 1x Apple TV i wybierz plik obrazu.
Powtórz powyższe kroki dla elementów Front i Middle .
Następnie powtórz te same kroki, aby zdefiniować zasób App Icon - Large .
Zapisz zmiany.

Obraz z górną półką

Jeśli użytkownik umieścił aplikację Xamarin.tvOS w górnym wierszu na ekranie głównym apple TV, po wybraniu aplikacji przez użytkownika zostanie wyświetlony duży obraz z najwyższej półki. Ten obraz powinien wyróżniać funkcje aplikacji lub udostępniać bezpośrednie linki do jej zawartości.

Obraz z górną półką można podać jako pojedynczy statyczny .png lub .lsr plik (zobacz Tworzenie obrazów warstwowych) lub można go dynamicznie tworzyć w czasie wykonywania jako pojedynczy wiersz elementów z możliwością koncentracji uwagi (zobacz Zawartość dynamiczna z najwyższej półki poniżej).

Rozmiar obrazu z górną półką	Uwagi
1920x720px	Statyczny .png lub plik lsr warstwowy

Firma Apple udostępnia następujące sugestie dotyczące tworzenia obrazów z najwyższej półki:

Użyj rozbudowanych obrazów statycznych — jeśli aplikacja nie udostępnia zawartości dynamicznej, jej obraz z najwyższej półki będzie nienależące do fokusu. Użyj tego obrazu, aby wyróżnić funkcje aplikacji lub marki.
Link do zawartości aplikacji — dynamiczne układy górnej półki zapewniają szybki link do zawartości, którą użytkownik znajdzie w aplikacji. Użyj tego obszaru, aby udostępnić szybki link, aby uruchomić aplikację i natychmiast przejść do danej zawartości.
Prezentacja najnowszej zawartości — zawartość z bogatą półką może przyciągnąć użytkownika do aplikacji i sprawić, że będą chcieli korzystać z niej więcej. Użyj tego jako obszaru, aby zaprezentować najwyższą lub najnowszą zawartość.
Spersonalizowana zawartość — użytkownicy umieszczają najczęściej używane lub ulubione aplikacje w górnym wierszu ekranu głównego. Użyj górnej półki, aby wyświetlić zawartość, którą najbardziej interesują.
Reklamy niedozwolone — reklamy nie mogą być wyświetlane na najwyższej półce. Możesz wyświetlić najnowszą zawartość z możliwością purchasable, ale nie powinny być wyświetlane żadne informacje o cenach.

Ustawianie obrazu z górną półką

Aby ustawić obraz najwyższej półki wymagany dla projektu tvOS, wykonaj następujące czynności:

W Eksplorator rozwiązań kliknij Assets.xcassets dwukrotnie, aby otworzyć go do edycji:
W Edytorze zasobów rozwiń element App Icon & Top Shelf Image zawartości:
Kliknij zasób Top Shelf Image :
Kliknij pozycję 1x Apple TV i wybierz plik obrazu.
Zapisz zmiany.

Zawartość dynamicznej najwyższej półki

Zamiast wyświetlać statyczny obraz z górną półką, górna półka może zawierać dynamiczny wiersz elementów z możliwością koncentracji uwagi lub dynamiczny zestaw transparentów przewijania. Oba te style dynamiczne umożliwiają wyróżnienie zawartości udostępnianej przez aplikację lub przejście do najczęściej używanych funkcji.

Wiersz zawartości sekcji

Ten dynamiczny typ zawartości Top Shelf przedstawia jeden wiersz przewijania, opcjonalnie elementy z możliwością koncentracji uwagi podzielone na sekcje. Zazwyczaj służy do wyróżniania nowej, ulubionej lub ostatnio wyświetlanej zawartości aplikacji.

Zawartość jest wyświetlana jako pojedyncza, pozioma lista przewijania zawartości z etykietą wyświetlaną w wybranym bieżącym elemencie zawartości (która obecnie ma fokus). Jeśli użytkownik wybierze dany element zawartości, aplikacja zostanie uruchomiona i powinna zostać przeniesiona bezpośrednio do tej zawartości.

Wymagane będą następujące rozmiary zawartości:

Rozmiar	Plakat (2:3)	Kwadrat (1:1)	GUR (16:9)
Rzeczywisty rozmiar	404x608px	608x608px	908x512px
rozmiar strefy Sejf	380x570px	570x570px	852x479px
Rozmiar bez fokosu	333x500px	500x500px	782x440px
Rozmiar fokusu	380x570px	570x570px	852x479px

Firma Apple udostępnia następujące sugestie dotyczące wiersza sekcji zawartości:

Ukończ wiersz — należy podać wystarczającą ilość zawartości, aby zapewnić pełną szerokość ekranu.
Skalowanie obrazów mieszanych — wiersz sekcji zawartości został zaprojektowany do przechowywania kombinacji rozmiarów obrazów (z listy podanej powyżej). Jeśli jednak mieszasz rozmiary obrazów, pamiętaj, że dodatkowe skalowanie zostanie zastosowane w celu normalizacji wyświetlania zawartości.

Przewijanie transparentów zestawów

Opcjonalnie aplikacja Xamarin.tvOS może prezentować swoją zawartość na półce górnej jako automatycznie przewijając i zapętlając kolekcję banerów, które prawie wypełniają ekran. Ten styl jest zwykle używany do prezentowania bogatych, nowych treści, takich jak nowe programy telewizyjne.

Oprócz automatycznego przewijania użytkownik może przejąć kontrolę nad banerami i przewinąć w obu kierunkach za pomocą pilota Siri Remote. Wykonanie małego, okrągłego gestu na Siri Remote, gdy baner jest w centrum uwagi, aktywuje efekt Parallax dla tego baneru.

Obraz transparentu (bardzo szeroki)

Rozmiar	Rozwiązanie
Rzeczywisty rozmiar	1940x624px
rozmiar strefy Sejf	1740x620px
Rozmiar bez fokosu	1740x560px
Rozmiar fokusu	1740x620px

Przewijanie transparentów zestawu może być udostępniane jako plik statyczny .png lub warstwowy .lsr .

Firma Apple udostępnia następujące sugestie dotyczące transparentów przewijania zestawu:

Ilość zawartości — należy podać co najmniej trzy (3) banery przewijania, aby czuć się naturalnie. Należy dołączyć nie więcej niż osiem (8) banerów lub utrudnić nawigację dla użytkownika końcowego.
Tekst zawartości — jeśli baner wymaga tekstu w pliku , powinien zostać uwzględniony na obrazie baneru. Jeśli używasz obrazów warstwowych, tekst powinien znajdować się w najwyższej warstwie.

Aby uzyskać więcej informacji na temat dodawania rozszerzenia Top Shelf do aplikacji, zobacz dokumentację platformy TVServices firmy Apple, aby zapewnić dynamiczną zawartość top półki.

Obrazy Game Center

Jeśli aplikacja platformy Xamarin.tvOS jest grą i masz włączoną obsługę usługi Game Center, wymagane będzie kilka dodatkowych zasobów obrazów:

Ikony osiągnięć — nieprzezroczysty obraz jest wymagany dla każdego osiągnięcia, które zostanie automatycznie przycięte do koła. Osiągnięcia są elementami bez koncentracji uwagi.
Grafika pulpitu nawigacyjnego — można podać opcjonalny obraz, który będzie wyświetlany w górnej części pulpitu nawigacyjnego aplikacji w usłudze Game Center. Te obrazy nie są fokusowe.
Ranking Artwork — musisz podać między jednym (1) a trzema (3) obrazami współczynnika proporcji 16:9 dla każdej tabeli liderów obsługiwanej przez aplikację. Mogą to być pliki statyczne .png lub warstwowe .lsr . Grafika rankingowa jest skoncentrowana.

Rozmiar	Ikony osiągnięć	Grafika pulpitu nawigacyjnego	Grafika rankingowa
Widoczny rozmiar	200x200px	923x150px	nie dotyczy
Rzeczywisty rozmiar	320x320px	nie dotyczy	659x371px
rozmiar strefy Sejf	nie dotyczy	nie dotyczy	618x348px
Rozmiar bez fokosu	nie dotyczy	nie dotyczy	548x309px
Rozmiar fokusu	nie dotyczy	nie dotyczy	618x348px

Aby uzyskać więcej informacji na temat pracy z usługą Game Center, zobacz Podręcznik programowania w Centrum gier firmy Apple.

Praca z obrazami

Ponieważ system tvOS 9 jest podzbiorem systemu iOS 9, te same techniki używane do dołączania i wyświetlania obrazów w aplikacji platformy Xamarin.iOS również działają w przypadku aplikacji platformy Xamarin.tvOS. Aby uzyskać więcej informacji, zobacz dokumentację dotyczącą wyświetlania obrazu .

Ustawianie obrazów projektu platformy Xamarin.tvOS

Jak wspomniano powyżej, wszystkie aplikacje systemu tvOS wymagają uruchomienia obrazu i ikony aplikacji. W tej sekcji opisano wybieranie ikony Uruchom obraz i aplikację dla projektu aplikacji platformy Xamarin.tvOS po ich ustawieniu w wykazie zasobów.

Należy wykonać następujące czynności:

W Eksplorator rozwiązań kliknij Info.plist dwukrotnie element , aby otworzyć go do edycji:
W edytorze Info.Plist wybierz katalog zasobów (skonfigurowany powyżej w sekcji Ustawianie ikon aplikacji) dla ikon aplikacji:
Następnie wybierz katalog zasobów (skonfigurowany powyżej w sekcji Ustawianie obrazu uruchamiania) dla obrazów uruchamiania.
Zapisz zmiany.

Podsumowanie

W tym artykule omówiono wszystkie typy obrazów i rozmiary używane w aplikacji platformy Xamarin.tvOS. Po pierwsze omówiono obrazy Launch, Layered Images, App Icon, Top Shelf Images i Game Center Images. Następnie omówiła pracę z obrazami w aplikacji platformy Xamarin.tvOS.

Udostępnij za pośrednictwem

Praca z ikonami i obrazami systemu tvOS na platformie Xamarin