O deseño de cores escuras refírese a un estilo e enfoque para crear un deseño visual que se basea no uso de esquemas de cores profundos e ricos, xeralmente cun predominio de tons escuros. Este estilo de deseño fíxose popular nos últimos anos e pódese usar nunha variedade de campos, incluíndo deseño web, deseño gráfico, deseño de interiores e outros.

Baixa as luces, relaxa os ollos e aforra enerxía. O modo escuro é un dos máis populares tendencias de deseño, e marcas de clase mundial como WhatsApp, Instagram, Google, Facebook e Apple xa subiron ao tren de deseño do modo escuro.

Vexamos o que están a facer estas principais marcas e como pode engadir unha interface de usuario en modo escuro aos seus propios proxectos. Vai aprender sobre Pros e contras O modo escuro e as mellores prácticas básicas de desenvolvemento do modo escuro para garantir que os deseños do teu sitio web e das túas aplicacións se vexan e funcionen perfectamente.

Material de marketing impreso

Que é o modo escuro? Deseño en cores escuras

O modo escuro é unha interface de usuario (UI) con pouca luz que usa unha cor de fondo escuro como cor principal cor - xeralmente negro ou sombra de gris. Este é todo o contrario da interface de usuario branca estándar que os deseñadores utilizaron durante décadas. En resposta ao aumento do tempo na pantalla, os desenvolvedores descubriron que as interfaces de temas escuros axudan a reducir a fatiga ocular, especialmente en condicións de pouca luz ou de noite. Menos fatiga ocular significaba menos dores de cabeza e unha mellor experiencia laboral.

Deseño da aplicación de Instagram en modo escuro Deseño en cores escuras

IU de modo escuro de Instagram

 

WhatsApp no ​​deseño de aplicacións de escritorio en modo escuro Deseño en cores escuras

WhatsApp na interface de usuario do modo escuro do escritorio a través de What's App

Deseño da aplicación Google Fit en modo escuro

Interface de usuario de Google Fit en modo escuro

 

Pero o modo escuro non é nada novo.

Desenvolvemento do cartel. 5 regras

Lembras o código informático verde que chovía sobre un fondo negro en The Matrix? Este foi un guiño ao modo escuro orixinal: os monitores monocromos da vella escola dos primeiros ordenadores.

Ordenador doméstico inicial con texto verde en negro

Os primeiros ordenadores domésticos con texto verde en negro eran o modo escuro OG.

 

Este aspecto escuro clásico pasou de moda nos anos 80 a favor do texto negro sobre fondo branco, simulando tinta sobre papel. Deseño en cores escuras

Que é a publicidade en vídeo? Definición, tipos e tendencias

Esta foi a norma durante case tres décadas ata que o modo escuro volveu en Windows Phone 7 en 2010. Despois de que Google confirmase que o modo escuro aforra batería, engadiron a función ao seu sistema operativo Android en 2018. Un ano despois, Apple seguiu co modo escuro en iOS e iPadOS.

Modo escuro e modo claro no deseño da aplicación iOS 13

Modo escuro en iOS 13

Pros de usar o modo escuro. Deseño en cores escuras

O modo escuro non só é máis sinxelo para os ollos (se se fai ben), senón que tamén aforra a batería e pode incluso ser máis saudable. Vexamos os beneficios prácticos do modo escuro fronte ao modo claro.

Reduce a fatiga ocular

Non deberías sentir os teus ollos. Pero calquera que analice os datos da pantalla durante moito tempo sabe que despois dun tempo comeza a facelo. A síndrome de visión por ordenador (CVS) inclúe dor ocular, visión borrosa, visión dobre, dores de cabeza, dor de pescozo e costas e moito máis. Cando se trata de gráficos e gráficos, o modo escuro pode literalmente axudar a reducir a dor.

Deseño da aplicación en modo escuro Deseño en cores escuras

Este logotipo verde vai ben con este deseño de aplicación de tema escuro.

 

Aumenta a visibilidade con pouca luz

Se estás durmindo e alguén acende unha luz brillante, terás dor de cabeza. O mesmo principio aplícase ás persoas que traballan diante da pantalla dun ordenador a última hora da noite ou a primeira hora da mañá. O modo escuro reduce este brillo e facilita a visualización do contido en condicións de pouca luz.

Aforra enerxía da batería

Algúns aparellos dixitais con pantallas OLED poden desactivar os píxeles negros cando non estean en uso. O modo escuro usa un maior número de píxeles negros, o que fai que o dispositivo consuma menos enerxía.

Dá carga emocional

Moitos usuarios da interface de usuario do modo escuro elíxeno por razóns de enerxía e saúde en lugar de motivos estéticos. O modo escuro recórdalles que están facendo algo máis saudable, o que lles dá unha boa sensación, como a que tes cando cargas o teu reutilizable bolsa da compra ou unha botella de auga.

Evita ADD. Deseño en cores escuras

Pois... algo así. A luz branca e as cores tenden a distraer a túa atención, o que dificulta completar unha tarefa. Unha IU en modo escuro pode mellorar o foco dirixindo a túa concentración ás áreas de contido da túa interface, permitindo que ese contido apareza e que o fondo desapareza.

Contras de usar o modo escuro

Como todo, o modo escuro ten os seus inconvenientes. Vexamos as razóns polas que un tema escuro pode ser unha desvantaxe para os teus propósitos.

Pode reducir a conexión emocional. Deseño en cores escuras

Brillante as cores poden provocar emocións vivas. Se isto é o que buscan os teus espectadores, escurecer as cores pode crearlles unha barreira mental. Terán máis dificultades para facer unha conexión emocional cun tema escuro. Se a túa marca é de natureza motivadora, inspiradora ou espiritual, a IU en modo escuro pode ser unha aposta. Aínda que as cores brillantes poden provocar emocións fortes, o contrario pode ser certo. Entón, quen é o teu público? Non os queime se están a buscar un ascensor.

Comprime o espazo

As habitacións con paredes escuras poden sentirse claustrofóbicas. Nun dispositivo, o modo escuro pode funcionar do mesmo xeito. Se estás tentando crear unha sensación de espazo, unha interface escura pode facer que o espazo pareza máis pequeno.

As cores con baixo contraste poden ser difíciles de ler. Deseño en cores escuras

Se non entendes correctamente as cores e os contrastes cando desenvolvemento de sitios web ou aplicacións cun tema escuro, isto pode dificultar a lectura do texto, así que ten isto en conta cando deseñas o teu correo electrónico, aplicación ou sitio web en modo escuro.

Como usar o modo escuro no deseño

O deseño do modo escuro pode funcionar en calquera lugar. Desde aplicacións móbiles ata reloxos intelixentes e interfaces de televisión, esta tendencia de deseño pode impulsar a túa marca cara adiante. Faino ben e o modo escuro pode funcionar como gangbusters. Equívoco e o teu deseño podería desactivar os usuarios inmediatamente. Aquí tes algúns consellos básicos para deseñar un sitio web ou unha interface de aplicación escura:

Cando usar o modo escuro. Deseño en cores escuras

Escolle as cores da túa marca

Cando a paleta de cores existente marca xa compatible co modo escuro, os deuses do modo escuro están sorrindo contigo.

Deseño da aplicación en modo escuro

Deseño da aplicación en modo escuro

 

Pénsao dúas veces antes de quedar escuro se cres que necesitas cambiar a túa marca para adaptala á estética. Do mesmo xeito, se a túa marca necesita usar unha ampla gama de cores, considera unha interface máis clara. O espectro completo de cores é difícil de ler sobre un fondo escuro.

Destaca a túa industria. Deseño en cores escuras

A interface de usuario do modo escuro tamén é útil para mellorar industrias específicas. Por exemplo, as marcas centradas na vida nocturna e no entretemento son ideais para o modo escuro porque o seu contido de alta enerxía adoita combinarse con fondos escuros na vida real.

Vaia minimalista

Se a estética do teu deseño xa é minimalista con contido limitado, o teu ambiente é axeitado para o modo escuro. Nunha situación na que o texto é o contido principal, unha interface escura pode dificultar a lectura. Normalmente, o modo escuro aumenta o desorde visual, facendo que unha pantalla desordenada sexa aínda máis caótica.

Evocar emocións

Intenta evocar unha resposta emocional específica? Gústalle o misterio ou un pequeno drama? Dado que a pouca visibilidade crea curiosidade e aumenta a tensión emocional, o modo escuro pode ser a ferramenta perfecta para a túa marca.

tema de deseño web escuro Deseño en cores escuras

Deseño web escuro

 

Símbolo de estado. Deseño en cores escuras

Se queres crear unha sensación de estado, a IU do modo escuro pode ser unha ferramenta eficaz. As cores máis escuras evocan emocións asociadas ao luxo e á riqueza. Se queres chamar a atención sobre o bo traballo, considera unha interface de usuario en modo escuro.

Tema escuro Deseño de sitios web para unha marca de reloxos de luxo

Deseño de sitios web elegante e de alta calidade cun tema escuro

 

Mellores prácticas para o deseño en modo escuro

Hai certos procesos que deben funcionar correctamente ao crear unha interface de usuario en modo escuro. Despois de todo, queres que o teu produto sexa incrible, non? Marquemos todas as caixas da nosa lista de verificación das mellores prácticas do modo escuro:

1. Non vaias moi escuro. Deseño en cores escuras

Os editores de libros non usan papel branco puro porque o contraste coa tinta negra é demasiado duro. Isto fai que obrigue os ollos e pode causar dores de cabeza. Pasa o mesmo cos dispositivos dixitais. Mantéñase lonxe do negro puro. É difícil mirar unha pantalla de alto contraste. As boas cores do modo escuro son tons de gris combinados con cores desaturadas.

Deseño en cores escuras Deseño dunha revista dixital móbil na aplicación Dark Mode

Deseño de aplicación escuro

 

2. Ter o contraste axeitado

O fondo no modo escuro debe ser o suficientemente escuro como para mostrar texto branco. Unha suxestión de Google Material Design é usar un nivel de contraste de texto para o fondo de polo menos 15,8:1.

3. Desaturar as cores. Deseño en cores escuras

Mantéñase lonxe das cores totalmente saturadas sobre un fondo escuro. En superficies escuras, as sombras adoitan parecer "vibrar". En vez diso, usa cores desaturadas como pasteles e cores apagadas: tons con grises e brancos engadidos.

Ademais, considera cambiar a paleta de cores da túa marca. A cor azul da túa empresa pode ler de forma diferente en negro que en branco. As cores no modo escuro moitas veces teñen que ser axustadas para producir a mesma resposta que no modo claro.

4. Usa as cores correctas "on"

Que cor? A que aparece enriba de elementos e superficies clave. As cores "activadas" úsanse normalmente para as letras. A cor predeterminada da IU do modo escuro é o branco puro (#FFFFFF). Non use isto. #FFFFFF parece vibrar cando se ve sobre un fondo escuro. Escolla unha cor gris clara.

5. Non te limites a voltear. Deseño en cores escuras

Se cambias ao modo escuro desde o modo estándar, é probable que haxa indicios visuais valiosos no tema orixinal. Non invertas só as cores para obter un tema escuro. Podes estar transformando cores que teñen un propósito psicolóxico en cores apagadas sen sentido. Escolle a cor conscientemente.

6. Mergullo máis profundo

Canto máis alta sexa a capa, máis lixeira debería ser. Isto crearase xerarquía visual en modo escuro, que vai dende os elementos máis utilizados na pantalla ata os menos utilizados.

Xerarquía visual do modo escuro

As cores máis claras na parte superior crean xerarquía visual

 

7. Experimenta e ofrece liberdade. Deseño en cores escuras

Proba as versións escuras e claras do teu deseño. Experimenta con cada estilo e fai cambios segundo os comentarios dos usuarios. Despois de todo, as preferencias das persoas poden ser imprevisibles, así que non lle impoñas a carga aos teus usuarios. Deixa que cambien a súa pantalla do modo claro ao modo escuro. Isto dálles aos usuarios control sobre a súa experiencia e fainos sentirse máis personalizados.

 

O teu asistente na empresa de publicidade e imprenta "АЗБУКА«