--- title: "Como configurar o estilo do seu aplicativo | Tutoriais - GoodBarber" description: "Estilo do appO" canonical_url: "https://pt.goodbarber.com/tutorials/design/como-configurar-o-estilo-global-do-seu-aplicativo/" lang: pt --- # Como configurar o estilo do seu aplicativo | Tutoriais - GoodBarber [Voltar](https://pt.goodbarber.com/tutorials/) # Como configurar o estilo do seu aplicativo ## Estilo do app O "App style" define o design geral do seu app em um só lugar: cores, fontes, botões, campos de formulário e muito mais. No menu "My App", clique em "App style". As configurações têm duas partes: o essencial e, depois, as opções adicionais. Tudo aqui vale para todas as seções do app e substitui o design de cada seção. ## Cores Comece pelas cores. Um tema de cores reúne cores que combinam bem. Escolha um na biblioteca… e a pré-visualização mostra o resultado. A "Magic palette" te sugere um novo tema… a cada clique. Depois, ajuste cada cor em detalhe: o cabeçalho, as cores principais, os fundos, o menu e os botões. Clique em uma cor, digite um código ou escolha uma e clique em Choose. O cabeçalho muda de cor. Clique em Apply para usar essas cores em todo o app, ou em Cancel para manter as atuais. Aqui, mantemos as atuais. ## Fontes Em seguida, as fontes. Um tema de fontes reúne três fontes que combinam bem. Você pode escolher um nesta lista. O controle deslizante define o tamanho de todos os textos de uma vez, mantendo a hierarquia. Todos os níveis de texto crescem juntos. Seu app usa oito níveis de texto, do título principal ao texto normal. Para mudar a fonte de um nível, abra-o… e escolha uma fonte. As Google Fonts estão todas disponíveis, e o botão + adiciona uma fonte própria, se a licença permitir. O título principal muda de fonte. Em cada nível, você também define o peso, a altura da linha e o espaço entre letras. De novo, clique em Apply para usar essas fontes, ou em Cancel para manter as suas. ## Botões e campos de formulário Agora, os botões. Seu app usa três níveis de botão, escolhidos pela GoodBarber para cada ação: o nível 1 é preenchido, o nível 2 tem contorno e o nível 3 é um simples link de texto. As cores deles vêm do seu tema de cores. Escolha o formato deles: Square, Rounded ou Round… e todos os botões do seu app ficam assim. Em "Form fields", é igual: escolha o formato, o tamanho e a posição do título, acima do campo ou dentro dele. ## Miniaturas e células Em "Thumbnails and cells", defina o formato das imagens e dos cards das listas: Square, Rounded ou Round. Aqui, os cantos ficam retos. No computador, o app web também pode ter um efeito ao passar o mouse sobre uma imagem. ## Espaçamento Em Spacing, você define as margens ao redor do conteúdo, em pixels. Com margens maiores, o conteúdo ganha mais espaço ao redor. ## Animações e feedback tátil Nos apps nativos iOS e Android, você também pode escolher como uma página abre a partir de uma lista, adicionar uma leve vibração ao toque e revelar elementos ao rolar. ## Ícones Em Icons, você escolhe os ícones padrão do seu app. Por exemplo, clique no ícone de favoritos… e escolha outro na biblioteca. O novo ícone aparece em todos os artigos. ## Fundo e separadores Por fim, o fundo do seu app: uma cor ou uma imagem, e a cor dos separadores. O fundo muda em todas as páginas. ## Publicar Para que seus usuários vejam as mudanças, publique a atualização do seu app pelo menu Publish. ## Vídeos semelhantes [DesignComo configurar seu cabeçalho](/tutorials/design/como-configurar-seu-cabecalho/) ![Como configurar seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg) [DesignComo personalizar a tela de lançamento do seu aplicativo](/tutorials/design/como-personalizar-a-tela-de-lancamento-do-seu-aplicativo/) ![Como personalizar a tela de lançamento do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg) [DesignComo configurar o menu de navegação do seu aplicativo](/tutorials/design/como-configurar-o-modo-de-navegacao-do-seu-aplicativo/) ![Como configurar o menu de navegação do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg) [DesignComo personalizar os ícones do seu menu](/tutorials/design/como-personalizar-os-icones-do-seu-menu/) ![Como personalizar os ícones do seu menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg) [DesignComo criar o design das suas seções](/tutorials/design/como-criar-o-design-das-suas-secoes/) ![Como criar o design das suas seções](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg) [DesignComo copiar o design de uma seção](/tutorials/design/como-copiar-o-design-de-uma-secao/) ![Como copiar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg) [DesignComo personalizar o design das categorias de uma seção](/tutorials/design/como-personalizar-o-design-das-categorias-de-uma-secao/) ![Como personalizar o design das categorias de uma seção](https://portal.ww-cdn.com/portal_static/images/videos8.fc945e8b95fd.jpg) [DesignComo configurar sua página inicial (home) do seu aplicativo movel](/tutorials/design/como-configurar-sua-pagina-inicial/) ![Como configurar sua página inicial (home) do seu aplicativo movel](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg) [DesignComo escolher o tamanho do seu cabeçalho ?](/tutorials/design/como-escolher-o-tamanho-do-seu-cabecalho/) ![Como escolher o tamanho do seu cabeçalho ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)