Visão Geral

Quando usar

• Para destacar informações na área de conteúdo.

Estrutura

Comportamentos

Boas Práticas

Exemplo

Código fonte

Referências

...

O conceito de hierarquia visual desempenha um papel em todas as formas de concepção gráfica. Simplificando, o mais importante conteúdo deve sobressair a mais, e os menos importantes devem destacar-se menos. Títulos devem se comportar como títulos, conteúdos e secundário devem se comportar de modo secundário, em outras palavras, um usuário deve ser capaz de deduzir a estrutura informativa da página do seu layout.

Estrutura

• Texto com estilos disponíveis no CSS (ex: tamanhos e cores).

Boas Práticas

Estes mecanismos podem ajudá-lo a estabelecer uma hierarquia visual:

• Canto superior esquerdo - preferência;
• Espaçamento;
• Contrastes de fontes: o maior e mais escuro, o mais importante é a informação;
• Contrastes de cores;
• Posicionamento, alinhamento;
• Utilizar quando a informação tenha focalidade e necessite de atenção do usuário em relação aos outros objetos e informações na tela.

Exemplo

Sem hierarquia visual

Image Added

Com espaçamento

Image Added

Com tipografia e alinhamento

Image Added

Referências

• http://designinginterfaces.com/

Veja Também

• Fontes

  dts_pagetree

  sdk_doc_footer