Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>22 июн 2021</li>

3 <li>0</li>

4 </ul><h2>Тёмная тема: приёмы, которые помогут сделать качественный интерфейс</h2>

5 Рассказываем про кейсы Google, Apple, Microsoft и "ВКонтакте" - главное, что нужно знать про разработку тёмной темы.

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

7 Тёмная тема стала популярной в 2018 году после её релиза на macOS Mojave. Её полюбили за удобство для глаз и возможность по-новому посмотреть на привычные интерфейсы.

8 Создание тёмной темы - сложная дизайнерская задача: под тёмный фон нужно подобрать новые цвета, сохранить общую узнаваемость интерфейса и читаемость текста. Рассмотрим, какие принципы и приёмы помогут вам сделать тёмную тему для собственного интерфейса на примере Google, Apple, Microsoft и "ВКонтакте".

9 В отличие от обычных экранов, OLED-дисплеи полностью выключают пиксели на месте чёрного цвета. Например, если на странице чёрный фон и белый текст, OLED-дисплей активирует пиксели только для текста и тратит меньше энергии батареи. Благодаря этому пользователь видит глубокий чёрный цвет, а батарея устройства разряжается медленнее.

10 Наглядный эксперимент провело издание PhoneBuff. Оказалось, что в среднем тёмная тема экономит 30% заряда:

11 <a>Исследования показали</a>, что для людей с нормальным зрением нет принципиальной разницы, как читать текст: в тёмном или светлом окружении. Но людям с катарактой или другими проблемами со зрением удобнее воспринимать текст на тёмном фоне.

12 Светлый контент в тёмном окружении привлекает к себе внимание - это помогает пользователю сфокусироваться на задачах, которые он хочет решить в приложении. Посмотрите, как выделяется письмо в приложении Mail в macOS - оторвать от него глаз невозможно:

13 Белое письмо выделяется на фоне тёмного интерфейса и обоев. Изображение: AppleПользователи выбирают тёмную тему по разным причинам: кому-то она кажется более строгой, кому-то так удобнее воспринимать текст, кто-то хочет просто поменять цвета в привычном приложении. Хотя тёмная тема не обязательна, желательно дать пользователям возможность её использовать.

14 Тёмная тема появилась во всех сервисах Google, Apple и Microsoft. Поэтому изобретать велосипед остальным дизайнерам уже не нужно - все принципы и приёмы давно проверены крупными корпорациями.

15 Google применяет систему Material Design. В светлой теме плашки отделяются друг от друга по принципу "наслаивания": каждый элемент интерфейса - это отдельный слой, который отбрасывает тень на предыдущий:

16 Каждая плашка в приложении Android - это отдельный слой. Изображение: GoogleВ тёмной теме это правило не работает, так как на чёрной поверхности тень того же оттенка увидеть невозможно. Чтобы разрешить это противоречие, дизайнеры Google выделяют слои высветлением: чем ближе объект к пользователю, тем он светлее. Тени не такие заметные, но они есть:

17 Чем выше слой, тем ближе он к источнику света и тем светлее его фон. Изображение: GoogleТеми же соображениями руководствовались дизайнеры<a>мобильной версии Office 365</a>и "<a>ВКонтакте</a>":

18 Палитра мобильного приложения "ВКонтакте". Изображение: "ВКонтакте"Apple хитро поступила с тенями в macOS. Их сделали насыщеннее и дополнительно усилили контраст с помощью чёрной обводки и внутренних бликов окна:

19 Тени в тёмной теме macOS с обводкой и внутренними бликами окна и без них. Изображение: AppleВ стандартных приложениях macOS интересно реализован фон. Для окон добавили серый цвет, который смешивается со средним цветом обоев рабочего стола. Это позволяет приложениям в тёмной теме выглядеть гармонично на любых обоях: хоть на тёмных, хоть на светлых:

20 Системные приложения macOS адаптируют цвет фона к обоям пользователя. Изображение: AppleЕсли инвертировать весь интерфейс, цвета на нём будут кислотными. Смотреть на такое приложение неприятно из-за высокого контраста:

21 Вот почему тёмная тема - это не инверсия. Изображение: GoogleНа тёмном фоне насыщенные цвета выделяются гораздо сильнее. Например, яркий синий цвет хорошо выглядит в светлой теме, но в тёмной он кажется гораздо ярче:

22 Дизайнеры Google сформулировали правило для подбора цветов: чем темнее фон, тем светлее должны быть цвета элементов интерфейса. Каждый цвет разбили на яркостную градацию от 900 до 50 и подобрали наиболее контрастные и приятные глазу оттенки:

23 Благодаря правилу градаций цветов у Google получилось адаптировать все системные цвета для тёмной темы. Изображение: GoogleЦветовое правило работает не только с элементами интерфейса, но и с векторными иллюстрациями:

24 Фон с палаткой специально сделали серым, чтобы не потерять детали. Изображение: GoogleВ том же направлении поработали и дизайнеры macOS. Каждому системному цвету подобрали тусклую пару для тёмной, чтобы цвета не "выжигали" глаза пользователей:

25 Сверху - цвета светлой темы macOS, снизу - тёмной. Изображение: AppleВ тёмной теме macOS решили не только уменьшать непрозрачность текста белого цвета, но и подобрали оттенок серого, чтобы текст лучше читался на любом фоне:

26 Если вместе с непрозрачностью менять оттенок серого, текст на цветном фоне будет проще прочитать. Изображение: AppleРезультат этой работы хорошо виден на боковой панели Finder:

27 Текст и иконки в тёмном Finder хорошо читаются благодаря уровням непрозрачности и оттенкам серого. Изображение: AppleТакже важен контраст текста и фона. Приложением или сайтом с тёмной темой может пользоваться кто угодно, а значит, нужно подобрать удобные для всех цвета. Google, Apple и другие компании ориентируются на стандарт 1.4.6 WCAG: "Визуальное отображение текста и текст на изображениях должны иметь коэффициент контрастности не менее 7:1".

28 Совет.Чтобы проверить контраст своих цветов, зайдите на сайт<a>Web Aim</a>, введите код цвета текста в графу Foreground Color, а цвета фона - в Background Color. За образец контрастности можно брать значения Google и Apple - 15,8:1.

29 Обычно иконки для интерфейсов рисуют контурами - делают только обводку, оставляя пространство внутри "пустым". Если сделать то же самое в тёмной теме, иконки станут слишком контрастными и будут выглядеть довольно странно:

30 Системные иконки macOS: хорошо выглядят в светлой теме и плохо в тёмной. Изображение: AppleВ Apple решили, что раз стандартный подход делает иконки плоскими и портит формы, нужно не только инвертировать цвет, но и изменить подход к рисованию. Поэтому в тёмной теме все пиктограммы macOS залиты белым цветом:

31 Системные иконки для тёмной темы macOS. Изображение: AppleТак же поступили и дизайнеры мобильной версии Office 365 - перерисовали иконки с использованием заливки:

32 Иконки мобильной версии Office 365 для светлой и тёмной темы. Изображение: MicrosoftПри таком подходе иконки не теряют форму, остаются читаемыми и контрастными.

33 Чтобы ничего не забыть при создании тёмной темы, придерживайтесь правил:

34 <ul><li>Используйте инверсию цветов осмысленно.</li>

35 <li>Показывайте разные слои осветлением - чем ближе объект к пользователю, тем он светлее.</li>

36 <li>Если вам нужно выделить тени, делайте это с помощью внутренних бликов окна и чёрной обводки.</li>

37 <li>На тёмном фоне насыщенные цвета выделяются гораздо сильнее. Поэтому чем темнее фон, тем светлее должны быть цвета элементов интерфейса.</li>

38 <li>Следите за контрастом фона и текста - он должен составлять 7:1, а лучше 15,8:1. Проверить контраст можно на сайте<a>Web Aim</a>.</li>

39 <li>Не рисуйте иконки контуром, используйте заливки.</li>

40 </ul><a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>