Diretrizes de telas iniciais

Applies to Windows and Windows Phone

Siga estas diretrizes para personalizar a tela inicial e criar uma tela inicial estendida para garantir aos usuários uma boa experiência de inicialização.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interface do usuário de aplicativo da Windows Store, do início ao fim

O que fazer e o que não fazer

  • Personalize a tela inicial para diferenciar seu aplicativo. A tela inicial consiste em imagem e uma cor de tela de fundo, ambas personalizáveis. Uma tela inicial bem projetada pode tornar seu aplicativo mais atraente.

    Se você colocar uma imagem e a cor da tela de fundo juntas para formar a tela inicial, a tela inicial terá uma aparência agradável, independentemente do fator forma do dispositivo no qual seu aplicativo está instalado. Quando a tela inicial é exibida, apenas o tamanho da tela de fundo muda para compensar os vários tamanhos de tela. A imagem permanece sempre intacta.

    Para saber como adicionar e personalizar a tela inicial, veja Guia de início rápido: adicionando uma tela inicial.

  • Crie uma tela inicial estendida para concluir tarefas adicionais antes de mostrar a página de aterrissagem do aplicativo. Você pode controlar a experiência de carregamento do aplicativo criando uma tela inicial estendida que imita a tela inicial exibida pelo Windows. Ao imitar a tela inicial exibida pelo sistema, você garante uma experiência de carregamento suave e informativa para os usuários. Se o seu aplicativo precisar de mais tempo para preparar a interface do usuário ou para carregar dados da rede, você pode usar uma tela inicial estendida para exibir uma mensagem para o usuário enquanto o aplicativo conclui essas tarefas.

    A tela inicial estendida da Windows Store é mostrada a seguir. Observe que essa tela é idêntica à tela inicial, exceto por adicionar um controle de progresso de "anel indeterminado" para que os usuários saibam que o aplicativo está sendo carregado.Captura de tela da tela inicial estendida da Windows Store

    Para saber como usar a classe SplashScreen para criar uma tela inicial estendida, veja Como estender a tela inicial (aplicativos da Windows Store em JavaScript e HTML) ou Como estender a tela inicial (aplicativos da Windows Store em C#/VB/C++ e XAML).

    Para obter uma visão geral de controles de progresso, como o anel indeterminado, veja Diretrizes de controles de progresso.

    Dica  Se usar o carregamento de fragmento para carregar a tela inicial estendida, poderá notar uma cintilação entre o momento em que a tela inicial do Windows é ignorada e a sua tela inicial estendida é exibida. Você vê essa cintilação porque o carregamento de fragmento começa a carregar a tela inicial estendida de forma assíncrona, antes do término da execução do manipulador de eventos activated. Para evitar essa cintilação desagradável, use o padrão de design demonstrado pela amostra de tela inicial. Em vez do carregamento da tela inicial estendida como fragmentos, ela é simplesmente pintada na parte superior da interface do usuário do aplicativo. Quando as tarefas adicionais de carregamento forem concluídas, você poderá interromper a exibição da tela inicial estendida para revelar a página de aterrissagem do aplicativo. Por outro lado, se preferir manter o carregamento da tela inicial como um fragmento, você também poderá evitar a cintilação inserindo um adiamento da ativação e respondendo aos eventos activated de forma assíncrona. Insira um adiamento para o evento ativado chamando o método activatedOperation.getDeferral.

  • Não use a tela inicial nem sua tela inicial estendida para exibir anúncios. O objetivo da tela inicial é permitir que os usuários saibam, enquanto o aplicativo está carregando, que o aplicativo que eles desejam começar está iniciando. Introduzir elementos estranhos na tela inicial reduz a confiança do usuário de que iniciaram o aplicativo correto e torna o aplicativo mais difícil de identificar de imediato.

  • Não use a tela inicial estendida como mecanismo para exibir várias imagens de tela inicial diferentes. O objetivo da tela inicial e da tela inicial estendida é proporcionar uma experiência de carregamento suave e bem definida aos usuários. O uso da tela inicial estendida para exibir várias e diferentes imagens de tela inicial foge deste objetivo e pode ser desagradável ou confuso para os usuários. A tela inicial estendida deve ser usada apenas para dar continuidade à experiência de carregamento que está ocorrendo enquanto outras tarefas são concluídas.

  • Não use a tela inicial nem sua tela inicial estendida para exibir uma página "sobre". A tela inicial não deve ser usada para mostrar informações de versão ou outros metadados do aplicativo. Exiba essas informações na descrição da Windows Store do aplicativo ou no próprio aplicativo.

Experiência do usuário

  • Use uma imagem que identifique claramente seu aplicativo. Use uma imagem e um esquema de cores que identifique claramente seu aplicativo, para que os usuários tenham certeza de que iniciaram o aplicativo correto. Criar uma tela exclusiva também ajuda a reforça sua marca.

  • Use um PNG transparente como imagem da sua tela inicial para melhores resultados visuais. O uso de um PNG transparente permite que a cor da tela de fundo que você escolheu seja exibida pela imagem da sua tela inicial. Caso contrário, se a imagem tiver uma cor da tela de fundo diferente, sua tela inicial pode parecer incoerente e pouco atraente.

  • Forneça uma versão da imagem da sua tela inicial que seja dimensionável em todos os três fatores de escala. Todos os aplicativos devem ter uma imagem de tela inicial com 620 x 300 pixels para dispositivos que usam a escala 1x. Também recomendamos que você inclua imagens adicionais de tela inicial para colocação em escala 1,4x e 1,8x. A disponibilização de imagens para os três fatores de escala ajuda você a criar uma experiência de inicialização harmoniosa e consistentes nos vários dispositivos.

    Use a tabela a seguir para determinar o tamanho necessário à imagem de tela inicial de cada fator de escala:

    EscalaTamanho da imagem (pixels)
    1x620 x 300
    1,4x868 x 420
    1,8x1116 x 540

     

  • Escolha uma imagem que use a área alocada pelo sistema para a imagem de tela inicial. Ao escolher uma imagem de tela inicial, tente aproveitar o espaço alocado em cada fator de escala. Consulte a tabela de escala e tamanho de imagem para determinar o tamanho da imagem de tela inicial de cada fator de escala.

    Isso ajuda a produzir uma tela inicial de alta qualidade, pois garante a qualidade da imagem.

  • A exibição da interface do usuário do sistema e relacionada ao evento após a tela inicial é ignorada. Você pode determinar quando é seguro mostrar a interface do usuário do sistema ou relacionada ao evento escutando o evento dismissed da tela inicial. Caso contrário, a interface do usuário associada (por exemplo, painel de pesquisa, caixa de diálogo de mensagem ou agente de autenticação da Web) poderá aparecer durante a exibição da tela inicial. E isso poderá gerar efeitos visuais indesejados.

  • Inicie animações de entrada depois que a tela inicial for descartada. Muitos aplicativos mostram animações de entrada de conteúdo sempre que a página de aterrissagem do aplicativo é carregada. Você pode determinar quando iniciar suas animações escutando o evento dismissed da tela inicial.

Telas iniciais estendidas

  • Confirme se a sua tela inicial estendida se parece com a tela inicial exibida pelo Windows. A tela inicial estendida deve usar a mesma cor e imagem da tela de fundo que a tela inicial do Windows. O uso de uma imagem e cor da tela de fundo consistente garante uma aparência profissional à transição da tela inicial do Windows para a tela inicial estendida de seu aplicativo sem ser desagradável aos usuários.

  • Posicione a tela inicial estendida nas coordenadas em que o Windows exibe a imagem de tela inicial. Para saber como posicionar a imagem da tela inicial estendida usando a classe SplashScreen, veja Como estender a tela inicial.

  • Ajuste a posição da tela inicial estendida para responder aos eventos de redimensionamento, como rotação. Sua tela inicial estendida deverá ajustar as coordenadas da imagem da tela inicial quando o aplicativo for dimensionado ou se o dispositivo for girado, escutando o evento onresize. Isso garante que a experiência de carregamento do aplicativo seja suave e profissional, independentemente da maneira como os usuários manipulam o dispositivo ou alteram o layout dos aplicativos na tela.

  • Se quiser exibir a tela inicial por um período maior do que uns poucos segundos, adicione um anel de progresso para que os usuários saibam que o aplicativo está sendo carregado. Use o controle de anel de progresso indeterminado para que os usuários saibam que o aplicativo não travou e estará pronto em breve. Considere a exibição de uma única linha de texto ao longo do anel de progresso para explicar rapidamente aos usuários o que o aplicativo está fazendo. Por exemplo, a tela inicial estendida pode apresentar um anel de progresso e uma mensagem "Carregando".

    Ao fazer com que o aplicativo pareça mais responsivo ao mesmo tempo que mantém seus usuários informados, você cria uma experiência de carregamento positiva. Saiba como adicionar um anel de progresso indeterminado e algum texto em Guia de início rápido: adicionando controles de progresso.

Diretriz de uso adicional

Todos os aplicativos da Windows Store devem ter uma tela inicial, composta de uma imagem e de uma cor de tela de fundo. Você pode personalizar esses dois recursos.

O Windows exibe essa tela inicial assim que o usuário inicia um aplicativo. Isso proporciona uma resposta imediata aos usuários enquanto os recursos do aplicativo são inicializados. Assim que o aplicativo está pronto para interação, o Windows ignora a tela inicial.

Uma tela inicial bem projetada pode tornar seu aplicativo mais atraente. A Windows Store usa esta tela inicial simples e sutil: Uma captura de tela em escala de 75% da tela inicial da amostra de tela inicial.

Essa tela inicial foi criada combinando uma cor da tela de fundo verde com um PNG transparente.

Você pode usar a classe SplashScreen para personalizar a experiência de inicialização do aplicativo, ampliando a tela inicial e disparando animações de entrada.

Considerações de segurança

Os artigos a seguir fornecem orientação sobre como gravar código C++ seguro.

Solução de problemas

JavaScript: evitando cintilação durante a transição da sua tela inicial estendida

O tópico Como estender a tela inicial inclui instruções para ajudar você a evitar cintilação. Se você observar uma cintilação durante a transição da sua tela inicial estendida, adicione onload="" em sua marca <img> desta forma: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Isso ajuda a impedir a cintilação fazendo com que o sistema aguarde até a imagem ser processada antes de mudar para a tela inicial estendida.

C# evitando cintilação durante a transição da sua tela inicial estendida

Se você tiver seguido as instruções em Como estender a tela inicial, talvez observe uma cintilação durante a transição da sua tela inicial estendida. Essa cintilação ocorre se você ativa a janela atual (chamando Window.Current.Activate) antes de acabar a renderização do conteúdo da página. Você pode reduzir a probabilidade de cintilação verificando se a imagem da sua tela inicial estendida foi lida antes de ativar a janela atual. Além disso, você deve usar um temporizador para evitar a oscilação fazendo com que seu aplicativo aguarde um instante, 50 ms por exemplo, antes de você ativar a janela atual. Infelizmente, não há uma maneira garantida de impedir a cintilação porque o XAML renderiza o conteúdo de forma assíncrona e não é possível prever quando a renderização será concluída.

Se você tiver seguido as instruções em Como estender a tela inicial e observar uma cintilação durante a transição da sua tela inicial estendida, siga estas etapas para ter certeza de que a imagem da sua tela inicial estendida foi lida e que seu aplicativo aguarde um instante antes que a janela atual seja ativada:

  1. Em ExtendedSplash.xaml, atualize a marcação da imagem da sua tela inicial estendida para notificá-lo quando ela for lida.

    
    <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
    
    

    O evento ImageOpened é disparado depois que a imagem é lida. Conforme mostrado no exemplo, você deve se registrar para o evento ImageOpened adicionando o atributo ImageOpened e especificando o nome do manipulador de eventos (extendedSplashImage_ImageOpened).

  2. Em ExtendedSplash.xaml, adicione código à classe ExtendedSplash que ativa a janela atual com base em um temporizador e depois que a imagem da sua tela inicial estendida tiver sido lida.

    
            private DispatcherTimer showWindowTimer;
            private void OnShowWindowTimer(object sender, object e)
            {
                showWindowTimer.Stop();
     
                // Activate/show the window, now that the splash image has rendered
                Window.Current.Activate();
            }
     
            private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
            {
                // ImageOpened means the file has been read, but the image hasn't been painted yet.
                // Start a short timer to give the image a chance to render, before showing the window
                // and starting the animation.
                showWindowTimer = new DispatcherTimer();
                showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
                showWindowTimer.Tick += OnShowWindowTimer;
                showWindowTimer.Start();
            }
    
    

    Este exemplo mostra como responder a um evento ImageOpened e como usar um temporizador para fazer seu aplicativo aguardar um instante antes de você ativar a janela atual.

  3. Revise seu método OnLaunched desta forma:

    
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        {
            bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
            ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
            Window.Current.Content = extendedSplash;
        }
    
        // ExtendedSplash will activate the window when its initial content has been painted.
    }
    
    

    No exemplo, nós removemos a chamada para Activatea janela atual. Em vez disso, a ativação é realizada pelo objeto ExtendedSplash depois que o evento ImageOpened é disparado para indicar que a imagem da tela inicial estendida foi lida.

  4. Teste seu código em diferentes dispositivos e em várias circunstâncias para ter certeza de que ele é capaz de evitar a cintilação de forma eficiente!

Tópicos relacionados

Para designers
Como estender a tela inicial
Início rápido: Adicionando uma tela inicial
Amostra da tela inicial
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
Guia de início rápido: adicionando controles de progresso
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

Mostrar:
© 2014 Microsoft