Interfaces de usuário - cores e layout

Question

Embora eu esteja especificamente interessado em informações sobre aplicativos da Web, também ficaria curioso sobre o desenvolvimento de aplicativos para desktop.Esta questão é motivada pelo meu trabalho no meu site pessoal, bem como pelo meu trabalho, onde desenvolvi alguns recursos, mas deixei que outros integrassem a aparência do site.

Existem guias ou regras básicas para coisas como esquemas de cores, layouts, formatação, etc.?Quero garantir legibilidade e clareza aos visitantes, mas não ser insípido e enfadonho ao mesmo tempo.

Quanto ao meu conhecimento nesta área - Se você me entregar uma imagem, tenho conhecimento suficiente para reproduzi-la na tela, mas se você me pedir para projetar uma nova interface ou redesenhar uma já existente, não saberei por onde começar .

Answer 1

Normalmente, cada sistema operacional possui diretrizes de interface de usuário.Para Windows, tenha um olhe aqui.(Editar:Os links dessa postagem estão quebrados.Mas uma pesquisa por "Diretrizes da interface do usuário"no MSDN tem artigos sobre tudo)

A Apple também tem o seu próprio.Além disso, você pode querer manter acessibilidade em mente.

Answer 2

Uma dica para verificar se suas cores têm bom contraste é tirar uma foto delas e converter para tons de cinza.Se você não consegue ler alguma coisa, as cores certamente foram mal escolhidas.

Além disso, embora não se trate de interfaces de usuário, Revista Antes e Depois pode lhe dar algumas dicas muito boas sobre cores, design e tópicos relacionados.Ele ainda tem alguns PDFs gratuitos para download.

Answer 3

O livro Projetando Interfaces, de Jenifer Tidwell tem um capítulo inteiro sobre o assunto (Capítulo 9, trechos acessíveis online).Vale a pena recomendar o livro inteiro.

Answer 4

Para a UI da web, vou arriscar aqui e dizer que a cor mais importante no web design é o branco, ou "claro".Esta é a cor sobre a qual você coloca áreas densas de conteúdo.

Texto escuro, fundo claro, sempre, quando se trata de suas áreas de conteúdo principal.

E a regra mais importante no layout são os espaços em branco.Deixe o conteúdo respirar.

Seguir essas duas regras simples vale mais do que a maioria das diretrizes de “usabilidade da interface do usuário”.

E, a propósito, as diretrizes da interface do usuário do MS são (em geral) horríveis.Leia Jakob Nielsen, observe a estética do design da Apple, mas fique longe da filosofia de texto de 10 pontos do Assistente de 12 etapas "cinza / azul neutro" da interface do usuário.

(E eu digo isso como um programador MS GUI de longa data)

Answer 5

Eu sou péssimo em encontrar cores que combinem bem, então eu trapaceio e uso fotos da natureza que são principalmente da cor que eu quero (digamos, verde) e então uso esse site para retirar o esquema de cores principal.Geralmente a natureza faz um bom trabalho ao definir seus próprios esquemas de cores agradáveis.

Answer 6

Use combinações de cores de alto contraste;Texto preto sobre fundo branco é o melhor exemplo de combinação de alto contraste.

Uma combinação ruim é o texto verde sobre fundo vermelho.É horrível para pessoas daltônicas (como eu).

Veja como é o seu site para um daltônico: colorfilter.wickline.org

Answer 7

Quanto aos aplicativos de desktop:Faça o que fizer, não use cores escolhidas a dedo.Fique com as cores do sistema nomeadas, como "Fundo da janela", "Texto do menu", etc.Caso contrário, as pessoas que dependem dos recursos de acessibilidade do sistema operacional ficarão bloqueadas com suas escolhas de cores (incapazes de escolher um tema de alto contraste, por exemplo) e as pessoas que gostam de personalizar seus temas de desktop acharão que seu aplicativo é feio.

Answer 8

Aqui estão algumas dicas simples para usabilidade em seu tipografia.Essas coisas abordam principalmente questões de legibilidade e acessibilidade.

O que fazer:

• Use tamanho de fonte relativo (em)
• Identifique alterações de idioma em um documento usando o atributo LANG
• Texto preto sobre fundo branco
• Para títulos, use H1, H2, etc.e aninhe-os adequadamente
• Reúna o conteúdo e organize-o com títulos que correspondam ao que seus usuários procuram
• Escreva uma cópia clara e simples
• Alinhar à esquerda, irregular à direita
• A cor do texto para o plano de fundo deve ter alto contraste

Não é:

• Use "clique aqui" ou "mais" como texto do link
• Use sublinhado para dar ênfase
• Mais de 2 famílias de tipos de fontes
• Itálico
• Blocos de texto em letras maiúsculas
• Use texto em vermelho ou azul verdadeiro em fundo branco (aberração cromática)