Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Uma história de duas plataformas: Desenhar tanto para Android como para iOS

by
Length:LongLanguages:

Portuguese (Português) translation by Claudia Conceicao (you can also view the original English article)

Quer estejas a trabalhar em casa, a contracto, ou para uma agência, as empresas precisam de apps por várias razões. Empresas estabelecidas em particular precisam de dar resposta aos seus clientes existentes e aos dispositivos que usam. Frequentemente isso significa uma nova app tanto para Android com para iPhones.

Num mundo ideal, iríamos gastar meses a desenhar duas apps. Mas na realidade, muitos projetos não permitem tanto tempo. Para qualquer uma das apps em que trabalhei, o prazo foi bastante apertado para desenhar uma app, muito menos dividir o projeto inteiro em duas.

Muitas vezes estás a desenhar uma app, com ajustes a serem feitos antes de as cederes a duas equipas de desenvolvimento. Se estás a desenhar uma app desta forma, é importante perceber antecipadamente a diferença entre as duas plataformas, e as formas rápidas que podes fazer com que a experiência seja sentida nativa para cada uma.

Antes de começares: Escolhe a tua abordagem

1. Mantém o teu inimigo perto

É provável que terás uma preferência pessoal por um sistema. Eu sempre usei iPhones, então tenho um entendimento mais natural dos padrões de IU em iOS. A primeira coisa a fazer é lidar com a outra plataforma, e a melhor forma de o fazer é comprar outro dispositivo, um Android no meu caso. Pode até ser uma boa idea usar esse como o teu dispositivo primário para o período do projecto, para efetivamente teres uma ideia da plataforma.

Se estás a trabalhar em casa, faz com que te comprem um dispositivo teste. Se houver alguns problemas, comunica à direcção o valor que perceber a plataforma alternativa irá adicionar ao teu trabalho de design (o custo de dois dispositivos é elevado para o teu próprio bolso, mas para uma empresa tem um custo baixo comparando com as despesas de design e desenvolvimento de uma nova app). Se estás a trabalhar como freelancer, deves poder anulá-lo por contrapartida dos teus impostos.

2. Escolhe um líder

Como estamos a desenhar para ambas as plataformas ao mesmo tempo, tendo em conta o mundo real onde o tempo é limitado, tens que aceitar a realidade de prioritizar uma plataforma no início. Toma esta decisão não baseada na tua preferência pessoal, mas sim no sector da tua app. Mais pessoas no teu sector usa telefones Android? É uma app paga? Qual é o público-alvo? Fazer estas perguntas vai ajudar-te a decidir qual é preferível.

3. Conhece as regras

Lê as linhas orientadoras para Android e iOS. No passado a Apple era conhecida por ser mais restrita com as suas orientações. Para colocar uma app na store, existe um processo de aprovação que demora aproximadamente duas semanas. Não há nenhum processo de aprovação para a Play store. No entanto, devido a esta baixa barreira de acesso em Android a qualidade do design tem saído a perder. A Google está a tentar mudar isto com as suas linhas orientadoras do Material Design.

A estética do Material Design tornou-se muito familiar para web designers.

Existem muitos, e grátis, kits IU que podes usar para os teus projetos (irás encontrar alguns listados no final deste artigo). Usar estes componentes irá naturalmente fazer com que a tua app pareça nativa. Mas mesmo quando obténs estes kits IU, pode ser difícil saber o que diferenciar e o que deixar igual entre plataformas, e é aí que quero ajudar.

Desenhar a tua app

Segue estes passos simples, e a tua app estará num bom caminho para se ajustar tanto a dispositivos Android como iOS.

1. Estilo geral

Desde o iOS7, a Apple mudou para um estilo de design mais flat, e dispensou as sombras, texturas e efeitos skeumórficos que definiram os primeiros anos do iPhone. O Android, tendo sido mais sistemático no estilo no início, foi ligeiramente no outro sentido. As novas linhas orientadores do Material Design da Google criam referências mais discretas para o mundo real, com a chamada abordagem "papel" estabelecendo mais hierarquia.

2. Botões reais

Os telefones Android têm um botão para trás, que pode ser usado para voltar a ecrãs anteriors na app.

Volta atrás

Os iPhones não têm este botão, então tem que haver uma forma de voltar para o ecrã anterior. Isto é normalmente feito por uma divida "para trás" no topo esquerdo do ecrã, mas precisa de ser considerado durante todos os percursos na tua app.

3. Elementos globais

Existem elementos globais (como a barra do estado e o header) que aparecem em todas as páginas do teu design. Não devias estar de todo a mudar a altura ou o estilo destas barras se queres que a app pareça nativa, por isso recomendo defini-las uma vez na tua primeira página de design para cada plataforma. Depois podes usar um placeholder (ou o estado e a barra de topo do teu SO primário) em cada um dos teus mockups, mas indica aos programadores que deve ser o mesmo ao longo do projeto.

Existem algumas diferenças entre as barras de navegação em cada plataforma. Em Android o texto é alinhado à esquerda, enquanto que em iOS é centrado. Em iOS, muitas empresas substituem o título da página principal com o logo da sua empresa, mas isto não é a melhor abordagem para Android. A barra de estado (com a tua rede, bateria, e informação temporal) é um componente nativo, e não precisas de a considerar para o design. Certifica-te apenas que quando apresentares os mockups usas a correcta para evitar qualquer confusão ou distração.

Global Elements on Android and iOS

4. Navegação

Talvez o maior aspecto de diferença entre as plataformas iOS e Android seja a navegação. O padrão de navegação primária em Android é um menu caixa. Os utilizadores de Android naturalmente vão a este para itens de menu, e tende a ser omnipresente durante a experiência. As linhas orientadoras da Apple são mais a favor de uma barra tabular, que está localizada no fundo do ecrã, e permite um fácil acesso às áreas de alto nível da app. Quando estás a decidir a arquitectura de alto nível da tua app, podes planear dois menus em separado para as duas plataformas.

Pensar na arquitectura da app é provavelmente mais importante do que o layout dos menus - um ponto que abordei noutro artigo sobre estes aspectos. Se a tua estrutura é sólida, a navegação irá seguir.

Como vês aqui, existem dois padrões de navegação: um menu gaveta para Android e uma barra tabular para iOS. Às vezes é mais fácil simplesmente esconder a layer de navegação enquanto trabalhas em vistas individuais.

Navigation patterns on Android and iOS

5. Cartões, ou não?

Os cartões estão a tornar-se o principal padrão de IU no design digital. Eles são versáteis e permitem aos utilizadores consumir rapidamente pedaços de conteúdo numa forma adequada a comportamentos mobile. Visualmente, os cartões adequam-se muito ao material design do Android (sendo inspirado por papel). Usar sombras e guias adequadas entre os cartões irá criar um aspecto nativo naturalmente.

Em iOS, usar cartões requer mais atenção e consideração. Até grandes apps como a do Facebook e do Pinterest usam cartões de forma ligeiramente diferente com linhas orientadores de iOS. As orientações de iOS sugerem usar profundidade em transparências e sobreposições, mas a vista básica é normalmente mais flat. O Instagram usa um estilo inteiramente flat, embora cada post poderá ser considerado um cartão de um ponto de vista de arquitectura. Vale a pena ver como o Instagram adquiriu o mesmo aspecto do componente no estilo iOS. Se trabalhares com cartões em iOS sê moderado com qualquer uso de sombra, e tenta mantê-las o mais subtil possível.

Cards for Android and iOS
Cartões para Android e iOS, uma dimensão que contribui com um pouco de affordance.

6. Tipografia

O tipo de letra em iOS é Helvetica Neue. Em Android é Roboto. Embora o estilo dos tipos de letra seja visivelmente diferente, as métricas dos tipos de letra são muito parecidas. Se estás a poupar tempo estás preparado o suficiente para trabalhar com apenas uma, mas comunica aos programadores para implementarem o tipo de letra correcto para o sistema. Quando trabalhas com layouts importantes e extremos no tamanho de letra é aconselhável que pelo menos testes o teu layout com os dois tipos de letra.

Se quiseres fazer um esforço adicional, tens que prestar muita atenção às convenções de tipografia e layout em cada plataforma, mais uma vez referindo as linhas orientadoras acima. Alguns generalizações:

  • Material Design do Android usa espaço branco amplo no layout
  • Também usa um tamanho de letra mais dramático no material design. Headings chamativos com muito espaço branco estabelecem a hierarquia.
  • Em iOS, há uma variação em tamanho menos dramática. Mas há uma ligeira maior variação no peso do tipo de letra, o que continua a permitir-te criar a hierarquia.
  • Tipicamente, ambas as plataformas usam pesos mais leves no tipo de letra. No entanto, no exemplo abaixo, o design de Android está a usar light e regular de Roboto, enquanto que o design iOS está a usar bold e regular de Helvetica Neue.

Este é um exemplo muito simples, para enfatizar como até em simples modos a tipografia pode imediatamente dizer-te se estás a lidar com uma app Android ou iOS.

Typography on Android and iOS

7. Grelhas e alvos touch

iOS (44px @1x) e Android (48dp - 48px at 1:1 racio) têm pequenas diferenças nas orientações para alvos touch. As orientações do Material Design também sugerem alinhar todos os elementos a uma grelha base quadrada de 8dp.

No último projecto em que trabalhei concluímos que era mais seguro seguir estas orientações do Android porque (a) o alvo touch maior de 48px é bom para ambas as plataformas, e (b) o layout para o Material Design está mais definido e atualizado. De qualquer forma, irás precisar de uma grelha para trabalhar, mas sendo o Android mais restritamente definido achamos que 8dp funcionam bem. Isto significa configurar o teu documento com incrementos de 8dp em planos horizontais e verticais para criar um layout de grelha. 

8. Estilos de botões

Existem diversos estilos de botões no Material Design:

  1. Botões de acção floating: os botões mais tradicionais As sombras são um pouco pesadas e levantam-no da página. Estes devem apenas ser usados em fundos, ou com moderação em cartões. Não devem ser usados de todo em alertas ou popups, pois cria demasiadas camadas de profundidade. A acção primária adquire a cor principal, enquanto que as versões secundárias são normalmente uma cor menos proeminente.
  2. Botões flat: essencialmente texto na cor principal, sem quaisquer elementos associados. Estes usam padding e letras maíusculas para lhe dar estrutura.

Comprando com o Material Design, as apps iOS são tipicamente flat em aparência, não usando profundidade ou sombras. Os botões primários têm uma cor de preenchimento, enquanto que os botões secundários são revertidos, usando um contorno da mesma cor. Esta metáfora pode tornar-se limitada de certa forma, especialmente quando comparada com tabs e outros elementos seguintes. Para obter corretamente este estilo flat, é importante ter metáforas claras e consistentes sobre o que as cores significam na tua app.

O iOS também tem um botão com texto simples, mas não partilha o estilo de letras maiúsculas do Android, e é mais leve no peso do tipo de letra.

Button styles on Android and iOS

9. Folhas de Acção

Folhas de acção permitem aos utilizadores escolher de uma variedade de acções a partir de um item da IU. Por exemplo, quando toco (ou pressiono) numa imagem posso querer partilhar, fazer upload, copiar, ou eliminar a imagem.

iOS e Android lidam com isto de modos um pouco diferentes. Em primeiro lugar, existem folhas de acção semelhantes que aparecem a partir do fundo do ecrã, como uma camada que sobrepõe a vista actual.

Com folhas de estilo, sobreposições, e alertas, iOS e Android usam diferentes detalhes que indicam profundidade em camadas.

  • As sobreposições em Android têm uma cor sólida com uma simples sombra para indicar que é uma camada de 'papel' por cima.
  • As sobreposições em iOS não têm sombra, mas têm uma pequena transparência no fundo.
Action sheet differences on Android and iOS

Botões dropdown

Existindo apenas em Android, estes são um método rápido para fazer uma selecção. Tem com conta, no entanto, que não há um nativo equivalente em iOS. No exemplo abaixo, o utilizador pressiona em "profile" no passo 1, e é-lhe apresentado um simples menu nesse local para escolher um dos perfis disponíveis. Estes menus também são usados frequentemente a partir do botão overlay na barra de acções, indicado por três pontos.

Input de Informação Específica

Para determinados inputs como data e tempo, o Android vem com caixas de diálogo integradas. Estes parecem-se com popups, mas com a IU a atender especificamente a introduzir este tipo de informação. Um exemplo do input de calendário é mostrado. O Android tem um overlay otimizado disponibilizado para introduzir uma data. O iOS lida com isto de modo um pouco diferente, aparecendo como uma roda que aparece como uma camada do inferior. Sê cuidadoso ao planear estes, e comunica cedo os componentes de input com os programadores.

10. Controlos segmentados

Controlos segmentados são usados para mudar entre conteúdo diferente numa mesma vista. A sua utilização é quase igual, mas eles são muito diferentes visualmente em cada plataforma por isso é importante usar o estilo certo. Em iOS existem três tabs, com estilo semelhante aos botões de linha discutidos anteriormente. Em Android, eles são representadas por um simples sublinhado, e têm mais espaço branco para manifestar a sua interação.

Segmented controls on Android and iOS

11. Alertas

É importante obter o estilo destes corretamente porque eles podem controlar acções importantes como inscrever, aceitar termos, ou até confirmar pagamento. Nós queremos que sejam credíveis e nativos.

Os alertas em Android usam o estilo de botões flat que foram mostrados anteriormente, dimensões para os quais podem ser encontradas nas linhas orientadoras do material design. As acções estão no lado direito inferior do alerta. Os "botões" são na verdade inteiramente baseados em texto. Todos eles usam letras maiúsculas para lhes dar mais estrutura, e transportam a cor primária de acção da tua app.

Em iOS, as acções são separadas por divisores.  Normalmente eles estão em frase ou título, ao ganhar a sua estrutura a partir dos blocos separados. Eles estão centrados no campo, e mais uma vez herdam a tua cor ativa.

Example of alert dialogues for Android and iOS using location as an example

12. Ícones

O design de ícones é um pouco a área especialista no design de IU. Estando a usar ícones grátis, comissionando um designer de ícones, ou desenhando tu mesmo os ícones, existe um estilo nativo distintivo para cada plataforma. O iOS popularizou os ícones de linhas, com contornos muitos finos. Os ícones do sistema Android têm contornos mais espessos, ou são inteiramente ícones sólidos. Anteriormente, os ícones Android usavam perspectiva ou uma visão tridimensional, mas agora as suas linhas orientadoras especificam ícones de duas dimensões propriamente dito. Aqui está um rápido exemplo com vários ícones para comparação, ou usa os links diretos para as orientações de ícones para Android ou iOS.

12. Snack bares, brindes e carregamento de imagens

Azarado 13. Existem alguns detalhes de IU que podem escapar entre os dedos. Os comuns como alertas e ícones de carregamento são frequentemente deixados para os programadores. Podes ter verificado falsos spinners e alertas estranhos que estão em desarmonia com o resto da app. Tendem a existir soluções nativas para estes, mas podem ser sintonizados com o estilo da tua app. Esta é definitivamente uma área onde a colaboração com os programadores é a melhor forma para decidir em que formas a tua deve funcionar.

14. Controlos de IU comuns

Botões rádio, caixas de selecção, campos e switches são componentes funcionais aos quais deveria ser dado um aspecto nativo. Assim como com alertas e caixas de diálogo, estes controladores e inputs são uma área de confiança e familiaridade para o utilizador. Usa componentes nativos sempre que possível para estes, para que as pessoas (a) saibam como usá-los, e (b) confiem na tua app com a sua informação sensível ou detalhes de pagamento.

No exemplo abaixo vemos botões switch e rádio equivalentes para Android e iOS. De novo, as diferenças são pequenas o suficiente para progredires com um design, e afinar o outro mais tarde, mas as diferenças subtis são essenciais para a aparência nativa. Usa o teu kit de IU o mais possível para estes componentes, e uma vez mais comunica com os programadores no início do processo.

Android left and iOS right
Android (à esquerda) e iOS (à direita)

Resumo

Não é uma tarefa impossível criar uma sensação nativa para a tua app no iOS e Android com um design. Tenta manter-te em cima destes ajustes desde o início, mantém-te atento aos componentes que parecem fora de sincronia numa só plataforma e trabalha sempre o mais de perto que consigas com os programadores.

Recursos

Espera-se que este artigo te dê respostas rápidas sobre onde divergir ao desenhar para duas apps, mas também vais precisar de algumas ferramentas e modelos para executar corretamente o teu projeto. Existem muitos recursos geralmente disponíveis que podes usar como ponto de partida, aqui estão alguns dos melhores:

Linhas orientadoras

Se quiseres saber mais, muita informação que forneci encontra-se nas diretrizes da plataforma. Eles são um pouco extensas, então só dei relevância às partes que são importantes para comparar. Mas se tiveres mais perguntas específicas este é o melhor lugar para começar:

Kits de IU

Estes Kits de IU vai poupar-te recriar controlos nativos básicos e tamanhos correspondentes. Podes pegar nas peças que precisas e depois alternar entre elas para o output de Android e iPhone dos teus projetos.

Ícones

Mesmo que estejas a fazer o teu próprio, ou pagando pelos ícones, eles são úteis para ter placeholders enquanto trabalhas. O desenho de ícones pode ser um trabalho por si mesmo, e tu não queres que os ícones te atrasem enquanto procuras uma sensação geral para a tua app. Recentemente encontrei links abaixo na icons8 que têm um bom visual, ou flaticon.com que é ótimo para ícones mais gerais.

Mockups

É sempre útil ter mockups de dispositivos para apresentar a tua app. Estes vêm em muitas categorias. Podes querer um mockup básico de um dispositivo, um dispositivo flat simples para deixar a tua app brilhar, ou uma mockup de estilo de vida para apresentar um caso de uso. Aqui estão alguns recursos que achei úteis, há muitos mais por aí. Quando se trata de dispositivos Android, sê cuidadoso com o que escolhes. Eu iria inclinar-se para a gama Nexus, pois são os telefones da Google e não aludem a uma preferência para outros fabricantes.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.