Aqui está uma pergunta que me foi feita há muito tempo, quando comecei como designer de interface do usuário, e há muito procurava o porquê e como!
Hoje, encontramos botões de diferentes tamanhos, cores e estilos nas interfaces.
A forma dos botões não escapou da customização de um site ou aplicativo.
Quando navegamos, não nos perguntamos realmente a forma que um botão pode ter, desde que funcione e nos direcione para a página ou a ação que desejamos.
E ainda, é uma propriedade que tem muito poder e pode trazer tom e personalidade a um charter.
Compartilho com você hoje as chaves para definir qual raio de borda adotado de acordo com a mensagem veiculada pelo seu serviço/produto.
Raio de fronteira, kesako?
Antes de prosseguir, vamos definir juntos o que é o raio da borda.
É uma propriedade em CSS que permite definir o ângulo dos cantos de um elemento.
- Cada ângulo pode ser definido de forma diferente para criar uma forma irregular ou cada ângulo pode ter o mesmo valor.
- Encontramos border-radius em diferentes elementos de uma interface: um plano de fundo, um cartão, um botão, etc.
A escolha do raio da borda terá um forte impacto na sensação geral da interface. Por isso, é importante entender as propriedades que cada um oferece.
#1 Raio em 0px
A opção clássica que traz seriedade e estabilidade a uma interface.
Quando uma marca a usa, ela quer lhe dar uma sensação de segurança e mostrar o profissionalismo de seu serviço ou produto.
Esses botões são encontrados em ângulos retos em sites ministeriais e de comércio eletrônico.
- Sites departamentais: compromisso, seriedade
- Sites de e-commerce: pagamento seguroA forma geométrica mantém os elementos alinhados e organizados para manter o equilíbrio entre todos. Este equilíbrio dá confiança ao usuário.
#2 Raio em 3 – 4px
A opção mais comum e inofensiva quando se trata de design de interface do usuário.
Com efeito, permite ter um espírito profissional mas sem ser rigoroso.
A leveza do raio de borda permite estar mais próximo dos usuários e proporcionar o que se chama de ambiente amigável.
Apagamos os lados angulares para criar pequenas dobras que trarão flexibilidade, mantendo o equilíbrio entre os diferentes elementos.
Esta é uma opção que você encontrará em muitos tipos de sites.
#3 Raio em 6 – 12px
Podemos dizer que essa opção é incomum, mas a encontramos cada vez mais nas cartas gráficas dos sites relacionados às novas tecnologias.
É raro e considerado inovador, embora seja perigoso de usar.
De fato, ao contrário das opções anteriores, pode ser desconfortável tanto para o usuário quanto para o designer de interface do usuário!
- Para um usuário, pode ser percebido como infantil ou como um defeito de desenvolvimento.
- Para um UI designer, pode criar desequilíbrio e inconsistência em uma interface, portanto, deve-se ter cuidado com seu uso, mas não deixá-lo de lado por todos os bons motivos mencionados!
#4 Cantos completamente arredondados
Para contornar todas as opções, devemos mencionar também a opção de arredondamento completo: o botão redondo!
Esta opção é muito comum em interfaces porque cria uma atmosfera amigável e criativa.
O olho é naturalmente atraído pelas curvas e isso facilita a leitura e a detecção de botões com cantos arredondados.
De fato, em uma interface, cercada por linhas retas e estruturas paralelas, o botão arredondado se destacará e será destacado graficamente.
O ponto negativo dessa materialização é a complexidade de utilizá-la em todos os componentes. Funciona muito bem para botões, mas deve ser reservado para campos de formulário, por exemplo.
Deve, portanto, ser usado com moderação e em combinação com uma das outras opções para contrabalançar.
Esta opção é utilizada para diversos tipos de sites por todas essas vantagens e pela dinâmica que traz.
Tanto que é frequentemente encontrado em elementos de comunicação como o botão “Play” de um vídeo ou os botões de compartilhamento das redes sociais.
# Para concluir
Portanto, não há resposta certa ou errada quando se trata de selecionar o raio da borda em sua interface.
O objetivo que você deve ter em mente é manter a consistência nas suas escolhas para ter consistência ao longo do curso (coerência do todo, carta, marca e estratégia gráfica).
Essa consistência gráfica dará um tom particular às suas interfaces para destacar sua mensagem e seu produto ou serviço.
Fonte da imagem: https://undraw.co/illustrations
Alexa CUELLAR UX-UI Designer @UX-Republic
