UI Bars #AppleHIG
A correta utilização das UI Bars são essenciais para garantir que o usuário possa interagir com um aplicativo e entender o tráfego entre suas telas. Conheça a finalidade e a estrutura de cada um desses componentes.
Navigation Bar
A barra de navegação aparece no topo da tela e permite que o usuário navegue pelo aplicativo, dando a sensação de telas hierarquizadas. Ela pode ser escondida dependendo do conteúdo da tela.
- Centralizado na barra de navegação há o título da tela que o usuário se encontra.
- No lado esquerdo, encontra-se geralmente um botão de voltar (que necessariamente deve levar o usuário até a tela anterior que ele se encontrava). Este botão pode ser customizado, desde que esteja dentro do contexto do aplicativo.
- No lado direito do título geralmente encontra-se botões de controle como "edit", "select" ou "done".
Search Bars
Utilize a search bar para procurar por conteúdo dentro do aplicativo. Esse componente aparece no topo da tela e pode substituir a barra de navegação. Existem dois tipos de search bars: proeminentes e minimalistas. O estilo proeminente é utilizado quando a procura é uma função frequente no aplicativo. Caso contrário, aconselha-se usar o estilo minimalista.
- A search bar é composta pelo campo de procura, um botão de cancela e um texto placeholder, que pode servir como dica para os usuários (acima da barra pode haver uma linha de texto com o mesmo propósito).
- Sugira uma lista de possíveis resultados abaixo da search bar para ajudar as pessoas a achar conteúdo de forma mais rápida
Scope Bar/Segmented controls
Este componente pode ser adicionado a uma search bar ou a uma navigation bar para que o usuário refine sua pesquisa ou mude o contexto da tela. Deve ser utilizada em último caso, procure primeiro melhorar o sistema de pesquisa.
Status Bar
A status bar aparece na parte superior da tela e contém informações como hora, bateria e sinal do wifi. É padrão: não permite que seja customizada. Porém, está disponível em dois estilos de cor diferentes, apropriados para backgrounds escuros ou claros.
- Evite colocar conteúdo importante atrás da status bar ou escondê-la permanentemente no seu aplicativo.
Tab Bar
A tab bar aparece na parte inferior do app e permite navegar entre as telas. Para não causar confusão no usuário, as tabs devem permanecer as mesmas, assim como sua aparência e altura.
- A quantidade de tabs depende do dispositivo e da orientação. Utilize entre 3 ou 5 no Iphone. No Ipad é aceitável um número maior.
- Caso precise de mais tabs coloque um botão indicando ao usuário, porém considere colocar apenas o essencial. Lembre-se que quanto mais informação, mais difícil encontrar o conteúdo.
- Caso haja nova informação relacionada a uma tab, coloque uma badge ou ponto de exclamação para indicar o usuário.
- Para tornar a interface previsível, selecionar uma tab deve sempre afetar a tela que o usuário se encontra.
Toolbar
A toolbar aparece na parte inferior do app e contém botões que permitem realizar ações na tela que o usuário se encontra. Ela permanece escondida até que o usuário precise dela, e pode reaparecer clicando na parte inferior da tela. A tab bar e a toolbar nunca aparecem na mesma tela.
- Use ícones quando há mais de três botões na toolbar. Caso contrário, use texto ao invés de ícones.
- Lembre-se de dar espaço de respiro de um ícone/texto para o outro.
- A toolbar e a tab bar são escondidas quando o teclado aparece.
Quick tip:
As tab bars são usadas para navegar entre as telas do aplicativo, enquanto a função da toolbar é realizar ações no contexto que o usuário se encontra.
Clique aqui para conhecer mais sobre o Human Interface Guidelines. Faça download dos templates aqui.
