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.
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 .
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.
O botão "Voltar" na barra de sistema.
A barra de ação.
Vários widgets na tela de um lançamento.
A notificação no Android.
O padrão de design configurações no aplicativo de calendário.
Uma amostragem de elementos UI, tirada de um slide em uma I / O 2011 Google apresentação.
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.
Layout do Ustream de divisão de exibição, com categorias na esquerda e conteúdo à direita.
O aplicativo YouTube, com um player de vídeo embutido.
O recurso de arrastar e soltar no aplicativo Gmail.
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.
O Calendário ícone do aplicativo.
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 no aplicativo de calendário.
Um menu de estouro.
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.
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.
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.
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.
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)
