Bordas

As bordas são uma ferramenta de interação bela e poderosa que são parte integrante do Windows. O design das bordas é baseado no princípio Faça mais com menos. As bordas oferecem uma variedade de opções para fazer mais com menos. Elas permitem mover elementos para fora da tela se estes não estiverem diretamente relacionados ao conteúdo que está sendo exibido. Elas fornecem aos usuários maneiras confiáveis e intuitivas de navegar, que dão uma sensação de naturalidade em qualquer dispositivo.

Bordas no Windows

Barras de aplicativos

A barra de aplicativos superior também é chamada de barra de navegação, porque os aplicativos geralmente colocam controles de navegação nessa barra.

A barra de aplicativos inferior também é chamada de barra de comandos, porque os aplicativos geralmente colocam comandos nessa barra.

As barras de aplicativos são suas para você criar. Elas não interagem com o sistema. Você pode optar por colocar outras informações contextualmente relevantes na barra de aplicativos superior ou inferior em vez de (ou além de) controles de navegação e comandos. Por exemplo, em um aplicativo de compras, você poderia colocar o conteúdo do carrinho de compras do usuário na barra de aplicativos superior. Esse posicionamento permite que o usuário se concentre nas compras, mas possibilita uma referência rápida ao carrinho e ao procedimento de check-out. Em um aplicativo de música, você poderia colocar os controles de mídia, como reproduzir, pausar e avançar, na barra de aplicativos inferior. Esses controles ficam ocultos até o usuário selecionar uma música, momento em que se tornam contextualmente relevantes.

Botões

Os botões são o uso mais icônico das bordas. Eles iniciam as interações do sistema. O usuário invoca os botões passando o dedo a partir da borda direita da tela ou apontando para o canto superior ou inferior direito. Para saber mais, veja Botões e contratos.

Borda esquerda

A borda esquerda é o centro de comando do usuário para exibir aplicativos usados recentemente, alternar aplicativos e colocar vários aplicativos na tela lado a lado.

Inovação com bordas

Incentivamos você a encontrar maneiras novas e inovadoras de usar as bordas no design do seu aplicativo. Você pode até optar por não implementar barras de aplicativos ou usá-las minimamente. Por exemplo, o aplicativo Xbox Music inclui a maioria dos comandos na tela e coloca pouquíssimos controles na barra de aplicativos.

Os controles padrão e o posicionamento típico são apenas o ponto de partida. Use a criatividade para descobrir o que você pode fazer com as bordas em seu aplicativo.

Exemplos de bordas

No exemplo a seguir, o aplicativo usa a barra de aplicativos superior para exibir vídeos relacionados e a barra de aplicativos inferior para comandos relacionados ao vídeo que está sendo executado no momento.

No aplicativo NatureSpace, a barra de aplicativos inferior é muito sutil e não abrange toda a largura da tela, mas ainda fornece uma superfície de comando válida para o usuário controlar a trilha atual.

Barras de aplicativos não precisam ter a mesma aparência das encontradas nos modelos padrão. Você pode criar seu design de acordo com a sua marca. Neste exemplo da Disney, a barra de aplicativos parece fazer parte do livro de histórias.

Tópicos relacionados

Padrões de navegação

Padrões de comando