⛏️ 👨🏿‍🤝‍👨🏼 ✊🏽 32 diferenças no design de um aplicativo móvel para iOS e Android 👎 🌲 😊

O designer de ferro do Redmadrobot Design Lab Arthur Abrarov compartilha observações.

Adaptar o design a uma plataforma diferente é parte integrante do trabalho de um designer de aplicativos móveis. O objetivo deste trabalho é ajustar organicamente o design aos padrões de interação do usuário. Além disso, uma adaptação bem desenvolvida simplifica o desenvolvimento através do uso de componentes da plataforma nativa.

Para adaptar o design corretamente, você deve seguir as diretrizes da plataforma: Human Interface Guidelines (HIG) para iOS e Material Design para Android. E comunique-se com os desenvolvedores, idealmente, conecte-os ao design o mais cedo possível para que eles possam definir imediatamente limitações técnicas.

Mas qual é exatamente o design para iOS diferente do design para Android? Neste artigo, analisarei 32 diferenças de design específicas para iOS e Android. Eles são divididos em quatro grupos:

Diferenças básicas.
Diferenças na navegação e padrões (UX).
Diferenças nos componentes (UI).
Outras diferenças

Os recursos do IOS estarão à esquerda e os recursos do Android à direita ou superior / inferior.

Diferenças básicas

Diretrizes de interface humana versus projeto de material

Quase todas as diferenças neste artigo são extraídas da análise dessas diretrizes. Sua essência no nível ideológico é a seguinte. O HIG é sobre um design plano, leve e amigável, veio de uma rejeição gradual do skeuomorfismo .

O material possui vários princípios fundamentais: o material como metáfora; ousado, gráfico, consciente; animação significativa; fundação flexível e plataforma cruzada. Se você não estiver familiarizado com as diretrizes, é melhor lê-las antes de ler o artigo.

imagem

2. Unidades: pt vs dp

O design do aplicativo iOS é criado em pt e o aplicativo Android em dp . Geralmente, criamos um design em 1x (ou mdpi) e o carregamos no Zeplin. Zeplin exibe o design para pt para iOS e gera ícones e ilustrações em 2x e 3x. No Android, ele exibe o design em dp e gera gráficos em hdpi, xhpdi, xxhdpi e xxxhdpi.

imagem

3. Tamanho da tela: 320 pt x 568 pt vs 360 dp x 640 dp

Prefiro criar o aplicativo iOS para o menor tamanho - iPhone 5 com um tamanho de tela de 320pt x 568pt. Faço isso para evitar a exibição incorreta do conteúdo em telas pequenas. Algumas pessoas preferem projetar para o iPhone 8.

No Android, existe um tamanho de tela geralmente aceito de 360dp x 640dp.

Ao projetar para iOS, às vezes crio um design para o iPhone X (375pt x 812 pt). Isso é necessário para o desenvolvedor entender como recuar corretamente a tela desse tamanho. Mesmo ao projetar para o iPhone X, você precisa se lembrar de que o Safe é uma área fora da qual você não deve colocar conteúdo.

imagem

4. Fonte do sistema: San Francisco vs Roboto

Se você não souber qual fonte usar no aplicativo, escolha o sistema. No caso do iOS, é São Francisco . E o Android é Roboto .

5. Barra de Navegação Android

Ao contrário do iOS, o Android possui uma ferramenta de navegação traseira integrada. Esta é a barra de navegação do Android .

imagem

Ele é fisicamente integrado ao smartphone ou faz parte da interface. Usando a seta, o usuário recua um passo na sequência cronológica ( navegação cronológica reversa ). A navegação ocorre dentro do aplicativo e entre eles.

No início de minha carreira como designer de aplicativos móveis, há muito atormento os desenvolvedores do Android com a pergunta: por que precisamos de dois botões de volta? Um fica na parte inferior da barra de navegação; o segundo aparece na barra de aplicativos superior quando você acessa a página filho.

A resposta é essa. Existem dois tipos de navegação de volta: a navegação cronológica reversa (nós fazemos isso usando a seta de retorno na barra de navegação, chamada de volta).

imagem

E navegação para cima (fazemos isso com a seta superior, chamamos Up).

imagem

Imagine que temos um caminho ABC, onde A é a página pai e B e C são páginas filho. Imagine que o usuário tenha acessado diretamente de A a C. Se ele pressionar o botão Voltar, ele retornará a A. Mas se ele pressionar Cima, ele primeiro passará para B - e no segundo pressionamento ele irá para A.

Isso é difícil de implementar e confuso para o usuário. , agora esses dois botões de retorno executam a mesma ação de retorno, como no iOS. Ou seja, se você veio de A a C, depois de C, retornaremos a A.

6. Importância da elevação no material

No iOS, basicamente não há sombras. Como exceção, sombras podem ser encontradas na tela principal da App Store e no Health. Mas, em geral, o HIG não prescreve o uso de sombras.

Em Material, as sombras desempenham um grande papel. Eles adicionam à interface um terceiro espaço (eixo Z), devido ao qual cada componente tem seu próprio lugar estrito nesse eixo (de 0 a 24 dp). Além disso, esse eixo Z não existe simplesmente em um nível ideológico: os desenvolvedores têm um parâmetro de elevação no qual definem a posição do componente ao longo desse eixo.

imagem

A navegação e a mudança de estados são acompanhadas por uma alteração na elevação dos componentes. Portanto, ao projetar para Android, devemos abordar conscientemente a criação de sombras.

7. Diferenças na nomeação

Existem muitas diferenças na nomeação. Proponho considerar esses cinco.

uma. Barra de guias versus barra de navegação inferior

Esta é uma barra para a navegação de nível superior do aplicativo. Estaticamente localizado na parte inferior da tela nas duas plataformas. Além de nomear, eles diferem no comportamento. Desmontaremos um pouco mais tarde.

b. Barra de Navegação vs Barra de Aplicativos Principal

Essa barra nas duas plataformas executa aproximadamente as mesmas tarefas: informa o usuário de sua localização atual no aplicativo, possibilita retornar à tela anterior e oferece uma ou mais ações contextuais. Leia mais sobre as diferenças abaixo no artigo.

imagem

c. Controles segmentados x guias

Além de nomear, Guias Android possui vários recursos: você pode mover-se entre as guias rapidamente e o Material permite usá-las para a navegação de nível superior.

d. Alertas vs Diálogos

Curiosamente, apenas uma ferramenta de alerta do usuário é descrita em iOS - Alertas . Existem três no Android : Snackbars, Banners e Dialogs.

O Snackbar foi projetado para mensagens de baixa prioridade e não requer ação. As caixas de diálogo bloqueiam a interação com a interface e requerem uma ação. Os banners estão entre eles: não bloqueiam a interação, mas requerem uma ação.

e Touch ID vs Impressão digital Android

Este é apenas um exemplo de diferentes tecnologias de nomenclatura usadas nessas plataformas. Eles devem ser conhecidos, porque, além de nomear, diferem em muitos recursos técnicos de sua implementação. Compreender as diferenças de nomeação é o primeiro passo para entender as diferenças de tecnologia.

Diferenças na navegação e padrões (UX)

8. Métodos de navegação de nível superior

Vamos começar do topo. O iOS recomenda apenas uma maneira de navegação de nível superior - através da barra Tab . Android tem três opções em troca: Navegação gaveta , inferior barra de navegação, e Separadores .

imagem

Se o número de páginas de nível superior for superior a cinco, use a Gaveta de Navegação. Se menor - Barra de navegação inferior. As guias raramente são usadas para esta navegação, mas o método está disponível para nós. No entanto, o Material recomenda não combinar guias e a barra de navegação inferior, pois a interação com esses componentes afeta o conteúdo da página e o usuário pode ficar confuso.

9. Diferenças no comportamento da barra de guias e da barra de navegação inferior

Essa diferença oferece material.

Se você alternar da página pai para a iOS no iOS, na barra de guias, alterne para outra página pai e, quando retornar à primeira página pai, você ainda estará na página filho.

imagem

No Android, tudo é mais simples - ao alternar pela barra de navegação inferior, você sempre alterna entre as páginas pai. Se antes você estava em uma subsidiária, ela será redefinida.

imagem

Nossos desenvolvedores do Android estão confiantes de que esse comportamento do sistema está incorreto. No caso de mudar para a navegação inferior, vale a pena manter as páginas filho abertas, como no iOS.

10. Comportamento especial das guias do Android

As guias no Android, ao contrário dos Controles segmentados para iOS, possuem esta propriedade: você pode navegar pelas guias usando o deslize para a esquerda e direita.

Isso ocorre porque as guias estão na mesma altura (elevação).

imagem

Isto é importante saber porque quando usando guias no Android, devemos não adicionar elementos com gestos semelhantes ao design. Por exemplo, um carrossel de fotos ou interação com cartões usando furtos.

Em geral, esses dois componentes não se substituem completamente. Controle segmentado é um controle que controla o conteúdo de uma página. And Tabs é uma ferramenta de navegação.

Portanto, vale a pena consultar os desenvolvedores antes de considerá-los como componentes equivalentes durante a adaptação. Às vezes, é mais correto substituir as guias do Android pelo controle de página. Tudo depende do contexto.

11. Diferenças na aparência da tela infantil

No iOS, a aparência da tela filho (sem contar os modos) ocorre apenas de uma maneira: a página filho aparece à direita na parte superior da placa-mãe com o slide em vigor. O retorno à tela mãe ocorre com o efeito de deslizar para fora.

imagem

O material recomenda mostrar ao usuário um relacionamento hierárquico entre as páginas pai e filho usando animação significativa.

imagem

O componente, ao interagir com o qual o usuário acessa a página filha, expande e cobre a página mãe. Assim, o usuário entende de onde veio e de onde, por que aconteceu e para onde retornará ao clicar no botão "Voltar".

A transição ocorre usando o Standard Easing .

12. Gaveta especial de navegação para padrões de chamada

Ao projetar um aplicativo com a Gaveta de Navegação, é importante lembrar que esse componente retira o gesto de deslizar da borda da esquerda para a direita. Portanto, você não deve adicionar outra lógica a este gesto.

imagem

No iOS, esse gesto tem um padrão estabelecido de transição de uma criança para a página mãe. Esse padrão foi migrado gradualmente para muitos aplicativos Android.

13. Comportamento do conteúdo ao rolar

No HIG, o conteúdo do iOS se comporta assim ao rolar : a barra de navegação diminui de largura, a barra de ferramentas desaparece. Mas, em geral, os desenvolvedores do iOS podem personalizar qualquer comportamento de conteúdo e barras ao rolar.

imagem

O material oferece mais comportamentos de rolagem. Por exemplo, a barra de navegação inferior, a pesquisa e a barra inferior do aplicativo podem desaparecer ao rolar.

A barra de aplicativos superior pode desaparecer ou ficar acima do conteúdo principal.

imagem

Comportamento de pesquisa diversificado

Curiosamente, o HIG refere a pesquisa a barras e a denomina Barra de Pesquisa. Em Material, encontramos uma pesquisa na seção Navegação, não em Componentes. Ou seja, para Material, a pesquisa é outra maneira de navegar.

No iOS e no Android, a pesquisa pode estar estaticamente presente na tela e, como regra, pregada na barra de navegação ou na barra de aplicativos superior.

Em ambas as plataformas, a pesquisa pode ser na forma de um ícone; somente no iOS o ícone é expandido em um componente separado da Barra de Pesquisa e, no Android, a pesquisa é aberta dentro da Barra de Aplicativos Principal.

imagem

Um recurso da pesquisa no iOS é que você pode "ocultá-la" sob a barra de navegação e chamá-la com o gesto de deslizar para baixo. O mesmo gesto é típico para atualização (puxe para atualizar), portanto, você não deve chamar pesquisa e atualização nessa ação.

Diferenças de componentes (UI)

15. Quais componentes não estão no iOS

No iOS, não há muitos componentes nativos do Android. Vamos examiná-los.

uma. Gaveta de navegação

O iOS basicamente não reconhece o menu do hambúrguer. Como dito anteriormente, no iOS, a navegação de nível superior está apenas na barra de guias.

imagem

b. Pano de fundo

O pano de fundo é o componente mais incrível para mim em Material. No momento da redação deste artigo, o Android planeja implementá-lo como nativo. Em geral, ao estudar os componentes do material, vale a pena verificar se eles já estão disponíveis para uso.

imagem

O próprio material adora esse componente. Veja, por exemplo, os vencedores do Material Design Award 2019.

c. Bandeira

O banner não foi encontrado entre os componentes nativos do iOS. Com a ajuda do Banner, informamos ao usuário informações importantes e oferecemos ações relacionadas.

imagem

d. Lanchonete

Como o Banner, o Snackbar não é nativo para iOS. O Snackbar é usado para transmitir ao usuário uma mensagem curta sobre o resultado de sua ação.

imagem

e Salgadinhos

Chips também está ausente entre os componentes nativos do iOS. Eles são usados para inserir informações, descrições e ações.

imagem

f. Barra de aplicativos inferior

Aqui você pode apostar que o iOS tem um componente semelhante - Barra de Ferramentas . Mas eles são diferentes, é por isso: A barra de ferramentas é uma barra para ações contextuais. Por exemplo, ao editar uma lista de mensagens em Mensagens, uma Barra de Ferramentas aparece com as ações Ler Tudo e Excluir.

A Barra de aplicativos inferior está movendo a Barra de aplicativos superior para baixo com as mesmas ações de nível superior: abrir a gaveta de navegação, abrir uma pesquisa e assim por diante. De volta à barra de aplicativos inferior, hospedamos o FAB.

g. Fab

Sim, o FAB também não está no iOS. FAB é um botão para executar a ação principal na tela. Por exemplo, em um aplicativo de email, o FAB criará uma nova carta.

imagem

Se você usa o FAB no Android para a ação principal na tela, no iOS, essa ação principal deve ser colocada na parte superior da barra de navegação à direita (veja o exemplo: iMessages).
imagem

h. Gaveta de navegação inferior

Uma variação da gaveta de navegação típica apenas do Android. Chamado pressionando o botão do menu de hambúrguer na barra de aplicativos inferior.

imagem

Eu. Folha lateral

Embora o Material permita que você use esse componente em um aplicativo móvel, eu recomendaria substituí-lo pela Folha Inferior mais familiar .

imagem

j. Folha inferior de expansão

Este componente Android muito bonito não é encontrado entre os nativos do iOS. A folha inferior de expansão é uma superfície pregada na parte inferior da página. Quando pressionada, a superfície se expande para uma página inteira.

imagem

k) Folha inferior padrão

A folha inferior padrão é uma variação da folha inferior e não está entre os componentes do iOS.

imagem

16. Quais componentes não estão no Android

Agora considere quais componentes não foram encontrados na biblioteca do Android.

uma. Controles da página

O Controle de página mostra em qual página o usuário está. Não está entre os componentes nativos do Android.

imagem

b. Barra de ferramentas

A barra de ferramentas é familiar apenas ao iOS.

imagem

c. Steppers

Steppers - controle padrão do iOS, não descrito em Material. Use-o para inserir valores pequenos. Exemplo: o número de cópias a serem impressas.

imagem

d. Dar um pulo

Popover é um painel pop-up usado principalmente no iPad.

imagem

O IOS possui um aplicativo Popover padrão - definindo texto em leitores ou navegadores.

imagem

17. Barra de status variada

Nas duas plataformas, a Barra de Status executa a mesma tarefa: relatórios sobre horário, nível de cobrança, qualidade das comunicações móveis e Wi-Fi. Eles diferem na localização desses indicadores na barra de status e, em geral, em sua solução visual.

Além disso, a barra de status Android possui esse recurso. Quando uma notificação é fornecida por um aplicativo, o ícone desse aplicativo aparece na barra de status. No iOS, isso não é.

imagem

18. Atualizar controles de conteúdo x deslize para atualizar

Os refrescadores são chamados com o mesmo gesto de deslizar para baixo nas duas plataformas. Porém, no iOS, o Atualizar controle de conteúdo empurra o restante do conteúdo para baixo, enquanto o Swipe para atualização do Android aparece na parte superior do conteúdo. Além disso, a atualização do iOS quando o conteúdo é rolado desaparece, enquanto o Android permanece visível.

imagem

19. Controle diverso

Os controles da plataforma diferem apenas visualmente. Pode-se observar que, no iOS, os controles são mais simples: as caixas de seleção são usadas para o botão de opção e a Caixa de seleção. No Android, eles diferem na forma de controle.

O material também sugere o uso da caixa de seleção pai quando você precisar dar ao usuário a capacidade de selecionar rapidamente todas as opções.

imagem

20. Vistas diferentes da seta para trás e posição da direção

No iOS, a seta não tem uma linha no meio, porque no iOS a seta para trás é assinada com a tela anterior. Se o título era padrão na tela anterior, o título se move do título para a esquerda e para a seta. Se o título era amplo, o título aumenta. Se o título da página anterior for muito longo, ele será substituído pela palavra de volta.

21. Visão diferente do ícone dos três pontos

Parece não haver justificativa rigorosa para essa diferença. Prestamos homenagem à plataforma e usamos a posição recomendada dos três pontos. No iOS, os pontos estão na horizontal, no Android - verticalmente.

22. Tipo diferente de selecionador

No iOS , a data é selecionada usando o rolo. O tambor iOS pode ser usado para inserir outros dados. No Android Picker, as datas imitam a aparência de um calendário físico.

imagem

O material também recomenda dar aos usuários a capacidade de inserir uma data usando o campo de entrada.

imagem

23. Campos de texto diversos

O HIG é muito menos exigente em campos de texto do que em material.

Diferenças

No iOS, o rótulo está dentro de um campo de entrada e desaparece durante a entrada de texto. O material recomenda aumentar a etiqueta ao inserir texto.

Semelhante

Ambas as plataformas recomendam a adição de um botão Limpar, se necessário.

O que mais está pedindo Material

O material também recomenda destacar a etiqueta e a faixa sob o campo de texto com a cor do primeiro plano - isso ajuda a entender que o campo está realçado. Material descreve o comportamento do campo em caso de erro de entrada. Existem dois formulários para escolher em Material: Preenchido e Descrito.

imagem

24. Menus de contexto versus menus

Os menus de contexto apareceram no iOS 13. Esse controle oferece ao usuário várias ações contextuais associadas ao item selecionado. O Android tem um elemento parcialmente semelhante - Menus .

imagem

Menus O Android é usado em um número maior de casos: oferece ações contextuais para o elemento selecionado e para a página inteira como um todo; usado como uma entrada com várias opções para escolher (menu suspenso); usado para editar texto. Os menus de contexto são um componente somente para iOS. E os menus O Android pode ser usado em um aplicativo móvel e em um desktop.

25. Visão de ação / visão de atividade versus folha inferior modal

Se você usar o Modo de Exibição de Ação ou de Atividade no aplicativo iOS iOS , no Android eles poderão ser substituídos parcialmente pelo componente Folha Modal Inferior do Android . Ele também aparece na parte inferior da tela, escurece o conteúdo e fecha de maneira semelhante (botão, clicando fora da janela modal, às vezes deslizando para baixo). A tarefa dos componentes é propor uma escolha ou ação contextual.

26. Editar menus versus barra de ferramentas de seleção de texto

Além da diferença visual, os menus Editar e a barra de ferramentas Seleção de texto diferem no seguinte: com uma pressão longa no Android, o usuário pode continuar a selecionar o texto. No iOS, após um longo toque, uma lupa aparece para selecionar o local exato da palavra.

imagem

Além disso, o Android difere do iOS, pois quando ações adicionais são chamadas, a Barra de Ferramentas de Seleção de Texto assume a forma de Menus.

imagem

27. divisor de tamanho diferente

No iOS, é de 0,5 pt, no Android - 1 dp.

Outras diferenças

28. Requisitos diferentes para o tamanho da zona de pressão

De acordo com as diretrizes, a área mínima de clique no iOS é de 44 x 44 pt e no Android - 48 x 48 dp.

29. App Store x Google Play

Seu aplicativo para iOS será baixado da App Store. Aplicativo para Android - no Google Play. Para colocar o aplicativo na loja corretamente, você deve seguir os requisitos deles. Vale a pena ler os requisitos da App Store aqui , e o Google Play está aqui . Existem muitos recursos, por isso recomendo que você estude antes da publicação.

30. Um padrão especial no iOS - Desfazer e Refazer

Este é um padrão especial do iOS: se você agitar seu smartphone, o aplicativo solicitará que o usuário cancele ou repita a última ação confirmada. Normalmente, este gesto é usado para excluir o texto digitado.

31. Relação com o lançamento da marca

O material permite que a tela de inicialização coloque o logotipo do aplicativo. A HIG não recomenda o uso da tela de inicialização para fins de marketing e sugere que apenas o espaço reservado seja exibido quando o aplicativo for iniciado.

32. Temas adicionais de design de material

O site Material também cobre tópicos como: Formatos de dados (vários formatos de dados), Visualização de dados (infográficos corretos), Estados vazios (design de estados vazios), Estados offline (interface na ausência da Internet), Acessibilidade (design acessível) e Bidirecionalidade (design para leitores da direita para a esquerda).

Conclusão

O conhecimento das diretrizes aumenta nosso nível de conscientização. Entendemos os padrões de usuário existentes e criamos um aplicativo que se encaixa organicamente nos hábitos dos usuários.

As diretrizes nos incentivam a respeitar as soluções da plataforma nativa. Ao adaptar um design a uma plataforma diferente, é sempre tentador duplicar um design sem alterações. Isso prejudica a experiência do usuário e complica o desenvolvimento. Mas quando vemos diferenças nas soluções nativas, adaptamos o design corretamente.

E se queremos introduzir uma solução nova e personalizada, o conhecimento das diretrizes ajuda a justificar essa inovação.

Total: o conhecimento das diretrizes e suas diferenças é uma habilidade importante do designer de aplicativos para dispositivos móveis.

Que outras diferenças você conhece? Compartilhe-os nos comentários.

32 diferenças no design de um aplicativo móvel para iOS e Android