UI design para iOS — um guia técnico
Este guia tem o objetivo de reunir informações essenciais para o design de interfaces para aplicativo em iOS e resulta de um desafio proposto para o time de design de produtos da Badico.
Você pode saber mais sobre como resolvemos esse desafio nesse artigo: Como criamos para iOS pela primeira vez.
Enquanto time, quando estávamos buscando por informações para criar as soluções dos fluxos e interfaces para iOS, tivemos dificuldade para encontrar conteúdos com direcionamentos diretos e específicos, e a maior parte do que encontramos estava em inglês. Assim, esse conteúdo também contribui para ampliar a disponibilidade de informações sobre iOS em português.
A Badico é uma empresa de tecnologia especializada em design de produtos e desenvolvimento de software que atua no mercado brasileiro e internacional.
O nosso time de design de produtos é composto por:
Human Interface Guidelines - HIG (Diretrizes para Interface Humana)
As principais informações sobre design de interface, padrões, componentes, dimensões, cores, entre outras do sistema operacional iOS da Apple estão reunidos em inglês nas Human Interface Guidelines — HIG (ou Diretrizes de Interface Humana, em português).
Você pode acessar aqui: Human Interface Guidelines.
Tipografias do sistema
A Apple disponibiliza duas tipografias a San Francisco (SF) e a New York (NY). A San Francisco reúne variações de uma tipografia sem serifa que incluem a SF Pro, SF Compact, SF Arabic e SF Mono. Enquanto a New York é serifada.
As duas tipografias podem ser aplicadas na criação de interfaces para aplicativos iOS, como também é possível personalizar de acordo com a marca/empresa e utilizar outras tipografias.
Iconografia
Symbols é o conjunto de representações gráficas do sistema (que popularmente são conhecidos como ícones). As fontes da tipografia San Francisco contém todos os símbolos criados pela Apple. Os Symbols podem ter seus pesos variados desde o Ultralight até o Black, como é mostrado na imagem abaixo.
Você pode utilizar de plugins do Figma para incluí-los nos seus designs. Sugerimos o Symbols, que utilizamos em nosso projeto. Depois de instalar a fonte, SF Pro, você conseguirá visualizá-los.
Layout
A interface mobile do sistema iOS se organiza em 5 elementos: a barra de status, a barra de navegação, o espaço de conteúdo da página, a barra de abas e o indicador de início. A distribuição desses elementos na interface pode ser visto na imagem abaixo.
Margens, área de segurança e grids
Para construir um design agradável e também de fácil compreensão, é importante que utilizemos de recursos que ajudem em alinhamento e balanço entre elementos.
Com as margens, conferimos um arejamento da tela, são margens de 16pt nas laterais.
A área de segurança tem a ver com o espaço que compreende os elementos de seu design. É basicamente onde você pode adicionar seu conteúdo sem comprometer sua visibilidade. De modo geral, é a área compreendida entre os menus de sistema do topo e da base da tela, portanto, seu tamanho pode variar entre dispositivos.
Podemos dizer que tanto as margens quanto a área de segurança já estão compreendidas no grid, mas para construir um design ainda mais harmônico, dividimos a tela em colunas, para criar um padrão de alinhamento. Normalmente, 4 colunas, com gutter de 16pt, com as mesmas margens citadas acima. Você também pode trabalhar com um grid de 8 pontos, que vai te ajudar no alinhamento mais preciso de cada elemento.
Tab Bar e Home Indicator
As principais páginas do aplicativo são acessadas pela Tab Bar (ou Barra de Abas) que pode agrupar até 5 itens, cada um com seu respectivo ícone e nome. O Home Indicator (ou Indicador de Início) é um elemento fixo padrão do sistema iOS presente em todas as páginas de um aplicativo representado por uma barra com extremidades arredondadas.
Como o número de itens na Tab Bar é limitado, caso a solução necessite de um acesso rápido para outras páginas é possível acrescentar o ícone de três pontos na horizontal no lado direito e conectar com uma lista.
Navigation Bar
É uma barra de navegação↗ localizada na parte superior de uma janela ou tela, que normalmente fornece o título da tela atual, ajudando o usuário a se orientar dentro do app. Também podendo conter opções de controle (botões, ícones) que afetam diretamente o conteúdo que está abaixo.
Existem algumas variações de formato na Barra de Navegação, em alguns casos pode conter apenas o título da página e um botão de voltar padrão e quando necessário a barra pode apresentar botões de ações com textos, ícones ou texto + ícones.
A Barra de navegação serve para orientar o usuário, por esse motivo ela pode variar e se adaptar de acordo com a necessidade da solução, podendo ir desde um texto grande de guia, que se adapta ao conteúdo e se oculta conforme a rolagem de tela, até um texto menor e centralizado, com botões de ações fixos a todo momento na parte superior da tela.
Caso a solução necessite de um campo de busca, ela também deve ser adicionada na Barra de Navegação logo abaixo do título da página.
Outra coisa importante presente na Barra de Navegação é o botão de voltar e seu comportamento de deslizar. Por padrão do iOS, os usuários podem voltar para uma página anterior apenas deslizando o dedo da extremidade esquerda para a direita. Usando uma ferramenta de prototipação é possível replicar esse comportamento da seguinte forma:
Text Field
Trata-se de um campo de texto↗ que serve para inserir ou editar trechos específicos de textos. Deve ser usado para solicitar pequenas quantidades de informações, mas caso a sua solução necessite de textos maiores, ao invés de campos, opte por usar uma visualização de texto↗.
Uma boa prática é sempre usar a parte inicial do campo para mostrar a sua finalidade, e a parte final para apresentar recursos adicionas, como por exemplo a opção de excluir todo o texto inserido no campo clicando no ícone de fechar.
Dicas podem ajudar a comunicar a finalidade do campo. Por exemplo, para um campo que solicite um endereço de e-mail, no seu interior pode estar escrito “email@email.com”, e outra alternativa seria colocar um título na parte lateral ou superior do campo, para deixar clara a sua finalidade.
Sempre que possível ajuste o tamanho do campo com a quantidade de texto que ele necessita, dessa forma os usuários conseguem associar melhor a quantidade de informações que devem ser fornecidas. Assim, se a sua solução necessitar de vários campos, eles podem ser agrupados de maneira uniforme, variando seus tamanhos de acordo com a informação requerida.
A validação dos campos é algo muito importante, pois auxiliam o usuário a corrigir informações incorretas nos campos. Por exemplo, usuários inserindo letras em campos destinados a senhas numéricas. Nesses casos a validação ajuda e instrui o usuário ao mesmo tempo e dependendo da sua solução a validação pode acontecer dentro do próprio campo ou quando o usuário sair de um campo para o outro.
Em alguns casos existe a possibilidade do campo de texto ficar totalmente preenchido com as informações, então nessas situações as quebras de linhas devem ser ajustadas de acordo com a necessidade do campo. Abaixo veremos algumas formas de lidar com esses casos
Page Control
Uma linha de indicadores que formam uma lista simples, onde cada item representa uma página. A linha possui rolagem horizontal, ajudando o usuário a encontrar a página que deseja.
O controle de página é representado por diversos pontos alinhados horizontalmente, onde cada ponto se refere à uma página disponível, assim, um ponto sólido sempre indicará a página atual que o usuário se encontra.
Deve ser horizontalmente centralizado na parte inferior da janela, para que os usuários sempre possam encontrar o controle logo abaixo. Os usuários interagem com o controle de página tocando ou deslizando para a direita ou esquerda. Ao tocar no último item o usuário visualiza a página seguinte e contrário também da mesma forma.
Evite usar cores personalizadas ou mais de dois símbolos diferentes nos indicadores, isso pode confundir o usuário e prejudicar o contraste.
Listas e Tabelas
As listas ou tabelas são usadas para organizar informações que estão agrupadas ou em hierarquia e possibilitar a interação com esses itens para selecionar, adicionar, remover, ver informações, entre outras ações. O sistema predefine algumas formas de organização das linhas, sendo uma linha básica de uma lista formada apenas por um título ou um título e subtítulo.
A orientação é que ao lado esquerdo da linha podem ser adicionados elementos para ação como selecionar, adicionar, remover, além de elementos de conteúdo como imagens ou ícones, por exemplo.
Enquanto ao lado direito podem ser adicionados detalhes da linha, botões, ativar e desativar (toggle), botões para escolha e visualização de datas e horários, aumentar e diminuir (steppers), exibir infomações e arrastar para reordenar (grabber), e outros.
É possível fazer linhas e tabelas com mais informações e mais complexas, sendo recomendado adotar padrões semelhantes ao do sistema como priorizar informação de imagem no lado esquerdo e posicionar o toggle no lado direito da linha.
Se esse conteúdo foi útil pra você, compartilha com a gente como ele te ajudou a criar interfaces!
Caso você tenha alguma sugestão para complemento ou melhoria, escreva nos comentários ou mande uma mensagem pra gente nas redes sociais. Valorizamos a troca e a construção de conhecimento com a comunidade.
Conecte-se com os autores
Camilla Vieira | Medium • Instagram • Linkedin
Fausen Cauã | Medium • Instagram • Linkedin
Poliana Muniz | Medium • Instagram • Linkedin
Referências
https://uxdesign.cc/guide-on-creating-ui-design-for-ios-apps-5bed644b1667
https://www.learnui.design/blog/ios-design-guidelines-templates.html
