- Статьи
- 4 мин на чтение
- 31
Как преобразовать цвета интерфейса для тёмной темы
Простой способ создать тёмный режим
Есть ли в вашем интерфейсе тёмный режим? Если нет, то вы упускаете возможность предоставить пользователям более качественный опыт просмотра.
Многие предпочитают просматривать интерфейсы в тёмном режиме, потому что это менее утомительно для глаз. Яркость светлых цветов может вызывать усталость, особенно при недостаточной освещённости.
Преобразовать светлые цвета интерфейса в тёмный режим несложно. Однако важно, чтобы у вас была полная палитра цветов с чистым цветом (pure hue), светлым тоном (tint), тёмным тоном (shade) и тоном с добавлением серого (tone). Эти четыре цвета нужны для того, чтобы создать сильный и согласованный образ бренда (статья).
Если у вас есть полная палитра цветов, проделайте действия, описанные ниже, чтобы преобразовать эти цвета в тёмный режим. По итогу вы получите привлекательный интерфейс в тёмном режиме, соответствующий цветам вашего бренда в светлом.
Уменьшите насыщенность чистого цвета (pure hue)
Чистый цвет не будет достаточно контрастировать с тёмным фоном из-за слишком высокой насыщенности. Для этого уменьшите насыщенность чистого цвета. Например, для тёмного режима уменьшите насыщенность оранжевого цвета со 100% до 60%.
Инвертируйте светлый тон (tint) и тёмный тон (shade)
Чтобы преобразовать светлый и тёмный тона в тёмный режим, инвертируйте один с другим. Другими словами, светлый тон становится тёмным тоном, а тёмный тон — светлым тоном.
Сделайте тон с добавлением серого (tone) более светлым
Тону с добавлением серого необходимо добавить контраст для тёмного фона. Следовательно, сделайте его более светлым для тёмного режима. Значения насыщенности и оттенок остаются прежними.
Измените белый на чёрный
Вероятно, в светлой теме интерфейса вы используете белый фон. Для тёмного режима просто замените его на чёрный. Вы можете использовать тёмно-серый, если чистый чёрный покажется вам слишком тёмным.
Результат
После того, как вы преобразуете цвета, вы получите цветовую палитру для тёмного режима интерфейса, которая будет соответствовать вашему первоначальному образу бренда. Вам всего лишь нужно внести несколько корректировок в палитру цветов для светлого режима.
Сначала обеспечьте доступность светлого режима
Если сочетания цветов недоступны в светлом режиме, после их преобразования они не будут доступны и в тёмном. Убедитесь в том, что цвета правильно контрастируют уже с самого начала.
Например, кнопки на примере выше не отвечают требованиям доступности в светлом режиме. В результате, они не будут отвечать требованиям доступности при преобразовании их для тёмного режима. Проблема не в цветах тёмного режима, а скорее в комбинациях цветов, с которых вы начали и которые недостаточно контрастируют между собой.
Используйте онлайн-калькулятор контрастности цветов, чтобы убедиться, что текст и кнопки отвечают требованиям доступности в светлом режиме. Если это так, то после преобразования у вас не возникнет проблем с доступностью.
Нейминг цветовых стилей
Разработчики должны создать стили для цветов светлой и тёмной тем. Каждому цветовому стилю следует присвоить название. Для преобразования вам необходимо, чтобы эти названия точно соответствовали друг другу.
Вы можете использовать любые названия, но лучше, если они отражают полезное назначение цвета в обоих режимах. Например, если вы назовете цвета «Чистый цвет» («Pure hue»), «Светлый тон» («Tint»), «Тёмный тон» («Shade») и «Тон с использованием серого» («Tone»), это не сработает, потому что их значения не параллельны.
Однако значение сохраняется как для светлого, так и для тёмного режимов, если вы называете цвета в соответствии с их основным назначением. Белый и чёрный вы будете использовать для фона, поэтому название «Фон» («Background») имеет смысл.
«Акцент» («Accent») — хорошее название для чистого цвета, потому что вы применяете его, чтобы подчеркнуть визуальные подсказки и элементы. Это название указывает дизайнерам на то, что им следует использовать этот цвет умеренно.
Светлый и тёмный тона, а также тон с добавлением серого постоянно используются на основе контраста. Например, цвет инверсии светлого тона > тёмный тон будет отображаться как цвет низкого контраста на светлом и тёмном фоне. Вот почему «Низкий контраст» («Low Contrast») — подходящее название для этого цвета.
Цвет инверсии светлого тона > тёмный тон будет выглядеть как высококонтрастный цвет на светлом и тёмном фоне. Ему хорошо подходит название «Высокий контраст» («High Contrast»).
Тон с добавлением серого в средней степени контрастирует на светлом и тёмном фоне. Поэтому «Средний контраст» («Medium Contrast») — подходящее название для этого цвета.
Светлый и тёмный режимы интерфейса обеспечивают более комфортный просмотр в условиях недостаточной освещённости. В палитре цветов для тёмного режима более тёмные фоновые цвета и более яркие цвета переднего плана. Не забудьте протестировать контент в обоих режимах, чтобы убедиться, что всё выглядит удобным для восприятия.
Перевод статьи How to Fix Apple’s Illegible White Button Labels из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
