{"id":4711,"title":"\u041f\u043e\u0434\u043a\u0430\u0441\u0442 \u043e\u0442 Mercedes-Benz \u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0441 \u0410\u043d\u0442\u043e\u043d\u043e\u043c \u041a\u043e\u043c\u043e\u043b\u043e\u0432\u044b\u043c","url":"\/redirect?component=advertising&id=4711&url=https:\/\/vc.ru\/promo\/263165-korotko-podkast-o-tehnologiyah-i-innovaciyah-ot-mercedes-benz&hash=c6f93899ff5e0c658ae71a18a81977a3309accf3b2bfd459f77ec74e37ef61d4","isPaidAndBannersEnabled":false}
Дизайн
Женя Иванов

Почему 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": 37, "likes": 49, "favorites": 261, "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 }
0
37 комментариев
Популярные
По порядку
Написать комментарий...

Женский Гоша

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

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

Ответить
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

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

Ответить
Читать все 37 комментариев
Нет смысла тягаться с крупным конкурентом, «вдохновившимся» вашим стартапом? Это не так — рассказываю на личном опыте

Привет, меня зовут Роман Рабочий. Три месяца назад я опубликовал здесь статью про свой стартап — секретаря Машу. А спустя два месяца после запуска Маши вышла копия от одного крупного банка. И вчера эстафету перенял известный сотовый оператор. Рассказываю обо всем по порядку.

Как моё сообщество заработало 1,7 млн рублей на VK Donut

Больше шести лет назад Феликс Зинатуллин основал сервис таргетированной рекламы Церебро Таргет и запустил его сообщество ВКонтакте. Теперь там больше 200 тысяч маркетологов и предпринимателей. За год на донатах через VK Donut паблик заработал 1,7 млн рублей. Вот как это вышло.

Феликс Зинатуллин
Google перестанет пускать в офисы по всему миру сотрудников без прививок от Covid-19 Статьи редакции

Компания перенесла дату выхода сотрудников с удалёнки с 1 сентября на 18 октября из-за вспышки коронавируса.

Toyota препятствует переходу на электромобили в Конгрессе США и других странах — NYT Статьи редакции

Компания первой запустила производство «гибридов», но с тех пор отстала от конкурентов.

Клиенты «Открытие Брокер» могут получить статус квалифицированного инвестора в личном кабинете и мобильном приложении

«Открытие Брокер» значительно упростил процедуру присвоения статуса квалифицированного инвестора для своих клиентов. Теперь его можно получить в личном кабинете на сайте и мобильном приложении «Открытие Брокер» в несколько кликов. Новый функционал позволит инвесторам не тратить время на поездку в офис для подачи документов и пользоваться всеми…

Очередной баг Тинькова

В пятницу 23.07 начали падать китайские акции, а у меня на тот момент были МОМО и утро началось с -340$. Я решил избавиться от них, дабы не увеличивался минус. Пятница только началась и надо бы исправить это недоразумение. И я полез в TAL Education Group. Сначала заработал 200$, потом 120$, потом ещё 130$. Итого отбил минус, да ещё и заработал…

Duolingo привлекла $521 млн после выхода на биржу с капитализацией $3,7 млрд Статьи редакции

В 2020 году компанию оценили в $2,4 млрд.

Вебинар по внедрению цифровых интеллектуальных технологий в рамках Kazan Digital Week – 2021
Как (и зачем) мы полностью переделали интернет-банк. Опыт Альфа-Банка
Тинькоф не дает вывести деньги с Инвесткопилки уже 2 недели

С 14го числа приложение не даёт вывести деньги с Инвесткопилки. Техническая поддержка игнорирует детали проблемы и пишет отписки уже 2 недели, даже не пытаясь вникнуть в суть, запрашивая один и тот же скриншот несколько раз, путаясь между обращениями и собственными компенсациями за прошлые косяки. Просто посмотрите скриншоты.

«Бросил вызов Nike Air Jordan за мировое господство в кроссовках»: как Канье Уэст шёл к своему миллиарду Статьи редакции

Канье Уэст много лет настаивал на том, что он миллиардер, но Forbes признал за ним этот статус только в апреле 2020 года. В 2021-м журнал оценил состояние 44-летнего рэпера в $1,8 млрд

Канье Уэст Architecturaldigest
null