Design para aplicativos do Windows

Aqui, você encontrará diretrizes de design e exemplos para criar experiências de aplicativos do Windows. O Windows 11 incorpora a linguagem de design e os princípios do Fluent para uma aparência coesa que é exclusivamente da Microsoft.

Para obter os blocos de construção para criar experiências do Windows, use o WinUI. Esses componentes incorporam a linguagem de design do Fluent, para que você possa ter certeza de que está criando ótimas experiências no ecossistema do Fluent.

Princípios de design do Windows 11

Vários elementos de design do Windows 11

O Windows 11 marca uma evolução visual do sistema operacional. Evoluímos nossa linguagem de design junto com o Fluent para criar um design humano, universal e que realmente se pareça com o Windows.

Os princípios de design abaixo nos orientaram durante todo o percurso para tornar o Windows a melhor implementação da categoria do Fluent.

Sem esforço

O Windows 11 é mais rápido e intuitivo. É fácil fazer o que eu quero, com foco e precisão.

Simples

O Windows 11 é mais suave e organizado. Ele esmaece em segundo plano para ajudar a manter a atenção e o foco. A experiência parece calorosa, etérea e acessível.

Pessoal

O Windows 11 se adapta perfeitamente à maneira como uso meu dispositivo. Ele se adapta às minhas necessidades e preferências individuais para que eu possa realmente me expressar.

Familiar

O Windows 11 equilibra uma aparência nova e atualizada com a familiaridade do Windows que eu já conheço. Não há nenhuma curva de aprendizado; basta começar a usar.

Completo + coerente

O Windows 11 oferece uma experiência visualmente perfeita entre plataformas. Posso trabalhar em muitas plataformas e ainda ter uma experiência Windows consistente.

Experiências de assinatura do Windows 11

As experiências exclusivas são os elementos de design que o Windows 11 usa para expressar sua linguagem visual, mantendo uma aparência coerente em todas as experiências Fluent.

Uma janela e uma caixa de diálogo modal no modo claro à esquerda e no modo escuro à direita

Cor

A cor ajuda os usuários a se concentrarem em suas tarefas indicando uma hierarquia visual e uma estrutura entre elementos da interface do usuário. O Windows 11 usa cores para fornecer uma base relaxante, aprimorando sutilmente as interações do usuário e enfatizando itens significativos somente quando necessário.

Uma janela do aplicativo com uma área de conteúdo

Elevação e camadas

Elevação e camadas é o conceito de sobreposição de uma superfície com outra, criando duas ou mais áreas visualmente distintas dentro da mesma superfície. O Windows 11 usa elevação e camadas como base para a hierarquia de aplicativos.

Um ícone de carrinho de compras

Iconografia

A iconografia é um conjunto de imagens e símbolos visuais que ajudam os usuários a entender e navegar pelo aplicativo. A iconografia do Windows 11 evoluiu em conjunto com nossa linguagem de design. Cada glifo em nossa fonte de ícones do sistema foi reprojetado para adotar uma geometria mais suave e metáforas mais modernas.

Uma superfície de interface do usuário feita de acrílico

Materiais

Os materiais são efeitos visuais que fazem com que as superfícies da interface do usuário se pareçam com artefatos da vida real. O Windows 11 usa materiais para manter a interface do usuário conectada ao seu ambiente. Os materiais trazem superfícies à vida e nos ajudam a distinguir entre aplicativos focados e desfocados.

Vários elementos da interface do usuário realçando a nova geometria no Windows 11

Formas e geometria

A geometria descreve a forma, o tamanho e a posição dos elementos da interface do usuário na tela. Esses elementos de design fundamentais ajudam as experiências a parecerem coerentes em todo o sistema de design. O Windows 11 apresenta geometria atualizada que cria uma experiência mais acessível, envolvente e moderna.

Várias palavras renderizadas em Segoe UI Variable

Tipografia

Como representação visual da linguagem, a principal tarefa da tipografia é comunicar informações. O sistema de tipos do Windows 11 ajuda você a criar estrutura e hierarquia em seu conteúdo para maximizar a legibilidade na interface do usuário.

Uma imagem animada que mostra vários exemplos de movimento na interface do usuário do Windows.

Movimento

O movimento descreve a maneira como a interface anima e responde à interação do usuário. O movimento no Windows é reativo, direto e de contexto apropriado. Ele fornece comentários para a entrada do usuário e reforça paradigmas espaciais compatíveis com a descoberta de caminho.