Design de Aplicativos para Android Parte 1

Uma questo de motivao

Recentemente participei de uma maratona de desenvolvimento
chamada Google Developer Bus onde encarei o seguinte desafio: criar o
layout para um aplicativo Android em apenas 3 dias. J trabalho h alguns
anos com design para a web e, quem acompanha meus textos sabe, sou uma
grande evangelista do design responsivo. Mas esta experincia anterior no
foi o suficiente para me preparar para a tarefa. Criar aplicativos nativos
algo completamente diferente! Envolve um pouco de matemtica, muita
pacincia e conhecimento do sistema.
A ausncia de material didtico tambm representa um empecilho.
Fora a documentao oficial, existe pouqussimo material disponvel para
designers Este um dado surpreendente considerando que o Android
atualmente o sistema operacional mvel mais popular do mundo com 81%
de market share. Pensando nisto decidi criar uma srie de artigos sobre o
tema voltados para quem, como eu, iniciante na rea. Minha inteno
dividir com vocs o que aprendi e compartilhar algumas dicas e atalhos
para criar apps bonitos, funcionais e coerentes com as guidelines
especficas da plataforma.
Pense neste artigo como um starter kit para voc que pretende se
aventurar pelo maravilhoso mundo do design de aplicativos e no faz idia
por onde comear.
Nesta primeira etapa vamos conhecer de perto a estrutura e
navegao do Android e as principais diferenas entre outros sistema
operacionais mveis. Este artigo foi criado tendo em mente as diretrizes
para a verso do Android 4.4 KitKat.

Conhea o Android
O primeiro passo para criar bons aplicativos para Android : passe
algum tempo se familiarizando com o sistema. Parece um ponto bvio, mas
muitas pessoas ignoram esta etapa e acabam criando aplicativos
inconsistentes. Se voc possui um aparelho, baixe alguns apps e explore
todas as telas. Tente encontrar, dentre cases bem sucedidos, quais pontos
eles tem em comum e quais pontos eles diferem. Se voc est procura de

1
inspirao pode procurar por showcases especficos como o Android
Niceties e Android App Patterns.
Mas no necessrio se limitar a isto. O prprio Google Play (loja de
apps do Google) fornece screenshots de todos os aplicativos. Veja quais
so os mais populares e conhea seus provveis concorrentes. Vale at criar
uma pequena biblioteca de inspirao em uma pastinha no computador ou
em alguma rede comoKippt ou Pinterest. Quanto mais voc se cercar de
boas idias, mais fcil ser para desenvolver a sua.

A anatomia de um App
Ser um usurio de aparelho Android no qualifica voc
automaticamente um especialista no sistema. Conhecer a anatomia de uma
interface Android (e no que ela difere de outros sistemas operacionais
como iOS e Windows Phone) fundamental para criar bons aplicativos.
Vamos explorar a diagramao padro de um aplicativo.

Action Bar (Barra de Ao)

A barra de ao equivalente a seo header de um site: logotipo,
ttulo da pgina e itens de navegao. Esta barra deve ser flexvel para
acomodar cones, menus ou caixas de texto expansveis. O espao tambm
utilizado para notificaes de itens novos, alertas em geral e trocas de
modo de visualizao quando existe esta funo (lista ou grid, por
exemplo).

2
Branding
Este espao destinado a logo ou cone do app.

Action Icons (cones de Ao)

Do centro para o canto direito temos Action Icons, ou cones de ao.
Estes cones servem de atalho para representar aes globais frequentes que
um usurio poder realizar no seu app como buscar uma informao ou
compartilhar contedo.
Normalmente so exibidos de 2 a 5 cones, dependendo do tamanho
da rea de exibio do aparelho. Se mesmo assim voc achar que no
suficiente organize as aes que no couberem na action bar em um menu
complementar dropdown chamado Action Overflow (cone de trs
quadradinhos pequenos). Lembre-se de exibir apenas os cones de aes
que esto disponveis naquele momento. Se no possvel realizar uma
determinada ao dentro de uma tela, esconda o cone!
muito importante que cada cone represente claramente o conceito.
O ideal seria sempre procurar no conjunto de cones oficiais se j existe um
cone padro do Android para a ao que voc deseja realizar. Desta
maneira voc garante a consistncia do aplicativo e que o usurio no
precise pensar muito para deduzir o que o seu cone faz, j que ele j viu a
mesma ao em outros lugares. Uma das dicas de ouro da documentao
oficial : se parece igual, deve funcionar igual. Aes como compartilhar
ou buscar, por exemplo, devem usar os cones padres. Voc pode
personalizar estes cones trocando cores e adicionando efeitos sutis para
que reflita o seu branding, mas sem que isto afete a essncia do cone.

3
Navigation Drawer (Gaveta de Navegao)
Menu de navegao que surge da esquerda para a direita, cobrindo o
contedo do aplicativo. Para abrir a gaveta basta clicar no cone (trs
risquinhos) ao lado esquerdo do logotipo.

Contextual Action Bar (Barra de Ao Contextual)

A Contextual Action Bar, ou CAB para os ntimos, uma barra de
ao temporria que substitui os itens padres durante uma determinada
tarefa. Exemplo: exibir quantos elementos de uma lista foram selecionados.

4
Das diferentes maneiras de voltar
Uma das principais caractersticas do Android que o boto voltar
est sempre presente, seja como um boto fsico no hardware ou um
equivalente virtual do sistema. A funo deste boto voltar para a ltima
tela em ordem cronolgica e isto pode significar, muitas vezes, sair do
aplicativo atual.
O boto de voltar, portanto, reflete sempre o seu histrico de
navegao. Seria redundante ter a mesma funo repetida dentro do seu
aplicativo Ao invs disto podemos fazer uso do boto Up, simbolizado
por uma seta voltada para a esquerda na barra de ao ao lado do logotipo.
A idia deste cone voltar para uma tela relacionada, de nvel acima da
atual. Vamos supor que voc esteja na dashboard do Youtube, por exemplo
e navegou para uma lista de reprodues de vdeos.
O Up faria voc voltar da tela filha para a tela pai. Ou seja, de
volta da lista de vdeos para a dashboard. Por isto que, na tela inicial de
uma aplicativo, no existe boto up pois voc j est no primeiro nvel da
hierarquia.

Bottom Bar (barra inferior)

Espao localizado no rodap do aplicativo de maneira fixa. Serve
como um complemento da barra de ao, exibindo outros cones de ao
que voc julgar importante.

5
Tipos de Navegao
J falamos um pouco sobre gavetas de navegao, mas existem
diversos outros tipos de menu; cada um mais apropriado para um tipo de
situao. Vamos a eles!

Fixed Tabs (Abas Fixas)

As Fixed Tabs ficam no topo do aplicativo, logo abaixo da Barra de
Ao. O conceito aqui deixar os itens do menu sempre a vista, para que o
usurio possa navegar rapidamente entre as sees internas do aplicativo
tocando na tab ou atravs de um swipe para esquerda ou para a direta. Este
tipo de navegao em abas ideal para quando voc espera que o usurio
alterne entre as telas frequentemente. O contra que, por conta das
diferenas de largura dos aparelhos, as abas fixas s acomodam
confortavelmente trs itens no mximo.

Scrollable Tabs (Abas rolveis )

O funcionamento bem parecido com as abas fixas, com a diferena
que o usurio poder deslizar para o lado para visualizar mais itens. O
recurso combina a praticidade das abas fixas com a possibilidade maior de
exibio. Mas no abuse! O ideal utilizar de 5 a 7 abas no mximo.

6
Spinners
Um Spinner um menu drop-down simbolizado por um pequeno
tringulo no canto inferior direito da ncora. comum posicionar um
Spinner abaixo do logotipo do aplicativo para sinalizar o menu. Mas voc
pode utilizar Spinners sempre que quiser otimizar o espao ou mostrar
diversas opes de dados como em um campo de formulrio com mltiplas
opes (estilo select), alternar entre duas contas de um servio ou escolher
datas em um calendrio.

Navigation Drawer (Gaveta de Navegao)

7
 Menu que escorrega da esquerda para a direita. timo para
navegao complexas (3 ou mais itens) j que um menu global que pode
ser acessado de qualquer lugar do app. especialmente til para navegao
multinivel e para economia de espao da tela. O ponto contra que a
gaveta fica sempre escondida, o que leva um pouco mais de tempo para o
usurio descobrir e acessar.

No misture tipos de navegao

Evite misturar diversos tipos de navegao ao mesmo tempo pois isto
pode confundir o usurio. Prefira basear sua escolha em critrios como
quantidade de itens, frequncia de uso e importncia.

Contedo primeiro!
Alguns aplicativos mais antigos exibem um layout estilo dashboard
mostrando apenas a navegao na tela inicial. Esta uma abordagem
confusa que afasta as pessoas do que elas realmente vieram ali para ver: o
contedo! Valorize o tempo do seu usurio e prefira sempre utilizar uma
abordagem mais direta mostrando na tela inicial o que voc tiver de mais
interessante para oferecer.

8
No reutilize layouts de outros sistemas
Sim. Isto significa que para dar suporte a diversas plataformas voc
ter que repensar todo o design do seu app! E o motivo para isto acontecer
que os sistemas operacionais mveis, embora tenham praticamente as
mesmas funcionalidades, so estruturados de maneira completamente
diferente.
S a ttulo de comparao vamos dar uma olhadinha no aplicativo do
WhatsApp nas trs plataformas. As diferenas j comeam nos cones de
lanamento do aplicativo. No Android eles podem possuir qualquer
formato e normalmente tem algum efeito de profundidade j que so
usados arquivos com transparncia. J no iPhone eles so quadrados com
cantos arredondados e no Windows Phone so tiles animados que mostram
informaes em tempo real e podem ter cores e tamanhos diferentes. Ufa!
E nem abrimos o app ainda

9
 Por dentro as diferenas vo ficando mais expressivas. A funo de
voltar, que j comentamos neste artigo, um exemplo disto. No Android e
no Windows Phone existem botes do sistema especficos para esta funo.
O iPhone s possui o boto Home Pra facilitar a vida do usurio e
acrescentar esta funo os aplicativos normalmente ocupam o canto
superior esquerdo com uma seta ou boto rotulado voltar.
Esta exatamente a rea de branding / gaveta de navegao no
Android. J no Windows Phone neste cantinho normalmente fica marcado
o nome do app e logo abaixo a navegao (que toda tipogrfica e
comandada por swipes). As cores e texturas dos sistemas tambm so bem
diferentes.

10
 Os cones de ao so outra diferena crucial. No Android eles
devem ficar na barra superior, j no iPhone e Windows Phone estes cones
so posicionados em uma barra fixa no rodap Os smbolos e formatos
tambm so bem diferentes.

Fora as diferenas estilsticas da user interface como cantos

arredondados, gradientes, tipografia, tamanhos e nem vou comear a falar
sobre resolues (Spoiler alert: este tema do prximo artigo).

Moral da histria: procure sempre planejar o layout levando em

conta a experincia de cada sistema operacional. Explore os pontos fortes
de cada um, tente contornar as fraquezas e use itens padronizados a seu
favor. Seu usurio vai agradecer no final!

11
Concluso
Bem, agora que voc j conhece a estrutura dos aplicativos Android
j est pronto para colocar a mo na massa e comear a criar seus prprios
apps.
No prximo artigo vamos abordar aspectos mais tcnicos: descubra o
que diabos um DP, aprenda sobre densidade de pixels e resoluo,
organize seus assets e veja quais so os entregveis. At a prxima!

12