O conteúdo que será abordado neste artigo foi tema do último encontro da Comunidade de Prática de User Interface, que ocorre mensalmente na SoftDesign. Seu objetivo é reunir nossos times multidisciplinares para debater sobre os mais diversos temas do universo UI, trazendo diferentes visões e experiências. Dito isso, vale ressaltar que esse conteúdo tem sua abordagem feita pelo olhar de uma Designer de Interfaces.
Principais Tópicos
Ao começarmos o planejamento do design de interfaces para aplicativos nativos, alguns pontos merecem nossa atenção. Cada plataforma têm suas diretrizes, e são elas que nos ajudarão no processo de desenvolvimento.
Para facilitar a comparação entre as especificidades de iOS X Android, separamos este artigo em cinco tópicos:
- 1. Navegação
- 2. ícones
- 3. Tipografia
- 4. Componentes
- 5. Exemplos de interfaces
Antes de detalharmos cada tópico, vale ressaltar que a documentação disponibilizada por Apple e Google não é rígida ou ‘inquebrável’. Seu principal objetivo é facilitar para o usuário a completude de tarefas de forma simples e objetiva, gerando uma experiência positiva durante o uso do aplicativo. A ideia é que ele não tenha problemas e nem perceba as adaptações e personalizações criadas pelo time de desenvolvimento. Dito isso, vamos ao que interessa.
1. Navegação
Cada sistema operacional possui o seu modo de trabalhar a navegação. No iOS, a navegação superior vem geralmente acompanhada de um botão voltar à esquerda e o título da página é centralizado na tela. Já no Android, o título é alinhado à esquerda e não há necessidade de apresentar nenhum elemento gráfico que indique a ação de voltar: o próprio sistema operacional disponibiliza um menu inferior com algumas ações fixas, sendo uma delas essa ação de retorno. De qualquer forma, não há impeditivos quanto a disponibilização desse botão na barra superior também, que pode ser representado por uma flecha ou, em alguns casos, por um menu hambúrguer.
Nas imagens abaixo podemos visualizar um exemplo de navegação iOS: o título centralizado, o botão voltar à esquerda e outro botão de ação à direita. Também existe a possibilidade de hierarquizar o título conforme o seu grau de importância – isso tem por objetivo orientar as sessões que os usuários estão enquanto navegam e pesquisam. Em casos de títulos com maior ênfase, os mesmos passam a estar localizados abaixo dos botões de ação e alinhados à esquerda.
Título Centralizado X Título Grande. Fonte: Human Interface Guidelines.
Já nesta imagem, vemos um exemplo de navegação Android: remete a diretriz padrão de navegação superior, com título alinhado à esquerda fornecendo informações através do menu hambúrguer.
Fonte: Material Design.
1.1 Navegação Primária
Navegação primária refere-se às ações ‘principais’ de cada aplicativo sendo apresentadas de maneira específica em cada plataforma. No iOS elas ficam na parte de baixo da tela, próximos ao dedo polegar do usuário, e podem conter um número de guias que varia entre dois e cinco. Caso esse número seja ultrapassado, a guia da direita será utilizada como menu sanduíche para adicionar os demais acessos às funções do aplicativo.
No Android essa informação é muito mais flexível. Na imagem à direita, podemos identificar a representação de um modelo padrão de navegação superior entre abas, porém a documentação do material também prevê navegação lateral, navegação para frente e reversa. Para conhecer mais detalhes de cada navegação, acesse o Material Design no link: Compreendendo a Navegação.
Navegação Primária iOS X Android. Fonte: Google Imagens.
1.2 Navegação Secundária
Há também a aplicação da navegação secundária, conhecida como menu mais ou menu sanduíche, tanto nos sistemas operacionais iOS como em Android. Em Android, esse tipo de menu pode estar localizado na navegação superior ou inferior. Na imagem abaixo é possível identificar tal tipo de aplicação.
Navegação Secundária: iOS X Android. Fonte: Google Imagens.
1.3 Navegação voltar
Para o iOS, a navegação voltar está sempre ao lado esquerdo, na parte superior da navegação – voltar à tela principal. Já para Android, temos a barra de navegação global, onde sempre é possível voltar para ao passo anterior.
Navegação voltar no iOS. Fonte: BloG Muz Li.
2. Ícones
Os ícones no iOS seguem as diretrizes definidas nos princípios visuais da Apple e devem ter apenas um foco de atenção. Eles devem ser quadrados preenchidos, com cantos arredondados e sem aplicação de transparência no fundo.
No Android essas diretrizes são mais flexíveis, porém é necessário respeitar o tamanho mínimo indicado no Material Design, que também pode servir como um material de orientação para aplicação de luz, grid, anatomia, dentre outros. De forma objetiva, a característica mais importante a ser respeitada é o tamanho mínimo do alvo de toque: iOS – 44x44pt e Android – 48x48dp.
Ícones Android X Ícones iOS. Fonte: Blog Cheesecakelabs.
3. Tipografia
A tipografia é orientada em ambas as documentações, porém fica a critério de cada projeto a definição de segui-la. Para Android, a família tipográfica indicada é a Roboto; e a Noto para idiomas não contemplados pela família tipográfica principal. A anatomia da fonte é caracterizada por formas mais longilíneas e possui áreas de respiro maiores.
No iOS, por sua vez, a família tipográfica recomendada é a San Francisco e embora seja semelhante a Roboto, ela é um pouco mais compacta e foi projetada especificamente para legibilidade em tamanhos reduzidos.
Diferenças de Tipografia iOS X Android. Fonte: imagem própria.
4. Componentes
Cada plataforma oferece inúmeras opções de componentes, que são elementos utilizados em diversos momentos da interface e que auxiliam na manutenção de uma unidade visual. Esses componentes ajudam no trabalho dos designers e desenvolvedores, e cada sistema operacional possui o seu pacote de componentes – podendo haver bastante distinção visual em cada guia de estilo.
Nas imagens abaixo é possível visualizar alguns dos componentes pertencentes de cada sistema operacional, mas para maiores detalhes recomendamos que acesse os links: Componentes Material e Componentes Human Guidelines.
Componentes Android. Fonte: imagem própria.
Componentes iOS. Fonte: imagem própria.
4.1 Componentes e Nomenclaturas
Quando falamos de componentes, é interessante analisarmos que alguns deles são tratados de maneiras distintas em cada plataforma. Uso como exemplo a barra de guia no iOS (tab bar), que remete a ações fixas de interação com aplicação, enquanto no Android a barra de navegação (navegation bar) é utilizada para navegação global do dispositivo móvel.
Na imagem a seguir, nomeamos cada componente para melhor visualização dessa diferença.
Componentes e Nomenclaturas iOS X Android. Fonte: imagem própria.
5. Exemplos de interfaces
Neste último ponto, trago dois exemplos atuais de aplicativos. Na Amazon iOS, é possível identificar a barra de guia fixa contendo quatro guias para navegação e um botão mais para acessar os submenus. Já no Android Amazon, as guias de navegação estão todas localizadas no menu hambúrguer no canto superior esquerdo do dispositivo, alinhado com o nome do aplicativo, seguido dos botões de ação à direita.
Interface App Amazon iOS X Android. Fonte: imagem própria.
Outro exemplo interessante é do aplicativo do Twitter, onde é possível identificar a adaptação do Android para maior similaridade com o iOS, com praticamente todos os componentes localizados igualmente.
Interface App Twitter Android X iOS. Fonte: imagem própria.
Para fechar…
Após observarmos e compararmos algumas características de interfaces de iOS e Android, entendemos que ambas as diretrizes têm o mesmo objetivo: padronizar o design das plataformas. Isso não significa, porém, que elas impedem a personalização das interfaces. Os padrões apresentados consideram os conhecimentos já adquiridos pelos usuários e, desta forma, indicam uma menor curva de aprendizagem de uso.
Por fim, é importante salientar que o que vimos até aqui é somente uma pequena parte do universo Material Design (Android) e Human Interface Guidelines (iOS). Além de consultar esses materiais, utilizar os aplicativos em ambos os sistemas operacionais e estar atento aos detalhes, também ajudará a entender como tarefas semelhantes são trabalhadas de diferentes formas em cada plataforma.
*Conteúdo complementar: Design Tokens, Design System e Atomic Design.
