Introdução ao design de aplicativos do WindowsIntroduction to Windows app design

exemplo de aplicativo de iluminação

As diretrizes de design de aplicativos do Windows são recursos que ajudam você a projetar e criar aplicativos belos e refinados.The Windows app design guidance is a resource to help you design and build beautiful, polished apps.

Não é uma lista de regras limitadoras, é um documento dinâmico, projetado para se adaptar ao nosso Sistema de Design Fluente, que está em constante evolução, bem como às necessidades de nossa comunidade de criação de aplicativos.It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

Esta introdução fornece uma visão geral dos recursos de design universais inclusos em todos os aplicativos UWP, ajudando na criação de interfaces de usuário (IU) que se adequam perfeitamente a vários dispositivos.This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

Dimensionamento e pixels eficazesEffective pixels and scaling

Os aplicativos UWP funcionam em todos os dispositivos Windows 10, na TV, no tablet ou no computador.UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. Então como projetar uma interface de usuário que tenha aparência satisfatória em uma enorme variedade de dispositivos e tamanhos de tela?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

o mesmo aplicativo em vários dispositivos

A UWP ajuda ao ajustar automaticamente os elementos da interface do usuário para que sejam legíveis e fáceis de interagir em todos os dispositivos e tamanhos de tela.UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

Quando seu aplicativo é executado em um dispositivo da plataforma Windows, o sistema usa um algoritmo para normalizar a forma como os os elementos da interface do usuário são exibidos na tela.When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. Esse algoritmo de dimensionamento leva em conta a distância de visualização e a densidade da tela (pixels por polegada) para otimizar o tamanho percebido (em vez do tamanho físico).This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). O algoritmo de dimensionamento garante que uma fonte de 24 px no Surface Hub a aproximadamente 3 m de distância seja tão legível para o usuário quanto uma fonte de 24 px no telefone com tela de 5 polegadas a alguns centímetros de distância.The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

distâncias de visualização em diferentes dispositivos

Devido ao modo como o sistema de dimensionamento funciona, ao criar seu aplicativo UWP, você está criando em pixels efetivos, não em pixels físicos reais.Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. Pixels efetivos (epx) são uma unidade virtual de medição, e são usados para expressar espaçamento e dimensões de layout, independentemente da densidade de tela.Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. (Em nossas diretrizes, epx, ep e px são intercambiáveis.)(In our guidelines, epx, ep, and px are used interchangeably.)

Você pode ignorar a densidade de pixels e a resolução de tela real ao projetar.You can ignore the pixel density and the actual screen resolution when designing. Crie o projeto para obter a resolução efetiva (a resolução em pixels efetivos) de uma classe de tamanho (para obter detalhes, consulte o artigo Tamanhos de tela e pontos de interrupção).Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

Dica

Ao criar modelos de tela em programas de edição de imagens, defina o DPI para 72 e defina as dimensões da imagem para a resolução efetiva da classe de tamanho pretendida.When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. Para obter uma lista de classes de tamanho e resoluções eficazes, confira o artigo Tamanhos de tela e pontos de interrupção.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Múltiplos de quatroMultiples of four

Os tamanhos, margens e posições dos elementos de interface do usuário devem estar sempre em múltiplos de 4 epx em aplicativos UWP.The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

A UWP é dimensionada em uma variedade de dispositivos com níveis de ajuste de dimensionamento de 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% e 400%.UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. A unidade base é 4 porque é o único inteiro que pode ser dimensionado por números não inteiros (por exemplo, 4 * 1,5 = 6).The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (for example, 4*1.5 = 6). O uso de múltiplos de quatro alinha todos os elementos da interface do usuário com pixels inteiros e fazem os elementos da interface do usuário terem bordas nítidas.Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (Observe que esse requisito não se aplica ao texto; o texto pode ter qualquer tamanho e posição.)(Note that text doesn't have this requirement; text can have any size and position.)

grade

LayoutLayout

Como os aplicativos UWP são dimensionados automaticamente para todos os dispositivos, a criação de um aplicativo UWP para qualquer dispositivo segue a mesma estrutura.Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. Vamos começar desde o início da interface do usuário do seu aplicativo UWP.Let's start from the very beginning of your UWP app's UI.

Janelas, quadros e páginasWindows, Frames, and Pages

Quando um aplicativo UWP é lançado em qualquer dispositivo Windows 10, ele é iniciado em uma Janela com um Quadro, que pode navegar entre instâncias de Página.When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Captura de tela da janela com um quadro.

É possível pensar na interface do usuário do aplicativo como uma coleção de páginas.You can think of your app's UI as a collection of pages. Cabe a você decidir o que deve ir em cada página e as relações entre elas.It's up to you to decide what should go on each page, and the relationships between pages.

Para saber como é possível organizar suas páginas, confira Noções básicas sobre navegação.To learn how you can organize your pages, see Navigation basics.

Captura de tela da página de coleção.

Layout de páginaPage layout

Como deve ser a aparência dessas páginas?What should those pages look like? A maioria das páginas segue uma estrutura comum para oferecer consistência, permitindo que os usuários naveguem facilmente entre as páginas do seu aplicativo.Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. As páginas normalmente contêm três tipos de elementos da interface do usuário:Pages typically contain three types of UI elements:

  • Os elementos Navigation ajudam os usuários a escolher o conteúdo que desejam exibir.Navigation elements help users choose the content they want to display.
  • Os elementos Command iniciam ações, como manipulação, gravação ou compartilhamento de conteúdo.Command elements initiate actions, such as manipulating, saving, or sharing content.
  • Os elementos Content exibem o conteúdo do aplicativo.Content elements display the app's content.

Um padrão comum de layout

Para saber mais sobre como implementar padrões comuns de aplicativo UWP, confira o artigo Layout de página.To learn more about how to implement common UWP app patterns, see the Page layout article.

Também é possível usar o Windows Template Studio no Visual Studio para começar com um layout para seu aplicativo.You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

ControlesControls

A plataforma de design da UWP fornece um conjunto de controles comuns que funciona em todos os dispositivos do Windows e segue os princípios do nosso Sistema de Design Fluente.UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. Esses controles incluem tudo, desde controles simples, como botões e elementos de texto, a controles sofisticados que podem gerar listas a partir de um conjunto de dados e um modelo.These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

Controles da UWP

Para obter uma lista completa de controles UWP e dos padrões que você pode criar a partir deles, confira a seção controles e padrões.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

EstiloStyle

Os controles comuns refletem automaticamente o tema e a cor de destaque do sistema, funcionam com todos os tipos de entrada e dimensionam para todos os dispositivos.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. Assim, eles refletem o Sistema de Design Fluente: são adaptáveis, fáceis de usar e têm ótima aparência.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. Os controles comuns usam iluminação, movimento e profundidade nos estilos padrão, portanto, ao usá-los, você incorpora nosso Sistema de Design Fluente ao seu aplicativo.Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

Os controles comuns são altamente personalizáveis: você pode alterar a cor de primeiro plano de um controle ou personalizar completamente sua aparência.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. Para substituir os estilos padrão nos controles, use o estilo leve ou crie os controles personalizados em XAML.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

Gif da cor de destaque

ShellShell

Seu aplicativo UWP interage com a experiência mais ampla do Windows com blocos e notificações no Shell do Windows.Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

Os blocos são exibidos no menu Iniciar e quando seu aplicativo é iniciado e fornecem uma prévia do que está acontecendo em seu aplicativo.Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. A energia deles vem do conteúdo por trás deles e da inteligência e habilidade com a qual são oferecidos.Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

Os aplicativos UWP têm quatro tamanhos de bloco (pequeno, médio, largo e grande) que podem ser personalizados com o ícone e a identidade do aplicativo.UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. Para obter diretrizes sobre design de blocos para seu aplicativo UWP, consulte Diretrizes para blocos e ativos de ícones.For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

blocos no menu Iniciar

EntradasInputs

Os aplicativos UWP dependem de interações inteligentes.UWP apps rely on smart interactions. É possível criar uma interação de clique sem precisar saber nem definir se o clique vem de um mouse, de uma caneta ou do toque de um dedo.You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. No entanto, você também pode criar seus aplicativos para modos de entrada específicos.However, you can also design your apps for specific input modes.

Captura de tela de ícones que designam diferentes modelos de entrada.

DispositivosDevices

dispositivos

Da mesma forma, enquanto a UWP dimensiona automaticamente seu aplicativo para diferentes dispositivos, você também pode otimizar seu aplicativo UWP para dispositivos específicos.Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

UsabilidadeUsability

Um breve vídeo de indivíduos desenhados mostrando pessoas com diferentes habilidades.

Por último, mas não menos importante, a usabilidade significa tornar a experiência de seu aplicativo acessível para todos os usuários.Last but not least, usability is about making your app's experience open to all users. Todos podem se beneficiar de experiências do usuário realmente inclusivas, confira usabilidade para aplicativos UWP para ver como tornar seu aplicativo fácil de usar para todos.Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

Se estiver projetando para um público internacional, confira Globalização e localização.If you're designing for international audiences, you might want to check out Globalization and localization.

Considere também os recursos de acessibilidade para usuários com visão, audição e mobilidade limitada.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. Se a acessibilidade estiver integrada ao seu design desde o início, então tornar seu aplicativo acessível deve demandar pouco tempo e esforço adicional.If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

Ferramentas e kits de ferramentas de designTools and design toolkits

Agora que você sabe sobre os recursos de design básicos, que tal começar a criar seu aplicativo UWP?Now that you know about the basic design features, how about getting started with designing your UWP app?

Fornecemos uma variedade de ferramentas para ajudá-lo no processo de design:We provide a variety of tools to help your design process:

  • Confira nossa página de kits de ferramentas de design para ter acesso aos kits de ferramentas do XD, Illustrator, Photoshop, Framer e Sketch, além de ferramentas de design adicionais e baixar fontes.See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • Para configurar sua máquina para que ela escreva códigos para aplicativos UWP, confira nosso artigo Introdução e prepare-se para começar.To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • Para obter inspiração sobre como implementar a interface do usuário para UWP, dê uma olhada em nossos exemplos de aplicativos UWP completos.For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

Resumo do vídeoVideo summary

Próximo: Sistema Fluent DesignNext: Fluent Design System

se você quiser saber mais sobre os princípios por trás do Design Fluente (sistema de design da Microsoft) e ver mais recursos que podem ser incorporados em seu aplicativo UWP, vá para o Sistema de Design Fluente.If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.