10 etapas para o Android

Este guia ajuda você a começar a criar para Android traduzindo designs móveis do iOS para o Android usando padrões fundamentais de UX do Android, além do Material Design.

Delineado para paridade de design e ordenado para eficiência. Se você estiver seguindo um sistema de design de base compartilhada, poderá traduzir designs com seu próprio sistema em vez do Material 3. Tanto o Android quanto o iOS aderem à ideia de que o conteúdo vem em primeiro lugar.

Depois disso, o branding pode aparecer como cor, tipo e forma. Isso não só permite a legibilidade do conteúdo, mas também facilita a criação de coesão.

Comece com seus designs do iOS

Antes de começar, faça uma cópia do seu app iOS. Os apps iOS são divididos em três áreas: barras, visualizações e controles. Você pode usar essa estrutura para trabalhar na tradução, com o estilo por último.

Confira as partes de um app Android.

1. Excluir a interface do sistema iOS

Exclua a barra de status e o indicador de início. É mais simples fazer isso agora.

2. Redimensionar seus frames

Você pode usar o dimensionamento compacto do Android, 412 dp. No entanto, considere uma variedade de dispositivos, mesmo dentro de um tamanho de classe de janela. Por exemplo, teste em 360 dp para acomodar telas menores e adapte em todos os tamanhos de classe de janela.

3. Substituir por barras de sistema do Android

A interface do sistema Android pode variar dependendo do dispositivo e das configurações do usuário, mas mostrar uma interface do sistema padrão pode ajudar a dar mais contexto aos seus designs. Coloque a barra de notificações na parte de cima e uma navegação por gestos ou uma barra de navegação de três botões na parte de baixo.

Para mais informações, consulte Barras de sistema do Android.

4. Dependendo da sua navegação

Troque a barra de guias (navegação inferior) pela barra de navegação.

Volte ao mapa de fluxo. Seu app iOS está usando um menu "Mais"? As práticas recomendadas do HIG sugerem não usar esse padrão. Mantenha cinco ou menos itens, mantenha a barra de navegação inferior na navegação principal, avalie se algo secundário, como perfil ou configurações, pode ser movido para a barra de apps superior ou talvez você tenha uma ação principal que possa ser traduzida para um botão de ação flutuante.

A navegação principal sempre deve estar presente nas visualizações mãe (o nível superior de uma seção no mapa de fluxo). As visualizações filhas (qualquer coisa abaixo da visualização da família) podem incluir a navegação principal se estiverem mais acima na hierarquia de navegação e não forem um modal.

Atualize a barra de navegação inferior com os ícones e rótulos apropriados. Ambas as plataformas evitam o movimento lateral entre os destinos de navegação.

5. Barras de navegação para barras de apps superiores

Divida-as seção por seção: primeiro as visualizações da família e depois os modos infantis. A barra de apps é composta pelo lado esquerdo: navegação e título, e lado direito: itens de ação.

Se o app usar um menu de gaveta de navegação em vez de uma barra de navegação inferior, um ícone de gaveta será mostrado em todas as visualizações mãe.

Se o app não tiver uma barra ou gaveta, as visualizações mãe não vão mostrar um ícone de navegação principal.

O título é alinhado à esquerda por padrão na barra de apps do Android.

As visualizações filhas têm uma seta para cima no local do ícone de navegação. Não confunda com "Voltar". A seta para cima move o usuário um nível acima na hierarquia de navegação de um app em um fluxo do usuário, enquanto o gesto de deslizar para trás ou para a borda fica na navegação do sistema, movendo o usuário para trás e até mesmo tirando o usuário do app.

E as visualizações modais? Para modais de tela cheia (como players de vídeo e imagens), isso será semelhante à barra de apps de visualização filha, exceto que o ícone de navegação deve mudar para "Fechar", que dispensa o modal.

6. Um pouco mais de modalidade

Comece com visualizações modais grandes, mais adequadas para concentrar a atenção do usuário em uma tarefa. No iOS, elas são frequentemente vistas como planilhas, em que o usuário pode deslizar para baixo.

Termine de trocar as barras de apps. Para modais de planilha do iOS, troque a parte superior da planilha e a espiada de plano de fundo por uma barra de apps de diálogo em tela cheia.

Bônus: confira se alguma das suas planilhas modais do iOS pode ser traduzida para planilhas inferiores.

Planilhas de ação e atividade para planilhas inferiores. As planilhas de compartilhamento também podem ser traduzidas agora.

Para alertas, use caixas de diálogo do sistema. Se você estiver usando-as para informações importantes que precisam ser reconhecidas pelo usuário de alguma forma, troque-as por caixas de diálogo do sistema. Lembre-se de trocar todas as entradas e seletores neste momento também.

7. Conteúdo irmão

Guias, visualizadores de páginas ou guias deslizantes. Se você estiver usando controles segmentados no iOS, eles serão traduzidos para guias no Android. Ambos atuam como uma maneira de filtrar entre visualizações de informações semelhantes, mas não iguais. As guias do Android são normalmente anexadas à barra de apps e vêm com o benefício adicional de poder deslizar entre o conteúdo.

8. Conteúdo e controles

Dependendo de como você configurou as restrições ou o comportamento de redimensionamento, a maior parte do conteúdo já pode ter sido redimensionada. Mas aproveite esse tempo para revisar e definir suas margens. 16 dp é um bom padrão em telas pequenas.

A grade de referência é baseada em uma grade de 8 dp para componentes e 4 dp para tipo e ícones. Uma grade de 8 pontos funciona bem no iOS. Portanto, considere-a como um ponto de partida para ambas as plataformas.

Controles. Troque esses botões de alternância por botões do Android. Use caixas de seleção e botões de opção do Android. O Android vem com todos eles.

Se você tiver formulários, troque os campos de texto do iOS por campos do Android. O Material Design vem com opções como contorno ou preenchimento. Escolha a que melhor se adapta ao seu branding.

As listas do Material Design têm algumas diferenças em comparação com as células de tabela do iOS:

• As linhas divisórias são usadas com moderação.
• Os indicadores não são usados em listas para ajudar a manter o ruído visual no mínimo.
• As dimensões aderem à grade de 8 dp.

9. Estilo

Cor: a cor da interface consiste em cores de destaque, semânticas e de superfície montadas em um esquema de cores. Essas cores são aplicadas à interface pelas funções.

Tipo:se estiver usando uma fonte do sistema, substitua a San Francisco. Roboto é a fonte do sistema padrão para Android. Dito isso, recomendamos que você expresse o estilo exclusivo da sua marca com temas e fontes do Google para download.

Ícones:o mesmo aqui. Se estiver usando símbolos SF, verifique se todos foram convertidos em ícones ou símbolos do Material Design. Escolha a variação adequada para sua marca. Você sabia que pode usar ícones do Material Design em qualquer plataforma?

Movimento:o Android e o iOS têm um design de movimento distinto, que deve ser respeitado para cada plataforma. O movimento do Material Design é informativo, focado e expresso. O Ripple é um destaque distinto usado em componentes para fornecer feedback tátil. O sistema de movimento é um conjunto de padrões de transição para aproveitar a transformação de contêiner, o eixo compartilhado, o esmaecimento e as animações de esmaecimento cruzado. Considere se os elementos no seu design têm contêineres persistentes, a relação entre os elementos e como eles precisam entrar ou sair.

10. Arrumar tudo

Se você estiver traduzindo um protótipo, este é um bom momento para refazer as coisas. Volte à sua navegação principal. Em seguida, suas barras de apps, lembrando a diferença entre "Acima" e "Voltar", e selecione transições de página adequadas para o Android (mencionadas na etapa 9).

Você deve ter um protótipo totalmente funcional pronto e, como o redimensionou, ele está pronto para entrega.

Guia de estilo e componentes

Se você tiver um sistema de design ou guia de estilo, poderá ter seus próprios estilos fundamentais (cor, tipo, ícones, forma) que podem ser usados com o Material Design, assim como você os usaria com as orientações do iOS. Usando os Temas do Material Design, você pode personalizar os componentes do Material Design com o estilo exclusivo da sua marca usando cor, tipo e forma.

Ter diretrizes específicas da plataforma não é incomum entre produtos multiplataforma e pode tornar seu próprio sistema de design mais centrado no usuário.

Por fim, se você estiver trabalhando sem um, saiba que nem todo app ou produto precisa de um sistema de design totalmente personalizado. Considere criar um guia de estilo de uma página. Um guia de estilo é um documento que descreve as especificações fundamentais para designs. As diretrizes de branding geralmente contêm um guia de estilo.

Ele pode ser copiado para o Android e usado como fonte para atualizar estilos (ou símbolos, componentes ou uma biblioteca).