Quente nos saltos da nossa GUI artigo anterior, iPhone e Kits de Desenvolvimento iPad GUI , hoje nos concentramos em Android desenvolvimento. A idéia é a mesma: Para ajudar a simplificar seu projeto app e desenvolvimento, com uma coleção bastante abrangente de kits Android GUI, ícones, fontes, PSDs e ferramentas, que permitirão que você se concentrar no desenvolvimento, em vez de ter que projetar tudo do zero. .
Em comparação com o iPhone Apples, o Android diretrizes de design de interação estão longe de ser extensa nem são tão regimental. Diretrizes andróides são suficientes abrangentes e claros, mas eles permitem um pouco de espaço para alguma criatividade design original - o que é bom. Claro, há uma razão pela qual há diretrizes de design, e não devem ser abusado (nice ser original embora), as diretrizes irão ajudá-lo para criar uma experiência polido e uniformizados para o usuário. (Você pode ler mais sobre as diretrizes de projeto Android abaixo).

Orientações Android GUI

Interface de Usuário Diretrizes Android »
O Android equipa UI desenvolveu diretrizes para a interação e design visual de aplicações Android. Você pode ver aqui para artigos que descrevem essas diretrizes como eles são liberados.
Projeto Diretrizes Ícone Android »
Essa diretriz fornece informações para ajudar você a criar ícones para as várias partes da interface do usuário do aplicativo que correspondem aos estilos gerais utilizados pelo quadro 2.x Android.
Projeto Diretrizes Android Widget »
Este documento descreve como criar um widget para que caiba graficamente com outros widgets e com os outros elementos da tela inicial do Android. Ele também descreve alguns padrões de arte widget e algumas dicas e truques gráficos widget da equipe do Android.

Android GUI Tools

DroidDraw: Editor Graphical User Interface para o Android

DroidDraw é uma interface de usuário (UI) designer / editor que pode ser usado para construir GUIs para o Android. É executável autônomo, e está disponível para Mac OS X, Windows e Linux.
Download DroidDraw »

AnDroidDraw

AnDroidDraw é uma aplicação Android, que se integra com DroidDraw (veja acima) e permite que você baixe o seu GUIs diretamente DroidDraw e visualizar suas GUIs em um emulador ou dispositivo Android.
Download AnDroidDraw »

Modelos Android Wireframe

Se você usar um lápis antes de começar a tomar o seu Android app para o reino digital, então aqui estão algumas prontas modelos wireframe Android para ajudar a desenhar para alguns dos aparelhos lá fora. Há toda uma variedade de dispositivos para escolher, com diferentes resoluções de tela e teclados rígido ou virtual.
Modelos Wireframe baixar Android »

Android total Gui Kits

Android GUI PSD Vector Kit

O Android GUI Starter Kit vem com elementos de botão, bem como várias opções de interface diferente para Android GUI e é baseado em elementos do Android 1.5.
A maioria dos elementos e ilustração de telefone são feitas em vetor caminho para que sejam facilmente redimensionáveis.
Android GUI PSD Kit Vector »

Google Android GUI PSD

Este Google Android GUI PSD foi inspirada por teehan + lax do PSD iPhone , tem os elementos básicos GUI, construído através de vetores em escala.
Google Android GUI PSD »

Fogos de artifício Modelo para Android

Neste modelo de fogos de artifício o Android elementos de interface de usuário foram redesenhados como imagens vetoriais, com as pastas os elementos têm sido quase sempre rotulados de acordo com o vocabulário Android.
Fogos de artifício Modelo para Android »

Google Android para Stencil Omnigfaffle

Este é um conjunto stencil OmniGraffle para Android prototipagem.
Google Android para Stencil Omnigfaffle »

Android versão 1.0 para Stencil esboço Omnigfaffle

O objetivo deste wireframe estilo sketch é evitar que o público-alvo da reflexão sobre design visual e incentiva-los a concentrar-se sobre a funcionalidade eo comportamento a ser proposto.
Android versão 1.0 para Stencil esboço Omnigfaffle »

Android Stencil Protótipos GUI para o Visio

Android Stencil Protótipos GUI para o Visio »

Android GUI Icon-Sets

Android Developers Template Icon Pack

O Android Icon Pack Templates é uma coleção de desenhos de modelo, filtros e configurações que tornam mais fácil para você criar ícones que estão em conformidade com as especificações gerais dadas no diretrizes de projeto Android. Os modelos de ícone estão em ambos Photoshop (. Psd) e Illustrator (. Ai) formatos de arquivo.
Há três conjuntos de ícones incluídos no pacote de download, Ícones Lançador Standard, ícones de menu padrão e ícones de barras padrão Status.
Você pode visualizar o ícone conjuntos abaixo.

Ícones padrão Lançador

Android Developers Template Pack Ícone »

Ícones do menu padrão

Android Developers Template Pack Ícone »

Ícones da barra de status padrão

Android Developers Template Pack Ícone »

Android Developer Icon Set Comum

O design eo estilo desses ícones foram baseados em alguns dos ícones que estão contidos no SDK Android. No total há 24 Glyphs png com a opção dos seguintes tamanhos:. 16 × 16, 24 × 24, 32 × 32 e 48 × 48 pixels.
Android Ícone Desenvolvedor Common Set »

Android Developer Common Icon Set II

Este conjunto de ícones contém ícones projetados para uso no Menu, Listas, Tabs (selecionados e não selecionados) ou caixas de diálogo, com o correto dimensionamento classificados em pastas devidamente rotulados.
No total há 15 glyphs e todos em formato. Png.
Android Ícone Desenvolvedor Common Set II »

Ícones Android

Este desenvolvedor Android jogo do ícone inclui 30. Ícones do menu png além dos arquivos fonte adicional (. Eps) para maior personalização.
Ícones Android »

Glyphish

O conjunto de ícones Glyphish ter projetado e cuidadosamente otimizado especificamente para uso em barras de ferramentas e barras de guia em aplicativos do iPhone, mas também seria perfeito para o Desenvolvimento Android.
Os 130 ícones são de 24 bits. Png são cerca de 30 × 30 pixels para ícones da barra de guia e cerca de 20 × 20 pixels para ícones da barra de ferramentas e navegação.
Glyphish »

Ícones de aplicativos Android Set

Ícones de aplicativos Android Set »

iDroid ícones para o Android

iDroid ícones para Android »

Android Respire Icon Set

Android Respire Icon Set »

Modelos Android Ícone

Modelos Android Ícone »

Ícones Android Set II

Icons Set Android II »

Switcher Icon Set

Switcher Icon Set »

Gesturecons - Multi-Touch Icons

Estes ícones baseados em vetores foram criados para ajudar na concepção, desenvolvimento, implementação e promoção de multi-touch interfaces. Você pode usar Gesturecons dentro de suas aplicações, a fim de demonstrar aos usuários como para concluir as ações ou levá-los a interagir com um aplicativo quando eles se aproximam dela. Você pode escalá-los para qualquer tamanho e alterá-los em qualquer forma que desejar.
Dentro do pacote de download há 52 ícones de alta resolução vector totalmente escalável e alteráveis ​​(tipos. Pdf,. Ai,. Eps.).
Gesturecons - Multi-Touch Icons »

Fontes Android

Pacote @ font-face para a Família de fontes Droid

Este é um @font-face pacote de download de fontes Droid. Uma série de fontes oficiais que tenham sido projetado e otimizado para uso em menus de aplicativos, navegadores web e para o texto outra tela para o sistema operacional Android. Também estão incluídos no pacote são os droid.css e droid.sass arquivos com o CSS3 @font-face declarações.
Você pode ver um preview das fontes Droid abaixo:

Droid Sans regular e negrito visualização Fontes

Pacote @ font-face para a Família de fontes Droid »

Pré-visualização Droid Sans Mono

Pacote @ font-face para a Família de fontes Droid »

Droid Serif Visualização

Pacote @ font-face para a Família de fontes Droid »

Free Font Droid Serif pelo Google Android @ fontsquirrel

Free Font Droid Serif pelo Google Android @ fontsquirrel »

Android GUI Templates PSD

Google Nexus One Modelos v2

Google Nexus One v2 modelos »

Google Nexus One Template

Google Nexus One Template »

Google Nexus One

Google Nexus One »

HTC Dream com Android. PSD

HTC Dream com Android. PSD »

HTC Dream PSD

HTC Dream PSD »

HTC Hero PSD

HTC Hero PSD »

Android Search Toolbar PSD

Mais do que nunca, os designers estão sendo feitas para criar experiências para uma variedade de dispositivos móveis. Com o aumento da tablet adoção e nos movemos para o mundo pós-PC , as empresas vão competir pela atenção dos usuários com a qualidade de sua experiência. Projetar aplicativos de sucesso para comprimidos Android requer não apenas um conceito grande que irá incentivar downloads, uso e retenção, mas também uma experiência que os usuários Android vai encontrar intuitiva e natural ao ambiente.

O seguinte o ajudará designers se familiarizar com Android app tablet de design através da compreensão das diferenças entre o iPad iOS interface de usuário e 3.x Android "Honeycomb" convenções UI e elementos. Vamos também olhar para os padrões de design e estratégias Honeycomb layout, e depois rever alguns dos melhores aplicativos tablet Android lá fora.
Observe que, enquanto aplicativos Android 2.x para smartphones pode ser executado em comprimidos, Android 3.0 Honeycomb foi projetado e lançado especificamente para tablets. atualizações futuras prometem trazer recursos para dispositivos Honeycomb smartphone, bem como tornar mais fácil para projetar e construir para a tela de múltiplos tipos.
Para a maioria de nós, a nossa primeira exposição ao comprimidos foi através do IPAD. Por esta razão, é razoável para começar a comparar as duas interfaces de usuário. Comparando, podemos alinhar o que aprendemos sobre os comprimidos e começar a focar as principais diferenças entre os dois, para que possamos atender às necessidades exclusivas dos usuários UI Android. Não só este vai nos ajudar a chegar até a velocidade, mas se torna especialmente importante na concepção de um tablet Android app de um iPad um existente.

É Just Like A iPad, certo?

Enquanto o tablet Android e semelhanças experiência iPad compartilham muitos (gestos de toque, os ícones de lançamento app, modais, etc), os designers devem estar cientes das muitas diferenças, antes de fazer suposições e elaboração de telas.

Tamanho da tela e Orientação

A maior diferença entre as duas plataformas é o fator de forma. Layouts para o iPad são medidos a 768 × 1024 pixels físico, eo iPad usa o modo retrato como a sua orientação de visualização padrão.
Com comprimidos Android, é um pouco mais complicado, devido aos fabricantes de vários dispositivos. Em geral, existem 7 - e comprimidos de 10 polegadas tela Android tamanhos (medido na diagonal do canto superior esquerdo para o canto inferior direito), com tamanhos entre eles. No entanto, a maioria dos comprimidos são cerca de 10 polegadas.
O que isso significa em pixels? Uma boa base para o seu layouts é de 1280 × 752 pixels (excluindo a barra de sistema), com base em um tamanho de tela de 10 polegadas e usando paisagem (não vertical) como a orientação padrão. Como no iPad, o conteúdo comprimidos Android pode ser visto em ambos paisagem ou retrato, mas o modo paisagem é geralmente preferido.

O modo retrato de um típico de 10 polegadas tablet Android (esquerda) e no iPad (direita).

A paisagem em um típico de 10 polegadas tablet Android (esquerda) e no iPad (direita).
No entanto, com o Android, o tamanho da tela é apenas a metade. Comprimidos Android também vêm em diferentes "densidades de tela" - isto é, o número de pixels numa determinada área da tela. Sem entrar em muitos detalhes, os designers têm para preparar toda a produção pronta para bitmaps de três densidades de tela diferente, escalando cada bitmap a 1,5 × e 2 × seu tamanho original. Assim, um conjunto de bitmap para 100 × 100 pixels também teria cópias em 150 × 150 e 200 × 200. Por meio de três lotes de gráficos em escala nestes tamanhos, você será capaz de entregar sua bitmaps às telas tablet média, alta e extra-alta densidade, sem perder qualidade de imagem.
Para mais informações sobre densidades de tela e gráficos preparando para dispositivos Android, consulte o meu artigo anterior sobre a concepção para o Android .

Sistema de Bar

Enquanto iOS faz uso mínimo da barra de sistema, Android Honeycomb expande seu tamanho para incluir notificações e botões de navegação suave. Existe um botão "Back", um botão home e um "Recent apps" botão.

O Android bar sistema Honeycomb.
Bar Android Honeycomb do sistema e os botões estão sempre presentes e aparecem na parte inferior da tela, independentemente de qual aplicativo é aberto. Pense nisso como um dispositivo elétrico UI permanente. A única exceção é uma "Lights out" mode, que escurece a barra de sistema para mostrar imersiva conteúdo, como vídeo e jogos.

Botão "Voltar"

Enquanto o volume e permanência da barra de sistema Honeycomb pode parecer um obstáculo para designers, que faz liberar os imóveis que normalmente é tomada pelo botão "Voltar" em aplicativos iPad. O botão "Voltar" na barra de Honeycomb do sistema funciona globalmente em todas as apps.

O botão "Voltar" na barra de sistema.

Barra de ação

A maior parte das diferenças entre as plataformas de interface do usuário é encontrado na barra de ação superior. Android sugere um regime específico de elementos e um formato específico visual para a barra de ação, incluindo a colocação do ícone ou logotipo, a navegação (por exemplo, menu drop-down ou tabs) e ações comuns. Este é um dos padrões de design mais unificador através Android Honeycomb apps, e familiarizar-se com ele antes de tentar personalizações ou algo do tipo iPad valeria a pena. Mais na barra de ação penetrante mais tarde.

A barra de ação.

Widgets

Novo para os usuários iPad será Widgets do Android. Como o nome indica, estes são de notificação pequenas e atalhos ferramentas que os usuários podem definir a aparecer em sua tela de lançamento. Widgets podem ser projetados para mostrar pontos de vista de pilha, vistas de grelha e vistas de lista, e com Android 3.1, que são agora resizable.

Vários widgets na tela de um lançamento.

Notificações

Enquanto o sistema iOS 'empurra notificações alertas simples para sua tela de lançamento, Honeycomb oferece notificações rico que pop up ("brinde" que costumávamos chamá-los), na área inferior direita da tela, bem como Growl no Mac OS X. layouts personalizados para as notificações podem ser qualquer coisa de ícones para ticker texto para botões acionáveis.

A notificação no Android.

Configurações

Acesso às configurações em um aplicativo iPad são geralmente apresentados em uma janela pop-over, disparado por um botão "i"; as categorias configurações são divididas em tabelas para facilitar a identificação visual. Favo de mel tem uma convenção diferente. Parece mais "General Settings" do iOS "tela, onde o usuário navega categorias à esquerda e vistas de detalhes à direita. Este é o caminho (e mais elegante) preferiu apresentar várias configurações em favo de mel.

O padrão de design configurações no aplicativo de calendário.

Elementos UI

Como você pode imaginar, o Android vai para grandes comprimentos para fazer tudo ao contrario do seu concorrente (que é chamado de diferenciação!). Favo de mel tem suas convenções próprias UI, e agora tem um novo "holográfico UI" linguagem visual para ações de rotina, como escolher uma data e hora, a seleção de uma opção, definir o volume, etc Compreender esta linguagem interface do usuário é importante para a construção de fluxos de tela e criação de layouts.

Uma amostragem de elementos UI, tirada de um slide em uma I / O 2011 Google apresentação.

Fontes

Quantas fontes não iPad 4,3 disponibilizar? A resposta é 57 .
Quantas faz Android? Apenas três .
Yep, os três são Sans Droid, Droid Serif e Droid Sans Mono . Mas há um lado positivo. Enquanto enviamos somente esses três com a plataforma, os desenvolvedores estão livres para qualquer pacote de outras fontes com seus apps.

Qualquer coisa o mesmo?

Felizmente para designers que já estão familiarizados com o iPad, as duas plataformas têm algumas semelhanças.

Gestos de toque

Toque, toque duas vezes, flick, arraste, apertar, rodar e rolar à vontade.

Ver painel Split e Multi-interface do usuário

A exibição de divisão é um dos layouts mais comuns para comprimidos. É composto por duas lado a lado-painéis. Claro, você pode adicionar painéis para layouts mais complexos.

Layout do Ustream de divisão de exibição, com categorias na esquerda e conteúdo à direita.

Multimídia embutido

Ambas as plataformas permitem embutido áudio, vídeo e mapas.

O aplicativo YouTube, com um player de vídeo embutido.

Prancheta

Para copiar e colar dados de entrada e saída de aplicações.

Drag and Drop

Ambas as plataformas têm de arrastar-e-soltar.

O recurso de arrastar e soltar no aplicativo Gmail.

Design Patterns

Favo de mel continua muitos dos padrões de design introduzido no Android 2.0 e expande sobre eles. No caso de você não estiver familiarizado com os padrões de design, eles são, como definido no Android, a "solução geral para um problema recorrente." Padrões de projeto são convenções UI-chave desenhada por mantenedores Android para ajudar a unificar a experiência do usuário e dar designers e desenvolvedores um modelo para trabalhar. Eles também são personalizáveis, assim não há necessidade de traste!
Conforme mencionado, a barra de ação é a mais proeminente Android componente UI e é a iremos focar aqui.

A barra de ação destaque no aplicativo de calendário.

Ícone ou logotipo

A barra de ação começa com um ícone ou logotipo no canto esquerdo. É acionáveis; tocando nele, o usuário é direcionado para a tela do aplicativo casa.

O Calendário ícone do aplicativo.

Navegação

A seguir, vamos normalmente encontrar alguma forma de navegação, na forma de um menu drop-down ou guia. Honeycomb usa um triângulo gráfico para indicar um menu drop-down e uma série de guias para sublinha, que normalmente ocupam a maior parte dos imóveis da barra de ação.
Um botão de seta para a esquerda também pode aparecer à esquerda do ícone ou o logotipo ou o rótulo, para navegar de volta ou cancelamento de uma ação principal.

Três tipos diferentes de navegação barra de ação.

Acções comuns

Ações comuns, como o nome indica, dá ao usuário as coisas tais como partes de busca, e um menu de estouro. Eles estão sempre posicionado à direita da barra de ação, longe de qualquer guias.

Acções comuns no aplicativo de calendário.

Menu de estouro

O menu de estouro é parte do grupo de ações comuns e às vezes é separada por uma regra vertical. É um lugar para itens de menu diversos, tais cenários, ajuda e feedback.

Um menu de estouro.

Pesquisa

Pesquisa é também uma parte do grupo de ações comuns. Única de busca é a sua expansão e recolher ação. Toque no ícone de pesquisa e uma caixa de pesquisa se expande para fora, para que você digite uma consulta. Toque no "x" para cancelar, e desmoronar-se ao seu estado de um único botão. Este é um protetor de espaço quando muitas ações ou guias precisam ser mostrados.

A função de pesquisa fechada (em cima) e expandido (baixo). Tocar na lupa abre a caixa de pesquisa, enquanto tocando no "x" fecha-lo.

Ações contextuais

Ações contextuais alterar o formato da barra de ação quando um item é selecionado, revelando as opções exclusivas para esse item. Por exemplo, se um aplicativo está exibindo fotos miniaturas, a barra de ação pode mudar uma vez que uma imagem é selecionada, proporcionando ações contextuais para a edição que a imagem particular.
Para sair da barra de ação contextual, os usuários podem tocar em qualquer "Cancelar" ou "Concluído" na extremidade direita da barra.

A barra de ação contextual é acionado quando tocando e segurando um e-mail no Gmail app.

Disposição Estratégias Tablet

Usando os fragmentos e Multi-Pane Views

Os blocos de construção do projeto Honeycomb são " Fragments ". Um fragmento é um componente de layout independente que pode mudar o tamanho ou a posição de layout 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 restrições da tela do dispositivo que está executando o aplicativo. Componentes da tela pode ser esticado, empilhados, expandido ou recolhido e mostrados ou ocultos.

Fragmentos do quadro dá aos designers e desenvolvedores várias opções para manter sua layouts em tamanhos de tela e modos de orientação.
O que faz Fragmentos tão especial? Com uma biblioteca de compatibilidade, os desenvolvedores podem trazer esta funcionalidade para smartphones Android vai voltar para a versão 1.6, permitindo-lhes construir aplicativos usando uma one-size-fits-all estratégia. Em suma, permite que os designers e desenvolvedores para construir um app para tudo.
Fragmentos enquanto pode ser um termo usado mais pelos desenvolvedores, designers ainda deve ter uma compreensão básica de como cápsulas de conteúdo pode ser esticado, empilhados, expandiu e escondido à vontade.
O arranjo mais comum de Fragmentos é a visão de divisão. Este layout é comum em aplicativos de notícias e e-mail, onde uma lista é apresentada em uma coluna estreita e uma visão detalhada em uma ampla um.

A exibição de divisão utilizado por EUA hoje
Outra forma de apresentar uma visão dividida é transformá-lo em seu lado. Neste caso, o fragmento de lista para os lados torna-se um carrossel, navegar horizontalmente em vez de verticalmente.

Estratégias de orientação

Enquanto Fragmentos são grandes para a aplicação de um projeto para vários tamanhos de ecrã, eles também são úteis para definir estratégias de orientação. Seu design de tela pode parecer grande no modo paisagem, mas o que você vai fazer com três colunas em uma visão estreita retrato? Novamente, você tem a opção de esticar, pilha ou ocultar o conteúdo. Pense em Fragmentos como um bando de peças do puzzle stretchy que você pode se movimentar, forma e eliminar, se necessário.

Uma palavra sobre Animação

O quadro Honeycomb permite que designers e desenvolvedores a usar uma variedade de efeitos de animação. De acordo com o Android 3.0 Destaques página, "Animações pode criar fades ou movimento entre os estados, imagem um ciclo de animação ou uma animação existente, alterar cores, e muito mais." Honeycomb também possui alto desempenho mecanismos para a apresentação de 2-D e 3 - D gráficos. Para uma boa visão do que é capaz de Honeycomb, confira este vídeo .

Aprendizagem do Exemplo

Aplicativos Android tablet ainda um espaço relativamente novo, e algumas marcas estão apenas começando a testar as águas. Abaixo está uma lista de aplicativos para a inspiração. Você pode baixar qualquer um deles a partir do Android Market ou Amazon .
YouTube
Naturalmente, YouTube, do Google app para Honeycomb é exemplar, apresentando todos os padrões de design e elementos de interface do usuário discutido acima. Para ter uma idéia boa para Honeycomb, baixar este aplicativo primeiro e levá-la para uma rodada.

CNN
O app CNN faz bom uso de gestos de toque (incluindo flicking para ver mais conteúdo), a exibição de divisão e as fontes! A fonte personalizada (Rockwell) é usado para manchetes de notícias.

CNBC
Outro app boa notícia, com a animação (o estoque de papel picado) e gráficos ricos e gradientes. CNBC tem um dos aplicativos mais visualmente atraentes.

Pluma
Com seu layout de três colunas, Plume é um bom exemplo de como layouts podem precisar ser mudado dramaticamente de paisagem para retrato visualizações.

FlightTrack
Um app de dados pesado feito com elegância. Inclui mapas agradável, animação sutil e padrão de elementos Honeycomb UI.

Pulso
O que mais você pode dizer: é pulso para comprimidos Android! Mas comparando o Android e versões iPad, que são idênticos em quase todos os sentidos, ainda é divertido de qualquer maneira.

WeatherBug
Este foi um dos primeiros apps Honeycomb no Android Market. Faz bom uso dos mapas e da interface do usuário holográfico para mostrar imagens de câmaras climáticas.

Acender
Sticks Kindle bastante com o livro em usar padrões de design e elementos de interface do usuário do favo de mel. O resultado é elegante, enquanto se mantém fiel às melhores práticas do Android.

Menções Honrosas

• IMDb
• News360
• EUA Hoje
• AccuWeather
• Ustream
• Google Earth
• Pense Espaço

Recursos on-line

Vídeo

• Projetando e implementando UIs Android para telefones e comprimidos , o Google I / O 2011
• Android 3.0 Honeycomb demonstração de animação

Apresentações

• Projetando e implementando UIs Android para telefones e comprimidos , o Google I / O 2011 (PDF)

Blogs

• Padrões Tablet UI

Android Developers

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