Padrões de design - Menus

Esse documento estabelece os padrões e fornece um guia para a definição do layout e da interface dos menus com o usuário do sistema. O layout padrão do sistema contará com o menu lateral e o menu superior.

O menu de navegação deverá ser posicionado à esquerda da tela, o qual terá os principais módulos utilizados no sistema, são eles:

• Atendimentos
• Pontos de atendimento
• Pessoas
• Endereços
• Serviços

O menu lateral futuramente irá apresentar apresentar a foto de perfil do usuário autenticado no sistema (Hoje existe uma foto de exemplo), abaixo desta foto deve ser apresentado o nome do usuário, e em seguida um menu do tipo lista suspensa com o perfil em que o usuário está cadastrado, uma opção para gerenciar sua conta e um botão para sair do sistema.

Abaixo das opções do usuário, deve ser exibido o menu em si, cada item será acompanhado da descrição do módulo principal e um ícone que o identifique. O menu lateral deverá ter a capacidade de contração, reduzindo sua largura a partir do clique no botão posicionado à esquerda na barra de navegação superior. Ao contrair, o menu encolherá horizontalmente, ocultando os nomes dos módulos e exibindo, apenas, os ícones referentes aos módulos. O sistema irá salvar a informação de situação do menu expandido ou contraído no Cookie do navegador, com isso ao abrir em outro navegador ou limpar o histórico de navegação, a configuração da situação será a padrão (expandido) e caso outro usuário acesse com outra conta no mesmo navegador, as configurações salvas no navegador que serão as válidas, contraído ou expandido. Ao selecionar um item do menu, o sistema deve destaca-lo para facilitar a interação do usuário com a opção que está sendo usada e o menu lateral deve ser fixo, mudando apenas o corpo da página deve mudar.

Ao clicar em um item do menu lateral que tenha sub menu, o sistema deve expandir apenas os itens do sub menu.

Por padrão a cor do menu lateral em todas as páginas deve ser #404040.

O menu superior deve conter algumas funcionalidades, o sistema deve exibir no menu superior o nome do sistema, um botão para sair do sistema, um botão de ajuda e o botão propriamente dito com as demais funcionalidades do sistema e configurações. O botão de ajuda deve abrir uma outra página no navegador, direcionando o usuário diretamente para a página de suporte, onde ele poderá ter acesso as notas de versão e as opções de contato com a equipe de suporte.

Os demais itens de navegação do sistema estarão agrupados em um lista suspensa, localizado à direita na barra de navegação superior. Os itens menus utilizados e as configurações do sistema apresentados na barra de navegação superior são:

• Secretarias
• Departamentos
• Categorias
• Tipos de documento
• Contas de usuário
• Perfis de usuário
• Configurações de mapas
• Log de ações

Esses itens de navegação poderão ser acessados com um clique no botão lista suspensa na barra de navegação que os agrupa. No menu superior também deve ser exibido o nome do sistema, onde este ao clicar deve levar o usuário para a página inicial do sistema (Dashboard).

Por padrão a cor do menu superior em todas as páginas deve ser #585859.

Diferente dos menus da visão do cliente, os menus da área administrativa contarão com mas mesmas funcionalidades, porém com apenas o módulo de cliente e o log de ações da área administrativa. Essas duas opções se encontrarão presentes no menu lateral, não tendo no menu superior a opção de configurações com várias opções.

Por padrão, os ícones que devem ser apresentados no menu lateral e na barra de menus superior são:

Assim como os menus devem aparecer em todas as páginas do sistema, o rodapé deve aparecer também em todas as páginas, e nele deve conter o site da Tecsystem, e ao clicar nele o sistema deve abrir a pagina da empresa em uma outra guia do navegador.

Será gerado um avatar para o usuário automaticamente usando as iniciais do primeiro e último nome cadastrados(caso tenha apenas um nome, será exibido só uma inicial).

• Cor fonte:#676A6C
• Cor fundo:#E9ECEF
• Tamanho fonte:80

Nenhuma.