Entrar Ainda não tem acesso?
1
resposta

Espaçamento entre componentes

Referente ao curso Adobe XD: componentes da interface

por Alan Lopes de Barros
| 37k xp | 1 posts

Boa noite! Tenho uma dúvida: como são determinados os espaçamentos entre os componentes de uma interface?

No caso do curso, foi utilizada uma tela de Android e tudo que era feito, desde os grids até os componentes, era baseado num espaçamento de 16px.

Se eu for utilizar uma outra dimensão de tela, de um iPhone por exemplo, existe algum guia/tabela/fórmula para determinar essas coisas?

Fui tentar criar algo para exercitar e caí nessa questão. Meus componentes ficaram bem desalinhados e não sei como resolver isso.

1 resposta
por André Lisboa
| 172.3k xp | 257 posts
Alura Scuba Team

Boa noite Alan, tudo bem?

Isso varia muito, eu gosto de usar múltiplos de 8. Dessa maneira ele segue o padrão que eu defino meus espaçamentos entre as bordas e os espaçamentos entre as colunas (gutter) de 16px. Esse padrão é usado também no Material Design - que é o padrão mais utilizado para dispositivos Android. Da uma olhada nesse link pra se aprofundar sobre esses espaçamentos https://material.io/design/layout/spacing-methods.html#baseline-grid.

Para iOS eu não consegui achar nada no guia deles que diga exatamente qual espaçamento utilizar entre os itens, talvez não seja definido. O mais próximo que cheguei de encontrar foram algumas considerações gerais de layout e adaptividade (se tiver interesse o link para essa área do Human Interface Guidelines do iOS é esse aqui https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/).

Essas áreas entre os itens podem ser usadas pra você comunicar grupos distintos. Por exemplo um item que está separado em 32px de um outro, provavelmente não faz parte do mesmo agrupamento de itens que tem espaçamento mais reduzido entre eles. Aqui tem uma imagem que ilustra melhor como usar os espaços para definir áreas diferentes https://i.imgur.com/gsXyYW0.png

Espero que tenha ajudado e bons estudos