UXPUB

UXPUB - спільнота з 3,440 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Почему 90% дизайнеров юзают Color Styles в Figma неправильно?
Редакція
Редакція

Опубліковано

Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Многие дизайнеры (и далеко не новички) используют Color Styles просто как палитру для хранения цветов, а потом тратят кучу времени на правки, если какой-то отдельный цвет не нравится заказчику. Особенно остро встаёт проблема, когда появляется задача перекрасить интерфейс в новомодную тёмную тему.

Дисклеймер. Это статья не про тёмную тему и как её делать, а про систему цветов в дизайне интерфейсов. НО, если тебе интересно, в конце статьи я уделю немного времени этой теме.

Как обычно это происходит?

Пришла идея, что нужно сделать приложение только в тёмной теме, а ты уже нарисовал в светлой. Думаешь, ну ладно, сейчас поменяем белый на чёрный, а чёрный на белый и готово.

Вот какая тёмная тема получилась в Яндекс.Такси:

И ты такой смотришь, вроде бы всё хорошо, но есть маленькие артефакты:

А в примере всего один экран приложения, что будет если их десятки или сотни? Небольшими дефектами дело не обойдётся...

Окей, а как правильно тогда?

Если ты настроил систему цветов правильно, можно сгененировать вот такую тёмную тему с помощью плагина буквально за секунды. Карту правда пришлось отдельно менять, потому что я её скриншотом вставил :D

Ссылка на этот плагин и файл figma из этой статьи, находятся у меня в Telegram-канале. Заходи и сверяйся параллельно чтению.

Сейчас всё расскажу, только покажу ещё одну проблему палитры

Допустим ты дизайнер в Яндекс.Такси (мало ли), вот вы ещё на стадии отрисовки макетов приложения, где-то на 70% позади. Тут приходит к тебе аналитик, показывает итоги исследования и говорит: «Пользователи не считывают этот элемент»

Что ты сделаешь?

  • Тень добавлю, да пожирнее
  • Перекрашу стиль, будет красиво
  • Создам отдельный стиль, могу себе позволить

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

Теперь всё читается, но это уже не Яндекс.Такси, а «Морковь.Такси»...

В общем, эта проблемка происходит из-за того, что мы разделяем цвета по оттенкам. Если нам нужен белый, то мы создаём в стилях #FFF цвет, называем его White и переиспользуем его везде, где можно и нельзя.

А как тогда делать-то?

Чтобы избежать этих проблем, нужно использовать систему цветов, которую описал гугл в гайде по material. Здесь я покажу её упрощённую версию, с которой будет легче начать.

Основной принцип этой системы – стиль описывает не носимый им цвет, а его роль в интерфейсе.

В примере выше чёрный цвет используется на Primary элементах, поэтому мы делаем стиль OnPrimary и задаём ему значение #000.Теперь, если тебе нужно изменить чёрный цвет надписи на кнопках, ты изменяешь не чёрный стиль, а конкретный OnPrimary, и не важно какого цвета он будет или был до этого, другие чёрные текста, например OnSurface, останутся чёрными.

То есть в идеальном мире, у вас не должно остаться стилей с названиями цветов(blue, white, black и т.д), а только параметры типа:

  • Background
  • Surface
  • OnSurface
  • Error
  • Primary
  • и прочие

Ты быстро начнёшь жонглировать этими понятиями, главное немного попрактиковаться.

Это сколько же одинаковых чёрных стилей мне создавать?!

Итоговое количество стилей будет на ≈30% больше обычного. Да, там будут повторяющиеся HEX значения, но создание «одинаковых» стилей стоит сэкономленных нервов и времени в процессе работы.

​Сравнение палитры с системой

Не бойся создавать дополнительные стили(если они нужны), так твои макеты станут более гибкими. В одном из последних проектов у меня получилось вот такое количество стилей:

Ах, да. Тёмная тема

Благодаря тому, что у нас понятная логика использования цветов, мы можем сделать каждому стилю свою цветовую пару, которую будем использовать в тёмной теме. Просто делаешь рядом копию артборда и перекрашиваешь все свои цветные квадратики или кружочки, не знаю, что у тебя там, в нужные цвета.

В догонку к этим цветовым парам:

На днях мне скинули статью, где автор рассказывает о своём новом плагине, который может заменять заготовленные цветовые пары друг между другом, получился супер быстрый генератор тёмной темы. Потестил, огонь, спасибо тебе, Alex Dyakov!

Напомню, как это быстро​

Спасибо что дочитал, вот материалы из статьи:

  • Figma-файл, в котором ты можешь потрогать систему цветов
  • Удобный плагин для переключения на тёмную тему от Alex
  • А вот мой ламповый Telegram--канал, где я делюсь и другими мыслями по дизайн-системам

А если остались вопросы, пиши в комментарии или в личку telegram, bye!)

Обговорення (0)