• Desmistificando densidades tela Android,
• Aprender os fundamentos do projeto Android via padrões de projeto,
• Ativos de design às suas necessidades de desenvolvedor,
• Como obter screenshots,
• O que é de cerca de 3 Android, e que está no horizonte.

Smartphones Android E Tamanhos Display

Ao iniciar qualquer projeto de design digital, a compreensão do hardware primeiro é uma boa idéia. Para iOS apps, que seria o iPhone e iPod Touch. Android, por sua vez, se estende por dezenas de dispositivos e fabricantes. Por onde começar?
A linha de base para telas antigas com suporte para dispositivos Android smartphones foi o T-Mobile G1, o primeiro disponível comercialmente dispositivo Android-powered que tem uma tela HVGA medindo 320 x 480 pixels.
HVGA significa "metade do tamanho da matriz de gráficos de vídeo" (ou metade do tamanho VGA) e é o tamanho de exibição padrão para smartphones de hoje. O iPhone 3G, 3G e 2G usam a mesma configuração.

T-Mobile G1, o primeiro disponível comercialmente dispositivo Android ea linha de base para as especificações da tela Android.
Para manter as coisas simples, Android quebra tamanhos de tela física (medida como o comprimento da diagonal da tela a partir do canto superior esquerdo para canto inferior direito) em quatro tamanhos geral: pequeno, normal, grande e extragrande.

Dois tamanhos de tela comum Android. (Imagem da Google I / O 2010)
320 × 480 é considerado um tamanho de tela "normal" pelo Android. Quanto a "extragrande", acho comprimidos. No entanto, o Android smartphones mais populares hoje têm WVGA (ie variedade VGA) 800 + × 480 pixels exibe HD. Então, o que é "normal" está mudando rapidamente. Por enquanto, vamos dizer que a maioria dos smartphones Android têm telas grandes.

Diagrama de configurações de tela várias skins disponíveis a partir do emulador no SDK do Android. (Imagem: Android Developers website)
A variedade de tamanhos de display pode ser um desafio para os designers que estão tentando criar one-size-fits-all layouts. Eu encontrei a melhor abordagem é projetar um conjunto de layouts para 320 x 533 pixels físico e, em seguida, introduzir layouts personalizados para os tamanhos de tela diferentes.
Enquanto isso cria mais trabalho para o designer e desenvolvedor, o maior tamanho de tela física em dispositivos maiores, como o Droid Motorola e HTC Evo pode exigir alterações no layouts linha de base que fazer melhor uso dos bens imobiliários extra.

O Que Você Precisa Saber Sobre Densidades Tela

Tamanhos de tela são apenas metade da foto! Os desenvolvedores não se referem a uma resolução de tela, mas sim a sua densidade. Veja como Android define os termos em seu Guia de desenvolvedores :

• Resolução
  O número total de pixels em uma tela física.
• Densidade tela
  A quantidade de pixels dentro de uma área física da tela, normalmente referido como DPI (dots per inch).
• Densidade de pixel independente (DP)
  Esta é uma unidade de pixel virtual que você usaria para definir um layout de interface do usuário, a fim de expressar as dimensões do layout ou a posição de uma forma independente de densidade. A densidade de pixels independente é equivalente a um pixel física em uma tela de 160 DPI, que é a densidade de referência assumido pelo sistema de um "meio" densidade tela. Em tempo de execução, o sistema de forma transparente lida com qualquer escala das unidades de DP, se necessário, com base na densidade real da tela em uso. A conversão de unidades de DP de pixels da tela é simples: pixels = DP * (DPI / 160). Por exemplo, em uma tela de 240 DPI, uma DP é igual a 1,5 pixels física. Sempre usar unidades de DP na definição de interface do usuário do seu aplicativo para garantir que a interface do usuário exibe corretamente em telas com diferentes densidades.

É um pouco confuso, mas é isso que você precisa saber: Como os tamanhos de tela, o Android se divide em quatro densidades de tela densidades básicas: ldpi (baixo), mdpi (médio), hdpi (alta), e xhdpi (extra alta). Isto é importante porque você vai precisar entregar todos os elementos gráficos (bitmaps) em conjuntos de diferentes densidades. No mínimo, você vai precisar para entregar mdpi e define hdpi para quaisquer aplicações smartphone.
O que isto significa é todos os gráficos bitmap precisam ser ajustados para cima ou para baixo de sua linha de base (320 x 533) layouts de tela (nota: não é também uma forma de analisar arquivos SVG que fornece uma forma de arte vetorial escala em telas de diferentes tamanhos e densidades sem perda de qualidade de imagem).
A exigência de bitmap é semelhante ao preparar gráficos para impressão vs na web. Se você tem alguma experiência com produção de impressão, você saberá que uma imagem de 72 PPI será muito pixelizada e tremidas quando ampliadas e impressas. Em vez disso, você precisará refazer a imagem como uma imagem vetorial ou usar uma foto de alta resolução e, em seguida, defina a resolução do arquivo em cerca de 300 PPI, a fim de imprimi-lo sem qualquer perda de qualidade de imagem. Densidade de tela para o Android funciona de forma semelhante, exceto que nós não estamos mudando a resolução do arquivo, somente o tamanho da imagem (ie padrão de 72 PPI é bom).
Vamos dizer que você levou um ícone de bitmap mede 100 × 100 pixels de uma das telas de seus projetos de linha de base (lembre-se a "base" é um conjunto de layout em 320 × 480). Colocar esta mesmos 100 × 100 ícone em um dispositivo com uma tela lDPI tornaria o ícone aparecer grande e embaçada. Da mesma forma, colocando-o em um dispositivo com uma tela hDPI iria fazê-lo parecer muito pequeno (devido ao dispositivo que tem mais pontos por polegada que a tela mDPI).

Um aplicativo sem suporte de densidade. (Imagem: Android Developers website)
Para ajustar a densidade de dispositivo de tela diferente, precisamos seguir uma relação de escala 3:4:6:8 entre os quatro tamanhos de densidade. (Para o iPhone, é fácil:. É apenas uma relação de 2:1 entre os 4 e iPhone 3GS) Usando nossos índices e uma matemática simples, podemos criar quatro versões diferentes do nosso bitmap para entregar aos nossos desenvolvedores para a produção:

• 75 × 75 para telas de baixa densidade (ie × 0,75);
• 100 × 100 para média densidade telas (nossa linha de base);
• 150 × 150 para telas de alta densidade (× 1,5);
• 200 × 200 para extra alta densidade telas (× 2.0). (Nós estamos preocupados apenas com lDPI, mDPI e hDPI para aplicativos Android smartphone.)

Os ativos gráfico final seria parecido com usando os quatro densidades de tela diferente.
Depois de ter produzido todos os seus gráficos, você pode organizar sua biblioteca de gráficos como segue:

A organização sugeriu e rotulagem das pastas e arquivos de ativos. Na preparação de nossa estrela gráfico, todos os prefixos arquivo pode ser precedido pelo ic_star nome, sem alterar os nomes das respectivas densidades.
Você pode estar confuso sobre o PPI (pixels por polegada) para definir suas entregas em. Basta deixá-los no padrão de 72 PPI, e escala as imagens de acordo.

Usando Padrões de Projeto Android

Clientes freqüentemente perguntam se podem usar seu design iPhone app para o Android. Se você está procurando atalhos, a construção de uma aplicação para navegadores Web móvel usando algo parecido com Webkit e HTML5 é talvez a melhor escolha. Mas para produzir um nativo Android app, a resposta é não. Por quê? Porque convenções Android da interface do usuário são diferentes das do iPhone.
A grande diferença é a tecla "Voltar", para navegação em páginas anteriores. A chave volta à dispositivos Android é fixo e sempre disponível para o usuário, independentemente do app. É tanto uma parte física do dispositivo ou digitalmente fixado na parte inferior da tela, independente de qualquer aplicativo, como no recém-lançado Android 3.0 para comprimidos (mais sobre isso depois).

O duro chave "Back" em um smartphone rodando Android 2.0.
A presença de um fora tecla Voltar do aplicativo em si deixa espaço para outros elementos no topo da tela, como um logotipo, título ou menu. Enquanto esta convenção de navegação é muito diferente da de iOS, há ainda outros diferenciais que o Android chama de "padrões de projeto." De acordo com o Android, um padrão de projeto é uma "solução geral para um problema recorrente." Abaixo estão as principais padrões de projeto Android que foram introduzidas com a versão 2.0.

Painel de instrumentos

Esse padrão resolve o problema de ter que navegar para várias camadas dentro de uma app. Ele fornece uma solução de plataforma de lançamento para aplicativos ricos, como Facebook, LinkedIn e Evernote.

O padrão de design do painel, como o usado por Facebook e LinkedIn.

Barra de ação

A barra de ação é um dos padrões mais importantes do Android design e diferenciais. Ele funciona muito semelhante à bandeira de um site convencional, com o logotipo ou o título normalmente na esquerda e os itens de navegação à direita. O design da barra de ação é flexível e permite a pairar menus e caixas de pesquisa em expansão. É geralmente usado como um recurso global em vez de um contextual.

A ação padrão de design bar, usado pelo Twitter.

Search Bar

Isto dá ao usuário uma maneira simples de busca por categoria, e oferece sugestões de pesquisa.

A busca padrão de design bar, usado no aplicativo Google Search.

Ações rápidas

Este padrão de design é semelhante ao comportamento iOS 'pop-up que dá ao usuário mais ações contextuais. Por exemplo, tocando uma foto em um aplicativo pode desencadear uma barra de ação rápida que permite ao usuário compartilhar a foto.

O padrão de projeto de ação rápida como o usado por Twitter.

Widget Companion

Widgets permitir que um app para mostrar notificações na tela do usuário de lançamento. Ao contrário de notificações push em iOS, que se comportam como temporário diálogos modais, widgets companheiro permanecer na tela de lançamento. (Dica: para selecionar um widget para o seu dispositivo Android, basta tocar e segurar qualquer espaço vazio em uma das telas de lançamento.)

Widgets companheiro pelo Engadget, New York Times e Pandora.
Usando padrões de projeto estabelecido é importante para manter a experiência intuitiva e familiar para os usuários. Usuários não querem uma experiência de iPhone em seu dispositivo Android mais do que um usuário quer uma experiência Mac Microsoft em seu ambiente Mac OS. Compreensão dos padrões de design é o primeiro passo para aprender a falar Android e projetar uma óptima experiência para seus usuários. Seus desenvolvedores também obrigado!

Android design Deliverables

OK, então você projetou seu app Android e estão prontos para torná-lo realidade. O que você precisa para entregar para o desenvolvedor? Aqui está uma lista rápida dos resultados:

1. Wireframes anotada da experiência do usuário com base no tamanho da tela de linha de base grande de 320 x 533 pixels física. Incluir qualquer telas adicionais para casos em que um tamanho de tela maior ou menor (320 x 480) requer um layout modificado ou uma versão paisagem é necessária.
2. Visual maquetes de design de telas chave para WVGA de grandes dimensões (320 x 533) telas (baseado em um 800 x 480 WVGA hdpi tamanho da tela física pixel), além de quaisquer layouts personalizados necessária para tamanhos de tela diferentes.
3. Especificações para espaçamento, tipo de letra tamanhos e cores, e uma indicação de qualquer bitmaps.
4. A biblioteca de gráficos com lDPI, mDPI e versões de todos os hDPI bitmaps salvos como arquivos PNG transparente.
5. Densidade de ícones específicos de aplicação, incluindo o ícone do app do lançamento, como arquivos PNG transparente. Android já oferece excelentes dicas para designers sobre este tema, juntamente com alguns downloads, incluindo gráficos templates PSD e outras guloseimas .

Como tirar screenshots

Seu gerente de produto acaba de pedir para screenshots de construção do desenvolvedor. O desenvolvedor é ocupado e não pode levá-los para você até amanhã. O que você faz? Como desta escrita, o Android não tem como built-in para tirar screenshots (chatice, eu sei). A única maneira é apenas para lidar com ela, e isso significa que finge ser um desenvolvedor por um tempo e download de alguns softwares realmente assustador. Vamos começar!
O seguinte software deve ser baixado:

1. Todos os drivers USB para o seu dispositivo Android,
2. Android Software Development Kit (SDK),
3. Java SE SDK

Então, no seu computador:

1. Extrair os drivers USB em uma pasta no seu desktop,
2. Extraia o SDK Android para uma pasta no seu desktop,
3. Instalar o Java SE SDK.

Em seu dispositivo Android:

1. Open "Settings" (você vai encontrá-lo no menu de aplicações),
2. Toque em "Aplicações",
3. Toque sobre o "Desenvolvimento",
4. Marque a caixa de "depuração USB."

Agora, para a parte divertida:

1. Conecte seu dispositivo Android para o seu computador via USB. Usuários do Windows: permitir que o Windows para instalar todos os drivers. Um dos condutores não pode ser encontrado e será necessário que você vá para o Gerenciador de Dispositivos do Windows sob o Painel de Controle. Lá, você pode localizar o dispositivo (com um ícone de aviso amarelo ao lado) e botão direito do mouse sobre ele.
2. Optar por "update / install" o driver para seu dispositivo.
3. Vá para o seu desktop. Abra a pasta Android SDK e selecione SDK Setup.exe.
4. Permita que ele se atualiza automaticamente a sua lista dos SDKs sistema operacional que estão disponíveis, e selecione para instalar todos os pacotes.
5. Uma vez terminado, sair do aplicativo.
6. Volte para a pasta abriu SDK Android em seu desktop e abra o menu "Ferramentas" pasta.
7. Clique no DDMs arquivo para abrir o Monitor de Depuração Dalvik.
8. Selecione o seu dispositivo a partir do "Nome" painel.
9. No menu principal do aplicativo, abra o "Device" no menu, e escolha "Captura de tela ..." Um dispositivo de captura de tela janela irá abrir, e você deverá ver a tela de lançamento do seu dispositivo Android.

O Monitor de Debut Dalvik.
Para navegar:

1. Pegue o seu dispositivo Android e navegar para qualquer página. Volte para o seu computador e selecione "Refresh" na janela do Dispositivo de captura de tela. A tela atual do seu dispositivo Android deve aparecer.
2. Se você estiver em um Mac, você pode apenas fazer o Shift + Command + velha 4 truque para tirar um screenshot. No Windows, você pode copiar e colá-lo em uma das aplicações de mídia do Windows.

Sobre Tablets Android

Na CES 2011, empresas choveram comprimidos Android , com uma variedade de tamanhos de tela. No entanto, após uma rápida revisão das mais populares , podemos concluir que os dois tamanhos de tela importante focalizar em termos de pixels físicos são 1280 × 800 e 800 × 480.
Com o Android 3,0 Honeycomb lançamento, Google desde os fabricantes de dispositivos com uma interface do usuário Android feita para tablets. Foi-se o difícil botão "Voltar", substituído por um software de navegação ancorada gerado ea barra de status do sistema, na parte inferior da tela.

A navegação e bar ancorado no sistema Android 3.0.
Android 3.0 tem uma atualização visual, incorporando ao mesmo tempo todos os padrões de design introduzido no Android 2.0. Uma das grandes diferenças com o 3.0 é a Barra de ação que foi atualizado para incluir separadores, menus drop-down ou farinha de rosca. A barra de ação também pode mudar sua aparência para mostrar ações contextuais quando o usuário seleciona um ou vários elementos em uma tela.

A barra de ação nova, com abas, introduzido no Android 3.0.
Outro novo recurso adicionado ao framework Android 3.0 está com um mecanismo chamado de " fragmentos ". Um fragmento é um componente auto-contido em um layout que pode mudar o tamanho e posição dependendo da orientação da tela e tamanho. Este ainda aborda o problema de projetar para múltiplos fatores de forma, dando designers e desenvolvedores uma maneira de fazer os seus componentes layout da tela elástica e empilhável, dependendo das limitações da tela do app. Componentes da tela pode ser esticado, empilhados, expandido e entrou em colapso, e revelado e escondido.

Diagrama mostrando exemplos de como os fragmentos podem ser usados.
O lançamento do Android que vem, scrumptiously apelidado Ice Cream Sandwich , promete trazer esta funcionalidade para smartphones Android, bem como, dando aos designers e desenvolvedores a opção de criar um aplicativo usando um one-size-fits-all estratégia. Esta poderia ser uma mudança de paradigma para designers e desenvolvedores, que terá de aprender a pensar de design app em termos de peças do puzzle que pode ser esticada, empilhados, expandido ou escondidas para se ajustar o fator de forma. Em suma, isso permitirá um Android OS para rodar em qualquer lugar (com possibilidades infinitas!).

Uma palavra de conselho

Fazer chegar em suas mãos um telefone Android e tablet, e passar algum tempo de download de aplicativos e explorando suas interfaces. A fim de projetar para o Android, você tem que mergulhar no meio ambiente e sei que intimamente. Isto pode parecer óbvio, mas é sempre surpreendente ouvir quando até mesmo o gerente do produto não tem um dispositivo Android.

Recursos on-line

Aqui estão alguns links para recursos online que eu encontrei especialmente útil:

Apresentações

• Design Patterns Android
• Usuário Android Design de Interface de Dicas

Vídeos

• Android UI Design Patterns (Google I / O 2010)
• Projetando e implementando UIs Android para telefones e Comprimidos (Google I / O 2011)

Documentos

• Comparação de Dispositivos Android

Blogs

• Guia de Designer de Apoio Screens vários dispositivos Android
• Projeto Android UI Patterns
• Padrões Android

Comentários do Produto

• Melhor Celular Android (CNET, Maio 2011)
• Melhor Tablets Android (CNET, Maio 2011)

Android Developers

• Apoio telas múltiplas
• Ícone Design
• Plataforma Android 3,0 Destaques

Outros

• Android App Developers Kits GUI, ícones, fontes e Ferramentas