Designing for Android

By Dan McKenzie

Para os designers, o Android o elefante na sala, quando se trata de design app.Tanto como designers gostariam de pensar que um mundo iOS em que todos osanyones se preocupa so iPhones, iPads ea App Store, ningum pode ignorar que o Android tem atualmente a maioria da quota de mercado de smartphones, e que ele est sendo usado em tudo, desde comprimidos para e-readers. Em resumo, aplataforma Google Android est rapidamente se tornando onipresente, e as marcas esto comeando a perceber. Mas vamos enfrent-lo. Vrios dispositivos Android e fatores de forma faz-lo sentir como projetar, pois uma batalha difcil. E sua documentao enigmtica no um ponto de partida para projetar e produzir excelentes aplicativos. Navegar na Web de recursos no projeto Android e voc vai encontrar pouco l para gui-lo. Se tudo isso parece desencorajar (e se a razo que voc no est projetandoaplicativos para Android), voc no est sozinho. Felizmente, o Android est comeando a abordar as questes com vrios dispositivos e tamanhos de tela, e fabricantes de aparelhos esto lentamente chegando a padres que acabar porreduzir a complexidade. Este artigo ir ajudar os designers a se familiarizar com o que eles precisam saberpara comear com o Android e para transferir os ativos direito da equipe de desenvolvimento. Os assuntos que vamos abordar so: Desmistificar densidades tela Android, Aprender os fundamentos do projeto Android via padres de projeto, Design de bens as 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 compreenso do hardware primeiro uma boa idia. Para iOS apps, que seria o iPhone e iPod Touch. Android, por sua vez, se estende por dezenas de dispositivos e fabricantes. Por onde comear? A antiga linha de base para telas com suporte para dispositivos Android smartphones foi o T-Mobile G1, o primeiro disponvel comercialmente dispositivo Android-powered que tem uma tela HVGA medindo 320 x 480 pixels. HVGA (half-size video graphics array) significa "metade do tamanho da matriz de grficos de vdeo" (ou metade do tamanho VGA) e o tamanho de exibio padro para smartphones de hoje. OiPhone 3G, 3G e 2G usam a mesma configurao.

T-Mobile G1, o primeiro dispositivo Android comercialmente disponvel e a linha de base para as especificaes da tela Android

Para manter as coisas simples, Android quebra tamanhos de tela fsica (medida como o comprimento da diagonal da tela a partir do canto superior esquerdo para o canto inferior direito) em quatro tamanhos geral: pequeno, normal, grande e extragrande.

Dois tamanhos de tela comuns no Android. (Image from Google I/O 2010)

320 480 considerado um tamanho de tela "normal" pelo Android. Quanto a "extragrande", acho comprimidos. No entanto, the most populares smartphones Android tm hoje WVGA (ie variedade VGA) 800 480 pixels exibe HD. Ento, o que "normal" est mudando rapidamente. Por enquanto, vamos dizer que a maioria dos smartphones Android tm telas grandes.

Diagrama de varias configuraes de tela disponveis a partir do emulador de Skin no SDK do Android. (Imagem: Android Developers website) A variedade de tamanhos de display pode ser um desafio para os designers que esto tentando criar one-size-fits-all layouts. Eu encontrei a melhor abordagem projetar um conjunto de layouts para 320 x 533 pixels fsico 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 fsica em dispositivos maiores, como o Droid Motorola e HTC Evo pode exigir alteraes nos layouts linha de base que fazer melhor uso dos bens imobilirios extra.

O que voc precisa saber sobre densidade de tela

Tamanhos de tela so apenas metade da foto! Os desenvolvedores no se referem a uma resoluo de tela, mas sim a sua densidade. Veja como Android define os termos em seu Guia de Desenvolvedores: Resoluo O nmero total de pixels em uma tela fsica Densidade Tela A quantidade de pixels dentro de uma rea fsica da tela, normalmente referido como DPI (dots per inch). Densidade de pixels independente (DP) Esta uma unidade de pixel virtual que voc usaria para definir um layout de interface do usurio, a fim de expressar as dimenses do layout ou a posio de uma forma independente de densidade. A densidade de pixels independente equivalente a um pixel fsica em uma tela de 160 DPI, que a densidade de

referncia assumido pelo sistema de um "meio" densidade tela. Em tempo de execuo, o sistema de forma transparente lida com qualquer escala das unidades de DP, se necessrio, com base na densidade real da tela em uso. A converso 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 fsica. Sempre usar unidades de DP na definio de interface do usurio do seu aplicativo para garantir que a interface do usurio 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 bsicas: ldpi (baixo), mdpi (mdio), hdpi (alta), e xhdpi (extra alta). Isto importante porque voc vai precisar entregar todos os elementos grficos (bitmaps) em conjuntos de diferentes densidades. No mnimo, voc vai precisar para entregar mdpi e define hdpi para quaisquer aplicaes smartphone. O que isto significa todos os grficos bitmap precisam ser ajustados para cima ou para baixo de sua linha de base (320 x 533) layouts de tela (nota: no tambm 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 exigncia de bitmap semelhante ao preparar grficos para impresso vs na web. Se voc tem alguma experincia com produo de impresso, voc saberque 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 resoluo e, em seguida, defina a resoluo 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 ns no estamos mudando a resoluo do arquivo, somente o tamanhoda imagem (ie padro 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 layou tem 320 480). Colocar esta mesmos 100 100 cone em um dispositivo com uma tela lDPI tornaria o cone aparecer grande e embaada. 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).

Uma aplicao sem suporte de densidadet. (Image: Android Developers website)

Para ajustar a densidade de dispositivo de tela diferente, precisamos seguir uma relao de escala 3:4:6:8 entre os quatro tamanhos de densidade. (Para o iPhone, fcil:. apenas uma relao de 2:1 entre os 4 e iPhone 3GS) Usando nossos ndices e uma matemtica simples, podemos criar quatro verses diferentes do nosso bitmap para entregar aos nossos desenvolvedores para a produo: 75 75 para telas de baixa densidade (ie 0,75);

 100 100 para mdia densidade telas (nossa linha de base); 150 150 para telas de alta densidade ( 1,5); 200 200 para extra alta densidade telas ( 2.0). (Ns estamos preocupados apenas com lDPI, mDPI e hDPI para aplicativos Android smartphone.)

Os ativos grfico final seria parecido com usando os quatro densidades de tela diferente.

Depois de ter produzido todos os seus grficos, voc pode organizar sua biblioteca de grficos como segue:

organizao sugeriu e

rotulagem

das pastas e

arquivos de

ativos. Na

preparao

de nossa

estrela grfico, todos os prefixos arquivo pode ser precedido pelo ic_starnome, 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 padro de 72 PPI, e escala as imagens de acordo.

Usando padres de projeto Android

Clientes freqentemente perguntam se podem usar seu design iPhone app para o Android. Se voc est procurando atalhos, a construo de uma aplicao para navegadores Web mvel usando algo parecido com Webkit e HTML5 talvez a melhor escolha. Mas para produzir um nativo Android app, a resposta no. Por qu? Porque convenes Android da interface do usurio so diferentes das do iPhone. A grande diferena a tecla "Voltar", para navegao em pginas anteriores. A chave volta dispositivos Android fixo e sempre disponvel para o usurio,independentemente do app. tanto uma parte fsica do dispositivo ou digitalmente fixado na parte inferior da tela, independente de qualquer aplicativo, como no recm-lanado Android 3.0 para comprimidos (mais sobre isso depois).

A chave dura "Back" em um smartphone rodando Android 2.0. A presena de um fora tecla Voltar do aplicativo em si deixa espao para outros elementos no topo da tela, como um logotipo, ttulo ou menu. Enquanto esta conveno de navegao muito diferente da de iOS, h ainda outros diferenciaisque o Android chama de "padres de projeto." De acordo com o Android, um padro de projeto uma "soluo geral para um problema recorrente." Abaixo esto as principais padres de projeto Android que foram introduzidas com a verso 2.0.

Painel de instrumentos (Dashboard)

Esse padro resolve o problema de ter que navegar para vrias camadas dentro de uma app. Ele fornece uma soluo de plataforma de lanamento para aplicativos ricos,

como Facebook, LinkedIn e Evernote.

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

Barra de aes (Action Bar)

A barra de ao um dos padres mais importantes do Android design e diferenciais. Ele funciona muito semelhante bandeira de um site convencional,com o logotipo ou o ttulo normalmente na esquerda e os itens de navegao direita. O design da barra de ao flexvel e permite a pairar menus e caixas de pesquisa em expanso. geralmente usado como um recurso global em vez de um contextual.

A barra de aes padro como usada no Twitter.

Barra de procura (Search Bar)

Isto d ao usurio uma maneira simples de busca por categoria, e oferecesugestes de pesquisa.

A barra de procura padro como usada no Google Search app.

Aes rpidas (Quick Actions)

Este padro de design semelhante ao comportamento iOS 'pop-up que d ao usurio mais aes contextuais. Por exemplo, tocando uma foto em um aplicativo pode desencadear uma barra de ao rpida que permite ao usurio compartilhar a foto.

A barra de aes rapidas padro como usada no Twitter.

Companion Widget
Widgets permitem um app mostrar notificaes na tela do usurio de lanamento. Ao contrrio de notificaes push em iOS, que se comportam como temporrio dilogos modais, widgets companheiro permanecer na tela de lanamento. (Dica: para selecionar um widget para o seu dispositivo Android, basta tocar e segurar qualquer espao vazio em uma das telas de lanamento.)

Companion widgets by Engadget, New York Times and Pandora.

Usando padres de projeto estabelecido importante para manter a experincia intuitiva e familiar para os usurios. Usurios no querem uma experincia de iPhone em seu dispositivo Android mais do que um usurio quer uma experincia Mac Microsoft em seu ambiente Mac OS. Compreenso dos padres de design o primeiro passo para aprender a falar Android e projetar uma tima experincia para seus usurios. Seus desenvolvedores tambm obrigado!

Android Design Deliverables

OK, ento voc projetou seu app Android e esto prontos para torn-lo realidade.O que voc precisa para entregar para o desenvolvedor? Aqui est uma lista rpida dos resultados: 1. Wireframes anotada da experincia do usurio com base no tamanho da tela de linha de base larga de 320 x 533 pixels fsica. Incluir qualquer telas adicionais para casos em que um tamanho de tela maior ou menor (320 x 480) requer um layout modificado ou uma verso paisagem necessria. 2. Visual maquetes de design de telas chave para WVGA de grandes dimenses(320 x 533) telas (baseado em um 800 x 480 WVGA hdpi tamanho da tela fsica pixel), alm de quaisquer layouts personalizados necessria para tamanhos de tela diferentes.

3. Especificaes para o espaamento, fonte tamanhos e cores, e uma indicao de qualquer bitmaps. 4. A biblioteca de grficos com lDPI, mDPI e verses de todos os hDPI bitmaps salvos como arquivos PNG transparente. 5. Densidade de cones especficos de aplicao, incluindo o cone do app do lanamento, como arquivos PNG transparente. Android j oferece excelentes dicas para designers sobre este tema, juntamente com alguns downloads, incluindo grficos templates PSD e outras guloseimas.

Como tirar fotografias (screenshots)

Seu gerente de produto acaba de pedir para tirar fotografias da construo do desenvolvedor. O desenvolvedor ocupado e no pode lev-los para voc at amanh. O que voc faz? Como desta escrita, o Android no tem como built-in para tirar fotografias (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 comear! 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 Ento, 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 aplicaes), 2. Toque em "Aplicaes", 3. Toque sobre o "Desenvolvimento", 4. Marque a caixa de "depurao USB."

Agora, para a parte divertida: Conecte seu dispositivo Android para o seu computador via USB. Usurios do Windows: permitir que o Windows para instalar todos os drivers. Um dos condutores no pode ser encontrado e ser necessrio 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 boto direito do mouse sobre ele. 1. Optar por "update / install" o driver para seu dispositivo. 2. V para o seu desktop. Abra a pasta Android SDK e selecione SDK Setup.exe. 3. Permita que ele se atualiza automaticamente a sua lista dos SDKs sistema operacional que esto disponveis, e selecione para instalar todos os pacotes. 4. Uma vez terminado, sair do aplicativo. 5. Volte para a pasta abriu SDK Android em seu desktop e abra o menu Ferramentas" pasta. 6. Clique no DDMs arquivo para abrir o Monitor de Depurao Dalvik. 7. Selecione o seu dispositivo a partir do "Nome" painel. 8. 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 lanamento do seu dispositivo Android

The Dalvik Debut Monitor.

Para navegar: 1. Pegue o seu dispositivo Android e navegar para qualquer pgina. 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 velho Shift + Command para o truque para tirar uma fotografia. No Windows, voc pode copiar e col-lo em uma das aplicaes de mdia do Windows.

Sobre Tablets Android

Na CES 2011, as empresas choveram comprimidos Android, com uma variedade de tamanhos de tela. No entanto, aps uma rpida reviso dos mais populares, podemos concluir que os dois tamanhos de tela importante focalizar em termos depixels fsicos so 1280 800 e 800 480. Com o Android 3,0 Honeycomb lanamento, Google desde os fabricantes de dispositivos com uma interface do usurio Android feita para tablets. Foi-se o difcil boto "Voltar", substitudo por um software de navegao ancorada gerado ea barra de status do sistema, na parte inferior da tela.

The anchored navigation and system bar in Android 3.0.

Android 3.0 tem uma atualizao visual, incorporando ao mesmo tempo todos os padres de design introduzido no Android 2.0. Uma das grandes diferenas com o3.0 a Barra de ao que foi atualizado para incluir separadores, menus drop-downou farinha de rosca. A barra de ao tambm pode mudar sua aparncia para mostrar aes contextuais quando o usurio seleciona um ou vrios elementos em uma tela.

The new action bar with tabs, introduced in Android 3.0.

Outro novo recurso adicionado chamado de "fragmentos". Um

ao framework Android 3.0 est com um mecanismo fragmento um componente auto-contido em um

layout que pode mudar o tamanho e posio dependendo da orientao da tela e tamanho. Este ainda aborda o problema de projetar para mltiplos fatores de forma, dando designers e desenvolvedores uma maneira de fazer os seus componentes layout da tela elstica e empilhvel, dependendo das limitaes da tela do app.Componentes da tela pode ser esticado, empilhados, expandido e entrou em colapso, e revelado e escondido.

Diagram showing examples of how fragments can be used.

A proxima release do Android , Creme Sandwich scrumptiously apelidado deIce, promete trazer esta funcionalidade para smartphones Android, bem como,dando aos designers e desenvolvedores a opo de criar um aplicativo usando umone-size-fits-all estratgia. Esta poderia ser uma mudana de paradigma para designers e desenvolvedores, que ter de aprender a pensar de design app em termos de peas do puzzle que pode ser esticada, empilhados, expandido ouescondidas para se ajustar o fator de forma. Em suma, isso permitir um AndroidOS para rodar em qualquer lugar (com possibilidades infinitas!).

Um conselho
Fazer chegar em suas mos 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 no tem um dispositivo Android.