--- title: "Cantos retos, arredondados ou redondos na sua app GoodBarber" description: "No GoodBarber, os cantos da sua app podem ser retos, arredondados a 4 px ou redondos, em células, botões e campos. Qualquer outro raio, no JSON." canonical_url: "https://pt.goodbarber.com/blog/que-forma-para-a-minha-app-cantos-retos-arredondados-ou-redondos-a1394/" lang: pt date: 2026-11-05 last_updated: 2026-11-06 --- # Que forma para a minha app: cantos retos, arredondados ou redondos? No GoodBarber, a forma dos cantos da sua app escolhe-se entre três opções, e o raio exato, se o quiser, regula-se no JSON. É a assinatura mais visível de uma app. Retos, os cantos dão um carácter nítido e afirmado. Ligeiramente arredondados, suavizam-no. Redondos, tornam a app calorosa e acolhedora. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Escolha a **GoodBarber** como suaFonte de notícias preferidaEscolha a **GoodBarber** como sua](https://www.google.com/preferences/source?q=pt.goodbarber.com) 5 de nov. de 2026 · Atualizado em 6 de nov. de 2026 · 7 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98605389-68813771.jpg?v=1793872343.624554) Eis o que a forma muda numa app GoodBarber, onde se regula e como chegar ao raio da sua escolha. ## Três formas para toda a app: cantos retos, arredondados, redondos ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98605389-68813772.jpg?v=1793872345.3005633) 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](https://pt.goodbarber.com/uxdesign/atom-shape/), 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. ## Os pequenos elementos continuam redondos ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98605389-68813773.jpg?v=1793872346.9725728) 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. ## Regule a forma da sua app no GoodBarber [Animação: a forma Redondo escolhida em Miniaturas e Células, depois um raio de 20 definido no JSON](https://player.vimeo.com/video/1243651729?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Tudo acontece em **A minha app › Estilo da app**. Três painéis oferecem aí a mesma escolha, Quadrado, Arredondado ou Redondo. **Miniaturas e Células** regula as células, as miniaturas, os cabeçalhos e os fundos de widget. **Botões** regula os botões, e **Campos de formulário** os campos. A escolha é guardada ao clique, e a pré-visualização atualiza-se. Com os modelos Bold, Minimal e Clean TabBar, a barra de separadores tem a sua própria regulação, «Estilo dos cantos», em **A minha app › Estrutura › Menu › Definições**. Para um raio que não está entre as três opções, a extensão gratuita **Edição avançada** abre o JSON, a lista completa das regulações, a mesma que para [a sombra](https://pt.goodbarber.com/blog/como-regular-a-sombra-na-minha-app-a1363/) e [as bordas](https://pt.goodbarber.com/blog/como-regular-as-bordas-na-minha-app-a1372/). Instala-se a partir do menu **«Loja de Extensões»**, na ficha «Edição avançada», e os seus ecrãs de design ganham o botão { EDIÇÃO }, no canto superior direito. 1. **Abra o JSON da app.** Em **A minha app › Estilo da app › Miniaturas e Células**, clique em { EDIÇÃO }. O editor abre nas regulações gerais da app, por ordem alfabética. Abra shape, e encontra a chave **type**, com o valor da sua escolha (sharp, rounded ou round). 2. **Passe para um raio livre.** Clique no valor de type e substitua-o por **custom**. 3. **Defina o seu raio.** Sob shape, clique em «+ Adicionar», escreva **radius** no campo newKey, deixe «Valor» selecionado, introduza um número inteiro em píxeis (aqui 20) e depois «Adicionar». A chave aparece, marcada «Novo». Clique em «Guardar». As células, as miniaturas, os cabeçalhos e os fundos de widget ganham este raio. Os botões e os campos mantêm a opção escolhida no seu painel, e os pequenos elementos redondos a sua própria forma. Uma referência. O raio é um número inteiro, e lê-se à escala de uma página, não de uma célula isolada. Compare na pré-visualização antes de escolher. ## Antes, depois: um raio de 20 muda o carácter de uma app ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98605389-68813775.jpg?v=1793872348.6645823) 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. ## Cantos retos, arredondados ou redondos, que efeito na sua app? ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98605389-68813776.jpg?v=1793872350.3405914) 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. | Forma | type | Raio | O efeito | | -------------- | ------- | ---------------------------------------- | -------------------------------------------------------------- | | 1. Quadrado | sharp | 0 | Nítido, afirmado, um ar de cartaz | | 2. Arredondado | rounded | 4 px | Suavizado sem dar nas vistas, a escolha mais discreta | | 3. Redondo | round | 12 px, toda a altura nos botões e campos | Suave, acolhedor, um ar de app para o grande público | | 4. Raio livre | custom | o número da sua escolha | A sua assinatura, fora da escala, como os 20 do antes e depois | 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](https://pt.goodbarber.com/blog/como-mudar-as-cores-da-minha-app-a1381/) e os seus tipos de letra. ## Um raio de 20 e botões redondos, para uma app calorosa ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98605389-68813777.jpg?v=1793872351.8165998) 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. ## É a sua vez Abra **A minha app › Estilo da app › Miniaturas e Células** e experimente as três opções, a pré-visualização acompanha. Quando lhe apetecer um raio só seu, a extensão gratuita Edição avançada acrescenta o botão { EDIÇÃO } no mesmo ecrã, e bastam duas chaves. Ainda não tem app? [Crie a sua](https://pt.goodbarber.com/create/) com o GoodBarber, o Mobile App Builder. Siga a GoodBarber no Google [![Adicione como fonte preferencial no Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-pt.7226f5ccc026.png)](https://www.google.com/preferences/source?q=pt.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre o autor Marie-Pierre Jeffard UI Designer Sou UI Designer da GoodBarber. Design system das apps, componentes, layouts, site, ilustrações, animações: tudo o que faço gira em torno da interface. O que me agrada no nosso produto é inventar regras universais, que funcionam em todos os ecrãs e acolhem todas as identidades visuais. A app torna-se uma montra para o seu conteúdo. Gosto do que parece simples, e de todo o trabalho invisível necessário para lá chegar: as regras, as escolhas e as restrições que mantêm uma interface de pé. É isso que conto aqui. [Mais de Marie-Pierre](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)