Trabalhando com ícones e imagens do tvOS no Xamarin

Artigo
03/16/2017

Criar ícones e imagens cativantes é uma parte crítica do desenvolvimento de uma experiência de usuário imersiva para seus aplicativos da Apple TV. Este guia abordará as etapas necessárias para criar e incluir os ativos gráficos necessários para seus aplicativos Xamarin.tvOS:

Imagem de inicialização - Uma imagem de inicialização é exibida quando o aplicativo é iniciado pela primeira vez e é substituída pela primeira tela do aplicativo após a conclusão da inicialização.
Imagens em camadas - Específicas para a Apple TV, as novas imagens em camadas da Apple funcionam com o efeito Parallax para criar um efeito 3D para itens selecionados. Há várias maneiras de criar imagens em camadas.
Ícone do aplicativo - Os ícones são necessários não apenas para a tela inicial da Apple TV, mas para a App Store. Eles devem ser fornecidos como uma imagem em camadas.
Imagem de prateleira superior - Se seu aplicativo for colocado na Linha Superior da tela inicial, ele precisará de uma imagem de prateleira superior para destacar os recursos do aplicativo. Opcionalmente, você pode fornecer Conteúdo de prateleira superior dinâmico para realçar o conteúdo em seu aplicativo.
Imagens do Game Center - Se seu aplicativo for um jogo e usar o Game Center, várias imagens adicionais serão necessárias.
Definindo imagens do projeto Xamarin.tvOS - Abrange as etapas necessárias para definir a imagem de inicialização e o ícone do aplicativo para seu aplicativo Xamarin.tvOS.

Importante

Todas as imagens na Apple TV estão na resolução de 1x (@1x) e você só deve usar imagens desse tamanho. A inclusão de gráficos maiores e de maior resolução não apenas leva tempo para baixar e usar mais memória e armazenamento, mas também precisa ser redimensionada dinamicamente em tempo de execução e afetará negativamente o desempenho do desenho.

Imagem de Lançamento

A Imagem de Lançamento é a primeira coisa que é exibida quando seu aplicativo Xamarin.tvOS é iniciado inicialmente na Apple TV e, como tal, cada aplicativo tvOS deve fornecer uma Imagem de Inicialização.

A Imagem de Inicialização aparece rapidamente e dá a impressão de que seu aplicativo é rápido e responsivo. A Apple TV substituirá a Imagem de Lançamento pela primeira tela do seu aplicativo logo em seguida.

As imagens de lançamento não são uma oportunidade para anúncios ou expressão artística, elas existem apenas para dar a impressão de que seu aplicativo é iniciado rapidamente e está pronto para uso.

Tamanho da imagem de lançamento	Observações
1920 x 1080 px	Somente arquivos .png não em camadas

A Apple faz as seguintes sugestões para projetar a Imagem de Lançamento do seu aplicativo:

Quase idêntico à primeira tela - Sua tela de inicialização deve estar o mais próximo possível da primeira tela do seu aplicativo. Incluir gráficos ou elementos diferentes pode resultar em um "flash" irritante quando a primeira tela aparece.
Evite usar texto - As imagens de inicialização são estáticas e, como tal, não serão localizadas antes de serem exibidas.
Downplay Launch - Como os usuários da Apple TV frequentemente trocam de aplicativo, você não deve chamar a atenção para o processo de inicialização do aplicativo.
Sem anúncios ou identidade visual - Sua imagem de lançamento não deve ser usada como uma tela Sobre ou incluir qualquer marca, a menos que seja parte estática da primeira tela do aplicativo. Os anúncios são estritamente proibidos.

Definindo a imagem de inicialização

Para definir a imagem de lançamento para o seu projeto tvOS, faça o seguinte:

No Gerenciador de Soluções, clique Assets.xcassets duas vezes para abri-lo para edição:
No Editor de ativos, clique no LaunchImages ativo:
Clique na entrada 1x Apple TV e selecione a Imagem de Lançamento ou, opcionalmente, arraste uma nova imagem do sistema de arquivos:
Salve suas alterações.

Imagens em camadas

Novidade na Apple TV, as imagens em camadas trabalham com o efeito Parallax para produzir um efeito 3D que ajuda a manter o usuário no sofá mentalmente conectado ao conteúdo na tela em toda a sala.

As imagens em camadas contêm de duas (2) a cinco (5) camadas separadas que são combinadas para formar uma imagem completa. Com exceção da camada de fundo, cada camada usa sua ordem Z junto com a transparência para criar uma ilusão de profundidade. Quando o usuário interage com uma imagem em camadas, camadas mais altas ordenadas em Z são dimensionadas e sobrepostas para criar esse efeito.

Importante

As Imagens em Camadas são necessárias para os ícones do seu aplicativo e são opcionais para outros Itens Focalizáveis (como a Imagem da Prateleira Superior). No entanto, a Apple sugere o uso de imagens em camadas para qualquer imagem que possa obter foco em seu aplicativo.

A Apple faz as seguintes sugestões para criar suas imagens em camadas:

Tornar a camada de plano de fundo opaca - Sua camada de plano de fundo (camada 1) deve ser opaca ou você receberá um erro ao tentar usar a imagem em camadas na Apple TV. Todas as outras camadas podem conter vários níveis de transparência para melhorar o efeito 3D.
Isolar elementos de primeiro plano, meio e plano de fundo - Coloque elementos proeminentes (como personagens do jogo) em primeiro plano, use o meio para elementos secundários ou sombras. Finalmente, inclua um fundo neutro para fornecer um palco para suas camadas superiores.
Manter o texto em primeiro plano - A menos que você queira que seu texto seja obscurecido por níveis mais altos, geralmente ele deve estar na camada superior.
Use camadas simples - O efeito Parallax foi projetado para ser sutil, então mantenha suas camadas ao mínimo para evitar efeitos chocantes e irreais.
Incluir uma Zona Segura - Como as camadas superiores podem ser cortadas durante um Efeito Paralaxe, você precisa criar uma borda de Zona Segura em cada camada. Se você deixar seu conteúdo muito perto da borda das camadas, ele poderá ser cortado. As camadas superiores experimentarão mais dimensionamento e recorte do que as camadas inferiores. Consulte a seção Dimensionamento de camadas de imagem abaixo.
Visualizar frequentemente - As imagens em camadas devem ser visualizadas com frequência para garantir que o efeito 3D desejado ocorra e que nenhum conteúdo nas camadas individuais esteja sendo cortado. Você deve visualizar suas imagens em camadas no hardware real da Apple TV para garantir que elas sejam renderizadas conforme o esperado.

Sempre que possível, você deve sempre usar os controles internos UIKit para exibir suas imagens em camadas, pois elas obterão automaticamente o efeito Parallax quando entrarem em foco.

Dimensionamento de camadas de imagem

É importante lembrar de incluir uma borda de Zona Segura em cada camada que irá compor sua Imagem em Camadas. Como as camadas individuais podem ser dimensionadas e cortadas durante o Efeito Paralaxe, o conteúdo das camadas pode ser cortado se estiver muito próximo da borda da camada:

Criando imagens em camadas

O tvOS funciona com imagens em camadas nos seguintes formatos:

Arquivos CAR - Este é um formato proprietário do Catálogo de Ativos criado pela Apple. Você não cria arquivos CAR diretamente, eles são criados em tempo de compilação a partir de qualquer arquivo LSR e incluídos em seu pacote de aplicativos.
LSR Images - Este é um formato de imagem proprietário criado pela Apple. Use o Parallax Exporter Adobe Photoshop Plugin ou o Parallax Previewer para criar e visualizar imagens em camadas no formato LSR.
Assets.xcassets - De duas (2) a cinco (5) imagens formatadas padrão .png incluídas em um Catálogo de Ativos que serão compiladas em uma Imagem em Camadas formatada em CAR ou LSR em tempo de compilação.
Arquivos LCR - Este é um formato de arquivo proprietário criado pela Apple. Os arquivos LCR devem ser usados como conteúdo adicional baixado de um de seus servidores de conteúdo. O arquivo LCR nunca deve ser incluído no pacote de aplicativos. Os arquivos LCR são gerados a partir de arquivos LSR ou Photoshop usando a layerutil ferramenta de linha de comando incluída no Xcode.

O Visualizador de Paralaxe

A Apple criou o Parallax Previewer para visualizar e criou imagens em camadas necessárias para ícones de aplicativos e itens focalizáveis opcionais. O visualizador mostra todas as camadas que formam a imagem em camadas concluída:

Ao visualizar uma imagem em camadas, você pode usar o mouse para girar a imagem e visualizar o efeito Paralaxe. Use os + botões (mais) e - (menos) para adicionar e remover camadas.

Ao criar uma nova imagem em camadas, ela pode ser exportada no formato LSR e incluída no pacote do seu aplicativo.

Para obter mais informações sobre como criar e visualizar imagens em camadas, consulte a seção Criando arte de paralaxe da Apple do Guia de programação de aplicativos para tvOS.

Ícones do aplicativo

Seu aplicativo Xamarin.tvOS exigirá não apenas um ícone de aplicativo para a tela inicial da Apple TV, mas também um ícone para a App Store. O ícone do aplicativo é a primeira alteração a causar uma ótima impressão no seu usuário em potencial e deve comunicar o propósito do seu aplicativo em um piscar de olhos.

Cada aplicativo deve fornecer uma versão pequena e uma versão grande de seu ícone de aplicativo. O pequeno ícone será usado na tela inicial da Apple TV quando o aplicativo for instalado. A versão grande é usada pela App Store. O ícone de aplicativo grande deve imitar a aparência da versão do ícone pequeno.

Ícone pequeno	Resolução	Resolução
Tamanho Real	400x240px	1280x768px
Tamanho da zona segura	370x222px
Tamanho desfocado	300x180px
Tamanho focado	370x222px

Importante

Os ícones do aplicativo devem ser fornecidos como imagens em camadas. Consulte a seção Imagem em camadas acima para obter mais detalhes.

A Apple fornece as seguintes sugestões para criar os ícones da sua aplicação:

Forneça um único ponto de foco – Projete seu ícone com um único ponto de foco colocado diretamente no centro do ícone.
Use um plano de fundo simples – Mantenha o plano de fundo do ícone simples para que as camadas superiores se destaquem. Considere usar uma cor simples ou um gradiente sutil.
Limitar a quantidade de texto – Como o nome do aplicativo aparecerá abaixo do ícone quando for selecionado pelo usuário, você só deve incluir texto quando for essencial para o design do ícone.
Não use capturas de tela – As capturas de tela são muito complexas para um ícone e não permitem que o usuário veja a finalidade do seu aplicativo rapidamente.
Mantenha os ícones quadrados – o tvOS aplica automaticamente uma máscara que arredonda sutilmente os cantos dos seus ícones. Não inclua esse arredondamento você mesmo.
Separe suas camadas com cuidado – O texto deve estar na camada superior, itens secundários no meio e um fundo neutro que permita que suas camadas superiores brilhem.
Use Gradientes e Sombras com Cuidado – Gradientes e sombras podem colidir com o Efeito Paralaxe, por isso devem ser usados com cuidado. Estilos simples de gradiente de cima para baixo, claro-escuro funcionam melhor. As sombras normalmente funcionam melhor como tonalidades nítidas e de bordas duras.
Variar a transparência da camada – Use níveis variados de transparência nos níveis superiores do ícone do aplicativo para aumentar o efeito 3D. A camada de plano de fundo deve ser opaca ou resultará em um erro.

Definindo os ícones do aplicativo

Para definir os ícones de aplicativo necessários para o seu projeto tvOS, faça o seguinte:

No Gerenciador de Soluções, clique Assets.xcassets duas vezes para abri-lo para edição:
No Editor de ativos, expanda o App Icon & Top Shelf Image ativo:
Em seguida, expanda o App Icon - Small ativo:
Em seguida, expanda o Back ativo e clique na Contents entrada:
Clique na entrada 1x Apple TV e selecione um arquivo de imagem.
Repita as etapas acima para os Front ativos e Middle .
Em seguida, repita as mesmas etapas para definir o App Icon - Large ativo.
Salve suas alterações.

Imagem da prateleira superior

Se o usuário tiver colocado seu aplicativo Xamarin.tvOS na Linha Superior na tela inicial da Apple TV, uma grande Imagem de Prateleira Superior será exibida quando o aplicativo for selecionado pelo usuário. Essa imagem deve destacar os recursos do seu aplicativo ou fornecer links diretos para seu conteúdo.

A Imagem de Prateleira Superior pode ser fornecida como uma única estática .png ou .lsr arquivo (consulte Criando imagens em camadas) ou pode ser criada dinamicamente em tempo de execução como uma única linha de Itens Focalizáveis (consulte Conteúdo de Prateleira Superior Dinâmica abaixo).

Tamanho da imagem da prateleira superior	Observações
1920x720px	Arquivo .lsr estático .png ou em camadas

A Apple fornece as seguintes sugestões para criar suas imagens de prateleira superior:

Usar imagens estáticas avançadas – Se seu aplicativo não fornecer um conteúdo dinâmico, sua imagem de prateleira superior não será focalizável. Use esta imagem para destacar os recursos do aplicativo ou sua marca.
Link para o conteúdo do aplicativo – Os layouts dinâmicos de prateleira superior fornecem um link rápido para o conteúdo que o usuário considera mais importante em seu aplicativo. Use essa área para fornecer um link rápido para iniciar seu aplicativo e entrar imediatamente no conteúdo fornecido.
Mostre o conteúdo mais recente – O conteúdo de prateleira superior avançado pode atrair um usuário para seu aplicativo e fazer com que ele queira usá-lo mais. Use isso como uma área para mostrar o conteúdo mais bem avaliado ou mais recente.
Conteúdo personalizado – Os usuários colocam seus aplicativos usados com mais frequência ou favoritos na Linha Superior da tela inicial. Use a Prateleira Superior para exibir o conteúdo no qual eles estariam mais interessados.
Anúncios não permitidos – Os anúncios são estritamente proibidos de serem exibidos na prateleira superior. Você pode mostrar o conteúdo comprável mais recente, mas nenhuma informação de preço deve ser exibida.

Definindo a imagem da prateleira superior

Para definir a imagem de prateleira superior necessária para o seu projeto tvOS, faça o seguinte:

No Gerenciador de Soluções, clique Assets.xcassets duas vezes para abri-lo para edição:
No Editor de ativos, expanda o App Icon & Top Shelf Image ativo:
Clique no Top Shelf Image ativo:
Clique na entrada 1x Apple TV e selecione um arquivo de imagem.
Salve suas alterações.

Conteúdo dinâmico da prateleira superior

Em vez de exibir uma imagem estática da prateleira superior, a prateleira superior pode conter uma linha dinâmica de itens focalizáveis ou um conjunto dinâmico de banners de rolagem. Ambos os estilos dinâmicos permitem destacar o conteúdo fornecido pelo seu aplicativo ou pular para seus recursos mais usados.

Linha de conteúdo seccionado

Este tipo de conteúdo dinâmico de Prateleira Superior apresenta uma única linha de rolagem, Itens Focalizáveis opcionalmente divididos em seções. Normalmente, ele é usado para destacar conteúdo de aplicativo novo, favorito ou visualizado recentemente.

O conteúdo é apresentado como uma única lista de rolagem horizontal de conteúdo com um rótulo aparecendo sob a parte atual do conteúdo selecionado (que atualmente tem foco). Se o usuário selecionar um determinado conteúdo, seu aplicativo será iniciado e ele deverá ser levado diretamente para esse conteúdo.

Os seguintes tamanhos de conteúdo serão necessários:

Tamanho	Cartaz (2:3)	Quadrado (1:1)	HDTV (16:9)
Tamanho Real	404x608px	608x608px	908x512px
Tamanho da zona segura	380x570px	570x570px	852x479px
Tamanho desfocado	333x500px	500x500px	782x440px
Tamanho focado	380x570px	570x570px	852x479px

A Apple fornece as seguintes sugestões para a Linha de conteúdo seccionado:

Concluir a linha – Você deve fornecer conteúdo suficiente para abranger toda a largura da tela.
Dimensionamento de imagens mistas – A linha de conteúdo seccionado foi projetada para conter uma combinação de tamanhos de imagem (da lista fornecida acima). No entanto, se você misturar tamanhos de imagem, esteja ciente de que o dimensionamento adicional será aplicado para normalizar a exibição de conteúdo.

Rolagem de banners embutidos

Opcionalmente, seu aplicativo Xamarin.tvOS pode apresentar seu conteúdo na Prateleira Superior como uma coleção de banners de rolagem e looping automáticos que quase preenchem a tela. Esse estilo é normalmente usado para mostrar conteúdo novo e rico, como novos programas de TV.

Além da rolagem automática, o usuário pode assumir o controle dos banners e rolar em qualquer direção usando o Siri Remote. Fazer um pequeno gesto circular no Siri Remote quando um banner estiver em foco ativará o Efeito Paralaxe para esse banner.

Imagem do Banner (Extra Wide)

Tamanho	Resolução
Tamanho Real	1940x624px
Tamanho da zona segura	1740x620px
Tamanho desfocado	1740x560px
Tamanho focado	1740x620px

Os banners de inserção de rolagem podem ser fornecidos como um arquivo estático .png ou em .lsr camadas.

A Apple fornece as seguintes sugestões para os banners de inserção de rolagem:

Quantidade de conteúdo - Você deve fornecer um mínimo de três (3) banners para que a rolagem pareça natural. Você deve incluir no máximo oito (8) banners ou dificultar a navegação para o usuário final.
Conteúdo Texto - Se o seu banner requer texto em deve ser incluído na imagem do banner. Se você estiver usando imagens em camadas, seu texto deve estar na camada superior.

Consulte a Referência do Framework TVServices da Apple para obter mais informações sobre como adicionar uma extensão de prateleira superior ao seu aplicativo para fornecer conteúdo dinâmico de prateleira superior.

Imagens do Game Center

Se o seu aplicativo Xamarin.tvOS for um jogo e você tiver incluído o suporte ao Game Center, vários outros recursos de imagem serão necessários:

Ícones de conquista - Uma imagem opaca é necessária para cada conquista que será automaticamente cortada em um círculo. As conquistas são itens não focalizáveis.
Arte do painel - Uma imagem opcional pode ser fornecida que aparecerá na parte superior do painel do seu aplicativo no Game Center. Essas imagens não são focalizáveis.
Arte da tabela de classificação - Você deve fornecer entre uma (1) a três (3) imagens de proporção 16:9 para cada tabela de classificação compatível com seu aplicativo. Eles podem ser arquivos estáticos .png ou em .lsr camadas. A arte da tabela de classificação é focalizável.

Tamanho	Ícones de Conquistas	Arte do painel	Arte da tabela de classificação
Tamanho visível	200x200px	923x150px	N/D
Tamanho Real	320x320px	N/D	659x371px
Tamanho da zona segura	N/D	N/D	618x348px
Tamanho desfocado	N/D	N/D	548x309px
Tamanho focado	N/D	N/D	618x348px

Para obter mais informações sobre como trabalhar com o Game Center, consulte o Guia de Programação do Game Center da Apple.

Trabalhando com imagens

Como o tvOS 9 é um subconjunto do iOS 9, as mesmas técnicas usadas para incluir e exibir imagens em um aplicativo Xamarin.iOS também funcionam para um aplicativo Xamarin.tvOS. Consulte nossa documentação Exibindo uma imagem para obter mais informações.

Configurando imagens do projeto Xamarin.tvOS

Como dito acima, todos os aplicativos tvOS exigem uma Imagem de Inicialização e um Ícone de Aplicativo. Esta seção aborda a seleção da Imagem de Inicialização e do Ícone do Aplicativo para seu projeto de aplicativo Xamarin.tvOS depois que eles tiverem sido definidos em um Catálogo de Ativos.

Faça o seguinte:

No Gerenciador de Soluções, clique duas vezes no para Info.plist abri-lo para edição:
No Editor Info.Plist, selecione o Catálogo de Ativos (configurado acima na seção Definindo os Ícones do Aplicativo) para os Ícones do Aplicativo:
Em seguida, selecione o Catálogo de Ativos (configurado acima na seção Definindo a Imagem de Inicialização) para as Imagens de Inicialização.
Salve suas alterações.

Resumo

Este artigo abordou todos os tipos e tamanhos de imagem usados em um aplicativo Xamarin.tvOS. Primeiro, cobriu imagens de lançamento, imagens em camadas, ícones de aplicativos, imagens de prateleira superior e imagens do Game Center. Em seguida, cobriu o trabalho com imagens em seu aplicativo Xamarin.tvOS.

Partilhar via

Trabalhando com ícones e imagens do tvOS no Xamarin