Informações
O tópico solicitado está sendo mostrado abaixo. No entanto, este tópico não está incluído nesta biblioteca.

Diretrizes de controles de progresso

Applies to Windows and Windows Phone

Aplicativo do Windows: barra de progresso indeterminado, toque de progresso e barra de progresso determinado

Aplicativo do Windows: barra de progresso indeterminado, toque de progresso e barra de progresso determinado

Aplicativo do Windows Phone: indicador do progresso da barra de status e barras de progresso

Aplicativo do Windows Phone: indicador do progresso da barra de status e barras de progresso

Descrição

Um controle de progresso fornece um comentário ao usuário de que uma operação de longa execução está em andamento. Uma barra de progresso determinado mostra a porcentagem de conclusão de uma operação. Uma barra de progresso indeterminado ou um toque de progresso, mostra que uma operação está em andamento.

Um controle de progresso é apenas para leitura; não é interativo.

Exemplos

Segue um exemplo de um controle de toque de progresso em uma tela inicial.

Uma captura de tela que ilustra o controle de anel de progresso padrão

 

Uma barra de progresso também é um bom indicador de estado ou posição. Uma barra de progresso usada para uma faixa musical corresponde a linha do tempo da música: o valor da barra é a posição da música; o estado pausado indica que a reprodução foi pausada.

O aplicativo Xbox Music exibe uma barra de progresso ao reproduzir uma música

Este é o controle correto?

Nem sempre é necessário mostrar um controle de progresso. Às vezes, o progresso de uma tarefa é suficientemente óbvio por si só, ou a tarefa é concluída tão rapidamente que a exibição de um controle de progresso seria distrativa. Veja a seguir alguns pontos a serem considerados ao determinar se você deve mostrar um controle de progresso.

  • A operação leva mais de dois segundos para ser concluída?

    Em caso afirmativo, mostre um controle do progresso, assim a operação começar. Se uma operação demorar mais de dois segundos para ser concluída na maioria das vezes (mas às vezes ser concluída em menos de dois segundos), aguarde 500ms antes de mostrar o controle para evitar cintilação.

  • A operação está aguardando que o usuário execute uma tarefa?

    Em caso afirmativo, não use uma barra de progresso. Barras de progresso servem para o progresso do computador, e não para progresso do usuário.

  • O usuário precisa saber que algo está acontecendo?

    Por exemplo, se o aplicativo está baixando alguma coisa em tela de fundo, e o usuário não iniciou o download, o usuário não precisa saber disso.

  • A operação é uma atividade em tela de fundo que não bloqueia a atividade do usuário e é de interesse mínimo (porém existente) para o usuário?

    Use texto e elipse quando seu aplicativo estiver executando tarefas que não precisam estar visíveis todo o tempo, mas cujo status você ainda precisa mostrar.

    Exemplo de texto como um indicador de progresso

    Use elipse para indicar que a tarefa está em andamento. Se houver várias tarefas ou itens, você poderá indicar o número de tarefas restantes. Quando todas as tarefas estiverem concluídas, descarte o indicador.

  • Você pode utilizar o conteúdo da operação para visualizar o progresso?

    Em caso afirmativo, não mostre um controle de progresso. Por exemplo, ao exibir imagens carregadas do disco, elas aparecem na tela uma por uma à medida que são carregadas. A exibição de um controle de progresso não traria nenhum benefício; apenas sobrecarregaria a interface do usuário.

  • Você pode determinar, de forma relativa, quanto do trabalho total está concluído enquanto a operação está em progresso?

    Se sim, use uma barra de progresso determinado, especialmente para operações que bloqueiam o usuário. Use uma barra de progresso indeterminado ou um toque de progresso, de outra forma. Mesmo se tudo o que o usuário souber é algo que está acontecendo, isso ainda é útil.

O que fazer e o que não fazer

  • Use o estilo de barra de progresso determinado quando uma tarefa estiver determinada, isto é, quando ela tiver uma duração bem definida ou um fim previsível. Por exemplo, se você puder estimar a quantidade de trabalho restante em termos de tempo, bites, arquivos ou alguma outra unidade quantificável de medida, use uma barra de progresso determinado. Eis alguns exemplos de tarefas determinadas:
    • O aplicativo está baixando uma foto de 500 kb e recebeu 100 kb até o momento.
    • O aplicativo está exibindo um anúncio de 15 segundos e se passaram dois segundos.

    Exemplo de uma barra de progresso determinado

  • Use o toque de progresso indeterminado para tarefas que não são determinadas e são modais (bloqueiam a interação com o usuário).

    Exemplo de um toque de progresso

  • Use a barra de progresso indeterminado para tarefas que não são determinadas e não são modais (não bloqueiam a interação com o usuário).

    Exemplo de uma barra de progresso indeterminado

  • Trate parcialmente tarefas modais como não modais se o estado modal durar mais que dois segundos. Algumas tarefas bloqueiam a interação até que algum progresso seja feito, e então o usuário pode começar a interagir com o aplicativo novamente. Por exemplo, quando o usuário executa uma consulta de pesquisa, a interação é bloqueada até que o primeiro resultado seja exibido. Trate tarefas como essas como não modais e utilize o estilo de barra de progresso indeterminado se o estado modal durar menos de 2 segundos. Se o estado modal puder durar mais de 2 segundos, utilize o toque de progresso indeterminado para a fase modal da tarefa e utiize a barra de progresso indeterminado para a fase não modal.
  • Considere oferecer uma forma de cancelar ou pausar a operação que está em progresso, particularmente quando o usuário for bloqueado enquanto estiver esperando a conclusão da operação e tiver uma boa ideia de por quanto a operação ainda será executada.
  • Não use o "cursor de espera" para indicar atividade, pois os usuários que usam toque para interagir com o sistema não o verão, e os usuários que utilizam o mouse não precisam de duas maneiras de visualizar a atividade (o cursor e o controle do progresso).
  • Mostre um controle de progresso único para múltiplas tarefas ativas relacionadas. Se houver múltiplos itens relacionados na tela que tudo estiver executando algum tipo de atividade, não mostre controles de progresso múltiplos. Em vez disso, mostre um controle que termine quando a última tarefa for concluída. Por exemplo, se o aplicativo baixar várias fotografias, mostre um único controle de progresso, em vez de mostrar um para cada foto.
  • Não altere o local nem o tamanho do controle de progresso enquanto a tarefa estiver sendo executada.

Diretrizes para tarefas determinadas

  • Se a operação for modal (bloquear a interação com o usuário) e demorar mais de 10 segundos, ofereça uma forma de cancelá-la. A opção para cancelar deve estar disponível quando a operação começar.
  • O espaço de progresso é atualizado uniformemente. Evite situações em que o progresso aumenta além de 80% e depois para por um longo período. Você deseja agilizar o progresso até o fim, e não retardá-lo. Evite saltos drásticos, como de 0% para 90%.
  • Depois de definir o progresso como 100%, aguarde até o fim da animação da barra de progresso determinado antes de a ocultar.
  • Se a sua tarefa for parada (por um usuário ou uma condição externa), mas um usuário puder continuá-la, indique visualmente que o progresso foi parado. Em aplicativos em JavaScript, você faz isso usando o estilo CSS de pausa. Em aplicativos em C#/C++/VB, você faz isso definindo a propriedade ShowPaused como true. Forneça o texto de status sob a barra de progresso que informa ao usuário o que está acontecendo.
  • Se a tarefa for parada e não puder ser continuada ou tem que ser reiniciada do começo, indique visualmente que há um erro. Em aplicativos em JavaScript,você faz isso usando o estilo CSS de erro. Em aplicativos em C#/C++/VB, você faz isso definindo a propriedade ShowError como true. Substitua o texto de status (sob a barra) por uma mensagem que informa o usuário o que aconteceu e como corrigir o problema (se possível).
  • Se for necessário tempo (ou uma ação) para você poder oferecer um progresso determinado, use a barra indeterminada primeiro e depois alterne para a barra determinada. Por exemplo, se a primeira etapa de uma tarefa de download for se conectar a um servidor, você não poderá estimar quanto tempo isso irá demorar. Depois que a conexão for estabelecida, alterne para a barra de progresso determinado para mostrar o progresso do download. Mantenha a barra de progresso exatamente no mesmo lugar e com o mesmo tamanho após a alternância.

    Alternando de uma barra de progresso indeterminado para determinado

  • Se você tiver uma lista de itens, como uma lista de impressoras, e determinadas ações possam iniciar uma operação em itens nessa lista (como instalar um driver para uma das impressoras), mostre uma barra de progresso determinado próxima ao item.

    Mostre o assunto (rótulo) da tarefa acima da barra de progresso e o status abaixo. Não forneça texto de status se o que está acontecendo for óbvio. Quando a tarefa estiver concluída, oculte a barra de progresso. Use o texto de status para comunicar o novo estado de um item.

    Mostrando o progresso embutido com o status

  • Para mostrar uma lista de tarefas, alinhe o conteúdo em uma grade para que os usuários possam ver o status facilmente. Mostre barras de progresso para todos os itens, mesmo para aqueles que estão pendentes.

    Como o objetivo dessa lista é mostrar as operações em andamento, remova as operações da lista quando forem concluídas.

    Exibindo várias barras de progresso

  • Se um usuário tiver iniciado uma tarefa a partir da barra de aplicativos e esta bloquear a interação com o usuário, mostre o controle de progresso na barra do aplicativo.

    Se estiver claro para o que a barra de progresso está mostrando o progresso, você pode alinhá-la com o topo da barra do aplicativo e omitir o rótulo e o status; caso contrário, forneça um texto para o rótulo e para o status.

    Para desabilitar a interação durante a tarefa, desative os controles na barra do aplicativo e ignore a entrada na área de conteúdo.

  • Não decremente o progresso. Sempre incremente o valor do progresso. Se você precisar reverter uma ação, mostre o progresso da reversão assim como mostraria o progresso de qualquer outra ação.
  • Não reinicie o progresso (de 100% a 0%), a menos que seja óbvio ao usuário que uma tarefa ou tarefa atual não é o última. Por exemplo, suponha que uma tarefa tenha duas partes: download de alguns dados e, em seguida, processar e exibir os dados. Quando o download for concluído, redefina a barra de progresso como 0% e comece a mostrar o progresso do processamento dos dados. Se não estiver claro para os usuários que há várias etapas em uma tarefa, recolha as tarefas em uma única escala de 0 a 100% e atualize o texto de status ao mover de uma tarefa para a próxima.

Diretrizes para tarefas modais, indeterminadas que usam o toque de progresso

  • Exiba o toque de progresso no contexto da ação: mostre-o próximo ao local onde o usuário iniciou a ação ou onde os dados resultantes serão exibidos.
  • Forneça o texto de status à direita do toque de progresso.
  • Deixe o toque de progresso com a mesma cor do texto de status.
  • Desabilite os controles com os quais o usuário não deve interagir enquanto a tarefa estiver sendo executada.
  • Se a tarefa resultar em um erro, oculte o indicador de progresso e o texto de status e exiba uma mensagem de erro em seu lugar.
  • Em um diálogo, se uma operação deve ser concluída antes de mudar para a próxima tela, coloque o toque do progresso logo acima da área do botão, alinhada à esquerda com o conteúdo do diálogo.

    Progresso em uma caixa de diálogo

  • Em uma janela do aplicativo com controles alinhados à direita, coloque o toque de progresso à esquerda ou logo acima do controle que causou a ação. Alinhe o toque de progresso com o conteúdo relacionado.

    Mostrando o progresso em uma janela do aplicativo com controles alinhados à direita

  • Em uma janela de aplicativo com controles alinhados à esquerda, coloque o toque do progresso à direita ou logo abaixo do controle que causou a ação.

    Um toque de progresso com controles alinhados à esquerda

     

    - ou -

     

    Um toque de progresso abaixo de controles alinhados à esquerda

  • Se você estiver mostrando múltiplos itens, coloque o toque de progresso e o texto do status abaixo do título do item. Se ocorrer um erro, substitua o toque de progresso e o status pelo texto do erro.

    Um toque de progresso em uma lista de vários itens

Diretrizes para tarefas não modais, indeterminadas que usem a barra de progresso

  • Se você mostrar progresso em um submenu, coloque a barra de progresso indeterminado na parte superior do submenu e defina sua largura de forma que ela abranja todo o submenu. Esse posicionamento minimiza a distração, mas ainda comunica a atividade em andamento. Não dê um título para o submenu, porque um título impede que você coloque a barra de progresso na parte superior do submenu.

    Uma barra de progresso indeterminado em um submenu

  • Se você mostrar progresso em uma janela de aplicativo, coloque a barra de progresso indeterminado na parte superior da janela do aplicativo, abrangendo toda a janela.

    Uma barra de progresso na parte superior de uma janela do aplicativo

Diretrizes para texto de status

  • Ao usar a barra de progresso determinado, não mostre a porcentagem de progresso no texto de status. O controle já fornece essas informações.
  • Se você usar texto para indicar atividade sem um controle de progresso, use elipses para transmitir que a atividade está em andamento.
  • Se você usar um controle de progresso, não utilize elipses no texto de status, pois o controle de progresso já indica que a operação está em andamento.

Diretrizes para aparência e layout

  • Uma barra de progresso determinado aparece como uma barra colorida que cresce para preencher uma barra cinza em segundo plano. A proporção do comprimento total colorido indica, de forma relativa, quanto da operação está concluído.
  • Uma barra de progresso indeterminado ou um toque de processo é feito a partir de pontos coloridos em movimento contínuo.
  • Escolha a localização do controle de progresso e proeminência com base em sua importância.

    Controles importantes de progresso podem servir como um plano de ação, dizendo ao usuário para continuar uma determinada operação após o sistema ter realizado seu trabalho. Alguns aplicativos internos do Windows Phone usam o indicador de progresso da barra de status na parte superior da tela para casos importantes. Você pode fazer isso também e configurá-los para serem determinados ou indeterminados.

    Casos que forem menos críticos, como durante o download, aparecem menores e são restritos a uma visualização.

  • Use o rótulo para mostrar o valor do progresso ou descrever o progresso em andamento ou para indica que a operação foi interrompida. Um rótulo é opcional, mas é altamente recomendável.

    Para descrever o progresso em andamento, use gerúndio (um verbo com o final ndo),por exemplo, "conectando", "baixando" ou "enviando".

    Para indicar se o progresso está pausado ou encontrou uma exceção, um particípio passado, por exemplo, "pausado", "falha no arquivo baixado" ou "cancelado".

  • Barra de progresso determinada com rótulo e status

    Uma barra de progresso determinado com informações de rótulo e status

  • Várias barras de progresso

    Layout recomendado para várias barras de progresso

  • Toque de progresso indeterminado com texto de status

    Layout para toque de progresso indeterminado com texto de status

  • Barra de progresso indeterminado

    Layout de barra de progresso indeterminado

Diretriz de uso adicional

Árvore de decisões para escolher um estilo de progresso

  • O usuário precisa saber que algo está acontecendo?

    Se a resposta for não, não mostre um controle de progresso.

  • A informação sobre o tempo necessário para concluir a tarefa está disponível?
    • Sim: A tarefa leva mais de dois segundos para ser concluída?
      • Sim: Use uma barra de progresso determinado. Para tarefas que levam mais de 10 segundos, ofereça uma maneira de cancelar a tarefa.
      • Não: Não mostre um controle de progresso.
    • Não: Os usuários são impedidos de interagir com a interface do usuário até que a tarefa seja concluída?
      • Sim: Essa tarefa faz parte de um processo de várias etapas em que o usuário precisa saber detalhes específicos da operação?
        • Sim: Use um anel de progresso indeterminado com texto de status centralizado horizontalmente na tela.
        • Não: Use um anel de progresso indeterminado sem texto no centro da tela.
      • Não: Essa é uma atividade principal?
        • Sim: O progresso está relacionado a um único elemento específico na interface do usuário?
          • Sim: Use um anel de progresso indeterminado embutido com texto de status ao lado do seu elemento da interface do usuário relacionado.
          • Não: Há uma grande quantidade de dados sendo carregada para uma lista?
            • Sim: Use a barra de progresso indeterminado na parte superior com espaços reservados para representar o conteúdo de entrada.
            • Não: Use a barra de progresso indeterminado na parte superior da tela ou superfície.
        • Não: Use o texto de status em um canto superior da tela.

Tópicos relacionados

Classes WinJS CSS para controles HTML
ProgressBar class
ProgressRing class
Para desenvolvedores (HTML)
Adicionando controles de progresso
Para desenvolvedores (XAML)
Adicionando controles de progresso
Como criar uma barra de progresso indeterminada personalizada para o Windows Phone

 

 

Mostrar:
© 2014 Microsoft