Criar aplicativos da Windows Store excelentes

Applies to Windows only

Os aplicativos da Windows Store são o ponto focal da experiência do usuário no Windows 8. Os melhores aplicativos da Windows Store compartilham características importantes, que proporcionam aos usuários uma experiência consistente, elegante e atraente. Aqui você aprende sobre as oito características de ótimos aplicativos da Windows Store.

Aplicativos da Windows Store

Assistir ao vídeo

Este vídeo explica como os princípios de estilo de design Microsoft ajudam a criar excelentes aplicativos. Depois de assistir o vídeo, leia um resumo sobre o que faz um aplicativo da Windows Store ser ótimo.

|

Aproveite o estilo de design Microsoft

O conteúdo é a alma dos aplicativos da Windows Store. Por isso, dar prioridade ao conteúdo em vez de elementos visuais é fundamental para o desenvolvimento de aplicativos da Windows Store. Todo o resto—os elementos visuais—são acessórios que ajudam a apresentar e permitir interação com o conteúdo.

Apresentando conteúdo

Desenvolva a interface do usuário de seu aplicativo para demonstrar o conteúdo e torne-a acessível para usuários com deficiências.

Layout limpo e aberto

  • Reduza as distrações e ajude os usuários a ficarem imersos no conteúdo, deixando somente os elementos mais importantes na tela.
  • Dê espaço ao conteúdo, removendo linhas, caixas e efeitos gráficos desnecessários, como desfoques e gradientes. Use o espaço aberto para enquadrar o conteúdo.
  • Limite os elementos visuais de navegação que aparecem com frequência na tela, como guias. Mantenha o foco das pessoas no conteúdo atual e evite distrai-las com elementos visuais de orientação.

Hierarquia de informações claras   A linguagem de design da Microsoft é baseada em uma tipografia limpa e bonita, que ajuda os usuários a entenderem a hierarquia do conteúdo. Use tipografia no lugar de linhas e caixas para ajudar a estabelecer a estrutura e a hierarquia.

  • Use tamanho, espessura e cor do texto de forma consistente para expressar informações em algum elemento importante do conteúdo. O conjunto de variações deve ser pequeno para que as pessoas possam ver com facilidade como o conteúdo se integra na hierarquia geral. Consulte as diretrizes de texto e tipografia.
  • Use a folha de estilos padrão para obter a ascensão de tipo predefinida para seu texto.

Silhueta do Windows  Quando as pessoas focam no conteúdo, a composição desse conteúdo forma a identidade do aplicativo. Uma silhueta familiar ajuda as pessoas a reconhecerem instintivamente que seu aplicativo tem aplicativo da Windows Store (em oposição, por exemplo, a uma página da Web).

Interagindo com o conteúdo

Use interações que mantenham o usuário no controle e confiante.

Interações diretas  O modo mais natural das pessoas interagirem com o conteúdo é diretamente, sem elementos visuais intermediários.

  • Sempre que possível, deixe as pessoas concluírem as ações pela manipulação direta do conteúdo, e não por meio de manipulação direta (com controles).

    Por exemplo, permita que as pessoas toquem em um item para verem mais detalhes, deslizem o dedo para selecioná-lo, arrastem para movê-lo e reduzam o zoom para ver todo o contexto—em vez de adicionar botões na tela que realizem essas ações.

  • Aproveite o zoom semântico para que a navegação por uma longa lista de conteúdos seja rápida, flexível e dê prioridade ao conteúdo.
  • Leve em consideração como os leitores de tela e os usuários que dependem de teclados vão interagir com o conteúdo.

Aproveite a borda   Algumas ações não podem ser concluídas com manipulação direta. Para elas, mostre os comandos contextualmente, somente conforme necessário, para evitar o acúmulo de elementos na tela. Aproveite a borda da tela ou do dispositivo para que as pessoas possam encontrar comandos com confiança;

  • Coloque comandos na barra do aplicativo, que pode ser exibida quando desejado sempre que o usuário passa o dedo na borda superior ou inferior, e oculta quando ele conclui suas ações.
  • Aproveite os botões Pesquisar, Compartilhar, Dispositivos ou Configurações, que podem ser exibidos quando desejado sempre que o usuário passa o dedo na borda direita.
  • Evite colocar comandos com frequência na tela e mostrar pontos de entrada duplicados para contratos acessados por botões.
  • Desenvolva o aplicativo pensando no conforto e coloque as superfícies de interação mais usadas perto das bordas.

Consulte o tópico sobre design de comandos para obter mais informações.

Seja rápido e flexível

Responda às ações dos usuários com rapidez e energia semelhante.

Animações significativas  

O movimento é uma parte fundamental da linguagem de design da Microsoft. As animações bem desenvolvidas dão vida aos aplicativos e tornam a experiência avançada e refinada.

  • Use animações significativas para vincular as experiências visualmente e contar uma história. Em uma interface flexível, tudo vem de algum lugar e vai para algum lugar.
  • Aproveite o conjunto de animações específicas de cenário da biblioteca de animações, desenvolvidas para expressar informações. Os movimentos familiares reforçam conceitos, ajudam as pessoas a saberem o que esperar e criam uma noção de confiança. Consulte as diretrizes de animação na seção sobre animação de IU.
  • Ao usar animação para comunicar informações importantes, certifique-se de fornecer também uma maneira alternativa e acessível de transmitir essas informações.

Desenvolvidos para o toque  

Os aplicativos da Windows Store são desenvolvidos para toque em primeiro lugar. Eles aproveitam mãos e dedos para realizarem as funções mais incríveis, com conforto e ergonomia em mente.

  • Adote a linguagem de toque do Windows 8 e use o gesto recomendado para que as pessoas manipulem o conteúdo de forma natural e consistente. Consulte o tópico sobre design de interação por toque para obter mais informações.
  • Deixe o conteúdo seguir seus dedos diretamente. Vá além dos toques e use interações com o deslizar dos dedos, como o zoom semântico, para permitir que as pessoas naveguem e interajam com o conteúdo de forma rápida e fácil.
  • Forneça respostas visuais imediatas após o toque para que as pessoas possam saber sem dúvidas se realizaram a ação certa. Permita a reversão de interações e confirme somente quando as pessoas soltarem para dar espaço a erros e incentivar explorações.
  • Não crie interações separadas de toque e mouse.
  • Quanto à acessibilidade, certifique-se de que todos os elementos interativos sejam acessíveis de forma programática. Para saber mais, veja Tornando os eventos de toque acessíveis e Verificar os cenários do aplicativo principal usando o Narrador.

Controles incorporados  

Aproveite os controles incorporados para obter animações bonitas, flexíveis e consistentes, além de comportamentos otimizados para toque. Alguns exemplos:

  • A seleção por meio do gesto de passar (deslizamento transversal) o dedo é incorporada ao controle ListView. Ela pode ser ampliada com o zoom semântico para permitir que as pessoas naveguem por uma lista longa de forma rápida e flexível. Consulte as diretrizes referentes ao controle ListView.
  • O controle FlipView permite que os usuários realizem ações de arraste para passarem de um item para outro, além de ter animações de transição incorporadas.
  • Os controles de botão, alternância, caixa de seleção, botão de opção, classificação e deslizante fornecem respostas visuais no momento do toque e confirmação somente quando a pessoa deixa de tocar a tela, além de permitirem que os usuários revertam ações, realizando uma ação de arraste para cancelar. Consulte as diretrizes sobre controles de botão, alternância, caixa de seleção, botão de opção, seletores de data e hora, classificação e deslizante.

Lembre-se de que os controles internos são acessíveis por padrão, o que pode reduzir o custo de desenvolvimento de um aplicativo acessível. Consulte a lista das diretrizes detalhadas de experiência do usuário (UX) para ver os controles incorporados.

Adaptar a qualquer tamanho

Crie uma grande experiência em todos os fatores forma e todas opções de visualização disponíveis aos usuários.

Dimensionando para vários fatores forma   Seu aplicativo pode ser usado em centenas de milhões de PCs com Windows 8. Esses PCs terão diversos formatos de telas e resoluções, desde tablets com telas <10" até monitores com telas >27".

  • Use o espaço da tela da melhor maneira possível utilizando o suporte a layout flexível incorporados a controles da plataforma. Por exemplo, ListView remanejará o conteúdo automaticamente com base no espaço disponível.
  • A plataforma fornece dimensionamento automático com base no tamanho da tela e resolução do dispositivo. Forneça três tamanhos de recursos ou use SVG (Elementos Gráficos Vetoriais Escaláveis) para garantir que o aplicativo sempre pareça nítido e refinado. Consulte as diretrizes de dimensionamento em telas e as diretrizes de dimensionamento até a densidade de pixels.
  • Lembre-se de que a ativação da opção Aumentar o tamanho de todos os itens da tela no painel de controle Facilidade de Acesso reduz a resolução atual e você precisa verificar se toda a interface do usuário continuará sendo visível e utilizável. Para saber mais, veja Verificar o aplicativo com "Aumentar o tamanho de todos os itens da tela".
  • Use o simulador no Microsoft Visual Studio para ver como seu aplicativo ficará em fatores forma diferentes.

Projetando para diferentes tamanhos de janela  As pessoas realizam várias tarefas naturalmente e podem executar vários aplicativos lado a lado. Os usuários podem redimensionar continuamente para baixo, até uma largura mínima. A largura mínima padrão é igual a 500 pixels. Se o seu aplicativo funcionar bem em tamanhos menores e você quiser incentivar os usuários a manter o aplicativo na tela, mude a largura mínima para 320 pixels. Veja Diretrizes de tamanhos de janela.

  • Projete seu aplicativo para refluir o conteúdo adequadamente, de modo que fique atraente e funcional em qualquer tamanho, inclusive na largura mínima. Preserve o contexto dos usuários quando eles redimensionam o aplicativo.
  • Verifique se os controles do aplicativo – como barra de aplicativos, barra de navegação, caixas de diálogo e submenus – são dimensionados até o tamanho mínimo.

Use os contratos corretos

Os contratos são os elementos que unem os aplicativos da Windows Store e estes à interface do usuário do sistema. Dois aplicativos com o mesmo contrato implementado podem trabalhar em conjunto para concluir um cenário amplo ou complexo.

  • No caso de contratos mais comuns, como pesquisa, compartilhamento e seletores de arquivos, comece com os modelos de itens do Visual Studio correspondentes.
  • Use os botões para criar um modelo de invocação consistente, no qual os usuários possam confiar. Evite criar IUs alternativas na tela do aplicativo para invocar os contratos, pois isso pode confundir os usuários.
  • Consulte a lista completa de contratos de aplicativos.

Compartilhamento   Os contratos de compartilhamento permitem que as pessoas compartilhem dados de um aplicativo com outros aplicativos. Um aplicativo de origem é aquele que fornece o conteúdo a ser compartilhado. Já o aplicativo de destino recebe esse conteúdo usando um conjunto de formatos de dados comuns. Consulte as diretrizes de compartilhamento de conteúdo.

  • Todo aplicativo deve ser uma origem de compartilhamento e implementar o conjunto mais amplo possível de formatos.
  • As aplicativos que publicam, armazenam ou transformam os dados compartilhados são bons candidados a serem destinos de compartilhamento. Exemplos: aplicativos conectados a dispositivos, de comunicação e de redes sociais.

Pesquisa   O contrato de pesquisa e o controle SearchBox no aplicativo permitem às pessoas pesquisar o conteúdo de um aplicativo em qualquer local do Windows. Os resultados são fornecidos pelo aplicativo e exibidos na própria interface do usuário do aplicativo ou no painel de pesquisa global. Veja Diretrizes e lista de verificação de pesquisa.

  • Se a pesquisa for integral no aplicativo, use o novo controle SearchBox. Se a pesquisa for importante para o seu aplicativo, mas não essencial à sua finalidade, use o botão pesquisar e o contrato.
  • Você pode usar o contrato de pesquisa com o controle SearchBox para habilitar a ativação na pesquisa global.
  • Se, para começar a usar o aplicativo, os usuários tiverem que executar uma pesquisa, adicione o glifo de pesquisa padrão à tela do aplicativo.
  • Melhore a página de resultados de pesquisa do seu aplicativo permitindo que os usuários definam filtros e escopos para refinar os resultados da pesquisa.
  • Indique por que um resultado de pesquisa corresponde à consulta usando a nova API de realce de ocorrências.

Seletores de arquivos     Os contratos do seletor de arquivos permitem que as pessoas acessem o conteúdo de um aplicativo a partir de outro aplicativo. Quando o seletor de arquivos é invocado, os usuários podem procurar e selecionar arquivos do armazenamento local ou de outro aplicativo com suporte ao contrato do seletor de arquivos. Consulte as diretrizes de seletores de arquivos.

  • Aproveite esse contrato caso seu aplicativo acesse ou armazene arquivos que podem ser úteis aos usuários em outro contexto.
  • Use o controle ListView para criar um comportamento incorporado de layout e seleção que seja flexível.

Invista em um bom bloco

Um bloco é a porta de entrada de um aplicativo. Localizado na tela Inicial, ele é uma extensão do aplicativo e pode fornecer informações muito mais pessoais e atraentes do que um ícone tradicional. Invista no desenvolvimento de um bom bloco a fim de atrair as pessoas para seu aplicativo. Consulte as diretrizes de blocos.

  • Personalize o conteúdo exibido no bloco para os usuários e mantenha-o renovado por meio de atualizações conforme o conteúdo do aplicativo muda. Há uma grande variedade de modelos de blocos predefinidos disponível, basta selecionar o design que mais combina com seu tipo de conteúdo.
  • Faça referência ao conteúdo da home page de seu aplicativo para que os usuários possam localizá-lo com facilidade após iniciar o aplicativo.
  • Use blocos secundários para permitir que as pessoas promovam subseções de conteúdo do aplicativo interessantes e atualizadas com frequência na tela Inicial. Consulte as diretrizes de blocos secundários.

Mantenha os usuários conectados e dinâmicos

Forneça conteúdo atualizado por meio de blocos e notificações, permitindo que as pessoas sintam-se conectadas a seu aplicativo. Os blocos e as notificações utilizam a mesma infraestrutura e podem ser atualizados a qualquer momento usando o serviço de notificação por push do Windows de forma local (enquanto o aplicativo é executado) ou em uma hora pré-programada.

Blocos   Chame a atenção das pessoas constantemente com conteúdo dinâmico, relevante e personalizado no bloco de seu aplicativo. O conteúdo atualizado do bloco dá aos usuários um motivo para colocarem o bloco em uma posição de destaque na tela Inicial, abrindo o aplicativo com frequência.

  • Um bloco pode ter um ciclo de até cinco atualizações. Por exemplo, o bloco de um aplicativo de notícias pode mostrar várias histórias todos os dias.
  • O conteúdo mostrado nas atualizações dinâmicas deve estar acessível na home page de seu aplicativo. Remova notificações antigas caso elas não sejam mais importantes ou não possam ser acessadas na home page.
  • Use notificações para mostrar informações numéricas ou glifos simples.

Notificações   Os aplicativos podem usar notificações para mostrar rapidamente mensagens urgentes que devem aparecer em qualquer local do Windows. Consulte as diretrizes de notificações do sistema.

  • A maioria dos aplicativos deve ser discreta—as pessoas devem aceitar a habilitação de notificações no aplicativo.
  • Os usuários têm controle sobre os recursos de notificação do aplicativo. Por isso, envie notificações somente se forem realmente urgentes e importantes. Caso haja notificações perdidas que são essenciais, mostre-as no bloco do aplicativo.
  • Combine notificações se houver várias atualizações ocorrendo em um curto período.
  • Não use notificações para mostrar erros ou avisos. Os erros devem aparecer embutidos ou em menu suspensos e caixas de diálogo de mensagens.

Realize roaming para a nuvem

Roaming   Crie uma experiência contínua entre dispositivos por meio do roaming de dados , permitindo que as pessoas deem continuidade a uma tarefa a partir do ponto em que pararam. Leia as diretrizes de roaming de dados de aplicativos.

  • Aproveite as contas da Microsoft e o armazenamento na nuvem por usuário para armazenar a fazer o roaming de configurações, estados e uma pequena quantidade de conteúdo dos usuários.
  • Exemplos de configurações de aplicativos boas para roaming:
    • Preferências de cidades e Celsius x Fahrenheit em um aplicativo de previsão do tempo
    • Feeds RSS aos quais os usuários se inscreveram em um aplicativo de notícias
    • Times favoritos em um aplicativo de esportes
  • Exemplos de estados de aplicativos bons para roaming:
    • A última posição de leitura em um aplicativo de leitura
    • O último checkpoint ou movimento concluído em um jogo
    • A última faixa reproduzida em um aplicativo de música

Gerenciamento do Tempo de Vida do Processo (ciclo de vida do aplicativo)   Garanta uma experiência contínua, preservando o estado para seus usuários sem a necessidade de salvar explicitamente. Leia as Diretrizes para suspensão e retomada de aplicativos.

  • Em geral, permita que o aplicativo seja retomado do ponto em que os usuários o deixaram em vez de reiniciá-lo. As pessoas devem ser capazes de trocar de aplicativo e voltar para o carrinho de compras, um email não terminado ou um jogo pausado do jeito que deixaram.
  • Reinicie o aplicativo caso tenha se passado muito tempo desde que o usuário o acessou pela última vez e se o contexto anterior não for mais importante. Por exemplo, em um aplicativo de notícias, leve as pessoas para a home page caso elas tenham aberto um artigo há muito tempo e eles já esteja desatualizado.
  • Não encerre o aplicativo quando ele é movido para fora da tela. Deixe o sistema cuidar do ciclo de vida do aplicativo para garantir que os usuários possam retornar ao aplicativo da forma mais eficiente possível. Não ofereça aos usuários maneiras de encerrar o aplicativo.

Adote os princípios de estilo de design Microsoft

Oriente o design com base nos princípios a seguir.

Dedique-se ao refinamento do aplicativo

  • Dedique tempo e esforços a pequenos elementos que são vistos com frequência por muitas pessoas.
  • Desenvolva a experiência para que seja completa e refinada em todos os estágios.

Faça mais com menos

  • Solucione distrações, não capacidade de descoberta. Deixe que as pessoas fiquem imersas naquilo que gostam e permita que explorem o resto.
  • Crie uma experiência limpa e significativa, deixando apenas os elementos mais importantes na tela para que as pessoas possam se aprofundar no conteúdo.

Seja rápido e flexível

  • Deixe que as pessoas interajam diretamente com o conteúdo e responda às ações com rapidez e energia semelhante.
  • Traga vida à experiência, crie uma noção de continuidade e conte uma história por meio do uso significativo dos movimentos.

Seja autenticamente digital

  • Aproveite ao máximo as mídias digitais. Remova os limites físicos para criar experiências que são mais eficientes e simples do que a realidade.
  • Aceite o fato de que somos pixels em uma tela. Desenvolva o aplicativo com cores e fortes, vibrantes e nítidas e imagens que vão além dos limites do material do mundo real.

Vença como um

  • Aproveite o ecossistema e trabalhe com outros aplicativos, dispositivos e o sistema para concluir os cenários para as pessoas.
  • Adeque-se ao modelo de IU para reduzir a redundância. Aproveite o conhecimento que as pessoas já têm para proporcionar uma noção de familiaridade, controle e confiança.

 

 

Mostrar:
© 2014 Microsoft