User Interface Explorer

Páginas filhas
  • Iconografia

Quando usar

Para representar ações atividades ou estados que sejam apresentados ou desempenhados dentro da interface projetada.

Estrutura

  • Sigma:
    • General;
    • Accounting.
  • Sophistic:
    • Accounting;
    • General;
    • Mail;
    • Networking.
  • Impressions:
    • Accounting;
    • Business;
    • Database;
    • Education;
    • Graphics;
    • Jobs;
    • Mail;
    • Medical;
    • Multimedia;
    • Networking;
    • Web.
  • Prisma:
    • General.
  • Cristal:
    • General.
  • X-Mac:
    • Accounting;
    • Business;
    • Database;
    • Education;
    • General;
    • Graphics;
    • Jobs;
    • Mail;
    • Medical;
    • Multimedia;
    • Networking;
    • Web Design;
    • Security.
  • Golding:
    • Accounting;
    • General;
    • Multimedia;
    • Database;
    • Graphics.
  • Real Vista:
    • Accounting;
    • General;
    • Multimedia;
    • Networking;
    • Database;
    • 3D Graphics.
  • Vista:
    • Accounting;
    • Business;
    • Database;
    • Education;
    • Graphics;
    • Jobs;
    • Mail;
    • Medical;
    • Messenger;
    • Multimedia;
    • Networking;
    • Security;
    • Video Production;
    • Web Design;
    • Cummunications.

Comportamentos

  • Passo Wizard (flecha azul)
  • Toolbar drag (pontos)
  • Pendências WKF (task list)
  • Favoritos (estrela)
  • Imprimir (impressora)
  • Preferências (botão opcões)
  • Ajuda (interrogação)
  • Atualizar (refresh do IE)
  • Mais opções (flecha pra baixo)
  • Fechar ( x )
  • Direções (flechas)
  • Maximizar (grade ou conjunto de Janelas)
  • Configurações (ferramentas)
  • Home folder (casa)
  • Modo Gráfico (bar chart)
  • Mapa (rosa dos ventos)
  • Executar (botão com ícone de flecha em verde)
  • Filtro (Funil)
  • Zoom (lupa)
  • Modo Thumbnail (ícone de foto de usuário)
  • Folders visiveis/invisiveis (olhos abertos ou fechados)
  • Folder Atual (icone de visto)
  • Alerta (triangulo com exclamação)
  • Erro (x vermelho)
  • Botões compositions (< | << | >> | >)
  • Titulo Folder padrão (monitor ou tela)
  • Título Form padrão (tela com form)
  • Título de portlet padrão (grade)
  • Título de Janela padrão (tela)
  • Ícones para Treeview (pasta aberta/fechada,flechas p/direita e p/baixo)
  • Desfazer / refazer (flechas circulares)
  • Copiar / colar (notepads e prancheta)
  • Enviar para office (...)
  • Enviar por email (cartinha)
  • Abrir (folder aberta)

Boas Práticas

  • As seguintes informações devem ser levantas e entendidas:
    • Em que portlets, janelas, folders, partes de telas ou controles estes ícones serão
      utilizados?
    • Qual a ação associada a eles ou que mensagem pretendem passar?
    • Quais os tamanhos que terão em cada local usado?
    • Caso sejam ações (botões ou links) haverá labels ao lado ou abaixo?
  • Vamos sempre preferir o uso do estado HOT dos ícones por ter maior legibilidade;
  • Em 16x16 é importante utilizar ícones raiz ou puros (sem junção de desenhos), para não prejudicar a leitura;
  • Para manter consistência, as ações e mensagens de mesma natureza, utilizar o mesmo ícone com as variantes necessárias;
  • Os ícones, para mudar entre modo gráfico e modo lista, são os mesmos dos portlets;
  • Utilizar sempre labels nos ícones.
  • Estados
    Estão homologados todos os estados de ícones, ou seja, incluem a pasta normal, hot e disabled. É boa prática e preferencial, a utilização do estado HOT dos ícones devido a melhor legibilidade do estado, principalmente em ícones pequenos. Trata-se como exceção as situações onde se faz necessário apresentar os 3 estados do ícone devido a eventos de interface (ex: drag na região correta HOT + drog em região incorreta DISABLED, sem evento NORMAL).
  • Resolução de ícone por região da interface
    • Barra de ferramentas superior - 24
    • Barra de ferramentas inferior - 16
    • Títulos de pastas - 48
    • Títulos de Janelas - 16
    • Sub Títulos de Janelas - 32
    • Interior de formulários e janelas - 16
    • Partes de Objetos de Interface - 16
      OBS: As exceções devem ser tratadas com o Arquiteto de Usabilidade e Design da corporação.
  • Formatos
    **O formato de arquivo homologado para ícones é o .PNG.
    OBS: As exceções devem ser tratadas com o Arquiteto de Usabilidade e Design da corporação.
  • Caminho Físico
    Os ícones devem ser sempre que viável na tecnologia, referenciados no diretório "assets/icons". Deve ser evitado o recurso "Embed", que embute as imagens no executável. Assim as imagens são carregadas sob demanda ao serem exibidas nas telas.
  • Necessidade de Embutir Ícones
    O recurso "Embed" deve ser empregado apenas nos objetos de interface que exigirem esta condição, como por exemplo botões e "itemrenderers".

Referências

Veja Também

\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}