Design de Aplicativos para Android Parte 2

No primeiro artigo desta srie, conversamos um pouco sobre a

anatomia de um App Android e no que ele difere de outros sistemas
operacionais. Hoje vamos nos aprofundar nos aspectos mais tcnicos do
design de aplicativos. Busque seu caf e boa leitura!

O que um pixel?
Um pixel o menor ponto fsico em um dispositivo. uma
combinao espertinha de duas palavras pix (como em picture) e el
(como em element). Ou seja, um pixel o elemento pelo qual as imagens
so criadas.

Sobre pixels e relatividade

O pixel parece uma unidade fixa quando voc escreve cdigos CSS,
mas na realidade o tamanho fsico do pixel varia de acordo com o
dispositivo. Isto significa que 1px aqui no meu monitor diferente do
mesmo 1px do seu. Mas no s o tamanho do pixel que pode mudar de
aparelho para aparelho. A quantidade de pixels que cabem em uma mesma
rea tambm varia.
Como o assunto meio denso, vamos usar uma metfora. Imagine
pegar uma rgua e desenhar com um marcador permanente ( s
imaginao. No v dizer que eu mandei fazer isto, hein?) um quadrado de
1 polegada em um iPhone 3GS. Agora desenhe o mesmo quadrado em um
iPhone 4 que possui tela de alta resoluo (que a galera do marketing da
Maa resolveu chamar de Retina). Embora os quadrados imaginrios sejam
do mesmo tamanho, como a densidade de pixels de um monitor HD
maior, temos mais pixels apertadinhos em um mesmo espao. Esta
maravilha da tecnologia permite imagens muito mais bonitas, ntidas e
detalhadas Mas, como tudo tem um preo, o designer de iOS ter que
criar duas imagens: uma para a densidade base e outra para a densidade
dobrada.
iOS? Este artigo no sobre Android? Pois , amigo, tenho uma m
notcia. Os celulares da Apple so todos padronizados ento se fossemos
separar todos os iPhones do mundo de acordo com a resoluo s
1
existiriam duas pilhas: normal e retina (HD). Como o Android um
sistema aberto e democrtico existem diversas marcas, cada uma criando
aparelhos com a densidade de pixels que est na moda no momento e
Moral da histria: existem 6 pilhas de densidade para Android. Cada uma
engloba uma determinada faixa de pontos por polegada e rotulada com
uma sigla charmosa. Parece bem mais trabalhoso a princpio. Mas nem
tudo est perdido. O segredo para criar um layout que vai manter a
consistncia em diferentes aparelhos est nos pixels virtuais.

Pilhas de densidade
Para simplificar agrupamos as densidade de pixels mais comuns,
medidas em DPI (quantidade de pontos por polegadas), em categorias com
nomes mais amigveis. A coluna em negrito a resoluo base (MDPI).

LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI

mdia extra- extra- extra-extra-
Resoluo baixa alta
(base) alta extra-alta extra-alta
Densidade 120dpi 160dpi 240dpi 320dpi 480dpi 640dpi
Escala em
0.75x 1x 1.5x 2x 3x 4x
relao a base

2
 LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI
Distribuio
9.3% 23.4% 34.0% 21.0% 10.6% 1.7%
entre aparelhos*
*De acordo com pesquisa realizada em Janeiro de 2014.

Estas so as categorias ou pilhas de densidade. Nem todos os

dispositivos se encaixam perfeitamente em uma destas categorias, por isto
devemos sempre arredondar para o valor mais prximo. Por exemplo: um
aparelho de 242dpi ainda seria classificado como HDPI.
Eu acrescentei o LDPI nesta tabela para vocs conhecerem, mas o
sistema redimensiona os assets para ela automaticamente a partir do HDPI.

E os tais pixels virtuais?

DP (tambm chamado de DIP) uma sigla para Density-independent
Pixels, ou seja, Pixel Independente de Resoluo. uma unidade de
medida abstrata baseada na densidade da tela e fundamental para criarmos
apps para Android. 1dp corresponde a 1px em uma tela de resoluo de
160dpi (o MDPI da nossa tabelinha, tambm conhecido como Resoluo
Base). Utilizar dp como medida garantir que os elementos do layout
tenham o mesmo tamanho fsico independente da resoluo. No importa
se no mesmo quadrado cabem 4px ou apenas 1, eles sempre tero o mesmo
tamanho fsico.
Vamos para um exemplo prtico. Se voc tiver um cone em PNG de
32dp (ou 32px na resoluo base MDPI) vai precisar das seguintes verses
para atender as outras resolues: 48px (HDPI), 64px (XHDPI), 96px
(XXHDPI) e 128px (XXXHDPI). Mas, como vocs podem notar atravs da
tabela, a grande maioria dos usurios (78.4%) se concentra entre as
resolues MDPI-XDHPI. Ou seja, se voc tiver que priorizar se concentre
nestas trs faixas.

3
 Lembre-se na hora de converter as medidas de sempre arredondar o
nmero se aparecerem casas decimais. Se voc partir do pressuposto que
1px a menor unidade de medida possvel no existe meio pixel.

Qual tamanho devo usar para o artboard do layout?

aqui que a coisa pega! Por mais que voc crie assets em diferentes
resolues utilizando DP, o cliente (e o desenvolvedor) querem ver um
mockup ou pelo menos um wireframe simulando o aplicativo final.
preciso escolher um tamanho de canvas para a criao do seu layout. Para
isto vamos analisar algumas resolues comuns.

MDPI HDPI XHDPI XXHDPI XXXHDPI

360x640px 540x960px 720x1280px 1920x1080px 1440x2160px

Se o seu aplicativo for especfico para smartphones podemos nos

concentrar nas densidades MDPI, HDPI e XDPI. Voc pode comear na
resoluo MDPI e aumentar seus assets (lembre-se de utilizar vetores para
este caso) mas eu, pessoalmente, prefiro comear com um arquivo maior
em XDPI (720x1280px) e depois criar verses menores dos mesmos assets
(75% menor para HDPI e 50% menor para MDPI). Vale ainda acrescentar

4
as barras e botes padres do Android para ficar mais fcil de visualizar o
resultado final.
Se voc est criando um aplicativo que servir tambm para tablets
importante criar um layout que atenda as demais densidades tambm. Neste
caso comece pelo XXXDPI (1440x2160px).
Ateno: estes tamanhos so apenas generalizaes para facilitar o
processo criativo e no correspondem necessariamente a dispositivos reais.
Existe uma quantidade imensa de tamanhos e formatos de smartphones e
tablets e projetar um mock-up para todos seria invivel. Estes formatos so
apenas amostras para que voc possa visualizar o resultado do projeto. Por
isto lembre-se de projetar pensando nos valores em dp.

Ritmo
A ponta do dedo de uma pessoa tem por volta por volta de 9mm, o
que corresponde a cerca de 48dp. Este deve ser portanto o tamanho base
dos objetos tocveis do seu layout para que a interface funcione de maneira
confortvel e os cones e botes sejam fceis de tocar com preciso. Uma
margem de 8dp deve ser acrescentada para garantir a separao dos objetos
e evitar erros.
48dp um tamanho legal para definir como grid horizontal do seu
layout.

5
Tipografia
A famlia tipogrfica padro do Android 4.4 a Roboto. A fonte
pode ser baixada gratuitamente atravs do Google Fonts e vem com uma
srie de pesos diferentes: thin, light, regular, medium, bold e black e
verses condensadas.

SP
A tipografia do seu layout deve seguir uma outra medida: o SP
(scaled pixel). Um SP corresponde a 1 dp em escala 100%. Parece a mesma
coisa, mas no . A vantagem do SP que ele redimensionvel. Ou seja,
o usurio poder aumentar e diminuir o tamanho do texto em SP de acordo
com suas preferncias. 10sp seriam correspondentes a 11dp se o tamanho
do texto estivesse em escala 110%. Esta flexibilidade uma questo de
acessibilidade j que poder redimensionar o texto fundamental para
pessoas com dificuldade de viso.
Para resumir o drama das unidades de medida:
SP para tipografia.
DP para todo o resto.
Fim.
Para garantir a legibilidade a documentao oficial recomenda alguns
tamanhos para texto:

6
 Lembre-se que, se voc tiver usando o Photoshop deve converter o
tamanho de acordo com a densidade que escolheu trabalhar. Vamos supor
que o seu artboard seja o XDPI (720x1280px). Isto significa 1sp = 2px. Ou
seja, o texto de 22sp vai valer 44px e assim por diante.
possvel tambm implementar fontes customizadas atravs de um
arquivo ttf. Mas esta opo pode deixar o seu app um pouco mais pesado.

cones

7
Launcher
Este o cone de inicializao do aplicativo a partir da Home. Como
este o primeiro contato que o pblico ter com a sua marca interessante
incorporar conceitos da sua identidade visual como formas, cores ou at
mesmo utilizar o seu logotipo. importante testar se o cone permanece
visvel em diversos tipos de background j que o usurio pode trocar o
papel de parede da Home pela imagem que desejar. O launcher icon pode
ser utilizando tambm ao longo da barra de ao em todas as telas do
aplicativo.
Alm das verso padro de 48dp, importante criar um Launcher no
tamanho 512x512px para ser utilizado na Google Play.

cones de ao
Os cones da barra de ao precisam ter 32dp. O estilo destes cones
slido, sem muitos detalhes, representando claramente uma ao nica e
ocupando uma rea focal de 24dp. A grossura dos traos e espaos
negativos deve ter ao menos 2dp. J existem cones pr-definidos para
diversas aes comuns como compartilhar um contedo ou enviar um e-
mail, portanto, antes de criar o seu, verifique se no existe um padro do
sistema.

cones contextuais
So cones pequenos utilizados ao longo do App que servem para
mostrar aes secundrias e status de itens. As estrelinhas em e-mails
importantes no Gmail so um exemplo de cone contextual. O estilo deve
ser neutro, flat e simples. Prefira formas preenchidas e cores slidas.
Tamanho 16dp e rea focal 12dp.

cones de notificao
Utilizados na barra de status para indicar novas notificaes para o
seu App. Devem ter 24dp, sendo que a rea focal deve ser 22dp. A
recomendao para estilo que sejam slidos, brancos e simples. Procure
utilizar uma verso simplificada do smbolo do launcher para facilitar a
associao entre a notificao e o seu aplicativo.

8
Tabela de converso
Para facilitar o calculo, consulte esta tabela para descobrir o tamanho
de cada tipo de item em pixels.

Launcher Action Icon Pequeno / Contextual Notificao

mdpi 48x48px 32x32px 16x16px 24x24px
hdpi 72x72px 48x48px 24x24px 36x36px
xhdpi 96x96px 64x64px 32x32px 48x48px
xxhdpi 144x144px 96x96px 48x48px 72x72px

Organizando os assets
Convenes de nomenclatura
Existem alguns padres para nomear os assets que so teis na hora
de encontrar o arquivo que voc precisa dentro de uma pasta. Estes so
alguns dos prefixos comuns:

Tipo de asset Prefixo Exemplo

cone ic_ ic_estrela.png
Launcher ic_launcher ic_launcher_nomedoapp.png
cones da action bar ic_menu ic_menu_busca.png
cones da barra de status ic_stat_notificar ic_stat_notificar_msg.png
cones das tabs ic_tab ic_tab_recente.png
cones de dialogo ic_dialog ic_dialog_info.png

Estrutura de diretrio

9
 Separe os cones em pastas de acordo com a densidade. Lembre-se
de utilizar o mesmo nome para as diferentes verses do mesmo cone para
facilitar na hora de encontrar o asset que voc precisa.

Branding
Alm dos cones e do seu logotipo existe um grande espao para
voc reforar o branding dentro de um aplicativo. Elementos da interface
como checkboxes, radio buttons, barras de progresso, abas e sliders podem
ser personalizados para refletir a identidade visual da sua marca.

Botes
Para botes formados apenas por imagens no necessario utilizar
um background. O mesmo vale para botes formados por texto. Uma frase
demonstrando a ao claramente (como Iniciar ou Login) juntamente
como cores, peso ou tipografia diferente j suficiente para sinalizar ao
usurio que possvel interagir com o objeto.
A recomendao da documentao oficial evitar utilizar
backgrounds para os botes j que a aparncia deles tende a deixar o visual
do app mais pesado. O ideal deixar um ou dois no mximo para os
seguintes casos: call to action (ex: cadastrar), deciso chave (ex: aceitar ou
rejeitar) ou ao significativa (ex: comprar agora, deletar).

Entregveis

10
 1. Wireframe ou mock-up na resoluo de tela e densidade de pixels de
sua preferncia. Se desejar inclua tambm verses retrato e paisagens
e um layout alternativo para tablets.
2. Imagens bitmap recortadas em tamanhos diferentes para todas as
densidades que voc decidir atender (no mnimo trs verses: MDPI,
HDPI e XDPI). Arquivos transparentes devem estar em png.
3. Especificaes de tamanhos de itens e espaamento (na unidade DP),
tipografia (tamanhos em SP), cores e variaes dos itens para
comportamentos ativo, inativo, no momento de toque, etc. Esta
documentao pode ser em um arquivo de texto organizadinho,
anotaes nas imagens do layout ou at mesmo um Guia de
Estilos completo.

Ferramentas
Seguindo estas etapas seu trabalho est concludo! Abaixo eu
separei algumas ferramentas teis para auxiliar cada processo. Para mais
dicas no esquea de consultar a documentao oficial. At a prxima!

Android Downloads
A seo Android Downloads da documentao oficial conta com
diversos itens teis: kit de stencils para wireframes, cones de ao em
formato vetor e bitmap, paleta de cores e guia sobre a fonte Roboto. Vale a
sua visita!

11
Android UI Design Kit for Photoshop
O kit Android UI em formato Photoshop tem verses dos elementos
da user interface do Android 4.4 prontinho para voc utilizar. So
barrinhas, campos de formulrio, abas, botes do sistema, enfim, uma srie
de recursos super teis para voc desenvolver o layout do seu aplicativo. O
arquivo sempre atualizado para mxima compatibilidade com a ltima
verso do sistema operacional.

Android Developers
Se voc prefere assistir vdeo aulas, d uma olhada no canal do
Youtube Android Developers, principalmente na srie Design Bytes. So
vdeo curtos e gratuitos que do uma srie de pinceladas teis sobre as
melhores prticas. A maior parte dos vdeos est em ingls, mas alguns j
esto sendo nacionalizados.

12
Conversores de densidade
Se voc ficou meio perdido para converter medidas de pixel para dp,
d uma olhada nestas calculadoras online. Basta definir um valor em pixel
para obter as medidas proporcionais em MDPI, HDPI e XHDPI. Mais fcil
do que falar mal do IE6.
Teehanlax Density Converter
Android DPI Calculator

Android App Icon Template

13
 O App Icon Template um arquivo de Photoshop com smart objects
para que voc possa criar e visualizar seu launcher icon renderizado na tela
inicial do Android. O pacote ainda acompanha texturas, linhas guias e
actions para automatizar o processo de exportar o cone para diversas
densidades de tela. Existe tambm uma verso do mesmo template para
iOS.

Android Asset Studio

Se voc um desenvolvedor e no entende nada de design o Android
Asset Studio pode ser til para voc. A ferramenta um kit com diversos
geradores para criar os assets bsicos de interfaces Android. Basta
customizar as cores, definir um estilo para os itens e baixar os arquivos. O
kit de ferramentas conta ainda com um gerador de cones, gaveta de
navegao e frames de smartphones para apresentar o seu layout. No d
para criar nada especialmente genial, mas um bom ponto de partida se
voc deseja criar uma aplicao simples.

14
Fluid UI
Esta ferramenta bem interessante para criar wireframes e
fluxogramas online. O Fluid UI conta com diversos elementos comuns de
uma interface Android em um esquema drag and drop para voc criar
rascunhos com velocidade. O plano gratuito permite criar at 10 telas, mas
existem outros planos pagos ilimitados.

15