--- title: "Home modular" description: "A Home é a primeira tela do seu app — obviamente uma das mais importante. É um elemento fundamental em torno do qual todo o resto se encaixa. A GoodBarber 4.0 i" canonical_url: "https://pt.goodbarber.com/blog/home-modular-a790/" lang: pt date: 2017-04-11 last_updated: 2017-06-05 --- # Home modular [Voltar](/blog/make-it-r19/) # Home modular Escrito por [Jerome Granados](https://pt.goodbarber.com/blog/author/jerome-granados/) na Terça-Feira 11 Abril 2017· Última atualização: Segunda-Feira 5 Junho 2017 ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/11992845-19400262.jpg?v=1491898992.5544238) A Home é a primeira tela do seu app — obviamente uma das mais importante. É um elemento fundamental em torno do qual todo o resto se encaixa. A GoodBarber 4.0 introduz um sistema modular, ultra flexível, para gerenciar a Home e tornar ela o ponto de partida de uma experiência de usuário única em todo o seu aplicativo. ## Navegação principal e conteúdo selecionado ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/11992845-19400286.jpg?v=1491899403.9094315) A Home hospeda a maior parte das ações dos usuários — 90% deles visitam apenas a primeira seção do aplicativo! Isto é o que as estatísticas de uso dos aplicativos criados com versões anteriores da GoodBarber nos mostram. Enquanto isso, como uma tendência geral dentro da nossa indústria, também começamos a notar mais e mais aplicativos usando a Home para gerenciar a navegação principal. Ambas as observações nos levaram a imaginar um conceito radicalmente novo para a Home dos aplicativos v4. Com a GoodBarber 4.0, a Home permite que você escolha o conteúdo que será destacado ao abrir o aplicativo. Também permite que você exiba links para os destinos principais que compõem seu app, na sua opinião. Assim, acreditamos realmente que este conceito permitirá que você distribua melhor o tráfego no seu aplicativo. ## Modularidade infinita ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/11992845-19400458.jpg?v=1496694249.1221478) Com a GoodBarber 4.0, cada Home é única. Este novo recurso permanece alinhado com a direção que tomamos quando lançamos a GB pela primeira vez: cada aplicativo deve ter seu próprio design único. É a razão pela qual desenvolvemos 66 widgets, disponíveis com o lançamento da GoodBarber 4.0, para construir a Home dos apps. Widgets são módulos funcionais. Para projetar eles, primeiro, consideramos os diferentes modelos de telas nos smartphones. Não é fácil encontrar mais espaço utilizável na UI mobile! Pensar em mobile como ponto de partida fez com que desafiássemos a nossa criatividade, da qual surgiu um design absolutamente moderno, com um nível de funcionalidade enriquecido e alinhado com o que oferecemos, mas, ao mesmo tempo, com uma interface mais limpa. A partir do back office, a Home deve ser concebida a partir da visualização para mobile. Você pode pensar na sua Home como um banner vertical dividido em fatias horizontais. Cada fatia é composta por um widget. A variedade de widgets é o que torna a página dinâmica. Os templates associados aos widgets têm uma declinação para dispositivos móveis, tablets e desktop. Quando você adiciona um widget na sua Home, as visualizações correspondentes a cada tamanho de tela são automaticamente geradas. No entanto, você ainda está no comando quando se trata de configurar detalhes específicos para cada tamanho de tela. ## Os widgets ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/11992845-19400667.jpg?v=1491900681.0179865) Existem duas categorias de widgets. **Widgets de conteúdo** e **widgets de navegação**. Na página de [Índice UI](https://pt.goodbarber.com/ui-index/) no novo portal da GoodBarber é possível visualizar todos os modelos disponíveis para widgets de navegação e para widgets de conteúdo relacionados a cada tipo de seção. **WIDGETS DE CONTEÚDO** Os widgets de conteúdo podem ser usados para exibir itens pertencentes a seções do aplicativo, na página inicial. Eles pertencem a 3 famílias. - Lista: o conteúdo é exibido em formato de lista, com a possibilidade de destacar determinados itens (widget n°1 e n°6 do exemplo acima). Você pode optar por exibir itens pertencentes a uma categoria específica dentro de uma seção (o widget n°2 exibe a categoria "Radar" da seção "Notícias"). - Banner: esses widgets otimizam o uso do espaço útil na Home. O conteúdo de navegação é acessado através do deslocamento horizontal (widget n°3). - Destaque: são widgets semi-dinâmicas. O primeiro elemento exibido é um link para a seção, os seguintes elementos são itens pertencentes à seção (widget n°5). Existem muitas opções de classificação para exibir os itens: por data, aleatoriamente, ordem alfabética, ... **WIDGETS DE NAVEGAÇÃO** Esses widgets podem ser utilizados para criar links para seções, CTAs (chamadas para ação) ou direcionar para URLs externas. Eles pertencem a 3 famílias. - Lista: estes widgets ocupam o máximo de espaço disponível. Os links são exibidos no formato de lista. Eles podem mostrar um título, subtítulo, botão, imagens ou ícones, realçando a ação a ser realizada (widget n°4 do exemplo). - Banner: a navegação nos links exibidos dentro desses widgets pode ser feita através de rolagem horizontal. Como resultado, eles podem ser usados para minimizar o uso de espaço. Títulos, legendas, botões, imagens e ícones também estão disponíveis com este grupo de widgets. - Remoto: esses widgets podem exibir até 6 links, com título e ícone apenas. Eles são feitos para serem compactos e, geralmente, localizados na parte inferior da Home, como um rodapé. *** A Home modular da GoodBarber 4.0 tem como objetivo entregar o máximo de valor possível para tráfego capturado, logo ao abrir o app. Através da combinação de widgets de conteúdo e navegação, sua Home se torna verdadeiramente única. Agora, é sua vez de começar a criar a melhor experiência de usuário para o seu aplicativo! ## Bônus! Também fizemos um vídeo tutorial (legendas em português - CC) explicando detalhadamente os passos para criar a Home do seu app, você pode conferir abaixo: Você também pode encontrar informações adicionais sobre este vídeo e outras funcionalidades no [nosso canal do YouTube](https://www.youtube.com/user/GoodBarberTV) ! - [#Atualização](https://pt.goodbarber.com/blog/tags/atualiza%C3%A7%C3%A3o) - [#Design](https://pt.goodbarber.com/blog/tags/design) - [#Funcionalidades](https://pt.goodbarber.com/blog/tags/funcionalidades) - [#GoodBarber 4.0](https://pt.goodbarber.com/blog/tags/goodbarber%204.0) - [#V4](https://pt.goodbarber.com/blog/tags/v4) ![Jerome Granados](https://blog.goodbarber.com/_public/profile/1b/1b6453892473a467d07372d45eb05abc2031647a-default.jpg) Sobre o autor[Jerome Granados](https://pt.goodbarber.com/blog/author/jerome-granados/)CMO Sou CMO e sócio da GoodBarber. Neste blog, compartilho dicas práticas para ajudar você a aproveitar ao máximo a GoodBarber, análises sobre as tendências que estão transformando o universo mobile e o no-code, além de algumas reflexões sobre o impacto da inteligência artificial em nosso setor. Se algum artigo despertar uma pergunta, uma ideia ou uma experiência para compartilhar, vamos conversar nos comentários. [Saiba mais](https://pt.goodbarber.com/blog/author/jerome-granados/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/jeromegranados/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/jeromegranados)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/jerome.granados)[![Instagram](https://portal.ww-cdn.com/portal_static/svg/base2021/instagram.e3b82841d5d7.svg)](https://www.instagram.com/jeromegranados/)[![Pinterest](https://portal.ww-cdn.com/portal_static/svg/base2021/pinterest.3ba400801cb2.svg)](https://www.pinterest.com/jeromegranados/)