Beruflich Dokumente
Kultur Dokumente
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.
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).
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.
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.
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.
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:
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
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.
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