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.

Приглушите свет, расслабьте глаза и сэкономьте энергию. Темный режим — одна из самых популярных tendencias de deseño, и такие бренды мирового уровня, как WhatsApp, Instagram, Google, Facebook и Apple, уже сели на поезд дизайна темного режима.

Давайте посмотрим, что делают эти ведущие бренды и как вы можете добавить пользовательский интерфейс темного режима в свои собственные проекты. Вы узнаете о Pros e contras темного режима и основных передовых методах разработки для темного режима, чтобы убедиться, что дизайн вашего веб-сайта и приложений выглядит и функционирует идеально.

Material de marketing impreso

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

Темный режим — это пользовательский интерфейс (UI) при слабом освещении, в котором в качестве основного цвета фона используется темный цвет — обычно черный или оттенок серого. Это полная противоположность стандартному белому интерфейсу пользователя, который дизайнеры использовали десятилетиями. В ответ на то, что у нас увеличилось время использования экрана, разработчики обнаружили, что интерфейсы темных тем помогают снизить нагрузку на глаза, особенно в условиях низкой освещенности или в ночное время. Меньшая нагрузка на глаза означала меньше головных болей и лучший опыт работы.

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

Многие пользователи пользовательского интерфейса в темном режиме выбирают его из соображений экономии энергии и здоровья, а не из эстетических соображений. Темный режим напоминает им, что они делают что-то более здоровое, что вызывает хорошее чувство — вроде того, что возникает, когда вы загружаете свою многоразовую сумку для покупок или бутылку с водой.

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 цвета способны вызвать яркие эмоции. Если это то, что ищут ваши зрители, то затемнение цветов может создать для них ментальный барьер. Им будет труднее установить эмоциональную связь с темной темой. Если ваш бренд носит мотивационный, вдохновляющий или духовный характер, пользовательский интерфейс в темном режиме может стать азартной игрой. Если яркие цвета могут вызывать яркие эмоции, все может быть наоборот. Итак, кто ваша аудитория? Не сжигайте их, если они ищут лифт.

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

Если вы не правильно понимаете цвета и контрасты при desenvolvemento de sitios web или приложения с темной темой, это может затруднить чтение текста, поэтому имейте это в виду при создании дизайна электронной почты, приложения или веб-сайта в темном режиме .

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

Когда существующая цветовая палитра marca уже совместима с темным режимом, боги темного режима улыбаются вам.

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

Чем выше слой, тем он должен быть светлее. Это создаст xerarquía visual в темном режиме, которая идет от наиболее часто используемых элементов на вашем дисплее к наименее используемым.

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 "АЗБУКА«