Adotando a interface do usuário sob demanda com a barra de aplicativos

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Adotando a interface do usuário sob demanda com a barra de aplicativos

  • Comments 0

Criar um ótimo aplicativo significa melhorar aquilo que o torna o melhor em sua categoria e fazê-lo brilhar. O Windows 8 fornece ferramentas como botões e barras de aplicativos para dar destaque a tudo o que torna o seu aplicativo o melhor de sua classe e minimizar o que o afasta disso. Aprenda a usar essas ferramentas e o seu aplicativo para que os seus usuários possam realmente apreciar o que torna o seu aplicativo excelente.

Focalizando a maior qualidade do seu aplicativo

Quando você assiste a um filme no cinema, o filme é reproduzido em uma tela enorme para que todos possam ver. O resto do cinema fica escuro. O som surround está em todo lugar para que o filme seja tudo o que você possa ouvir. As pessoas falam sobre os filmes que você precisa assistir no cinema e isso não vale a pena se você não tiver uma experiência de cinema na qual esteja totalmente imerso no filme. Os diálogos ficam mais claros, a imagem é mais viva. Você pode quase sentir que está lá. Ou seja, até que a pessoa que está ao seu lado receba uma chamada no celular, você se distrai, e é retirado da experiência. Cada distração impede que você, pouco a pouco, aproveite completamente o filme.

Seu aplicativo é o cinema e o conteúdo dele é o filme. Essa ideia de criar um ambiente para os usuários mergulharem em seu aplicativo é fundamental para o novo design. Na postagem em Criando aplicativos estilo Metro que se destaquem da concorrência, falamos sobre usar uma frase que descreva a melhor qualidade de seu aplicativo em sua categoria. Se você souber qual deve ser a melhor qualidade de seu aplicativo e focalizar nisso, o Windows 8 fornecerá as ferramentas para que você mantenha tudo o mais (todas as distrações) afastado até que o usuário necessite. Fizemos um tour por essa ideia usando um aplicativo de exemplo chamado Food with Friends.

Criamos estas páginas no Food with Friends:

A hierarquia do Food with Friends

Figura 1: A hierarquia do Food with Friends

Baseado no que já foi criado no Food with Friends, você pode responder às sugestões dos amigos sobre o que fazer hoje à noite, descobrir a quais restaurantes seus amigos querem ir e encontrar os restaurantes aos quais você deseja ir. Ainda existem coisas que você ainda não pode fazer. Você não pode adicionar restaurantes à sua lista de desejos, classificar ou filtrar a lista de restaurantes nem pesquisar por um restaurante em particular. Mas tudo bem. Toda essa funcionalidade é importante, mas não é a melhor qualidade de seu aplicativo. Lembre-se da última postagem:

  • O Food with Friends é o melhor aplicativo em sua categoria ao ajudar usuários e seus amigos a localizar um restaurante para jantar.

Com certeza, isso é exatamente o que você pode fazer interagindo com a interface do usuário do aplicativo que acabamos de criar. A afirmação o melhor da categoria está perfeitamente representada na tela. Se tivéssemos que adicionar botões e widgets para permitir que os usuários adicionem itens que você deseja à sua lista de desejos ou classificar e filtrar listas, isso apenas desviaria a atenção dos usuários do conteúdo quando esses comandos não fossem necessários. Mas haverá momentos em que o usuário precisará acessar esses comandos. Portanto, para onde foram esses comandos secundários, mas importantes?

O Windows 8 oferece formas padrão para os usuários acessarem a interface do usuário nos aplicativos. Essa interface do usuário se torna disponível sob demanda e fica oculta até exatamente quando o usuário desejá-la. Quando os comandos estão disponíveis sob demanda, você não precisa distrair os usuários, sobrecarregando a tela de seu aplicativo. A interface do usuário sob demanda permite que você focalize cada pixel de seu aplicativo com base na afirmação melhor em sua categoria. Existem dois mecanismos que praticamente todos os aplicativos usam para expor sua interface do usuário sob demanda: botões e barras de aplicativos. Já que os botões e as barras de aplicativos estarão disponíveis no ecossistema e sempre são invocados de uma forma padrão, você pode contar que os usuários irão exibi-los quando precisarem deles, e focalizar no conteúdo de seu aplicativo quando eles não precisarem.

Botões

Barra de botões

Figura 2: A Barra de botões

Ao projetar o Windows 8, reconhecemos que existem alguns recursos que praticamente qualquer aplicativo terá e que são recursos que todos os usuários esperam em um ótimo aplicativo. Graças à ubiquidade deles, criamos um lugar permanente para esses comandos, chamado botões, em cada aplicativo. Os botões fornecem pontos de entrada para pesquisar, compartilhar, conectar a dispositivos, e configurações em cada aplicativo e no sistema em si. Você pode usá-los em qualquer lugar no sistema. Portanto, ao criar seu aplicativo, você não precisa descobrir uma forma mais inteligente de os usuários compartilharem seu conteúdo com outros aplicativos ou redes sociais, ou onde colocar a sua caixa de pesquisa. Não é isso que vai diferenciar seu aplicativo de todos os outros. As configurações podem ser importantes, mas elas não precisam tirar a atenção dos recursos realmente importantes e legais que você criou. Os botões oferecem aos usuários uma forma padrão de acessar esses recursos. Melhor de tudo, eles ficam fora da tela a menos que o usuário solicite-os, portanto, eles não tiram a atenção do que realmente diferencia o seu aplicativo; o conteúdo. Os usuários exibem os botões ao passar o dedo a partir da direita, arrastando o mouse para o canto direito, ou pressionando a tecla Windows + C, e isso funciona em qualquer parte do sistema.

A barra de aplicativos e a barra de navegação

A barra de aplicativos e a barra de navegação no aplicativo Sports

Figura 3: A barra de aplicativos e a barra de navegação

Embora os botões forneçam uma forma padrão de os usuários acessarem os recursos de praticamente qualquer aplicativo, a barra de aplicativos e as barras de navegação são formas de obter a funcionalidade específica de cada aplicativo individual. As seções de um aplicativo que preenchem uma barra de navegação são diferentes de aplicativo para aplicativo. Os comandos de uma barra de aplicativos são contextuais no aplicativo, na página ou até mesmo na seleção atual. Embora as barras de aplicativos e as barras de navegação sejam diferentes de aplicativo para aplicativo, elas são ferramentas poderosas de cada aplicativo porque é assim que todos os aplicativos funcionam. Entre todos os aplicativos, os usuários acessam sua interface do usuário sob demanda, passando o dedo a partir da parte superior ou inferior da tela, clicando com o botão direito em qualquer local no aplicativo com um mouse, ou pressionando a tecla Windows + Z em um teclado, e isso funciona em cada aplicativo com barras de aplicativos ou barras de navegação.

A interface do usuário sob demanda padrão do Windows 8 é o que permite aos usuários gastar o tempo deles explorando o conteúdo de seu aplicativo e não descobrindo a interface do usuário. O motivo disso funcionar é que ela é consistente e previsível no Windows e entre aplicativos. No restante desta postagem, falamos sobre como projetar e criar ótimas barras de aplicativos. Em postagens futuras, entraremos em mais detalhes sobre outras funcionalidades do sistema, como botões individuais, que ajudam você a explorar o que há de melhor no seu aplicativo, enquanto obtém todo o benefício do ecossistema de aplicativos do Windows 8.

O que vai em uma barra de aplicativos

A primeira coisa a pensar ao criar uma barra de aplicativos é o que vai nela. Como falamos anteriormente, são os recursos que devem estar disponíveis somente sob demanda porque eles não são fundamentais nos cenários principais em que seu aplicativo é o melhor. Você geralmente pode identificar essas coisas, determinando se elas vão ser usadas frequentemente no ciclo de vida do aplicativo. Para obter um exemplo, observe a barra de aplicativos do SkyDrive do Release Preview:

A barra de aplicativos do SkyDrive

Figura 4: A barra de aplicativos do SkyDrive

O aplicativo SkyDrive é o melhor em dar acesso aos usuários a seu vasto conteúdo de qualquer lugar. Portanto, a tela do aplicativo focaliza a navegação nesse conteúdo. Obviamente, adicionar arquivos é uma parte importante do aplicativo. Afinal de contas, de que outra forma você obteria essa vasta coleção? Mas isso não é algo que os usuários farão o tempo todo, portanto, o botão Adicionar é excelente para ser disponibilizado sob demanda. Dessa forma, cada pixel da tela do aplicativo é dedicado a navegar em sua coleção, até que haja uma vez em que você decida adicionar novos arquivos. Nesses casos, seus usuários saberão exatamente como exibir o comando Adicionar porque ele aparece da mesma forma que a interface do usuário oculta específica do aplicativo é mostrada no sistema.

Criando uma barra de aplicativos

O controle AppBar em WinJS e XAML é a melhor forma de criar a interface do usuário sob demanda. Você pode usá-lo para criar uma barra de aplicativos na parte inferior da tela e uma barra de navegação na parte superior (embora focalizemos o primeiro caso aqui).

A coisa mais importante sobre uma ótima barra de aplicativos é que ela mostra todos os comandos de aplicativo disponível para o usuário usar sob demanda o gestual padrão (passar o dedo da parte superior/inferior, clicar com o botão direito do mouse ou pressionar a tecla Windows + Z. O controle da barra de aplicativos proporciona esse comportamento gratuitamente e, além disso, facilita muito a criação de um aplicativo básico que se encaixe na aparência geral.

Por exemplo, se você tivesse que criar uma barra de aplicativos para a página principal do Food with Friends, o único comando relevante por padrão é a habilidade de criar um novo plano para hoje à noite, portanto, isso seria a nossa barra de aplicativos:

A barra de aplicativos do Food with Friends a partir da página principalFigura 5: Barra de aplicativos do Food with friends

HTML

É fácil criar uma barra de aplicativos padrão em HTML. Apenas crie um controle AppBar e, em seguida, colocar controles AppBarCommand dentro dele, definindo propriedades neles, conforme apropriado. Isso se tornou ainda mais fácil com a enumeração AppBarIcons, que é uma lista de ícones pré-construída e pronta para ser usada que coincide com o novo estilo.

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',
label:'New plan',
icon:'add',
section:'global',
tooltip:'Create a new plan'}"
>
</button>
</div>

XAML

Para criar um AppBar em XAML, instancie um elemento AppBar e defina-o como a propriedade BottomAppBar ou TopAppBar no objeto Page, dependendo de onde você deseja que o AppBar apareça. Em seguida, adicione botões no AppBar usando estilos de estoque fornecidos nos modelos de projeto padrão do Visual Studio para aplicativos da Windows Store. Em XAML, você decide como deseja distribuir os botões no AppBar, colocando os botões nos painéis de layout desejados.

<Page.BottomAppBar>
<AppBar>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource AddAppBarButtonStyle}"
AutomationProperites.Name="New plan"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

Controles que podem ir na barra de aplicativos

Comumente vemos alguns tipos de comandos nas barras de aplicativos: botões, botões de alternância e em JS, submenus. Para obter exemplos de cada um desses tipos, observe a barra de aplicativos do aplicativo Email no Release Preview:

A barra do aplicativo Email usando botões, botões de alternância e submenus. O botão More (Mais) inicia um menu, o botão Font (Fonte) inicia um submenu e o botão Underline (Sublinhado) é um botão de alternância

Figura 6: Barra do aplicativo Email

A barra do aplicativo Email possui exemplos de botões padrão (como Colar), botões de alternância (como Negrito, Itálico e Sublinhado) e botões que iniciam menus (como Mais) e submenus personalizados (como Fonte, cor da Fonte e Realce). Para criar esses tipos de botão em JS, consulte Objeto AppBarCommand. Em XAML, siga os estilos dos modelos de projeto e para os submenus, use a classe Popup com leve comportamento de ignorar.

Contextualizando a barra de aplicativos

Fornecendo a interface do usuário sob demanda somente se os usuários souberem exatamente onde encontrá-la. Se eles precisarem procurar em cada canto de seu aplicativo ou experimentar cada item da interface do usuário, procurando o próximo comando oculto, então eles não terão muita chance de realmente aproveitar o seu aplicativo. Por isso que uma barra de aplicativos bem-sucedida sempre exibe todos os comandos que estão disponíveis em um determinado momento. Os comandos relevantes podem variar com base em algumas coisas: a página atual, a seleção atual ou qualquer coisa que mude o estado de seu aplicativo. Nesses casos, mostre todos os comandos que sejam relevantes, os que ficam disponíveis globalmente (porque ainda funcionam) e aqueles que são específicos ao contexto atual. Por exemplo, se você clicar com o botão direito do mouse na tela inicial sem uma seleção, a barra de aplicativos terá apenas o botão Todos os aplicativos:

A barra de aplicativos da tela inicial

Figura 7: A barra de aplicativos da tela inicial

Se você clicar com o botão direito do mouse em um bloco para selecioná-lo, a barra de aplicativos terá o botão Todos os aplicativos em sua posição normal, mas também possui os comandos específicos do bloco à esquerda:

A barra de aplicativos da tela inicial mostrando comandos específicos do bloco

Figura 8: A barra de aplicativos da tela inicial mostrando comandos específicos do bloco

Quando mantemos todos os comandos relevantes visíveis, os usuários podem clicar com o botão direito do mouse em qualquer lugar da interface de usuário sob demanda. Eles não precisam ter cuidado para ter certeza de clicar com o botão direito do mouse, mas não selecionar um bloco por engano. Colocando os comandos que vão e vêm à esquerda (ou à direita nos idiomas da direita para a esquerda), você fornece um local previsível para os usuários verem o que podem fazer com a seleção deles. Os usuários podem confiar que clicar com o botão direito do mouse em qualquer lugar mostra todos os comandos disponíveis, e qualquer coisa específica de sua seleção aparece à esquerda.

O motivo pelo qual os comandos contextuais que vão e vêm ficam à esquerda é ergonômico. Descobrimos através de estudos que a maioria dos usuários (inclusive os canhotos) usam dispositivos sensíveis ao toque com a mão direita. Se os comandos baseados em seleção aparecessem à direita, então ao levantar seu braço direito para selecionar um item você cobriria os novos comandos que acabaram de aparecer! Da mesma forma, colocar comandos que sempre estão presentes à direita permite que você use a mão direita para acessá-los, o que é ideal porque a maioria dos usuários interage com dispositivos sensíveis ao toque com a mão direita. Portanto, colocar comandos que vão e vêm à esquerda, e comandos que estão sempre à direita em uma determinada tela, torna mais eficaz para os usuários os acessarem com o toque.

Na página principal do Food with Friends, essa é a barra de aplicativos padrão quando nada é selecionado:

Barra de aplicativos do Food with Friends na página principal sem nada selecionado na página

Figura 9: A barra de aplicativos do Food with Friends na página principal, sem seleção

Ao selecionar um restaurante, você tem a chance de adicioná-lo ou removê-lo da lista de desejos. Portanto ao
selecionar um restaurante, um botão de alternância da lista de desejos aparece na barra de aplicativos:

A barra de aplicativos do Food with Friends na página principal com um evento selecionado

Figura 10: A barra de aplicativos do Food with Friends na página principal com um evento selecionado

Como na tela inicial, os comandos que vêm e vão baseados em seleção aparecem à esquerda para se separarem do comando Novo plano sempre presente.

Aqui está como você coloca os comandos em lados separados da barra de aplicativos, e como fazer os comandos irem e virem.

HTML

Para colocar um comando no lado esquerdo, você deve colocá-lo na seção de seleção. Para ocultá-lo por padrão, defina a propriedade hidden (oculta) como true (verdadeira). A propriedade extraclass (extraclasse) permite que você se refira facilmente a um conjunto de comandos no código, portanto, a usamos para agrupar os comandos que devem aparecer juntos após a seleção de um evento.

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',
label:'New plan',
icon:'add',
section:'global'"
>
</button>

<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdWishlist',
label:'Wishlist',
icon:'favorite',
section:'selection',
hidden:'true',
extraClass:'restaurantSelection'}"
>
</button>
</div>

Para mostrar e ocultar comandos dinamicamente na barra de aplicativos, simplesmente chame:

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);

Para observar todos os ícones fornecidos na barra de aplicativos, verifique a enumeração AppBarIcon. Para obter uma lista completa das propriedades AppBarCommand, consulte o objeto WinJS.UI.AppBarCommand.

XAML

O controle AppBar XAML não gerencia o layout dos botões por padrão, portanto, para seguir o layout prescrito usando as seções de comando à esquerda e à direita, você deve fornecer os painéis de layout necessários para hospedar os botões. Aqui usamos uma Grade que contém duas colunas, cada uma ocupando a metade do AppBar. Em seguida, adicionamos dois StackPanels, um alinhado à esquerda e um alinhado à direita para conter os botões.

É possível ocultar/mostrar botões AppBar XAML, simplesmente configurando a propriedade Visibility de cada botão, mas isso não fará com que os botões sejam animados corretamente. Para coincidir com o comportamento do AppBar HTML de animar botões para dentro e para fora, você precisa adicionar AddDeleteThemeTransition à propriedade ChildrenTransitions de cada painel que hospeda botões AppBar. Em seguida, para acionar essas animações de transição, você deve realmente remover/adicionar os botões do controle AppBar.

<Page.BottomAppBar>
<AppBar x:Name="BottomAppBar1" IsSticky="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<Button x:Name="New" Style="{StaticResource AddAppBarButtonStyle}" AutomationProperties.Name="New" Tag="New"/>
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

private void AddEventSelectionCommands(object sender, RoutedEventArgs e)
{
Button inButton = new Button();
Button vetoButton = new Button();
Button mehButton = new Button();

inButton.Style = App.Current.Resources["AcceptAppBarButtonStyle"] as Style;
inButton.AutomationProperties.Name = "In";
vetoButton.Style = App.Current.Resources["CancelAppBarButtonStyle"] as Style;
vetoButton.AutomationProperties.Name = "Veto";
mehButton.Style = App.Current.Resources["HelpAppBarButtonStyle"] as Style;
mehButton.AutomationProperties.Name = "Meh";

// Make it the second item
LeftPanel.Children.Insert(1, inButton);
LeftPanel.Children.Insert(2, vetoButton);
LeftPanel.Children.Insert(3, mehButton);
}

Ela está lá quando você precisa dela

Parte da criação de uma barra de aplicativos contextual também é mostrá-la quando o usuário a deseja. Por exemplo, quando você seleciona um bloco na tela inicial (passando o dedo para baixo no bloco, clicando com o botão direito do mouse em um bloco ou pressionando Ctrl + Espaço com foco em um bloco), em seguida, a barra de aplicativos é mostrada automaticamente desde que você tenha uma seleção. Se um usuário seleciona um bloco é porque ele quer fazer algo com ele. A barra de aplicativos é onde você faz as coisas, portanto, é por isso que ela deve ser mostrada. Semelhantemente, quando um usuário está escrevendo um email e você seleciona texto, a barra do aplicativo Email é mostrada com os comandos copiar/colar e formatação. Afinal de contas, se um usuário selecionar texto, provavelmente é porque deseja fazer algo com ele!

Normalmente, a barra de aplicativos pode ser ignorada facilmente. Isso significa que se o usuário tocar fora da barra de aplicativos, ela desaparece. Sempre que você exibe a barra de aplicativos programaticamente (como faria na seleção), é importante desabilitar o recurso de ignorar facilmente, tornando a barra de aplicativos adesiva. Isso permite que os usuários alterem sua seleção depois do fato, ou façam seleções múltiplas, sem ignorar a barra de aplicativos. Não se esqueça de reabilitar o recurso de ignorar facilmente quando a seleção for limpa!

HTML

Este é o código para manipular um objeto que é selecionado:

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);
appbar.sticky = true;
appbar.show();

When the selection is cleared, you would write the inverse code:
var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.hideCommands(restaurantSelectionCommands);
appbar.sticky = false;
appbar.hide();

Verifique a amostra do controle AppBar para obter um exemplo funcional de como mostrar ou ocultar uma barra de aplicativos com comandos contextuais baseados na seleção.

XAML

Em XAML, você tem um manipulador SelectionChanged para a sua lista e nesse manipulador você verifica se um item foi selecionado ou limpo. Se um item tiver sido selecionado, você pode chamar o método para mostrar os comandos, definir a propriedade IsSticky no controle AppBar como true (verdadeira) e, em seguida, mostrar o AppBar. Se uma seleção tiver sido limpa, você pode chamar o método para ocultar os comandos, restaurar a propriedade IsSticky de volta para false (falso), e fechar o controle AppBar.

private void RestaurantList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListView lv = sender as ListView;
if (lv.SelectedItem != null)
{
ShowRestaurantCommands();
BottomAppBar.IsSticky = true;
BottomAppBar.IsOpen = true;
}
else
{
HideRestaurantCommands();
BottomAppBar.IsSticky = false;
BottomAppBar.IsOpen = false;
}
}

Layout de comando

A próxima etapa é determinar como estabelecer o layout de seus comandos. O melhor lugar para comandos são os lados esquerdo e direito da tela. Para dispositivos sensíveis ao toque, é porque a forma mais comum de um usuário pegar um dispositivo tablet é pelos lados e ter os comandos nas bordas permite que os usuários mantenham suas mãos onde estão e acessem os comandos com seus polegares. Em relação ao mouse, é por causa da Lei de Fitts – os usuários podem colocar o cursor nos cantos inferiores de forma mais fácil e rápida do que em qualquer outro lugar da tela, portanto, quanto mais próximos os comandos estiverem das bordas, mais fácil será alcançá-los.

A única pergunta é quais comandos vão para onde e como dividir os comandos entre os dois lados. Entramos em detalhes sobre isso em Commanding design for Metro style apps (Design de comando de aplicativos estilo Metro), mas resumindo, como acontece com cada elemento do design da barra de aplicativos, disponha os seus comandos de forma que a localização deles seja previsível. Comece dispondo os comandos com base nas telas e nos comandos mais comuns – torne-os ótimos. Uma boa regra é colocar os comandos usados mais frequentemente mais próximos das bordas ou seguir exemplos de comandos semelhantes em outros aplicativos populares. Dessa forma os usuários podem prever como o seu aplicativo funciona mesmo antes de usá-lo. Em seguida, em cada tela subsequente, mantenha quaisquer comandos compartilhados no mesmo local e coloque o resto dos comandos em torno deles. Quando um comando tem um local estabelecido, não o mova. Dessa forma, os usuários podem aprender onde os comandos ficam e usar o seu aplicativo se tornará algo como uma segunda pele, o que os ajudará a focalizar no conteúdo principal de seu aplicativo.

Frequentemente, os comandos vão e vêm com base na seleção ou com base no contexto atual do aplicativo. Por exemplo, no Food with Friends, na página de listas de restaurantes, existem alguns comandos relevantes somente durante a visualização dos restaurantes em uma lista (como classificar) e existem alguns comandos que ficam disponíveis somente no modo de exibição de mapa (como centralizar na localização do mapa atual). Nesses casos, posicione os comandos de forma que aqueles mostrados em ambos os contextos fiquem mais próximos das bordas, de forma que eles não se movam quando o usuário mudar de contexto.

No Food with Friends, na página All restaurants (Todos os restaurantes), o usuário pode alternar entre um modo de exibição de lista e um modo de exibição de mapa. O conjunto de comandos disponíveis muda quando o modo de exibição é alterado, portanto, o posicionamento se torna muito importante:

Página All restaurants (Todos os restaurantes) do Food with Friends em um modo de exibição de lista. Os comandos que dependem do modo de exibição atual se encontram todos próximos dos comandos de alternância de modo de exibição. New (Novo) é o comando estável, portanto, ele aparece à direita.

Figura 11: Página All restaurants (Todos os restaurantes) do Food with Friends em um modo de exibição de lista

  Página All restaurants (Todos os restaurantes) do Food with Friends em um modo de exibição de mapa. Os comandos que dependem do modo de exibição atual se encontram todos próximos dos comandos de alternância de modo de exibição. New (Novo) é o comando estável, portanto, ele aparece à direita

Figura 12: Página All restaurants (Todos os restaurantes) em um modo de exibição de mapa 

Observe como o comando de filtro fica à esquerda na classificação do modo de exibição de lista, e o botão de estilo do mapa no modo de exibição de mapa? Agora, se você alternar entre esses dois modos de exibição, todos os comandos comuns ficam em seu local inicial e não mudam, mantendo a barra de aplicativos estável e previsível.

Mudando de modos de exibição

Começar por dispor os comandos do modo de exibição paisagem de seu aplicativo é o padrão, mas também é importante pensar sobre a aparência das barras de aplicativos no modo retrato e quando o seu aplicativo está ajustado. Por padrão, a barra de aplicativos WinJS se reposiciona automaticamente com base na largura disponível e garante que até 10 comandos sempre caibam. No modo retrato, a barra de aplicativos perde os rótulos de comando e no modo de exibição ajustado os botões fluem em duas linhas. Isso é o que acontece automaticamente e é uma ótima funcionalidade a ser utilizada se o conteúdo do aplicativo permanecer consistente entre os modos de exibição.

Com a barra de aplicativos XAML, ou caso esteja usando o layout personalizado da barra de aplicativos WinJS, você tem controle total sobre o conteúdo e o layout de seus comandos. Isso significa que nos modos de exibição retrato e ajustado, você tem que prestar atenção extra para se certificar de que todos os comandos caibam e continuem com ótima aparência. As estratégias que você pode usar nesses casos são abandonar todos os rótulos de botão, agrupar os comandos em menus ou ocultar comandos que não sejam relevantes nesses estados.

As opções do modo de exibição de lista e do modo de exibição de mapa são condensadas em um menu no modo de exibição ajustado

Figura 13: Modo de exibição encaixado de todos os restaurantes

No aplicativo Food with Friends, você pode ver um exemplo de adaptação da barra de aplicativos para parecer ótima no modo de exibição encaixado e com a manutenção de todos os comandos relevantes. Nesse caso, para reduzir para 5 botões (para que todos os botões apareçam em uma única linha), o modo de exibição alterna, o modo de exibição de lista e o modo de exibição de mapa, são combinados em um único menu.

            

Tornando-o seu

O controle AppBar permite que você crie facilmente uma barra de aplicativos básica. Ele também torna mais fácil personalizá-la para realmente se adequar ao estilo de seu aplicativo. As personalizações comuns incluem mudança de cor, o glifo ou o estilo do botão. Seja criativo! A barra de aplicativos deve parecer uma extensão natural de seu aplicativo e, sendo assim, coloque nela a mesma personalidade que o resto de seu aplicativo tem. Você pode encontrar exemplos de como fazer isso na amostra do controle AppBar HTML e na amostra do controle AppBar XAML.

Dependendo dos comandos que possui, você deve até mesmo considerar mostrar sua interface do usuário sob demanda de uma forma totalmente diferente de uma barra de aplicativos. Isso é ótimo. Seja criativo! Se você for por esse caminho, lembre-se de que os usuários estarão esperando que a interface do usuário oculta apareça quando eles usarem os gestos padrão (passar o dedo a partir de cima ou de baixo, clicar com o botão direito do mouse ou pressionar a tecla Windows + Z), e que você geralmente pode ignorá-la, tocando fora da interface do usuário. Para obter informações sobre eventos padrão de interface do usuário sob demanda, consulte a classe EdgeGesture.

E é isso

Uma das principais partes do novo design é focalizar especificamente o que o seu aplicativo tem de melhor. Mantenha o que destaca o seu aplicativo e limite tudo o que se afaste disso, tornando-o disponível sob demanda. Usar a barra de aplicativos é uma forma fácil de fazer isso, seguir as convenções comuns de posicionamento de comandos e contextualizar a barra de aplicativos permite que os usuários dediquem seu tempo a aproveitar o que realmente diferencia seu aplicativo em vez de descobrir o layout de comandos. Se você usar as ferramentas e as convenções que o Windows 8 fornece para focalizar sua interface do usuário no que o seu aplicativo tem de melhor, os usuários apreciarão o que o seu aplicativo tem de melhor.

Para obter informações adicionais sobre os padrões de interface do usuário sob demanda, visite http://design.windows.com e as Diretrizes das barras de aplicativos. Para obter mais informações sobre o controle AppBar em JS, experimente a amostra do controle AppBar HTML, a amostra do controle AppBar XAML e observe o objeto WinJS.UI.AppBar e a classe Windows.UI.Xaml.Controls.AppBar.

Boa codificação!

--Jon Gordner, Gerente de Programa Líder, Windows

  • Loading...
Leave a Comment
  • Please add 8 and 7 and type the answer here:
  • Post