Правильная цветовая схема поможет создать хороший контраст и настроение

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

 

Физики говорят, что черный на самом деле не цвет; это отсутствие света . В своих экспериментах по освещению солнечного света через призмы сэр Исаак Ньютон даже не включил его в спектр цветов. В психологии цвета,  большинство цветов представляют разные ощущения  для разных людей. В западных культурах черный цвет часто ассоциируется с  тайной и злом. Зеленый цвет часто ассоциируется с ростом из-за природы. Синий почти всегда успокаивает, потому что ассоциируется с небом и водой. Цвет эмоциональный . Остальные эффекты носят культурный характер. Фиолетовый, например, до сих пор ассоциируется с роскошью, потому что во многих древних культурах пурпурный краситель был дорогим и редким - только королевская семья могла себе это позволить. Это было важной частью культурного духа времени достаточно долго, чтобы стать частью человеческой психики .

 

Цифровые продукты с темным интерфейсом, ассоциирующимся с мощью, элегантностью и загадочностью, представляют собой грозную тенденцию. Хотя часто говорят, что темный режим может снизить нагрузку на глаза, нет никаких доказательств того, что это правда. При определенных обстоятельствах это также должно продлить срок службы батареи. Тем не менее, чаще всего темные темы - это эстетический выбор. Не все интерфейсы подходят для темной темы. Дизайнеры должны учитывать соответствие бренда, культурные особенности и психологию цвета, а также учитывать эмоциональное воздействие, прежде чем выбирать один из них. Это сложный баланс.

 

 

В то время как финансовое приложение, ориентированное на миллениалов, может достичь крутого фактора с темной темой, оно может быть неуместным для веб-сайта крупного банка, ориентированного на широкие слои населения. Слишком богатый, слишком темный и слишком стильный может стать более неприятным, когда все, что люди хотят сделать, это проверить свой баланс и оплатить счет. Темные пользовательские интерфейсы приложения B2B SaaS, как известно, сложно разработать. Стандартные компоненты веб-интерфейса, такие как таблицы данных, виджеты, формы и раскрывающиеся списки, могут выглядеть странно в темном интерфейсе. Поскольку многие цветовые схемы не работают с темным интерфейсом пользователя, определенные бренды и продукты - в зависимости от типа, контекста и факторов окружающей среды - не подходят и могут оказаться непреодолимой проблемой. Дизайнеры, которые раньше не работали с темным дизайном пользовательского интерфейса и решили прыгнуть обеими ногами, могут оказаться в суровых, неизведанных водах. В океанах темных интерфейсов нарушаются нормы, меняются правила и множество подводных камней. Тем не менее, есть много веских причин для использования темных интерфейсов: Когда дизайн скудный и минималистичный, с несколькими типами контента. Когда это подходит для контекста и использования, например, в ночных развлекательных приложениях.  Для создания яркого драматического образа.  И есть сценарии, когда это не рекомендуется:  При большом количестве текста (чтение на темном фоне затруднено). Когда много смешанных типов контента. Когда дизайн требует широкой цветовой гаммы.

 

Темная тема - это не черная тема. Лучше всего думать о ней как о теме «при слабом освещении». Одна из основных проблем с темным интерфейсом пользователя - достижение достаточного контраста, чтобы визуальные элементы разделялись, а текст был разборчивым. Большинство дизайнеров считают, что использование черного цвета оптимально для достижения сильного контраста. Однако лучше не использовать настоящий черный  для фона или цвета поверхности . Черный лучше всего зарезервировать для других элементов пользовательского интерфейса и использовать с осторожностью. Например, настоящий черный цвет можно использовать для небольших элементов пользовательского интерфейса или окружающей лицевой панели.

 

 

Темную  тему  рекомендуется  использовать темно-серый в качестве цвета поверхности темной темы, «чтобы выразить высоту и пространство в среде с более широким диапазоном глубины». Кроме того, многие дизайнеры рекомендуют добавлять к темно-серым тонам легкий темно-синий оттенок при определении цветовой схемы. Он имеет тенденцию создавать лучший темный тон для цифровых экранов и более приятную темную цветовую палитру пользовательского интерфейса. Преимущество использования диапазона оттенков серого заключается в том, что он дает дизайнерам свободу действий, поскольку может быть выражен более широкий диапазон цветов. Серая палитра также помогает создать глубину, поскольку тени легче увидеть на фоне серого и черного. Особое внимание нужно уделить контрасту текста в темных интерфейсах.

 

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

 

 

Цвет выделяется в темном интерфейсе. Лучше всего использовать схемы с более светлыми, ненасыщенными акцентными цветами. Избегайте использования насыщенных цветов в темных пользовательских интерфейсах, так как они могут визуально вибрировать на темных поверхностях. Более того, при использовании с текстом цвета должны соответствовать. При определении цветовой схемы для темного пользовательского интерфейса Google рекомендует ограниченное количество цветовых акцентов, чтобы большая часть пространства оставалась доступной для темных поверхностей. Может помочь использование дополнительных цветов . В схеме есть один доминирующий цвет и два цвета, смежные с дополнением доминирующего цвета. Это обеспечивает необходимый контраст без напряжения дополнительной цветовой схемы.

 

Правильная цветовая схема поможет создать хороший контраст. Colorable - полезный инструмент для выбора совместимых с расширенными возможностями цветовых комбинаций текста и цветов фона. Текст и основные элементы, такие как кнопки и значки, должны соответствовать стандартам удобочитаемости при отображении на темном фоне. Материал Дизайн Google, сайт имеет полезный генератор цветовой палитры ( в разделе «Инструменты для выбора цвета») , с которой разработчики могут создавать и применять цветовые палитры для пользовательского интерфейса. Уровень доступности цветовых комбинаций также можно измерить с помощью сопутствующего инструмента Color Tool. Используйте сильно контрастирующие цвета, чтобы улучшить читаемость. На восприятие цвета влияют многие факторы, включая размер и вес шрифта, яркость цвета, разрешение экрана и условия освещения .

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

 

 

Французский композитор Клод Дебюсси однажды сказал: « Музыка - это пространство между нотами ». То же самое верно и в отношении возможности сканирования: отрицательное пространство между элементами - вот что заставляет макет работать. Обилие отрицательного пространства вокруг элементов пользовательского интерфейса - вот что дает им определение. Он подчеркивает важное содержание и предоставляет необходимое пространство для дыхания, чтобы дизайн не выглядел плотным и загроможденным. Без передышки человеческий мозг с меньшей вероятностью будет сканировать интересные места и с большей вероятностью будет блуждать.

 

Интерфейсы, забитые слишком большим количеством элементов и текста, - это проклятие качественного темного дизайна пользовательского интерфейса. Тщательно рассматривая визуальную иерархию в темных пользовательских интерфейсах, дизайнеры могут упростить сканирование своих творений, тем самым улучшив взаимодействие с пользователем. Каждый фрагмент текста в темном интерфейсе требует внимательного изучения. Проблема двоякая: четкость и контрастность. Во-первых, это размер. Текст должен быть достаточно большим для хорошей читаемости (мелкий текст на темном фоне труднее читать). Во-вторых, между текстом и фоном должен быть достаточный контраст.

 

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

Почему глубина? Большинство современных систем проектирования используют систему уровней высоты для передачи глубины. Чувство глубины соответствует естественному миру. Наше зрение обладает восприятием глубины, и мы живем в трехмерном мире. Глубина помогает подчеркнуть визуальную иерархию интерфейса. Например, элементы на переднем плане привлекают к себе внимание, например диалоговое окно с предупреждением. Поверхности подсвечиваются по-разному, чтобы обозначить разные уровни высоты. Чем выше положение поверхности в стеке высот (ближе к предполагаемому источнику света), тем светлее поверхность. Более яркая поверхность облегчает различение высот между компонентами и помогает видеть тени, делая края каждой поверхности более заметными.

 

 

К решению использовать темный дизайн пользовательского интерфейса вместо традиционного нужно подходить осмотрительно. Его не следует выбирать по неправильным причинам - чтобы быть модным, отличаться от других или имитировать чужой дизайн. Дизайнеры должны иметь веское обоснование своего выбора и учитывать контент, контекст использования и устройство, на котором будет отображаться дизайн. Темные темы подходят для одних цифровых продуктов, но для других их сложно реализовать. Простота - ключ к успеху. Они отлично подходят для представления минималистичного контента, визуализации данных, медиа-сайтов и развлекательных платформ. Они плохо подходят для сложных B2B-платформ с большим объемом данных, страниц с большим количеством текста и большого количества разнообразного контента. Для смелых дизайнеров, готовых перейти новые стилистические границы и исследовать темный интерфейс через эмоциональную и эстетическую призму, они предлагают захватывающую площадку с бесконечными возможностями - на «темной стороне»