Que forma para a minha app: cantos retos, arredondados ou redondos?

Eis o que a forma muda numa app GoodBarber, onde se regula e como chegar ao raio da sua escolha.

A forma é o arredondamento dos cantos das suas células, das suas miniaturas, dos seus botões e dos seus campos, aquilo a que muitas vezes se chama cantos arredondados. No Design System GoodBarber, é o Shape atom, que propõe três formas prontas a usar. Quadrado, o canto é reto e o raio vale 0. Arredondado, o raio vale 4 píxeis, o suficiente para suavizar sem dar nas vistas. Redondo, vale 12 píxeis numa célula ou numa miniatura, e num botão ou num campo ocupa toda a altura, a forma a que os designers chamam pill.

Não regula estes cantos elemento a elemento. Uma forma escolhida em A minha app › Estilo da app › Miniaturas e Células vale para todas as listas, todos os widgets da Home e os seus cabeçalhos, em todas as suas páginas. É o nosso princípio «Set once, consistent everywhere», um valor definido uma vez e retomado em todo o lado. Os botões e os campos têm a sua própria opção, também em Estilo da app, em Botões e Campos de formulário, com as mesmas três formas predefinidas. Pode assim manter células quadradas e botões redondos.

Numa app GoodBarber com cantos retos, nem tudo é quadrado. As células, as miniaturas e os botões são. Mas o avatar de um autor continua a ser um círculo, redondo por natureza. E outros pequenos elementos têm a sua própria forma, que não segue a forma escolhida para a app, o ícone de reprodução de um vídeo, a etiqueta da sua duração, a pastilha da data. Os nossos modelos entregam-nos redondos. Um círculo reconhece-se num relance, mesmo muito pequeno, e assinala algo à parte, uma pessoa, uma ação, uma referência.

A sua forma não é fixa, no entanto. A pastilha da data tem o seu próprio cursor de forma, com três posições. Foi assim que a app de Unit 7 acima, a de uma oficina de serigrafia, passou as suas pastilhas para quadrado, para ir até ao fim na sua aposta nos cantos retos.

Aqui está duas vezes o mesmo ecrã, o de Eastside Music Workshop, uma escola de música. À esquerda, tudo é quadrado, a opção Quadrado para as miniaturas e células, a barra de separadores com «Estilo dos cantos» em Quadrado, a pastilha da data na primeira posição do seu cursor. A app está limpa, e um pouco severa para uma escola. À direita, mudaram três regulações, o objeto shape em custom com um raio de 20, a barra de separadores em «Completamente redondo» e a pastilha na opção redonda. Nada mais se mexeu, nem as cores, nem os tipos de letra, nem os espaços. E, no entanto, a app muda de carácter. Torna-se acolhedora, à imagem de uma escola onde pequenos e grandes vêm aprender música.

É tudo o que um raio faz, e é por isso que merece ser escolhido em vez de aceite sem pensar.

Três apps, três formas, e cada uma conta outra coisa. Da esquerda para a direita, a imagem mostra cantos retos na app de uma oficina de serigrafia, arredondados na de uma sociedade de história natural, redondos na de uma escola de música. A tabela acrescenta o raio livre.

As três primeiras linhas escolhem-se em Estilo da app. A quarta regula-se no editor, com duas chaves.

Nenhuma forma é melhor do que outra. Cada uma destas três apps mantém-se graças à sua, porque diz o mesmo que as suas cores e os seus tipos de letra.

A minha regulação preferida é a de Eastside, um raio de 20 nas células, botões redondos e uma barra de separadores redonda. Vem do logótipo da escola, três arcos arredondados, e essa curva volta em cada célula e em cada botão. Com curvas tão generosas, cada célula torna-se um objeto bem distinto sobre o fundo, e os botões redondos veem-se ao primeiro olhar.

O raio de 20 define-se no JSON, com os três passos de «Regule a forma da sua app no GoodBarber». Os botões e os campos passam para a opção Redondo, e a barra de separadores para «Completamente redondo».

A forma em resumo

• Numa app GoodBarber, a forma dos cantos escolhe-se entre três opções, Quadrado (0), Arredondado (4 px) e Redondo (12 px, ou toda a altura nos botões e campos).
• Uma forma escolhida em Estilo da app › Miniaturas e Células vale para todas as células, miniaturas, cabeçalhos e fundos de widget. Os botões e os campos têm a mesma escolha, no seu próprio painel.
• A barra de separadores tem a sua própria regulação, «Estilo dos cantos», com os modelos Bold, Minimal e Clean TabBar.
• Alguns pequenos elementos não seguem a forma da app. O avatar é redondo por natureza, o ícone de reprodução, a duração e a pastilha da data têm a sua própria forma, redonda nos nossos modelos.
• Para um raio preciso, passe pelo JSON com a extensão gratuita Edição avançada, pondo type em custom e acrescentando radius, um número inteiro.