Дизайн
Женя Иванов
6556

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

Допустим, ты дизайнер в «Яндекс.Такси» (мало ли), вот вы ещё на стадии отрисовки макетов приложения, где-то на 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!)

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Женя Иванов", "author_type": "self", "tags": ["fff","000"], "comments": 38, "likes": 41, "favorites": 225, "is_advertisement": false, "subsite_label": "design", "id": 113080, "is_wide": true, "is_ugc": true, "date": "Fri, 20 Mar 2020 08:44:58 +0300", "is_special": false }
Создать объявление на vc.ru
Право
Семь настоящих причин зарегистрировать товарный знак в России
Хорошее название помогает компании защититься от подделок, покорить рынок и выйти за рубеж. Плохое может её обанкротить.
0
38 комментариев
Популярные
По порядку
Написать комментарий...
7

Смешались кони, люди

Ответить
0

Сочетание цветов и первых букв на что-то намекают? 🤔

Ответить
–1

ловите наркоманов )) бля пока не разбежались

Ответить
0

Ни в кооооем случае :D

Ответить
2

Как бы офигенно было, если бы все эти редакторы поддерживали банальные переменные.
Вписал в значение цвета $primary вместо hex,  или $paragraph вместо размера/высоты строки шрифта и забыл. Один текстовый файл отредактировал и получил хоть темную тему, хоть мобильную/десктопную. 

Ответить
1

А ты пробовал framer х? Сейчас его осваиваю, по сути там это так и работает

Ответить
0

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

Ответить
0

Так ну если ты его освоил, зачем тебе смотреть на его порог?)

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

Ответить
0

А какой смысл на него переходить? 

Ответить
0

Он хорош для крупных продуктов, качественные кодоориентируемые дизайн-системы и реальные прототипы получаются. Для крупных компаний самое то, не терять на исследованиях проценты конверсий. Соответственно все топовые(популярные) дизайнеры из крупных компаний начнут работать в нём и рассказывать что это такое, а за ними потянется и дизайн сообщество

Ответить
0

Можно конкретней? 
Дизайн системы бывают разные, для одних норм реакт, для приложений реакт, как и сам яваскрипт мало применим. (ну или поправьте меня, вдруг я отстал)

Ответить
1

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

Ответить
0

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

Ответить
0

Ну я пока тоже не могу просто взять и начать переводить проекты в фреймер, в реакте пока слабоват и другие моменты. Но решил, что потихоньку буду изучать, вдруг, когда-то он понадобится. По крайней мере интересная статистика использования меня убеждает в этом – https://uxtools.co/survey-2019

Ответить
0

framer x вышел в конце 2018. старая версия с coffee script ни в какое сравнение не идет с X

Ответить
0

Лежу в кровате, засыпаю, но прямо щас захотелось встать и пойти переиначить все свои макеты 😂 Спасибо, парень, годный контент!

Ответить
0

спи, неугомонная

Ответить
0

Ахаха, как успехи? Переиначила?)

Ответить
0

Вопрос из заголовка был риторическим, но если у кого-то есть на него ответ, то я буду рад послушать)

Ответить
1

Потому что на ютубчике так учат. Я не видел ни одного туториала, где цвета были бы обозначены по цели. И ещё сказывается непопулярность Material Guildlines в России, вообще никто не читал, похоже. Прямо вот такое фи среди всех дрибломанов.

Ответить
2

Мне кажется, начинающие дизайнеры обходят матЕриал стороной, потому что он «некрасивый», потом придёт понимание, в чём его смысл. Но будет уже поздно :D

Ответить
0

Вопрос скорее должен стоять "почему 90% дизайнерам платят, если они не понимают базовых принципов и инструментов работы". Почему работадатель готов платить людям, которые не умеют избегать базовых ошибок? Видимо, дело в том, что 90% берут настолько дешево, что выгоднее их заставлять переделывать свои косяки, чем нанимать оставшиеся 10%.

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

ИМХО, конечно. Диванная аналитика и мысли вслух

Ответить
1

Я твою диванную аналитику обычно по другому трактую: от того, что достойных профессионалов не так много и они уже устроены, работодатели берут на работу тех, что остались) Думаю надо в принципе повышать квалификацию сообщества дизайнеров в рашке, а дальше всё подтянется

Ответить
0

Ниже написал про решение в iOS. Еще есть решения на основе design tokens. Вот один из примеров:  https://www.lightningdesignsystem.com/design-tokens/
В каждом случае, зависит от продукта, насколько он большой и как масштабируется, но общий смысл, думаю понятен. И это касается не только цветов

Ответить
0

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

И еще изобретают проблемы,  у которых уже существуют решения. 
То что описано выше, давно есть — "semantic colors" в iOS Dynamic System Colors. 

Ответить
0

Расскажи это тупеньким дизайнерам, которые до сих пор макеты в фотошопе рисуют...

Ответить
–1

Видимо, я тупой) А еще я и логотипы делаю в Фотошопе)) 

Ответить

Комментарий удален

0

рады за тебя. и как, там уже появились адаптивные компоненты?

Ответить
1

Пхах, если быть честным перед собой, то там компоненты появились раньше, чем люди додумались делать скетч) Смарт объекты или типо того они называются, не помню уже :D
Ну а так, этому человеку можно только успехов пожелать, не над негативить, самое главное самому развиваться и показывать пример, я думаю

Ответить
0

смарт-объекты и компоненты — не совсем одно и то же

Ответить
0

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

Ответить
0

О, привет! Я пробовал делать карту через стиль заливки, но она получалась не очень похожей на оригинал. Поэтому я пошёл рисовать стиль для Гугл мапс, чтобы было похоже на Яндекс мапс. Вот такой крюк, но зато похоже получилось :D

Ответить
0

Хотел ещё личное спасибо сказать) Плагин реально крут, ещё бы настраиваемые пресеты, чтобы можно было делать не только дэй и найт, но ещё и какой-нибудь «графит» или, я не знаю, «пинк сансет». В общем, даёшь более гибкую настройку!😃

Ответить
0

Круто! Жаль стоя не дизайнер, тогда бы пригодилось.

Ответить
0

Хахах, зачем тогда ты прочитал эту статью? :D

Ответить
0

он лёжа дизайнер

Ответить
0

Записал шутку в блокнотик)

Ответить

Прямой эфир