Как выбирать цвета для темной и светлой темы так, чтобы на них было комфортно смотреть
Сегодня хочу рассказать про область, которая меня интересует уже как минимум две трети жизни в качестве хобби: дизайн интерфейсов
И хотя основной вид моей деятельности — это программирование, но из-за того, что я работаю в сфере веб разработки, то мне часто приходится либо верстать готовый дизайн, либо придумывать свой.
Я никогда систематически не изучал принципы дизайна, однако у меня всегда интуитивно было понимание того, что дизайн поддается каким-то пусть даже и гибким, но правилам. Это особенно заметно в области дизайна интерфейсов приложений.
Есть типовые элементы, такие как кнопки, переключатели, списки, заголовки и т.д. Эти элементы позволяют создать иерархию на странице с помощью формы, параметров шрифтов и цветов.
Но возникают вопросы:
- Как выбрать ширину и высоту элемента?
- Какими должны быть размер и толщина шрифта?
- Какие цвета выбрать, чтобы они сочетались?
Допустим, с выбором размеров все более-менее понятно. Часто встречаются значения кегля шрифтов или размера кнопок, кратные 8: 16, 24, 32 и т.п. Это называется модульной сеткой и большинство дизайн систем используют одинаковый шаг (часто — 8 пикселей).
Работая с готовыми компонентами, которые были созданы дизайнерами сам невольно привыкаешь к таким правилам и начинаешь делать с учетом этой сетки.
Другое дело — цвет
С цветом всё настолько сложно, что есть даже отдельная область под названием колористика, которая изучает закономерности и особенности восприятия цвета.
На самом деле, при создании интерфейса программы приходится очень тщательно подбирать цвета в зависимости от их применения.
Пару лет назад, во время создания очередного прототипа, я решил воспользоваться руководством Apple Human Interface Guidelines для подбора цветов темной и светлой темы. Мне хотелось, чтобы мой прототип выглядел также как и оригинальные приложения Apple, такие как заметки, календарь и другие.
Для меня оказалось большим открытием то, что для каждого цвета у Apple есть как минимум 2 варианта для светлой и темной темы по отдельности:
При использовании этих цветов они идеально смотрятся как на белом, так и на черном фоне. Такие казалось бы незначительные на первый взгляд изменения в яркости цвета оказалось играют огромную роль при восприятии цвета.
WCAG и доступный дизайн
Рекомендации для доступного веб-контента (WCAG) помогают оценить то, насколько цвета сочетаются по контрасту. Считается, что контраст 3:1 является оптимальным для комфортного определения элементов интерфейса и их состояния (например, при наведении на кнопку).
Однако, стандарт WCAG достаточно старый и возможно такие рекомендации были актуальны для старых устройств. Сейчас у дисплеев контраст лучше, особенно у AMOLED-дисплеев. Лично на мой взгляд контрастность 2:1 уже выглядит хорошо, но это может быть как раз-таки субъективно, потому что исследований я не проводил.
Если проверить все цвета Apple для светлой темы, то выяснится, что контрастность WCAG для них как минимум 2.1 (кроме желтого).
В целом, можно заметить, что для светлой темы цвета более темные и насыщенные, в то время как для темной — более бледные. Также интересно то, что не у всех цветов совпадает оттенок (hue). Например, у голубого (cyan) в палитре Apple оттенок отличается на 2 градуса, что делает его более синим в светлом варианте:
Для оценки цветов по контрастности есть очень классный инструмент — huetone. Поэтому я теперь вместо того, чтобы просто так перебирать цвета, сначала опираюсь на рассчитанные значения контрастности. Только после этого пытаюсь «дожать» цвет до желаемого, что, как оказалось, не всегда возможно физически из-за особенностей восприятия цвета человеком.
Подводя итог, для себя я сделал следующий простой и очевидный в ретроспективе вывод:
на белом фоне цвета должны быть темнее, а на темном — ярче
На сколько темнее и на сколько ярче — это достаточно размытая граница и здесь действительно играет роль субъективное восприятие и даже брендинг и цель, для которой цвет планируется использовать.
Например, для крупного логотипа можно позволить сделать более низкую контрастность для цвета бренда, в то время как для часто встречающихся элементов интерфейса, таких как кнопок, контрастность должна всегда находится на оптимальном уровне.
В любом случае с помощью таких формальных инструментов оценки контрастности, как WCAG (и других, более современных вроде APCA) можно точно измерить контрастность на начальном этапе, а не прикидывать ее буквально «на глаз».
В ходе подготовки данной статьи я нашел очень хороший материал здесь на vc.ru по контрастности в интерфейсах. Если кому-то из вас интересна данная тема, то в ней более подброно описаны технические ньансы:
Также если вам понравилась данная статья и вас интересует не только дизайн, но и технологии в целом, то приглашаю вас в свой блог «Код без тайн», где я пишу о веб-разработке, информатике и технологиях, которые меня вдохновляют:
Веб-дизайн — это не просто про красоту. Это инструмент, который помогает управлять вниманием и эмоциями пользователей. Каждая деталь — от цвета кнопки до расположения элементов — влияет на то, как люди воспринимают сайт, что чувствуют и какие действия совершают. Давайте разберемся, как цвета, шрифты и композиция работают вместе, чтобы создавать удо…
Мы продолжаем следить за UI-трендами, чтобы создавать красивые и удобные интерфейсы, которые не только удерживают пользователей, но и гибко адаптируются под влиянием новых технологий. И, конечно, готовы рассказать о них вам. На связи снова Полина Короткая из dev.family. Провожаем этот год большим обзором, в котором расскажем, какие заметные изменен…
Всем привет! В этой статье поговорим о процессе найма UX/UI дизайнера со стороны нанимающей стороны, на что обращаем внимание, как смотрим и каких ошибок лучше избежать. Статья будет в формате вопрос-ответ, просто потому что мне так легче думается и пишется и, надеюсь, так будет меньше воды. Поехали.
Якоб Нильсен опубликовал свою фундаментальную статью в апреле 1994 года, и спустя 30 лет она остается актуальной.
Вспомните сайты, которые вы недавно посещали. Помните плавные переходы цветов или анимацию кнопок? Это больше, чем просто украшение; это инструмент, который способствует привлечению внимания и созданию положительного впечатления о вашем бренде.
UX/UI-дизайн — это поле битвы между художниками с кистью и учеными с калькуляторами. Каждый из них считает себя главным героем, а пользователей — своими подопытными кроликами. Но что же это на самом деле: искусство, которое требует вдохновения, или наука, которая основывается на данных? Давайте разберемся!
Дизайн — это не только внешняя красота, но и функциональность. Эти четыре принципа помогают создавать понятные, удобные и эстетически привлекательные интерфейсы. Простота, лёгкость, аккуратность и последовательность — основа, которая помогает дизайнерам решать задачи эффективно.
Корректно заданные области нажатия являются одним из ключевых аспектов удобства взаимодействия с интерфейсом. Если область слишком маленькая, пользователю будет сложно попасть в неё, что приведёт к негативному опыту. Использование сеток помогает стандартизировать процесс и исключить подобные ошибки на этапе проектирования интерфейса.
Тут естественно нужно немного хотя бы понимать принципы гигиены зрения, а то некоторые бывает такого наворотят, что глаза из орбит выкатываются)
Да, хотя WCAG больше нацелен на расчет контрастности на белом/черном фоне, но черный текст на синем фоне тоже можно посчитать, оказывается не все так плохо :)
Возможно для таких крайних случаев лучше все таки использовать APCA
Я вот шарился по сайту Звука новому. Там прикольно в этом плане придумали, что я могу сам цвет на свой вкус сделать
Я по своему опыту замечал, что люди любят кастомизировать приложения, которыми пользуются (Steam, Discord, Android). Звук в этом плане пошел дальше и сам предложил пользователям варианты, интересно.
Думаю было бы круто это интегрировать с настроением в музыке, особенно учитывая, что у них уже есть потоки под настроение