На что обращать внимание в темной теме
1) Кодирование цветов при создании дарк мода в variables? С появлением вейреблов тёмную тему стало проектировать намного удобнее. Теперь в pallete, на бесплатной фигме вы сможете создавать кодирование для дарка отдельное (например: main (0D0D0D) / main-dark (060606)), а уже в самой семантике переменнных назначать для разных необходимый вам цвет, но я все равно для темной темы всегда завожу отдельно (так верстальщик не будет путатся почему у вас в дарк моде есть цвета из палитры белой темы).
2) Глубина или уровни в интерфейсе при проектировании темной темы? Тёмная тема не связана с плоскостью, такие элементы и графические вещи как оверлей, тени, освещение добавляют некую глубину в интерфейсе, если мы рассмотрим телеграм, то даже там плашечки существенно отличаются от primary фона (фон намного темнее плашек). Большинство дизайнеров в современном мире используют глубину, ведь это более полно отражает реальный мир.
Как же проектировать глубину? Важно знать, что глубина создается засчет определенной цветовой иерархии элементов, заданных дизайнером, я думаю, все вы сталкивались с реальными приложениями, в которых есть дарк мод и вылезает диалоговое окно и затемняется экран позади (благодаря оверлею или прозрачному черному, который подкладывают сзади), это как раз игра с восприятием, ведь такое окно как раз акцентирует внимание на себе и привлекает внимание за счет большего контраста.
Поверхность должна освещатся по-разному, создавая динамику и глубину/высоты в уровнях. Чем выше положение поверхности в стеке высот (ближе к предполагаемому источнику света), тем светлее будет поверхность. Более светлая поверхность помогает различить высоты между элементами, увидеть тени и создать заметные края каждой поверхности. Приведу пример (если вы посмотрите в мобилке в телеграме, то сможете заметить что хедер явно выше цветом нежели чатики, а сами чатики как бы вдавлены под ним).
3) Типографика в темной теме Соотношение контраста и удобочитаемости главная проблема. Во-первых, должен быть контраст между фоном и текстами, чтобы это возможно было прочитать без напрягов, так еще и подбирать сайзы чтобы текст не превратился в сплошную серую линию. Большое количество разнообразных цифровых шрифтов позволяет легко отобразить сообщения. Увеличение контрастности, регулировка размера шрифта и интервала, а также высота строки для небольшого текста помогут дизайнерам смягчить проблемы с читабельностью. Рекомендую юзать плагин use contrast, который выдаст вам информацию по тому насколько ваш текст или другой юай элемент контрастен относительно среды.
