Criando aplicativos incríveis para Windows 8 - Parte 1

  • Article

Todo mundo que já baixou ou viu o Windows 8 ficou impressionado com a qualidade visual e experiência do padrão Metro.

O mais interessante é que não é só o Windows 8 e a "cara" dele que ficou excelente. Os aplicativos Metro Style que podem ser baixados pela Windows Store também seguem os mesmos princípios e padrões de qualidade.

Para o usuário isso significa que ele terá uma experiência consistênte entre todos os aplicativos.

Mas e o desenvolvedor? Como ele irá garantir que o aplicativo dele manterá esse padrão de qualidade?

Como ele vai garantir que o aplicativo dele seja atrativo para que o usuário tenha interesse em baixar o aplicativo e até pagar por ele?

E como ele vai garantir a qualidade, seguir os padrões e ainda conseguirá inovar criando um aplicativo único e especial?

Para ajudar a responder essas perguntas, farei uma série de posts baseado em um checklist para vocês, desenvolvedores e designers, criarem aplicativos incríveis!

Esse é o mesmo checklist que é utilizado para você conseguir publicar seu aplicativo na Windows Store antes do lançamento. 

CENÁRIO

Possui missão e escopo claros; a implementação está adiantada representando o escopo final.

Um excelente aplicativo é planejado desde o começo. É dado foco nas tarefas e funcionalidades requeridas para cumprir a missão do aplicativo. Visto que isto é uma revisão do aplicativo, queremos garantir que você tem um plano para seu aplicativo e que você sabe em que ele vai se destacar.

O aplicativo que você está revisando precisa representar a visão final dele. Você não precisa estar com 100% dele pronto, mas ele deve ter funcionalidades suficientes para demonstrar a visão e funcionalidades que farão dele um aplicativo que se destaca dos outros na categoria em que ele se encontra.

Para esse requisito, você não precisa trazer um “pitch” ou um argumento de venda; traga um excelente aplicativo que tenha sido propriamente planejado.

Planejando seu aplicativo: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465427

EXPERIÊNCIA de USUÁRIO - Aperfeiçoamento

Segue os princípios Metro style

O design Metro style tem um conjunto de cinco princípios para ajudá-lo a fazer as melhores escolhas quando estiver projetando seu aplicativo. Estes princípios são a fundação para criar excelentes aplicativos Metro style. Sempre garanta que suas escolhas de design e desenvolvimento sejam guiadas por esses princípios.

Princípios de design estilo Metro: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh781237

Transmite a marca e o propósito

O design Metro style dá ênfase no conteúdo sobre a moldura/borda, dá ênfase num layout clean/limpo e fazendo mais com menos. Seguir esses principios te dará consistência com outros aplicativos, mas sem perder de vista a sua marca; faça o design do seu aplicativo Metro style para promover sua marca e atingir um propósito.

Pense sobre a mensagem que você quer passar para seus usuários quando eles forem ver seu aplicativo Metro style na loja, quando eles verem seu aplicativo na Tela Inicial/Start Screen, quando eles executarem ele pela primeira vez, e quando eles tiverem usando seu aplicativo. Aproveite estas oportunidades do design visual do seu aplicativo para definir e promover sua marca.

A seção de marcas no guia de planejamento de aplicativos Metro style contém uma série de dicas importantes para fazer sua marca brilhar para seus usuários.

Planejamento de marcas: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465418

Planejando seu aplicativo: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465427

Segue um layout e alinhamento consistentes

Vários dos princípios de design Metro – como conteúdo sobre moldura/bordas, orgulho dos detalhes, e usar tipografia para a hierarquia de conteúdo – levam a ter um excelente alinhamento no seu aplicativo. Garanta que você se preocupe com alinhamento e siga as recomendações de margens do Windows 8.

Os ativos de design para aplicativos Metro Style são uma boa referência para você basear seu layout. Aproveitar os modelos/templates do Visual Studio para aplicativos Metro style também é um jeito fácil de começar com um bom layout.

Ativos de design: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh700403 

Criando layouts flexíveis: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465386

Aproveita a tipografia e espaço em branco, e segue uma hierarquia de fontes

O uso correto de tamanhos de fontes, pesos/negrito, cores, guias e espaços podem ajudar a daar um visual limpo/clean para seu aplicativo Metro style, deixando ele bem mais fácil de usar.

Para criar uma experiência consistente com outros aplicativos, verifique os guias/guidelines para texto e tipografia para aplicativos Metro style. Se você usar suas próprias fonts (por causa de marca, por exemplo), ainda siga a hierarquia de tamanhos de fonte e outros guidelines.

Guidelines e checklists para textos e tipografias: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh700394

Abrace a personalidade do Windows 8

O design Metro style do Windows 8 é único. Se você tem um aplicativo escrito para outra plataforma, ele deve ter características de design que podem não ser consistentes com a personalidade do Windows 8.

A personalidade do Windows 8 tem layouts específicos, hierarquia de fontes, animações, interações, comandos, controles comuns e etc.

Os dois maiores erros quando se reutiliza layouts e design de outras plataformas são:

  1. Reutilizar ícones ou imagens que tem gradientes, 3D, bordas, cantos arredondados e etc.
  2. Prover animações que não são autenticamente digitais (como uma animação de virada de página).

Pense sobre todos esses pontos enquanto você faz o design do seu aplicativo para o Windows 8. Familiarize-se com a biblioteca de animações do Windows e aproveite ela para prover animações de transição que sejam familiares para seus usuários e que sejam intuitivas para descobrir.

Reference (HTML)

Biblioteca de animação: https://msdn.microsoft.com/pt-BR/library/windows/apps/br229780

Diretrizes de Experiência de Usuário: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465424

Projetado para uma excelente primeira impressão

Os usuários vão interagir com seu aplicativo pela primeira vez clicando no Tile/Mosaico dele; eles virão a splash screen/tela de abertura, e as cores de fundo e de face do seu aplicativo.

Para atingir este requisito:

  • Revise e siga os guidelines para Tiles/mosaicos, Badges/selos e para Tiles/mosaicos secundários;
  • Garanta que as cores de fundo e face que você escolheu no manifesto do aplicativo são complementares e ficam bem mesmo em um monitor de alto contraste e baixo brilho.

Guidelines e checklist para Tiles/mosaicos: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465403

Guidelines e checklist para Badges/selos: https://msdn.microsoft.com/pt-BR /library/windows/apps/hh761459

Guidelines e checklist para Tiles/mosaicos secundários: https://msdn.microsoft.com/pt-BR /library/windows/apps/hh465398

Guidelines e checklist para splash screen/tela de abertura: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465338

As animações têm um propósito, criam continuidade, e transmitem confiança ao usuário

Animações bem projetadas e com propósito trazem vida ao aplicativo e dão a sensação de uma experiência polida e aperfeiçoada. Elas ajudam o usuário entender as mudanças de contexto, e ligam as experiências com as transições visuais. Se você quer ter um aplicativo rápido e flexível, olhe nos guidelines de arrastar e soltar/drag and drop, animações de borda, e animações de interface de usuário.

Não se esqueça de seguir os princípios do design Metro. Se você quer ter um aplicativo que seja autenticamente digital, evite imitar movimentos físicos (por exemplo, evite fazer uma animação de virada de página igual a um livro). Se você quer ter um aplicativo rápido e flexível, garanta que as animações são independentes e tenham uma renderização de 60 frames por segundo.

Guidelines e checklist para animações de borda: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465178  

Guidelines e checklist para animações de transição: https://msdn.microsoft.com/en-us/library/windows/apps/hh465209

Projetado para toque

Seu aplicativo deve também estar otimizado para todos os tipos de entrada de dados, incluindo toque/touch.

A otimização para toque é uma boa abordagem porque a plataforma do Windows 8 te dá eventos de mouse e caneta de graça quando você codifica e faz o design para touch.

Projetar seu aplicativo para toque requer muita atenção a detalhes em diferentes níveis e critérios. Considere todos esses fatores:

  • Design de interação por toque;
  • Linguagem de toque do Windows 8;  
  • Tamanho dos objetos de toque;
  • Feedback visual;
  • Seleção.

Design de interação por toque: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465415

Linguagem de toque do Windows 8: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465415#touch_language  

Tamanho dos objetos de toque: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465415#touch_targets

Feedback visual de toque: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465342

Seleção por toque: https://msdn.microsoft.com/pt-BR/library/windows/apps/hh465334