Oi, hoje eu vou falar sobre elementos de interface do usuário e pensar
um pouco em espaçamentos, tamanhos, e alinhamentos.
Uma linguagem consistente é muito importante no design digital,
pensar os propósitos gerais das cores, das formas, das animações,
tudo que confira uma unidade ao projeto vão te ajudar muito nas decisões,
vão fazer com que você não paralise nas suas entregas.
Sem padrões, as decisões de design vão te prender muito nas decisões e
críticas e também pode prejudicar um pouco a usabilidade do usuário,
uma vez que quanto mais padrões ele tem que reconhecer,
mais esforço ele vai desprender e consequentemente ele vai tomar mais
tempo para tomar decisões e possivelmente diminuir a performance do seu projeto.
Nesse vídeo a gente vai falar um pouco sobre alinhamentos e como
a criação de padrões de reconhecimento ajuda a gente a criar interfaces,
linhas a linhas, em especial, gerando um ritmo vertical nas telas.
A gente vai usar três conceitos, são eles: tamanho, entrelinha e espaçamento.
Antes disso, a gente vai falar um pouco do que a Google e a Apple fazem.
Primeiro, a gente vai falar do machiner design da Google.
No geral, eles botam um grande grid de quadrados múltiplos de oito
e isso vale para celulares, serve para tablets e serve também para desktops.
A iconografia do machiner design também se alinha num grid de
quadradinhos múltiplos de quatro.
Os elementos tipográficos se alinham numa grade de quatro pixels também,
de quatro por quatro.
Eles usam uma escala tipográfica de 12, 14, 16, 20 e 32 pixels.
Para segurar também um balanço nas informações, é sugerido que os
itens clicáveis da tela tenham pelo menos 48x48 pixels,
isso dá aproximadamente uns nove ou dez milímetros, independente da tela.
Uma área de toque mínima recomendada é de sete milímetros ou um pouco mais que isso.
Mais que isso, as pessoas com dedos gordos ou que possivelmente tenham
algum problema de toque não vão conseguir clicar muito fácil nas suas interfaces.
Na Apple, eles aconselham que o alinhamento da
sua interface seja bem construído para que o usuário,
na hora de escanear as telas verticalmente, ou horizontalmente também,
consigam scrollar e identificar mais facilmente os elementos,
então alinhamento junto com uma indentação ajuda
também a organizar a sua tela e dar uma hierarquia maior aos componentes.
Também é interessante ficar atento às áreas de segurança e as margens.
O que o HIG fala, né?
O Human Interface Guidelines da Apple.
No geral, as informações e o conteúdo das informações devem encaixar
confortavelmente na tela e estar um pouco longe das margens.
A Apple também sugere que você use um grid de 8x8 pixels.
Eles também sugerem que você grude as imagens nas laterais
das grades para que não tenhamos desfoque nas coisas, não tenhamos blur.
Bom, o primeiro ponto que a gente vai falar, depois que a gente comentou
do Google e da Apple, é sobre o tamanho, o tamanho das fontes.
Idealmente, você vai escolher uma fonte de tamanho de 16 pixels,
porque isso está alinhado com o que a Google e a Apple sugerem e também
porque a maioria dos navegadores usam 16 pixels como o tamanho padrão de fontes.
Então, esse pode ser o tamanho do seu corpo de texto, vai estar de acordo
com a maioria dos navegadores e é fácil de ler para a maioria das pessoas também.
Uma coisa interessante de comentar é que,
enquanto nos impressos um tamanho ideal de fonte está entre 10 e 12 pontos,
na web esses números sobem um pouco mais, talvez de 15 a 25.
Então, nos meios digitais, é interessante ficar atento a esses pequenos ajustes,
que provavelmente vão ser necessários.
Você também pode usar o que se chama escala modular para fonte.
O que é uma escala modular?
É basicamente você pegar um número e e usar frações desse número
para multiplicar os outros tamanhos de fonte,
sejam eles uma caption, por exemplo, uma label ou mesmo os outros títulos.
Você pode continuar usando essa fração de números
numa escala modular para produzir todos os outros tamanhos de fonte também.
À medida que você vai construindo e escolhendo seus estilos tipográficos,
você pode ver como é que eles vão respondendo aos diferentes tipos de tela,
diferentes tamanhos de tela.
É possível que você tenha, por exemplo, tamanhos razoáveis de texto
para celulares, mas em displays maiores,
em telas maiores, por exemplo, desktop, você fazer ajuste nisso.
Por exemplo, nos títulos, enquanto no celular ele pode ter um tamanho x,
ele pode ter 1,2x ou crescendo proporcionalmente
em tamanhos maiores, em vídeos maiores.
Um outro ponto interessante, a gente já falou de tamanhos de fonte,
é a entrelinha ou a altura de uma linha, uma fonte.
Uma linha bem espaçada ela, com certeza, embeleza um pouco mais
a tipografia e consequentemente as interfaces.
Um número de entrelinha ideal está entre 1,4 e 1,5 vezes o tamanho da fonte,
especial 1,5 vezes, que é o recomendado por padrões de acessibilidade.
Então, por exemplo, se você tem um tamanho de fonte de 16,
você pode usar uma entrelinha de 1,5x, 1,5 vezes esse tamanho,
então 16x1,5 você vai ter uma entrelinha de 24,
então você vai ter uma altura de linha de 24 pixels.
E 24 pixels, como a gente estava comentando,
está de acordo com aquele grid, com a grade de quadrados de oito pixels,
então vai ajudar muito mais no seu alinhamento e na harmonização dessa tela.
Isso de usar entrelinhas com números como 1,4 ou
1,5 vai ajudar na matemática da construção da sua tela,
isso porque ela vai ficar mais previsível e não precisa ligar
se os números começarem a ficar quebrados.
Por exemplo, em títulos você pode ter essa entrelinha um pouco menor e isso vai dar,
talvez, 1,25 ou 1,125, mas não tem problema esse número estar quebrado,
desde que você use um tamanho proporcional nas entrelinhas.
O terceiro ponto é o de espaçamento,
e eu estou falando agora de espaçamento entre elementos.
Eu já falei de tamanho de fonte, de entrelinha e agora é o espaçamento entre
elementos, eles vão ajudar, com certeza, na utilização de espaços
em branco da sua interface, com certeza vai dar um respiro maior.
Espaçamento consistente, ele além de promover uma interface com maior respiro,
com maior aproveitamento do branco,
ele vai ajudar na manutenção do seu layout.
Então, se você usa padrões e proporções, fica muito mais fácil.
Fica mais fácil fazer a manutenção de espaçamentos na sua interface.
No Material Design, por exemplo, além do espaçamento padrão,
entre elementos de oito pixels, você tem nas margens laterias um espaçamento
de 16 pixels e isso ajuda a você tirar dos cantos da
tela as informações e concentrar em uma área de segurança.
Diferente de uma base intuitiva, que seria a de dez, usar padrão como quatro ou oito,
como já foi citado, ajuda um pouco mais na construção da sua tela,
porque é o que é recomendado, por exemplo, pela Apple e pela Google.
Além disso, se você usar ícones em múltiplos de quatro,
vai ajudar muito mais no posicionamento desses elementos na tela,
da mesma forma você pode criar margens e pagines de acordo com esses números.
Até agora eu falei de múltiplos de oito, mas para um ritmo vertical você
também pode usar, por exemplo, o número 12, como um padrão de alinhamento vertical.
Por exemplo, usando o que eu já falei, se você tem uma fonte de
tamanho 16 e você tem uma entrelinha de 1,5x,
você vai ter uma altura de linha de 24 e isso também é múltiplo de 12 e também dá
para você conseguir criar blocos e padrões de reconhecimento vertical na sua tela.
Ocasionalmente você pode quebrar essa regra, sem dúvida.
Por exemplo, se você tem uma margem de um pixel, você vai ter uma
margem de pixel elemento, você vai ter uma espécie
de desalinhamento de um pixel em torno de toda a área daquele componente.
Então, é interessante ter uma certa flexibilidade também,
porque senão você vai ter que ficar fazendo esse alinhamento de pixel para
absolutamente tudo e se isso está atrapalhando a sua produtividade,
é melhor só aceitar a vida como ela é e fazer os alinhamentos o
mais próximo possível de 8 ou 12, no caso.
O ideal é você procurar padrões que
cresçam ou encolham de acordo com o conteúdo.
Para tamanhos de fonte, no geral,
é difícil e não é recomendado você botar alturas e larguras fixas.
Você deve evitar larguras e alturas fixas ao máximo.
O ideal é que o seu layout flua horizontalmente
e escoa verticalmente, de uma forma mais natural,
e isso ajuda a deixar o seu layout também pouco mais responsivo.
Artur Vilas Boas
André Leme FleuryProfessor
