Princípios de design da Microsoft

A linha de base que oferece um bom design

Acreditamos que seguir os princípios de design da Microsoft pode ajudar a construir aplicativos da Loja que encantem seus usuários, e de que você possa se orgulhar. Siga esses princípios ao planejar seu aplicativo e deixe que guiem suas escolhas de design e desenvolvimento.

Sobre design moderno

Por muito tempo, a Microsoft tem se consolidado como um líder de tecnologia em muitas áreas e com uma gama variada de produtos. Recentemente, iniciou-se uma mudança que colocou o design ainda mais no centro das atenções. Esta mudança foi caracterizada por bases poderosas, ideias interessantes e influentes, belas explorações, e uma sensação de que qualquer outra coisa simplesmente parece ser obsoleta. Os alicerces dessa mudança tornaram-se o princípios de design da Microsoft.

A filosofia de design de Microsoft é exemplificada pelas telas de aplicativos limpas e despojadas que operam rapidamente, minimizam a digitação, e automaticamente notificam-no de informações novas e atualizadas. O usuário interage com o conteúdo, em detrimento dos controles que representam o conteúdo. E os elementos visuais têm um ótimo encaixe e acabamento.

Alicerces do design moderno

Há muito mais profundidade, personalidade e fundo para o nosso design moderno do que você poderia representar com o rótulo de "design básico". Nossa linguagem de design baseia-se em três pilares distintos.

• A escola Bauhaus: com início em 1919, esta icônica escola de design promovia uma poderosa filosofia: eliminação de acréscimos supérfluos. Uma coisa é compreender quais são as funções básicas de seu aplicativo, mas exige disciplina para fortemente reduzir a funcionalidade a esta base. Antoine de Saint-Exupéry observou que a perfeição é atingida quando não há mais nada a ser alterado. A simplicidade conduz à beleza, mas também à utilidade.

• Estilo tipográfico internacional (Estilo Suíço): o Estilo Suíço inspira o design da Microsoft sobretudo com tipos fortes, limpos e belos. Esse estilo promove a limpeza, legibilidade e objetividade como seus temas centrais. A partir desse estilo surgiu a necessidade de uma grade, tanto tipográfica quanto visual, bem como o uso de layouts assimétricos com beleza e princípios.

• Design com movimento: o movimento dá vida às experiências e transmite uma sensação de elegância. Nós buscamos inspiração em pioneiros como Saul Bass, que usou o movimento juntamente com o tipo e design para criar belas sequências de títulos para filmes. Um ótimo design de movimento não apenas encanta, como também pode ajudar a explicar ao usuário como realizar uma tarefa.

Para saber mais sobre os pilares de design, veja design moderno na Microsoft.

Estas inspirações nos levaram aos nossos próprios princípios, que nos guiam por todo o nosso design. Embora estes sejam os princípios que escolhemos, eles são, de certa forma, onipresentes em todo o design e esperamos que eles ajudem-no a promover a sua marca em nossa plataforma. Estes são os princípios de design da Microsoft:

• Dedicação ao refinamento do aplicativo
• Faça mais com menos
• Rápido e flexível
• Autenticidade digital
• Aproveite todos os recursos de integração

Dedicação ao refinamento do aplicativo

Este é o primeiro princípio por um certo motivo. Criadores, construtores e artesãos ao longo da história se distinguiram como profissionais, tendo orgulho no seu trabalho. Este princípio consiste em ter atenção aos mínimos detalhes —e em dedicar tempo, energia, e paixão aos menores detalhes que são vistos frequentemente por muitos. É sobre a criação de uma experiência que é completa e polida em todas as fases—de pixels perfeitamente alinhados em uma grade, a cores, a tipografia em uma tela do aplicativo. Desafie-se a sentir orgulho de sua habilidade em cada estágio do desenvolvimento.

Entre na grade

Em design gráfico, a grade tipográfica moderna é a armação que dá coerência ao seu conteúdo. Há benefícios tanto estético quanto práticos para um arranjo proporcional de elementos. O usuário pode absorver a página de forma rápida e confortável.

Hierarquia e equilíbrio

Para tornar a hierarquia visual do seu aplicativo clara para o usuário, mostre diferentes tipos de informação com diferentes propriedades. Você pode usar o tamanho, cor, posicionamento e espaçamento da fonte para fazer diferentes níveis na hierarquia distintos uns dos outros. Se você usar os diferentes valores de propriedade de uma forma consistente, o usuário vai entrar no ritmo do seu aplicativo e cada nível será distinto e imediatamente reconhecível.

Hierarquia	Hierarquia insuficiente

Texto grande, contraste de cor elevado. No exemplo anterior, "threads" é o cabeçalho do item pivô selecionado. Estabelece o contexto do conteúdo que aparece abaixo dele. O cabeçalho está em alto contraste (branco no preto) e diz que é o item selecionado na página. O cabeçalho de outro item está em menor contraste (cinza no preto), e isso tira o destaque dele.

Segundo maior texto. O detalhe mais importante na lista de tópicos é o nome da pessoa para quem você está enviando mensagens.

Menor texto. A primeira linha ou duas de cada mensagem é a próxima em importância. A cor diferencia as mensagens lidas e não lidas entre si e por nome.

Espaçamento e alinhamento. Use mais espaço entre threads—e menos espaço dentro de uma thread—para mostrar hierarquia. Basta alinhar o carimbo de data/hora à direita da mensagem para que se destaque.

Hierarquia insuficiente. Sem hierarquia, a página perde o sentido e legibilidade. Perde-se em estética, mas o mais importante, também em utilidade.

Quem é você?

Encontre a tipografia que melhor reflete a personalidade de seu aplicativo. Aqui estão alguns exemplos de tipografia que complementam e ajudam na definição do aplicativo.

Aplicativo do The New York Times. Fontes tradicionais refletem a gravidade desta fonte de notícias.

Camera360. As fontes deste aplicativo são contemporâneas e elegantes.

Recapitulação e lista de verificação

• Capriche nos detalhes.
• Torne o uso de aplicativos seguro e confiável.
• Use equilíbrio, simetria e hierarquia.
• Alinhe o layout do seu aplicativo à grade — o novo layout para aplicativos.
• Disponibilize seu aplicativo para a maior audiência possível, incluindo as pessoas com deficiências ou dificuldades. Consulte Acessibilidade: Diretrizes de design.

Faça mais com menos

Este princípio limita seu aplicativo para suas funções essenciais e nada mais. Pense em conteúdo, não enquadramento. O conteúdo assume muitas formas: imagens, e-mails, notícias, e assim por diante. Remova o enquadramento para deixar apenas os elementos mais relevantes na tela. E, crie os elementos de navegação a partir do próprio conteúdo onde você puder. Deixe que as experiências limpas, imersivas mandem. Cada elemento na tela deve ser valioso e ter uma finalidade clara.

Este princípio não significa que você deva sacrificar a intuição. Um design é bem sucedido se os elementos de navegação orientam o usuário a descobrir como interagir com o aplicativo. Um ótimo design equilibra intuição com redução e proporciona um produto final limpo e belo.

Conteúdo, não enquadramento

Permita que o usuário interaja diretamente com o conteúdo. Ao remover o enquadramento e aproveitando fonte, escala e cor, o conteúdo surge com mais facilidade. Neste exemplo, nomes e títulos são mais fáceis de ler.

Focado em conteúdo	Enquadramento que distrai

Deixe seu conteúdo respirar

Comandos e funcionalidades relevantes são aparentes e fáceis de entender e interagir.

Recapitulação e lista de verificação

• Seja bom em uma coisa e não medíocre em muitas.
• Dê prioridade ao conteúdo em vez de elementos visuais.
• Seja visualmente concentrado e direto, deixando que as pessoas fiquem imersas naquilo que gostam, e permita que explorem o resto.
• Inspire confiança nos usuários.
• Reduza a redundância em sua IU.

Rápido e flexível

Este princípio assegura que as experiências são imersivas e responsivas. Promove o tipo de animações convincentes, transições e as respostas que podem não ser o esperado, mas que trazem a interface à vida e encantam os usuários. Este princípio coloca as pessoas e as tarefas antes da tecnologia.

Se seu aplicativo é um aplicativo tablet ou um aplicativo de telefone, lembre-se que um bom aplicativo para pessoas que estão "on the go" foca em cenários simples, de uso rápido. Para casos de uso como este, concentre-se em oferecer exatamente o que os usuários querem com velocidade e foco, e você estará no caminho certo para um grande design.

Fique ao vivo

Blocos ao vivo são sensíveis, vivos e envolventes. Além disso, eles podem alimentar sua imaginação—desde notificá-lo sobre um novo e-mail a dar uma dica sobre bebidas especiais em seu bar favorito.

Movimento

Crie um senso de continuidade, e deixe o seu aplicativo contar sua história pelo uso significativo de movimento. O movimento pode alertar um usuário a iniciar uma ação ou distinguir dentre diferentes tipos de ações. A tela de bloqueio salta quando tocada para mostrar que você pode deslizar para cima. A transição de saída de um item implica em como deslizar o item de volta para exibição.

Recapitulação e lista de verificação

• Seja responsivo à interação do usuário e pronto para a próxima interação.
• Projete para interação por toque e direta.
• Encante seus usuários com movimentos.
• Faça uma conexão suave entre elementos subsequentes.

Autenticidade digital

Este princípio usa a capacidade ilimitada de inovação que o domínio digital torna possível. O Skeuomorphism busca as regras e propriedades do mundo físico para informar suas metáforas de design. Mas nós aceitamos a força, linguagem e possibilidades únicas de nosso meio.

Assim como a escola de design Bauhaus ensinou a remoção de elementos supérfluos, este princípio encoraja a versão dos equivalentes digitais, tais como couro ou efeitos de textura, costura, sombras e reflexos. Aceite uma linguagem de design mais poderosa e escalável. Esse é o fundamento do princípio autenticamente digital.

A informação está presente

Seja infográfico, não apenas iconográfico. A entrega de informação é o principal objetivo, e não deve ser perdida em detalhes desnecessários. Adotar a abordagem infográfica significa conteúdo mais limpo, informações acionáveis ​​e, sem distrações.

Iconográfico	Infográfico

Recapitulação e lista de verificação

• Seja dinâmico e ativo com a comunicação.
• Use a tipografia com beleza.
• Use cores fortes e vibrantes.
• Conecte-se à nuvem para que seus usuários possam permanecer conectados entre eles.

Aproveite todos os recursos de integração

Este princípio é sobre unificar o seu próprio trabalho, alinhando-o com o ecossistema comum, sempre que possível, e inovando, sempre que necessário. Fatore seu trabalho para aplicativos e cenários de usuários em diferentes plataformas funcionarem juntos como uma experiência familiar e uma marca. Os usuários acham que a familiaridade capacita e eles não querem reaprender sobre com aquilo com que cada superfície interage. Então, construa sobre a plataforma comum de software e serviços da Microsoft. Baseie suas experiências em controles, gestos, padrões de interação, animações estabelecidos e comuns e até mesmo autenticação comum e serviços de armazenamento em nuvem.

Em outras palavras, não tente reinventar a roda. A inovação é ótima, mas não às custas da experiência do usuário. Cada aplicativo também transmite um certo tom de voz, uma personalidade que ressoa com os usuários. Verifique como abordamos Voz e comece a pensar sobre como usá-la em seu aplicativo. Descubra o que funciona para o seu aplicativo e não hesite em imitar o que se revelou eficaz.

Pense em plataforma

Considere como seu aplicativo pode funcionar em todo o ecossistema de dispositivos da Microsoft e fatores forma. Pergunte a si mesmo: "No que este dispositivo é melhor?" e otimize a experiência para os pontos fortes únicos. A utilização de várias plataformas pode mesmo ceder-lhe a oportunidade de projetar para cenários que não são possíveis com a construção de apenas uma plataforma.

Recapitulação e lista de verificação

• Use o modelo de interface do usuário.
• Trabalhe com outros aplicativos para concluir cenários participando em contratos de aplicativos.
• Use nossas ferramentas e modelos para promover consistência.

Os princípios de um bom design se aplicam independentemente da apresentação visual de sua marca. Um design com princípios produz experiências que os usuários apreciam e nas quais confiam.

Tópicos relacionados

Planejando aplicativos da Windows Store

Design de navegação para aplicativos da Windows Store

Design de comandos para aplicativos da Windows Store

Design da interação por toque

Diretrizes de UX para aplicativos da Windows Store

Criando excelentes aplicativos da Windows Store

Acessibilidade para aplicativos da Windows Store

Princípios e linguagem: uma visão independente