Shell
O Shell é um componente de navegação global que reúne recursos essenciais para a jornada do usuário. Ela facilita o acesso as funcionalidades, garante a consistência entre os produtos e reduz o esforço cognitivo. Além disso, seus menus e submenus são customizáveis para atender às necessidades específicas de cada aplicação.
Anatomia
- Identificação do produto: Contém o logo do produto que deve conter um link para a página inicial
- Menu Principal: Contém links para as principais funcionalidades do produto
- Menu Secundário: Contém links para acesso a seções importantes relacionadas ao produto
- Menu de Produtos: Permite alternar entre os principais produtos, conhecer a plataforma e acessar a gestão da conta no RD Accounts
- Menu da Conta: Permite acesso facilitado à configurações e seções importantes e exibe informações sobre a conta e o perfil pessoal
Exceções
Alguns locais ainda seguirão usando a Navbar simples (horizontal, na cor branca):
- Páginas de login e recuperação de senha
- Páginas de erro
- Editores
Menu principal
Permite a navegação e o acesso às principais funcionalidades de cada produto, podendo conter submenus com apenas mais um nível de navegação.
Quando expandido, os itens que possuem submenus apresentam uma seta indicativa, deixando claro quais menus possuem mais opções.
Menu secundário
Oferece atalhos a recursos e páginas específicas para cada um dos produtos. É permitido apenas a utilização de ícones, não devem ser utilizados textos corridos, tags ou outros elementos.
Ao serem clicados, estes itens podem exibir submenus, drawers ou levar para páginas específicas, conforme a necessidade de cada aplicação.
Menu da conta
Identifica a conta em que a pessoa está logada e permite o acesso facilitado à configurações e seções importantes para a operação da conta.
Menu de produtos
Lista os principais produtos da plataforma, permitindo a alternância entre eles de maneira facilitada.
Alertas e comunicações
Alertas e stickybars devem ser incluídas sempre no topo da página, antes do Shell.
Deve aparecer apenas uma mensagem por vez nesse espaço.
Elementos de apoio
Os itens do Menu Principal e submenus podem exibir alguns elementos de apoio, como:
- Tag: Permitem classificar um item de menu como associado a uma funcionalidade em fase de testes (beta), uma nova funcionalidade, dependente da contratação de determinado plano e etc.
- Badge (com ou sem contador): Permitem informar a contagem de novas atualizações associadas ao item do menu
- Texto auxiliar: Texto informativo adicional
- Ícone: Identifica os itens do Menu Principal e pode ser atribuído à um item de submenu, quando fizer sentido
Tags e badges
Tags e badges inseridas nos submenus do Shell devem seguir regras específicas de exibição:
| Elemento | Texto | Uso | Exibição |
|---|---|---|---|
NOVO | NOVO | Novas funcionalidades ou recursos do produto. | É removida automaticamente após o clique (após a visita, o item deixa de ser novidade). |
BETA | BETA | Funcionalidades em fase de testes. | Deve desaparecer quando a fase de testes for encerrada. |
PRO | BASIC, PRO, ADVANCED | Funcionalidades de uso restrito à planos e preços. | Deve desaparecer ou mudar à medida que houverem mudanças no plano contratado. |
8 de 10 | Contagem de canais (RD Conversas) | Indicador de uso de canais no RD Conversas. | Elemento específico para uso no RD Conversas. |
99+ | Contagem de itens novos na seção | Indicador de novas informações ou atualizações em uma determinada seção. | Aparece e permanece enquanto houverem novidades ou informações não lidas em uma seção. |
Textos
Quando escrever para itens do menu principal e da conta, use letra maiúscula no começo de cada termo. Por exemplo: Análise de Canais e Detalhes da Conta. Preposições e conjunções não entram nessa regra.
”Minha” ou ”Sua”?: Tudo no Menu da Conta é da pessoa usuária. Então, sempre que necessário, use ”Meu” + funcionalidade. Exemplo: Minha Jornada.
Feedback
To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.