Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android
Code

Android a partir do zero: Padrões Comuns de Design de UI

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Android From Scratch.
Android From Scratch: How to Run Your Application on a Physical Device
Android From Scratch: Understanding Views And View Groups

Portuguese (Português) translation by Hugo De Oliveira Cordeiro (you can also view the original English article)

Enquanto o Android permite que você crie praticamente qualquer view customizada ou interface de usuário que você possa querer, existem alguns poucos padrões de interface de usuário que foram provados funcionar bem para os usuários em uma determinada situação. Neste tutorial, você aprenderá sobre alguns desses padrões e como eles podem ajudares usuários através da criação de uma boa experiência quando utilizando seu app.

1. Tela Inicial

A primeira tela que seus usuários vêem quando abrem seu app é geralmente a mais importante. Deste ponto seu usuário deve estar apto para executar uma ação rápida e continuar com seu dia ou mergulhar no seu app para refinar o que quer que seja que eles estejam tentando alcançar.

Escolha o padrão de design de interface de usuário para essa tela baseado no objetivo do seu app. É importante destacar que a maioria dos apps usam mais de um padrão na sua tela inicial desde que suporte o objetivo geral do app.

Lista e Detalhe

O padrão de lista e detalhe é dos padrões mais comuns que você verá em aparelhos móveis. Como o nome indica, você apresenta dados em um formato de lista e quando um item desta lista é selecionado, ele se abre em uma nova tela que exibe mais detalhes.

Enquanto esse padrão é chamado lista e detalhe, não há razão pela qual você não possa aplicar a mesma lógica para o design de uma grade também. O ponto chave desse padrão é que qualquer item na lista/grade, quando selecionado, deve executar a mesma ação de exibir mais detalhes.

Um exemplo desse padRão pode ser visto na aplicação Google Play Music, que apresenta aos usuários uma grade de álbuns que podem ser selecionados para exibir as músicas disponíveis naquele álbum. Hangouts é outro exemplo de aplicação que utiliza o padrão de lista e detalhe. Hangouts permite que você selecione uma conversa para ver todo o diálogo e interagir com ele.

Google Play Music Grid of Items

Carrossel

Algumas vezes, uma lista não vai ser suficiente. Se seu app tem várias categorias e um jeito de representar o conteúdo bem com uma image, então o padrão carrossel pode funcionar para você. Neste padrão você pega o padrão de lista e detalhe e o utiliza múltiplas vezes na mesma tela. A diferença é que os items da lista pode ser deslizados horizontalmente em vez de verticalmente.

Um exemplo deste padrão pode ser visto na aplicação da Google Play Store, que exibe um carrossel para múltiplas categorias de apps que você pode navegar.

Carousel Pattern in the Google Play Store

Mapa

Nem todos os apps são construídos com a necessidade de exibir uma lista de dados para os usuários. Uma das características principais de aparelhos móveis é que eles são incrivelmente úteis para achar coisas enquanto os usuários estão fora de casa, no mundo. Um mapa geralmente é uma ótima ferramenta para esse propósito.

Se seu app é construído para mostrar localizações geográficas, navegação, ou envolve viagens, então um mapa pode ser perfeito para seus usuários. Enquanto o exemplo óbvio desse padrão está no Google Maps, muitos outros apps, como o Waze e o Uber, também foram construídos tendo um mapa como seu foco principal. 

Map Home Screen in Waze

2. Navegação e Ações

Você acabou de aprender sobre alguns dos padrões de interface de usuário que você pode utilizar a tela inicial do seu app, mas você provavelmente ainda precisa de um jeito para never para outras seções da sua aplicação. Felizmente existem alguns padrões de navegação comumente utilizados que usuários do Android estão familiarizados para ajudar você você a criar um ótimo app para se utilizar.

Abas

Abas são geralmente utilizadas em conjunto com o padrão de lista e detalhe. Se você tem múltiplas listas que são relacionadas de alguma maneira, mas que possuem diferentes categorias, então usar um ViewPager com abas para cada categoria pode ser uma solução eficiente para a navegação de seu app.

Este padrão é útil quando você tem algumas poucas seções no seu app já que ele fornece uma maneira rápida e fácil para os usuários mudarem a visão. Se, entretanto, você tiver cinco ou mais itens que você deseja colocar em abas, então você deve considerar mudar suas operações de navegação para uma gaveta.

ViewPager Tab Design Pattern

De acordo com as orientações do Android Material Design, abas podem existir também no a parte inferior da tela, como visto na aplicação Google+.

Bottom Tabs Design Pattern

Gaveta de Navegação

A gaveta de navegação é uma view que pode ser deslizada do lado de uma aplicação para apresentar uma lista de opções para o usuário. Esse padrão de design é usado regularmente em apps Android para fornecer uma maneira de navegar entre seções ou para executar ações globais que não estão necessariamente ligadas a qualquer tela.

Uma vez que esse padrão funciona bem para navegação de nível superior, ele pode facilmente se relacionar com o padrão de abas para criar um esquema de navegação intrincado para sua aplicação.

Navigation Drawer Design Pattern

Barra de Ferramentas

Como você provavelmente já notou, a maioria das páginas em uma aplicação Android inclui uma barra de ferramentas no topo da tela. No mínimo, esta barra de ferramentas contém um título para a seção ou aplicação, mas o padrão de barra de ferramentas também facilita a alocação de botões de ações diretamente ou em um menu flutuante que permite aos usuários executar ações naquela seção de uma aplicação.

Um exemplo disso pode ser encontrado na aplicação Google Keep, que permite que você mude a cor de uma nota, adicione outras pessoas àquela nota, e outras ações que são apresentadas em um menu flutuante.

Toolbar Design Pattern With Action Buttons

Botão de Ação Flutuante

O padrão botão de ação flutuante permite desenvolvedores destacarem uma única ação que seu usuário pode executar enquanto está em uma seção de uma aplicação. Exemplo de tais ações pode ser um botão de ação flutuante para criar uma nova mensagem em um cliente de email, um botão de play/pause em um app de música, ou um botão adicionar em apps que gerenciem eventos ou dados.

Esse padrão não deve ser usado para ações pequenas ou para algo destrutivo já que o botão de ação flutuante é projetado para ter uma forte presença na tela quando usado.

Floating Action Button

3. Padrões de Telas Android

Enquanto alguns dos padrões discutidos acima prestam-se a outros padrões de telas, a maioria diz respeito à concepção de aplicações para telefones ou tablets. Recentemente, a Google começou a utilizar Android em vários outros tipos de aparelhos, incluindo televisões e smartwatches. Isso exige novos padrões de projeto para obter o máximo de cada padrão de tela.

Android Wear

Devido ao tamanho reduzido da tela, um conjunto completamente novo de padrões de design de interface foi introduzido pelo Android Wear. Wear funciona com um sistema de cartões e botões de ações que podem ser deslizados pelos usuários utilizando um GridViewPager.

Você também pode continuar a usar o padrão de lista e detalhe, mas os itens da lista precisarão ser maiores e encaixados em uma posição na qual os usuários possam acessa-los facilmente. Mais informações sobre design para Android Wear podem ser encontradas na documentação oficial.

Android Wear Card and Action Button UI Design Pattern

Televisão

Enquanto designs para aparelhos Android Wear devem levar em consideração uma tela muito menor, design para Android TV tem o problema oposto. Telas são muito maiores e usuários tendem a estar muito afastados delas.

Os aplicativos da sua TV não só precisam levar essas duas coisas em consideração, televisões também utilizar um controle de botões direcionais, no lugar de telas sensíveis ao toque, para a interação. Por essa razão, a abordagem de carrossel funciona super bem.

TV UI Design Pattern Rows of Content

Usuários podem ser mover entre as linhas de itens e então rolar horizontalmente para ver o conteúdo que eles tem disponível. Quando um usuário encontra um item que ele deseja visualizar, ele pode seleciona-lo para acessar a tela de detalhe, que fornece a lista de ações para aquele item.

Conclusão

Enquanto esta lista está longe de ser uma lista exaustiva dos padrões de design de interface de usuário do Android, você foi apresentado a alguns dos padrões mais comuns do Android e como eles são aplicados para fazer apps mais usáveis.

Dito isso, nem todos os apps são iguais e podem haver vezes que você precisará inventar uma solução criativa para seus usuários interagirem com seu app. O que todos os padrões têm em comum é a simplicidade, usabilidade, e não atrapalhar os usuários.

Enquanto você continuar a usar e aprender sobre o Android, você ganhará a experiência necessária para saber o que funciona e o que não funciona em determinada situação.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.