Segue a padronização que deve ser usado no modelo de desenvolvimento do CMS para painéis administrativos usado no backend das aplicações.
Template utilizado: Appwork
- Colocar o asterisco em todos os campos obrigatórios
- Traduzir todos os campos
- Manter o mesmo estilo de fonte, tabela, e outros elementos da UI para todos os CRUDs no painel.
Campos obrigatórios:
- Senha
- Link de recuperação
- Definir os itens a serem utilizados, senão deixar página em branco
- Orientar o fluxo que o usuário levou para chegar na tela atual. O caminho pode ser representado no próprio título da página
h1. - Quando for tela de edição ou detalhe considerar o padrão: [Entidade] / [Entidade] # [ID]
Exemplo
Menu lateral:
Como deve ficar o título da página:
Quando houver menu Minha Conta na barra superior, redirecionar para uma tela permitindo a edição dos dados do administrador.
Exemplo
- Quando possuir campo de seleção
Select2, estilizar o componente para que fique com a mesma aparência do campo de texto normal, com relação a cor de borda, cor de fundo e altura do campo.
Exemplo
- Quando houver campo de data, número de telefone, CPF ou CNPJ, deve-se orientar a formatação esperada no
placeholderdo campo.
Placeholder de data: “Ex: dd/ mm/ aaaa”
Exemplo
- O campo de status ativo/inativo deve ser o último a aparecer no formulário.
- Todos os campos devem possuir label, até mesmo o campo de status ativo/inativo.
Label do campo: “Status” ou “Status da [Entidade]“
Exemplo
- Os botões devem ser na cor primária do cliente.
- Aplicar cor sólida ao botão somente quando for ação principal e importante para a tela. Os outros botões devem ser no estilo outline.
- O botão deve ficar logo abaixo ao título, alinhado a esquerda da tela.
Orientação para uso dos botões de ação nas telas de editar e detalhe.
- Os botões de ação devem ficar logo abaixo ao título, alinhados a esquerda.
- Os botões de ação devem possuir texto e ícone representando interação.
Exemplo
No exemplo de botões de ação (acima) está ilustrado como deve ficar o botão de deletar também. A orientação se aplica para uso dos botões de deletar nas telas de editar e detalhe.
- Caso haja necessidade da ação de deletar na tela o botão deve ficar logo abaixo do título.
- O botão deve ser no estilo outline, possuir o texto “Deletar” ou “Excluir” e ser da cor vermelha.
- O botão de deletar deve ser o último a aparecer.
-
Deixar botão de salvar alinhado ao lado esquerdo e no final do formulário.
-
Não é preciso um botão de voltar dentro de um formulário que possui fluxo com uma tela só, mas caso haja necessidade o botão deve ficar ao lado direito do botão de salvar.
Exemplo
- O ideal é que o formulário seja de uma coluna. Mas para que a tela não fique com barra de rolagem longa, quando houver muitos campos, deixar campos em colunas/alinhados.
Exemplo
- Não esquecer de colocar * (asterisco) nos campos obrigatórios e deve ficar a direita da label.
- Padronizar a validação dos campos. Escolher entre utilizar a validação que o “required” oferece ou deixa todos iguais ao do componente.
- O botão de adicionar deve ficar fora da área de filtro e alinhado a esquerda da tela.
- Botões de editar e excluir, ou outras ações do projeto devem ficar na coluna “Ações”.
- Os campos do filtro devem possuir label.
- O campo pesquisar deve possuir a seguinte estrutura:
Texto da label: “Termo”
Texto do placeholder: “Pesquisar por [termos pesquisáveis]”
- Os registros da coluna principal devem ser links e redirecionar para tela de detalhe, quando houver.
- O link deve ser na cor padrão azul de link.
Exemplo
