Recomendações de projeto

O Android ajuda você a desenvolver um app que funciona bem em uma ampla variedade de tamanhos de tela e formatos de dispositivos. Essa ampla compatibilidade ajuda a criar um único app que pode ser distribuído amplamente a todos os dispositivos de destino.

No entanto, para oferecer aos usuários a melhor experiência possível em cada configuração de tela, é preciso otimizar os layouts e outros componentes da interface para diferentes tamanhos. No ChromeOS, otimizar a interface permite aproveitar ao máximo o espaço adicional da tela para oferecer novos recursos, apresentar novos conteúdos ou melhorar a experiência e aumentar o engajamento dos usuários.

Layouts para telas maiores

Se você desenvolveu seu app para smartphones e quer melhorar o design no ChromeOS e em outros formatos de tela grande, comece fazendo pequenos ajustes nos layouts, nas fontes e no espaçamento. Para tablets de 7 polegadas ou um jogo com uma tela grande, esses ajustes podem ser suficientes.

Para telas maiores, é possível redesenhar partes da interface para substituir uma IU "esticada" por uma eficiente com vários painéis, navegação mais simples e conteúdo extra. Os Estudos de materiais (link em inglês) da equipe do Material Design oferecem exemplos de como isso pode ser feito. Por exemplo, veja como o Reply se adapta a diferentes tamanhos de tela.

Veja algumas sugestões:

• Forneça layouts personalizados para essas telas maiores. Para isso, use a menor dimensão da tela ou a largura e a altura mínimas disponíveis.
• Imagine como sua UX e seus layouts funcionam em um ambiente com foco na orientação paisagem, como o ChromeOS. Adapte seus layouts para que tenham boa aparência e desempenho nessas orientações com base no tamanho da janela ou forneça layouts paisagem específicos usando o qualificador de recurso "land". Saiba mais sobre o redimensionamento dinâmico de janelas e outras considerações para telas grandes na página de gerenciamento de janelas.
• As barras de navegação na parte de baixo não escalonam bem quando o app é esticado para ficar mais largo. Considere mover a navegação para um menu à esquerda, onde ela fica mais acessível e pode mostrar mais opções. O exemplo de resposta ilustra bem isso.
• Personalize, no mínimo, dimensões como tamanhos de fonte, margens e espaçamento para telas maiores de modo a melhorar o uso do espaço e a legibilidade do conteúdo. Considere como as coisas podem parecer quando os usuários estão um pouco mais longe do dispositivo, como um dispositivo ChromeOS ou outros ambientes de computador.
• Ajuste o posicionamento dos controles de interface para que possam ser acessados pelos usuários ao usar um mouse ou segurar um tablet, como nas laterais e longe do centro.
• O padding de elementos da interface geralmente é maior no ChromeOS e em outros dispositivos de tela grande do que em smartphones. As margens e os espaçamentos precisam se adaptar a diferentes tamanhos de tela.
• Preencha o conteúdo de texto adequadamente para que não fique alinhado diretamente com as margens da tela. Use um preenchimento mínimo de 16 dp ao redor do conteúdo próximo às margens da tela.

Confira, especialmente, se os seus layouts não parecem "esticados" na tela:

• As linhas de texto não devem ser muito longas. Otimize para um máximo de 100 caracteres por linha, com melhores resultados entre 50 e 75.
• As listas e os menus não devem usar a largura de tela cheia.
• Use o preenchimento para gerenciar as larguras dos elementos na tela ou alternar para uma IU de vários painéis em dispositivos com telas maiores. Consulte a próxima seção.

Aproveitar a área extra da tela

Os dispositivos ChromeOS oferecem muito mais espaço de tela real para o app. Ao criar a interface do app para telas maiores, aproveite ao máximo a área extra.

Nos exemplos Reply e Rally, os apps usam abordagens diferentes para aproveitar o tamanho maior da tela. O Reply adiciona espaço para uma aparência mais limpa, enquanto o Rally mostra mais dados para reduzir a rolagem e os toques.

Um bom ponto de partida é analisar o que pode estar oculto para o usuário e como tornar isso visível. Isso pode mostrar mais informações sobre um item, tornar visíveis menus que podem estar ocultos atrás de um clique com o botão direito ou um toque e manter pressionado, ou mostrar opções de navegação diferentes ou mais detalhadas agora que você tem uma área de navegação maior no lado esquerdo. Essas são grandes conquistas de usabilidade que podem melhorar a UX e dar uma sensação mais parecida com a de um computador ao seu app, sem uma reformulação completa da experiência atual.

Confira algumas recomendações para seu app:

• Sua marca determina a direção que você deve seguir ao pensar nesses diferentes tamanhos de tela. Decidir o que priorizar e mostrar ao usuário depende dos tipos de jornada do usuário e dos recursos mais usados. Para se inspirar, confira os Estudos de materiais e veja como cada produto responde de maneira diferente a uma tela maior.
• Pense em como o design do app deve se comportar usando um sistema de grade responsivo e como o conteúdo, a navegação e as opções devem se mover à medida que você aumenta o espaço da tela.
• Decida em quais tamanhos de tela você usará um layout diferente e forneça os layouts nos buckets de tamanho de janela adequados (como grande/extragrande) ou larguras mínimas de janela (como sw600dp/sw720). Lembre-se de que, ao acessar esses layouts, o contexto geral em que o usuário estava não deve mudar. Tente manter todo o estado do usuário durante a transição entre layouts (posição de rolagem, texto sendo escrito etc.).

Usar recursos criados para densidade mais alta e telas maiores

Para garantir que o app tenha o melhor visual, forneça ícones e outros recursos de bitmap para cada densidade no intervalo geralmente compatível com o ChromeOS. Especificamente, crie ícones para a barra de apps, notificações e tela de início de acordo com as diretrizes de iconografia e forneça-os em formatos vetoriais para que possam ser dimensionados adequadamente com as diferentes telas em que o app será exibido.

Para mais informações sobre VectorDrawables e recursos vetoriais no Android, confira esta postagem do blog (link em inglês) de Nick Butcher.

Ajustar tamanhos de fonte e áreas de toque

Para tornar seu app utilizável no ChromeOS e em telas de densidade mais alta, ajuste os tamanhos de fonte e as áreas de toque na interface para todas as configurações de tela pretendidas. É possível ajustar os tamanhos de fonte com atributos de estilo ou recursos de dimensão e ajustar áreas de toque com layouts e drawables de bitmap, conforme discutido anteriormente.

Veja algumas considerações:

• O texto não deve ser excessivamente grande nem pequeno em tamanhos e densidades de tela maiores. Confira se os rótulos estão dimensionados corretamente para os elementos da interface a que correspondem e se não há quebras de linha inadequadas nos rótulos, nos títulos nem em outros elementos.
• O tamanho da área de toque recomendado para elementos na tela é de 48 dp. Alguns ajustes podem ser necessários na IU para telas maiores. Leia mais sobre Métodos de espaçamento para saber mais sobre áreas de toque e espaçamento entre itens à medida que os tamanhos de tela mudam. Essas recomendações também atendem às diretrizes de acessibilidade mínimas.
• Sempre que possível, para ícones menores, expanda a área de toque para mais de 48 dp usando TouchDelegate ou apenas centralizando o ícone dentro do botão transparente.