Espaçamento
-
Espaçamento
-
Uma ideia interessante de espaçamento quando se há texto é por exemplo, nas laterais do card deixar com 20, embaixo com 30 e no topo com 40. Essa ideia é baseada no que é feito no livros
Guia de espaçamento para designers
Espaçamento
Os espaços são as distâncias horizontais e verticais entre dois componentes ou os pontos de vista da tela. Todos os espaços são definidos com um incremento de 8 ( 8, 16, 24, 32, 40, 48, ... 128 ).
*O guia de espaçamento “ para designers ” faz parte de uma série de artigos sobre fundações de design para criar melhores produtos digitais
Grade 8px
O sistema de grade mais famoso é o 8px, porque um número par facilita muito a escala do seu design e é mais consistente. Todos os componentes se alinham à grade de linha de base quadrada de 8px para dispositivos móveis, tablets e desktop.
Use incrementos de 8px para dimensionar e espaçar os elementos em uma página da web. Isso significa que qualquer altura ou largura definida, margem ou preenchimento será um incremento de 8px. As grades de fluido são construídas por divisão, enquanto as grades fixas são construídas com multiplicação. O tipo se alinha à grade de linha de base de 8px, portanto a altura da linha do texto também é calculada com múltiplos de 8.
Em algumas ocasiões, você pode usar um Grade 4px; ao projetar para telas pequenas, pode ser necessário um número pequeno para criar um ícone ou espaço para dois componentes ou erros de digitação.
Terminologia: dimensões, preenchimento e margens
Terminologia
O espaçamento é mais detalhado e granular ( 8px ) do que um layout ( 12 colunas ). Ao usar espaços, há um conjunto de regras sobre como colocar elementos em layouts e componentes.
-
DimensõesSuas larguras não são especificadas porque respondem a uma largura da viewport
consulte a largura e a altura dos elementos componentes. As alturas desses elementos devem estar alinhadas à grade de 8px.
.
-
Estofamento
é o espaço entre os elementos dentro de um componente. O preenchimento pode ser medido na vertical e na horizontal e não precisa abranger toda a altura de um layout. O preenchimento é medido em incrementos de 8px ou, em alguns casos, de 4px.
-
Margens
são o espaço entre os componentes, o layout também possui margens nos dois lados das colunas, as margens são medidas em incrementos de 8px ou, em alguns casos, de 4px.
Ritmo espacial horizontal
Todas as distâncias são definidas para um incremento de 8 ( 8, 16, 24, 32, 40, 48, ... 128 ) devido à abordagem do web design responsivo e ao comportamento do componente.
Isso se aplica a margens e pás mas não para dimensões. A largura da dimensão horizontal é definida pelo layout e isso significa que pode não ser múltiplo de 8px. Ainda assim, ao criar componentes, recomendo criá-los usando um espaçamento de 8px, mas às vezes quando você os coloca no layout pode acontecer que, se eles não tiverem uma largura fixa, ao colocá-los no layout, a largura não corresponderá a um múltiplo de 8px. Nesses cenários, você pode ajudar-se com keylines, uma ferramenta de design que alinhará horizontalmente todos os componentes à grade de 8px.
Quilinas
Linha de teclas
Para ajudá-lo a alinhar componentes ou elementos menores ( átomos ou moléculas ) fora da grade de layout, você pode se ajudar a usar queilinas. São linhas verticais que indicam onde os elementos são colocados. Tente colocar as keylines usando a regra 8px, usando incrementos de 8px a partir da borda do elemento mais próximo. As keylines podem criar mais ou menos espaço entre os elementos em um layout sempre com incrementos de 8px.
Ritmo de espaço vertical
Ritmo vertical
Igual ao espaçamento horizontal, todas as distâncias são definidas para um incremento de 8 ( 8, 16, 24, 32, 40, 48, … 128 ) devido à abordagem do web design responsivo e ao comportamento do componente.
O espaço vertical se aplica aos três elementos; Dimensões, margens e estofamento.
Como o layout da coluna rege apenas o ritmo horizontal quando se trata do ritmo vertical, a rainha é o espaçamento. Tenha em mente ter todos os elementos dentro do layout e coloque-os verticalmente com espaços de incrementos de 8px.
Como mencionado, tente sempre alinhar objetos na grade de 8px, mas, quando necessário, use o bom senso para ajustar os designs a 4px. O ****A linha de base 4px existe para permitir mais flexibilidade para alturas de linha e ajustes menores.
Espaçamento e tipografia
Embora o tamanho da fonte possa variar e se afastar da multiplicação 8, é importante que a altura da linha não.
O tamanho da fonte do parágrafo pode ser de 15 pixels, por exemplo, mas a altura da linha deve ser uma multiplicação de 8, portanto 24px é um valor aceitável.
Ter um múltiplo de altura de linha de 8px ajudará os projetos a seguir a grade de 8px.
Eu recomendo que esse tipo se alinhe à grade de linha de base de 4px, para que o espaço entre as linhas de texto seja múltiplo de 8px, se possível, mas se isso for grande demais, podemos usar a grade de linha de base de 4px.
Espaçamento e iconografia
Ícones
Ícones de design seguindo a mesma regra de 8px.
Certifique-se de que qualquer ícone que você solte no design enquadre-o dentro de um recipiente que usa um valor que é um múltiplo de 8 (isto é; 24x24). Isso permitirá que os ícones sejam definidos de forma consistente em seus designs. Os tamanhos de ícones padrão são 24px por 24px, mas podemos usar tamanhos menores ou maiores.
Em resumo
Espero que este guia de espaçamento o ajude a se sentir confiante em apresentar UIs mais rapidamente, com mais consistência, menos suposições e menos decisões de design necessárias. Experimente o método de espaçamento de 8px e seus designs ficarão muito melhores.
Espaçamento
Algumas coisas para lembrar:
- O espaço vertical e horizontal entre os componentes precisa ser definido como um múltiplo de 8px; em algumas ocasiões, você pode usar 4px se a separação for mínima, como a linha de base do texto.
- Margens ou estofos são um incremento de 8.
- A tipografia pode ter qualquer tamanho, mas seu contêiner ( altura da linha ) deve ser configurado com um múltiplo de 8px. ( Exemplo: Tipo 15px; Altura da linha: 24px; )
- Os ícones também precisam viver em um contêiner múltiplo de 8px.