A Google está a dar um novo rumo ao design de interfaces nas aplicações com o Material 3 Expressive, e a mais recente novidade foca-se em trazer os controlos mais para perto dos dedos dos utilizadores: as barras de ferramentas inferiores, ou "toolbars". Estas novas componentes foram concebidas para albergar as "ações frequentemente usadas e relevantes para a página atual", funcionando como um "contentor com várias ranhuras" altamente personalizável pelos programadores.
Dois tipos à escolha: Docked e Floating
A Google apresenta duas variantes principais para estas novas barras de ferramentas, cada uma com o seu propósito específico no ecossistema das aplicações.
Docked Toolbar: Ações globais sempre à mão
Um dos dois tipos disponíveis é a "Docked toolbar". Esta estende-se por toda a largura do ecrã e, segundo a Google, é ideal para "ações globais que permanecem as mesmas em múltiplas páginas". De forma significativa, esta vem substituir a antiga "bottom app bar" (que o Google Tasks usava antes da sua remodelação no ano passado), que agora é considerada obsoleta. A Google recomenda a sua substituição pela "docked toolbar", descrita como "muito similar e mais flexível".
Floating Toolbar: Flexibilidade contextual para ações específicas
A alternativa é a "Floating toolbar", que, como o nome indica, "flutua sobre o conteúdo principal". Esta é mais indicada para "ações contextuais relevantes para o conteúdo do corpo [da app] ou para a página específica". A Google sugere que as apps podem até combinar uma "floating toolbar" com um Botão de Ação Flutuante (FAB), oferecendo ainda mais versatilidade.
Um exemplo prático desta implementação será visível na vista de álbuns redesenhada do Google Photos, que usará esta componente para os botões de partilhar, adicionar e editar. Esta abordagem resulta numa experiência mais imersiva no topo da página. As "floating toolbars" também podem servir como "abas entre páginas relacionadas subsequentes na hierarquia do produto", como se observa na aplicação Fitbit para alternar entre as vistas de Dia, Semana, Mês e Ano.
Personalização ao detalhe: De vertical a cores vibrantes
A flexibilidade destas novas barras de ferramentas não se fica por aqui. Em ecrãs de maiores dimensões, estas podem ser dispostas verticalmente, adaptando-se ao espaço disponível. No entanto, a Google define uma diretriz clara: as "floating toolbars não devem exceder a margem da janela ou painel". Para aplicações que necessitem de apresentar um maior número de ações, a solução passa pela inclusão de um menu "overflow".
Adicionalmente, existem duas configurações de cor principais:
- Standard: "Um esquema de cores de baixo destaque, ideal para focar a atenção no conteúdo principal."
- Vibrant: "Um esquema de alto destaque que chama a atenção para os controlos. Pode também indicar uma mudança temporária no comportamento da página, como entrar em modo de edição."
A grande regra: Toolbars e barras de navegação não se misturam (geralmente)
Uma diretriz importante emitida pela Google é a de não emparelhar uma "toolbar" com uma barra de navegação inferior (a tradicional "bottom bar"). A recomendação oficial é: "Mostrar a barra de navegação nas páginas primárias, e as toolbars nas páginas subsequentes com ações". Num exemplo hipotético de uma aplicação de email, a navegação principal (Caixa de Entrada, Enviados, Rascunhos) estaria na barra inferior, mas ao entrar na página de visualização de um email específico, poderiam surgir "toolbars" com ações como responder, apagar ou arquivar.
Uma ausência notada: E a barra de navegação flutuante no M3E?
Esta nova aposta nos controlos inferiores levanta uma questão pertinente sobre a existência de uma barra de navegação inferior que seja flutuante. Até ao momento, uma componente com estas características não existe oficialmente no Material 3 Expressive. Curiosamente, esta ausência contrasta com a sua presença contínua em aplicações da própria Google, como o Google Chat, e até com um mockup do próprio M3E que exibe um design semelhante. Fica a dúvida se esta será uma adição reservada para uma futura expansão ou atualização do Material 3 Expressive.
Nenhum comentário
Seja o primeiro!