7 dicas úteis para projetar uma interface do usuário escura

As interfaces de usuário escuras ganharam popularidade e muitos aplicativos agora oferecem a opção de alternar entre os modos claro e escuro. No entanto, implementar uma interface do usuário escura pode ser uma tarefa desafiadora que requer atenção cuidadosa às cores, fontes, imagens e espaçamento usados.

Quaisquer erros nesses elementos podem resultar em uma experiência ruim para o usuário. As dicas a seguir devem ajudá-lo ao projetar sua primeira interface do usuário escura.

1. Não use preto puro

Ao projetar uma IU escura, evite usar planos de fundo totalmente pretos. É melhor usar um tom escuro de cinza. Por exemplo, Tema de material design do Google recomenda a cor #121212.

Um fundo preto combinado com texto branco pode ter muito contraste e causar fadiga ocular. Em vez disso, tons mais escuros de cinza podem mostrar sombras, profundidade e elevação facilmente.

2. Certifique-se de que o contraste do texto atende às diretrizes WCAG 2.0

Escolha uma combinação de cores que ofereça um nível adequado de contraste, para que o texto fique legível. As diretrizes WCAG 2.0 afirmam que o texto ou imagens de texto devem ter uma taxa de contraste de pelo menos 4,5:1 com texto grande (pelo menos 18 pontos ou 14 pontos em negrito) deve ter uma taxa de contraste de pelo menos 3:1.

Existem várias ferramentas para verificar o contraste de cores, incluindo o ACENO Extensão do Chrome que também verifica a acessibilidade das cores.

3. Escolha o Estilo de Fonte Certo

Você também deve levar em consideração os estilos de fonte do seu texto, incluindo tamanho, peso e altura da linha. Se você está procurando opções de fonte, não se esqueça que existem muitos sites que oferecem fontes gratuitas. Quanto ao tamanho da fonte, use valores suficientes para garantir que o texto fique claro e visível em um fundo escuro.

Considere os seguintes estilos para uma página da Web:

corpo {
família de fontes: "CorreioNovo", monoespaço;
tamanho da fonte: 12px;
espessura da fonte: 200;
altura da linha: 1; 
cor: #333333;
}

A família da fonte é difícil de ler, o tamanho da fonte é muito pequeno e o peso da fonte é muito leve. Esses estilos dificultam a leitura da página, como você pode ver na captura de tela abaixo.

Abaixo estão alguns estilos apropriados que você pode usar.

corpo {
família de fontes: "arial", sem serifa;
tamanho da fonte: 16px; 
espessura da fonte: 400; 
altura da linha: 1.5; 
cor: #FFFFFF;
cor de fundo: #121212; 
}

E aqui está a página resultante:

4. Evite cores de destaque saturadas

As cores saturadas podem ser muito brilhantes e borradas em fundos escuros. Em vez disso, use cores menos intensas e suaves. Dessa forma, você cria uma interface de usuário com texto visível.

Para demonstrar, considere estes dois estilos de botão:

/* Azul saturado */
.btn-saturado-azul {
cor de fundo: #121212;
cor: #0e0bf6;
}
/* Azul silenciado */
.btn-muted-blue {
cor de fundo: #121212; 
cor: #4c5ab3;
}

A cor azul saturada pode ser muito clara e difícil de ler em um fundo escuro, enquanto a cor azul suave oferece bom contraste e é mais fácil de ler.

Uma ferramenta como ilusório é útil para gerar combinações de cores que seguem as diretrizes de acessibilidade.

5. Use espaço negativo para evitar a criação de uma interface do usuário pesada

Uma paleta de cores escuras pode fazer com que a interface do usuário pareça pesada para os usuários. Quando usado corretamente, o espaço negativo pode ajudá-lo a destacar elementos importantes da interface do usuário e facilitar a digitalização do texto. O espaçamento suficiente também pode tornar o design mais limpo e moderno.

Tome, por exemplo, página de destino da Apple. O espaço entre os elementos torna a página muito moderna e visualmente interessante, permitindo que elementos importantes se destaquem.

6. Use tons de cores diferentes para adicionar profundidade à interface do usuário

Ao projetar IUs de luz, você pode usar sombras para adicionar profundidade e elevação aos elementos. No entanto, devido aos planos de fundo escuros, às vezes é difícil ver as sombras em IUs escuras.

Você pode obter profundidade em uma IU escura usando vários tons de cores escuras. Por exemplo, em vez de apenas um fundo escuro, você pode adicionar tons mais claros da mesma cor a diferentes elementos como botões e modais.

7. Certifique-se de que suas imagens correspondam à interface do usuário escura

Você não precisa usar as mesmas imagens para o modo claro e o modo escuro. Você pode usar o modo escuro Consultas de mídia CSS para alternar as imagens que correspondem à interface do usuário escura sempre que o usuário alternar para o modo escuro.

Por exemplo, para aplicar um padrão de plano de fundo específico a seções de sua página no modo escuro, você pode usar o nome de classe .bgpattern e adicionar o seguinte código à sua folha de estilo.

@meios de comunicação (prefere o esquema de cores: escuro) {
/* Aplicar este estilo apenas no modo escuro */
.bgpattern {
imagem de fundo: url("/escuro.jpg");
 }
}

Essa consulta de mídia garante que a imagem de plano de fundo referenciada seja exibida apenas quando o esquema de cores preferido do usuário for escuro.

Quando usar uma IU escura

Os designs Dark UI são uma ótima maneira de dar uma estética moderna ao seu site ou aplicativo. Eles também podem minimizar o cansaço visual e conservar a vida útil da bateria. No entanto, as interfaces de usuário escuras não são adequadas para todos os aplicativos e você deve sempre considerar a marca e a base de usuários.

Geralmente, UIs escuras são mais adequadas para marcas que priorizam luxo, prestígio, minimalismo ou mistério. Eles também podem ser uma ótima opção para painéis e ferramentas de visualização.