Aplicativos de esportes

Applies to Windows and Windows Phone

Aplicativos de esportes causam um impacto sobre os usuários, seja mantendo os ávidos torcedores atualizados sobre as últimas notícias de esportes ou ajudando os atletas a melhorarem seu desempenho no campo. Recursos do Windows como blocos, zoom semântico e contratos de pesquisa e compartilhamento podem ser especialmente úteis ao projetar um aplicativo que tenha apelo para os entusiastas de esportes. Este artigo apresenta brevemente esses recursos, juntamente com muitos exemplos de como os aplicativos de esportes existentes os utilizam para oferecer grandes experiências aos usuários. A inspiração para seu novo aplicativo de esportes está a uma rolagem de distância.

Página principal do aplicativo Bing Esportes

Tipos de aplicativos de esportes

Aqui estão alguns tipos comuns de aplicativos de esportes:

Página principal do aplicativo ESPN

Notícias, informações e vídeos

Estes aplicativos oferecem as últimas notícias esportivas em artigos, vídeos e apresentações de slides. O conteúdo é atualizado regularmente e está muitas vezes disponível na primeira página do aplicativo. Por exemplo, abra o aplicativo ESPN e você estará imediatamente imerso no conteúdo esportivo mais recente. Confira estes aplicativos focados em notícias esportivas disponíveis na Windows Store: ESPN, Sports Illustrated, NASCAR, Yahoo! Sports e THE Football.

Página principal do aplicativo Chicago Blackhawks

Favorito dos torcedores

Esses aplicativos são dedicados a deixar os torcedores animados sobre uma equipe específica. Eles oferecem notícias, fotos e conteúdo de vídeo sobre uma equipe específica. O aplicativo Chicago Blackhawks é um ótimo exemplo. Está é a página inicial do aplicativo, que leva você de volta ao momento de maior orgulho da história dos Blackhawks, quando eles venceram a Stanley Cup. Seattle Sounders FC e AC Milan são dois outros exemplos de aplicativos da Windows Store favoritos dos torcedores.

Gráfico comparando estatísticas de desempenho das equipes no aplicativo NFL Final Fantasy

Ferramentas e utilitário

Este tipo de aplicativo de esportes executa funções específicas, como comparar estatísticas de equipes, ensinar uma habilidade atlética específica para um usuário ou permitir que usuários participem de uma liga de brincadeira. Esses aplicativos muitas vezes têm um padrão de navegação mais linear para orientar os usuários através de uma tarefa específica. Veja os aplicativos Decision Maker, Winchester Ballistics, One Basketball e NFL Fantasy Football 2013 na Windows Store para obter inspiração.

 

Atraia os usuários com blocos e notificações

O Windows 8.1 fornece várias maneiras para seu aplicativo atrair os usuários, mesmo quando ele não está sendo executado. Por exemplo, blocos podem levar informações dinâmicas ao vivo à tela Inicial. Um bloco dinâmico pode exibir uma notícia sobre um novo draft para a equipe favorita do usuário ou mostrar atualizações de placar ao vivo. Seu aplicativo também pode fornecer notificações habilitadas pelo usuário para garantir que um fã de esportes nunca perca um jogo.

Blocos de aplicativos de esportes de todos os tamanhos diferentes na tela inicial

Crie umo bloco para a tela inicial que represente o seu aplicativo de forma clara. Nesta captura de tela, você pode ver que os blocos vêm em quatro tamanhos diferentes: pequeno, médio, largo e grande. Os usuários tendem a colocar blocos bem projetados em destaque em suas telas iniciais, o que incentiva o uso regular. Os aplicativos com blocos menos atraentes podem não conseguir um lugar na tela inicial, tornando-os mais fáceis de serem esquecidos. Não subestime o poder de um bloco atraente.

Blocos dinâmicos: o mundo dos esportes é rápido: uma jogada vencedora, uma lesão no fim da temporada ou um draft influente pode acontecer em um piscar de olhos. Com um bloco dinâmico, seu aplicativo de esportes mantém os torcedores atualizados sobre as últimas manchetes envolvendo os times favoritos deles, mesmo quando o aplicativo não está sendo executado. Considere mostrar as últimas notícias, atualizações de pontuação ou lembretes de jogos em seu bloco dinâmico. Consulte Blocos dinâmicos para uma visão geral ampla, ou Guidelines for tiles and badges para obter mais detalhes.

Um bloco dinâmico é uma parte essencial da experiência do aplicativo Bing Esportes. Aqui, o bloco dinâmico do aplicativo compartilha uma manchete e uma imagem na tela Inicial.

O bloco dinâmico mostra manchete e imagens de jogador de futebol

Blocos secundários: os fãs de esporte estão sempre procurando maneiras rápidas de ficar de olho em suas equipes, suas ligas e seus jogadores favoritos. Ajude os torcedores ávidos a acessarem imediatamente o conteúdo que eles mais querem usando um bloco secundário. Se o seu aplicativo de esportes for compatível com blocos secundários, os usuários poderão fixar um atalho para um conteúdo específico dentro de seu aplicativo diretamente na tela Inicial. Quer mais informações? Consulte Guidelines for secondary tiles ou, para um resumo mais detalhado, Visão geral de blocos secundários.

No aplicativo ESPN, por exemplo, um torcedor do Toronto Blue Jays pode fixar a página de estatísticas da equipe na tela Inicial. Como esse conteúdo foi projetado para ser fixado, o torcedor pode clicar no ícone de fixar da barra inferior do aplicativo (como mostrado na captura de tela a seguir).

Captura de tela mostrando as barras superior e inferior do aplicativo na página de um time de beisebol no aplicativo ESPN

Depois de clicar no ícone de fixar, o usuário confirma se quer fixar o bloco na tela Inicial.

Submenu que aparece quando um usuário deseja fixar uma página de um aplicativo na tela inicial

Ele aperta o botão "Fixar na Tela Inicial" e um novo bloco secundário aparece na tela Inicial. Ele move o novo bloco para perto do restante dos seus aplicativos de esportes. Agora, a tela Inicial apresenta dois blocos do ESPN: um para conteúdo geral e um novo bloco secundário que leva diretamente à página do seu time favorito.

Blocos de aplicativos de esportes de todos os tamanhos diferentes na tela inicial

Os blocos secundários permitem que esse torcedor do Blue Jays acesse as estatísticas que ele quer com um único clique. Se você tiver conteúdo que os usuários podem querer acessar diretamente, deixe-o fixável!

Tamanho do bloco: os usuários podem alterar o tamanho do bloco; portanto, verifique se o seu bloco fica bem em todos os tamanhos de bloco que o seu aplicativo suporta. Personalize as imagens do bloco para cada tamanho de bloco. Este bloco foi projetado de forma diferente para os tamanhos pequeno, médio e largo.

Blocos pequenos, médios e largos para o aplicativo SofaScore

Como os aplicativos da Windows Store podem ser executados em todos os tipos de dispositivos, verifique se você oferece versões dimensionadas de suas imagens de bloco de forma que eles fiquem nítidos nas seguintes resoluções de tela:

  • 1,0 = 1024 x 768 px
  • 1,4 = 1440 x 1080 px
  • 1,8 = 1920 x 1440 px

Para obter mais informações sobre tamanhos de bloco, consulte Tamanhos de imagem de blocos e notificações do sistema. Quer saber mais sobre dimensionamento? Veja Guidelines for scaling to pixel density.

Notificações do sistema: eventos esportivos acontecem em todas as horas do dia. Os blocos dinâmicos fazem um excelente trabalho em manter os torcedores atualizados sobre os novos desenvolvimentos de esportes na tela Inicial, mas, se os usuários querem alertas mais diretos, seu aplicativo de esportes pode fornecer notificações do sistema. Com uma notificação do sistema de que uma partida vai começar ou de que seu time favorito acabou de ganhou um título mundial, os usuários podem clicar na notificação do sistema para abrir o aplicativo e obter mais detalhes.

Curioso sobre notificações do sistema? Veja Guidelines for toast notifications. Para obter uma descrição mais detalhada, consulte Visão geral sobre notificações do sistema.

Notificação do sistema do aplicativo SportsCenter

Esta imagem mostra uma notificação do sistema do aplicativo SportsCenter. Observe que as notificações aparecem no canto superior direito da tela.

Exiba o conteúdo de forma criativa com zoom semântico

Muitas vezes, aplicativos de esportes têm muito conteúdo de qualidade em uma única página. Se um aplicativo abrange as notícias em lotes de diferentes esportes, a página inicial pode ficar lotada. O zoom semântico é uma elegante maneira de organizar as páginas com muito conteúdo. Esse recurso recolhe o conteúdo em grupos lógicos, oferecendo aos usuários uma melhor noção de todo o conteúdo disponível e uma maneira de acessar o tipo específico de conteúdo que quiserem.

O aplicativo Sports Illustrated usa zoom semântico para manter o conteúdo gerenciável. Quando o aplicativo abre pela primeira vez, os usuários podem deslocar o conteúdo para a direita para ver todo o conteúdo do aplicativo. Aqui está uma captura de tela mostrando o modo de exibição padrão.

Modo de exibição de conteúdo padrão no aplicativo Sports Illustrated

No entanto, leva-se muito tempo para ver todo o conteúdo disponível. Para obter uma visão geral do que está disponível, o usuário usa o zoom semântico. Quando o usuário aproxima o zoom usando gestos de toque ou pressionando "Ctrl" enquanto rola a roda do mouse, o conteúdo é organizado em diferentes categorias com miniaturas e títulos úteis.

Aplicativo Sports Illustrated depois que um usuário diminui o zoom com o zoom semântico

Agora, o usuário pode facilmente deslizar o conteúdo e navegar até uma seção que considere interessante. Consulte Zoom semântico para obter exemplos adicionais e Guidelines for semantic zoom para obter informações mais detalhadas.

Faça os torcedores imergirem usando o Hub

Nos esportes o que não falta é ação intensa, momentos triunfantes e espetáculos impressionantes. O controle de Hub coloca a arte de "celebridade" na posição mais destacada do seu aplicativo. Arte de celebridade é uma imagem grande de alta resolução que cumprimenta os usuários na página inicial e os atrai para a história do seu aplicativo.

Aqui, o aplicativo Chicago Blackhawks exibe o momento de maior orgulho da equipe em sua imagem de celebridade. É a primeira coisa que os usuários enxergam quando abrem o aplicativo.

Captura de tela da imagem grande que os usuários enxergam quando abrem o aplicativo Chicago Blackhawks

O aplicativo Bing Esportes mostra a manchete mais recente em sua imagem de celebridade. A foto capta a atenção do usuário e apresenta uma legenda extraída do artigo.

Página principal do aplicativo Bing Esportes

Para obter mais informações, consulte Diretrizes para controle de hub.

Maximize o impacto com conteúdo em tela cheia

Só porque há uma grade associada à silhueta do aplicativo da Windows Store, não significa que o conteúdo do seu aplicativo tenha que caber dentro das margens. Sinta-se à vontade para empurrar ou até mesmo cruzar as fronteiras no design do seu aplicativo de esportes. Abaixo está um exemplo de conteúdo que atravessa as linhas de grade. No lado esquerdo do aplicativo, o logotipo e o conteúdo cabem dentro das margens. No entanto, a arte de celebridade flui do topo até a parte inferior da tela para maximizar o impacto visual.

Página inicial de um aplicativo de esportes apresentando uma grande imagem de um jogador de futebol preparando-se para chutar

A imagem a seguir sobrepõe as margens para a silhueta do aplicativo da Windows Store sobre a imagem do mesmo aplicativo. A maioria do conteúdo do aplicativo ainda está na zona azul delimitada pelas margens, mas a imagem do jogador estende-se além do limite até as bordas da tela.

Página inicial de um aplicativo de esportes sobreposto com linhas de grade

O aplicativo Seattle Sounders também causa um impacto com gráficos que se estendem por toda a tela. Imagens de fundo marcantes são sobrepostas com um atraente conteúdo em destaque. Até mesmo o anúncio em tamanho real no lado direito foi projetado para se entrosar com a experiência dos Sounders.

Captura de tela grande apresentando conteúdo do aplicativo Sounder FC

Cada pixel de espaço da tela está disponível para o design do seu aplicativo de esportes.

Navegue com facilidade usando barras de aplicativo

Mostre o conteúdo na posição mais destacada de seu aplicativo e não deixe os controles bagunçarem a tela quando eles não forem necessários. Nos aplicativos da Windows Store, a barra de navegação (também chamada de barra superior de aplicativo) e a barra inferior de aplicativo ficam escondidas até que o usuário clique com o botão direito ou passe o dedo a partir da borda superior ou inferior da tela. Muitos aplicativos de esportes usam a barra de navegação para conter atalhos para diferentes seções do aplicativo. Por exemplo, a barra de navegação do aplicativo THE Football tem guias para diferentes ligas de futebol ao redor do mundo. Isso também oferece ao usuário acesso rápido à página inicial, a notícias, vídeos e mídias sociais.

Barra superior de aplicativo do aplicativo THE Football

Além dos controles de navegação, o aplicativo ESPN mostra os últimos resultados de jogos na barra de navegação. Os usuários podem pular de uma seção do aplicativo para outra, obter uma rápida visão geral das pontuações de jogos atuais ou saltar para um conteúdo mais detalhado e específico do jogo, tudo a partir da barra de navegação.

Barra superior do aplicativo ESPN que mostra as pontuações dos jogos atuais e controles de navegação

A barra inferior de aplicativo geralmente tem controles que são relevantes para o modo de exibição atual. Por exemplo, uma página que contém um artigo de esportes com muito texto pode ter um botão para alterar o tamanho do texto na barra inferior de aplicativo. O aplicativo Sports Illustrated permite que os usuários filtrem o conteúdo de acordo com a liga de esportes a partir da barra de aplicativo.

Captura de tela mostrando a barra inferior do aplicativo Sports Illustrated

Simplifique a pesquisa

Há muita coisa para saber sobre o mundo dos esportes. Quando você permite pesquisas dentro do aplicativo e usa o contrato de Pesquisa para tornar seu aplicativo pesquisável de qualquer lugar no sistema, os usuários podem obter a informação que precisam justamente quando precisam.

Pesquisa dentro do aplicativo: inclua uma caixa de pesquisa em seu aplicativo para permitir que os torcedores acessem rapidamente o conteúdo que quiserem. Se existirem páginas em seu aplicativo nas quais os usuários somente digitem consultas de pesquisa, você poderá habilitar o recurso digitar para pesquisar, que registra automaticamente qualquer entrada de teclado como uma consulta de pesquisa. Para obter mais informação sobre quando o recurso digitar para pesquisar pode ser apropriado, consulte Guidelines for search.

Para obter um exemplo de pesquisa em um aplicativo de esportes existente, confira o aplicativo Bing Esportes. Se um usuário quiser saber mais sobre um jogador em particular, ele pode abrir o aplicativo e começar a digitar o nome do jogador. Como o aplicativo Bing Esportes permite o recurso digitar para pesquisar em sua página principal, a caixa de pesquisa é aberta e registra as informações conforme o usuário começa a digitar.

Recurso digitar para pesquisar na página inicial do aplicativo Bing Esportes

O aplicativo Bing Esportes refina as sugestões dos resultados da pesquisa conforme o usuário digita.

O Bing Esportes refina os resultados da pesquisa conforme o usuário digita

Com apenas oito toques em teclas, o usuário obtém a informação que precisa.

Captura de tela de um perfil de jogador do aplicativo Bing Esportes

O contrato de Pesquisa: disponibilize o conteúdo de esportes de seu aplicativo nas buscas de sistema usando o contrato de Pesquisa. Se o seu aplicativo participar do contrato de Pesquisa, os usuários visualizarão resultados de pesquisa relevantes a partir do seu aplicativo se eles usarem o botão Pesquisar para fazerem uma pesquisa a partir de qualquer lugar no sistema. Não está familiarizado com os contratos? Consulte Botões e contratos para obter uma visão geral ampla, ou Contratos e extensões de aplicativos para obter uma descrição mais detalhada.

Compartilhe o amor pelos esportes

Os esportes giram em torno de comunidades de pessoas compartilhando o amor do jogo, da equipe e da experiência em comum. O Windows facilita o compartilhamento com o contrato de Compartilhamento. Quando você torna o seu aplicativo uma fonte de compartilhamento, os usuários podem compartilhar o conteúdo de seu aplicativo usando outro aplicativo instalado, como o Twitter, Facebook ou email. O compartilhamento não só satisfaz seus usuários como também promove seu aplicativo de uma forma sutil. Consulte Botões e contratos para obter uma visão geral ampla dos contratos disponíveis para aplicativos da Windows Store.

Se você optar por registrar seu aplicativo como uma fonte de compartilhamento, os usuários poderão usar o botão Compartilhar para compartilhar o conteúdo de seu aplicativo a qualquer momento. Por exemplo, digamos que um usuário está assistindo replays de jogos no aplicativo NFL Fantasy Football. Ele estava conversando sobre essa partida com um amigo mais cedo e decidiu compartilhar o vídeo com ele. Ele passa o dedo começando pelo lado direito da tela para mostrar os botões e seleciona o botão Compartilhar.

Botões aparecendo no aplicativo NFL Fantasy Football.

O NFL Fantasy Football fornece ao sistema o conteúdo que o usuário deseja compartilhar e o Windows exibe uma lista de aplicativos instalados no sistema do usuário que podem lidar com esse tipo de conteúdo. Neste caso, Twitter, Mail, Evernote Touch, Flipboard e vários outros aplicativos podem compartilhar esse tipo de conteúdo. Agora, o usuário pode escolher como quer compartilhar essa informação. Sempre que ele quiser tuitar sobre isso, enviar um link por email ao amigo ou compartilhar com um dos outros aplicativos disponíveis, ele não precisará sair do NFL Fantasy Football!

Captura de tela mostrando o submenu de compartilhamento no aplicativo NFL Fantasy Football

Você pode personalizar a maneira como seu aplicativo é representado quando um usuário compartilha o conteúdo de seu aplicativo. Por exemplo, você pode fornecer apenas um link para o conteúdo compartilhado por padrão, ou acompanhar esse link com o logotipo do seu aplicativo ou uma miniatura do conteúdo compartilhado.

Se você quiser que seu aplicativo receba conteúdo que está sendo compartilhado por outros aplicativos, torne o seu aplicativo de esportes de destino de compartilhamento. Para obter mais informações sobre como tornar seu aplicativo uma fonte e/ou destino de compartilhamento, consulte Guidelines for sharing content. Para obter exemplos de código, consulte o Exemplo de fonte de compartilhamento e o Exemplo de destino de compartilhamento.

Aproveite as mídias sociais: deixe que os usuários monitorem as conversas sobre esportes incorporando mídias sociais ao seu aplicativo. Se você quiser aproveitar o poder do Twitter ou fazer sincronização com o Facebook para permitir que os usuários saibam o que seus amigos estão falando sobre assuntos esportivos, apresentar conteúdo social de maneiras criativas pode causar impacto.

Este aplicativo de entretenimento da FX usa uma linha de tempo para mostrar as tendências das mídias sociais. Os usuários filtram a linha de tempo por assunto (neste caso, por programa de televisão) e a fonte de mídia social. Em seguida, o aplicativo exibe postagens individuais, bem como uma linha de tempo com todas as conversas relativas a esse assunto.

Uma linha do tempo do aplicativo FX mostrando postagens do Twitter sobre o programa de televisão Archer

Torne os dados interativos

O mundo do esporte é cheio de estatísticas que têm um grande impacto sobre as experiências dos fãs de esportes. Se um usuário deseja tomar uma decisão informada em um negócio de esportes de brincadeira, deleitar-se com as façanhas do time de hóquei favorito ou comparar as corridas impulsionadas de dois batedores da MLB, então oferecer maneiras criativas para visualizar e interagir com os dados pode diferenciar seu aplicativo dos outros.

O aplicativo NFL Fantasy Football 2013 anima as estatísticas de jogo com mídias interativas. O aplicativo mostra as pontuações das equipes traçadas ao longo do tempo e permite que os usuários cliquem em determinados pontos no gráfico para ver clipes de vídeo das jogadas que alteraram o placar.

Apresentação de dados interativos no NFL Fantasy Football 2013

Tópicos relacionados

Visões gerais e diretrizes
Conheça os aplicativos da Windows Store
Diretrizes de UX para aplicativos da Windows Store
Botões e contratos
Contratos e extensões de aplicativo
Diretrizes de controle de Hub
Blocos dinâmicos
Diretrizes de blocos dinâmicos
Visão geral de blocos secundários
Secondary tile guidelines
Visão geral das notificações do sistema
Diretrizes de notificação do sistema
Diretrizes de tamanho da janela
Diretrizes de movimento panorâmico
Zoom semântico
Diretrizes de zoom semântico
Diretrizes de barra de aplicativo
Diretrizes de compartilhamento
Diretrizes de pesquisa
Exemplos
Exemplo de bloco dinâmico
Exemplo de movimento panorâmico (HTML)
Exemplo de movimento panorâmico (XAML)
Exemplo do AppBar (HTML)
Exemplo do AppBar (XAML)
Exemplo de fonte de compartilhamento
Exemplo de destino de compartilhamento
Exemplo de pesquisa
Exemplo de zoom semântico (C#/VB/C++)
Exemplo de zoom semântico (JavaScript)
Exemplo de notificação do sistema

 

 

Mostrar:
© 2014 Microsoft