Совместное использование нового способа построения цветовых систем для доступных пользовательских интерфейсов. Создайте свою собственную цветовую систему при помощи ColorBox.io
Цвет играет важную роль в нашем восприятии мира, и он играет ключевую роль в восприятии интерфейса. Цвет помогает нам предсказывать, понимать и принимать решения.
С тех пор, как вы были ребенком, вас научили останавливаться на словах красного цвета и расслабляться на цифрах зеленого цвета. Вы хотите вначале прочитать текст, написанный черным, прежде чем перейти к тексту серого цвета. Вы нажимаете на ссылки синего цвета. Это настолько глубоко укоренилось в нашем восприятии цифровых продуктов, что мы об этом даже не задумываемся.
Цвет кажется почти наивно простым, но, поскольку он распространяется на крупные продукты, он становится невероятно сложным. Тысячи людей создают продукты одновременно, и все эти продукты сильно зависят от цвета. Это создает большую нагрузку на цветовую систему, чтобы гарантировать, что все продукты создаются единообразно. Но это очень сложно реализовать, поскольку намного легче применять цвета бессистемно.
Не так давно мою команду завалили вопросами о том, как использовать цвет, как добавлять цвета, как изменять цвета и как работать с доступностью. И количество открытых вопросов только увеличивалось, поскольку наши команды дизайнеров и разработчиков росли. Моя команда отвечает за создание и поддержку дизайн-системы и языка продуктов Lyft.
Наша существующая цветовая система не работала, и мы поняли, что для достижения успеха с цветом нам нужно будет сделать что-то необычное. Чтобы сделать это, мы должны были начать с самого начала и отказаться от всего, что мы знали о цветовых системах.
Наименование цветов
При аудите цветов, используемых в Lyft, мы обнаружили остатки множества предыдущих попыток создания цветовой системы. Это было похоже на археологические раскопки, поскольку названия цветов, такие как луна, сланец и кость, указывали на похожие оттенки серого, а названия других цветов, такие как шелковица, пурпурный и фиалковый, указывали на похожие оттенки фиолетового. Это стало для нас большой проблемой, особенно когда дело дошло до легендарного розового цвета Lyft. Мы нашли в своих продуктах 15 вариантов розового цвета.
Когда мы начинали, мы хотели по-настоящему понять, почему происходит фрагментация цветов. Как только мы обратили внимание на то, как люди (особенно разных специальностей) описывали цвета друг другу, мы заметили определенные расхождения.
Сейчас это кажется очевидным, но не тогда. Для того, чтобы действительно стать успешными, нам было нужно, чтобы дизайнеры и разработчики одинаково описывали цвет. Тогда по названию цвета дизайнеры и разработчики смогли бы понять каким он будет. По сути, нам был нужен общий язык для поддержания цветовой системы.
Мы заметили, что, когда люди говорят о цвете они сообщают две основные вещи. Это тон (hue) цвета, который указывал на пространство на цветовом круге, и модификатор (modifier), который указывал на степень светлоты или темноты этого цвета. Поэтому вы обычно слышите светло-синий, темно-зеленый, темно-красный и т. д.
Мы знали, что не так сложно сформировать общий словарь цветов, как заставить людей использовать его изо дня в день. Таким образом, нам необходимо определить соотношение расходов к ценности, а это означает, что система должна быть простой в освоении и высокоэффективной.
Чтобы упростить это, мы использовали имеющиеся у людей знания о цвете, поэтому мы использовали такие термины, как синий, зеленый и красный, чтобы описать тон. Для более сложных цветов мы предпочли более короткие, легко произносимые слова, которые довольно легко выучить, такие как мята, роза и т. д. Нам также нужно было учитывать, что новая терминология может запоминаться довольно долго, поэтому мы решили спланировать все возможные цвета, а затем сопоставить их с диапазоном оттенков. Поскольку существует всего 360 тонов, нам не придется менять это, даже если Lyft изменит цвета бренда. Если нам когда-нибудь в будущем понадобится добавить поддержку нового тона, мы объединим имена тонов, чтобы не пришлось изменять существующую языковую инфраструктуру (например, красный закат или розово-фиолетовый).
Что касается светлого и темного, то у нас еще не было системы именования. Мы выбрали простую шкалу от 0 до 100, где 0 – самый светлый цвет, а 100 – самый темный. Единственное нам нужно было заранее продумать, как отображать цвета от 0 до 100. Например, если нам нужно было задним числом добавить оттенок, это могло бы заставить нас пересмотреть все числа и переобучить всех сотрудников. Таким образом, мы должны были правильно распределить цвета по шкале. Немного позже мы рассмотрим, как мы это сделали.
Дав людям две простые вещи: названия тонов и яркости, мы выработали свой язык. Так что теперь, если вы слышите красный 60, вы знаете, что это средний красный цвет, и, если вы видите очень светлый оттенок синего, вы можете догадаться, что это синий 10. Этот язык быстр в изучении и достаточно точен.
Выбор цвета
Почти все цветовые системы схожи в том, как дизайнер выбирает цвета. Он открывает инструмент, например, Illustrator, Photoshop или Sketch, выбирает цвет и использует метод наложения, чтобы добиться светлых и темных вариантов. Это классический метод, который присутствует во всех современных системах.
Хотя этот метод работает в краткосрочной перспективе, он имеет тенденцию задавать «срок годности» для любой цветовой системы. Например, если позже нам понадобиться изменить набор цветов, мы не уверенны, что это будет сделано таким же образом. Даже если это будет делать тот же дизайнер, высоки шансы, что он сделает это иначе, и на то есть веская причина. Потому, что восприятие цвета полностью зависит от наших глаз, и любые изменения в диете, окружающей среде, инструментах или методах могут радикально изменить конечный результат. Поскольку этот метод не может поддерживать наше видение цвета в долгосрочной перспективе, нам пришлось искать другой метод.
Мы обратились к математике и посмотрели на способы, которыми мы могли бы программно генерировать наборы цветов. Тем не менее, мы не были довольны результатами существующих программных методов. Мы смогли получить достойные результаты для определенного оттенка, но, когда мы применили тот же метод к другим оттенкам, результаты были не очень.
Синие и желтые тона, с использованием одного метода. Синий набор предоставляет нам довольно много полезных оттенков, в то время как желтый набор становится непригодным уже на раннем этапе
Мы поняли, что это вызвано большой разницей в цветовых пространствах, и только общие программные подходы позволили нам использовать цветовые пространства единым способом.
Мы видим гораздо больше желтого и зеленого, чем синего или красного
Мы рассматривали это как возможность исследовать, как еще можно использовать математику. Поэтому мы спросили себя, что нам нужно от цветового набора, и ответ был контроль. В интерфейсах нам не нужно равномерное распределение светлых и темных оттенков. Нам нужны очаги концентрации светлых и темных оттенков с несколькими средними оттенками. Нам также нужно больше контролировать то, как цвета прогрессируют по оттенку и насыщенности.
Когда мы посмотрели на обычные программные инструменты генерации цвета, почти все они развивались с фиксированной скоростью с равномерным распределением светлых и темных цветов, с незначительными изменениями насыщенности и тона. Поэтому мы решили создать собственный алгоритм генерации цветов.
Если вы хотите узнать, как работает алгоритм, читайте дальше. Если это вам не очень интересно, перейдите к разделу «Доступность» :).
Цвет лучше всего представлен в 3D, потому что в нем есть три измерения: тон (внизу), насыщенность (справа) и светимость или значение (слева).
Здесь мы представляем все возможные цвета.
Как и с любым алгоритмом, нам нужно предоставить набор входных данных для получения набора выходных данных. Этот алгоритм создан для получения набора цветов, то есть на выходе будет набор оттенков для одного тона. Чтобы создать цветовую систему, нам нужно будет повторить алгоритм для каждого тона.
Для входных данных нам нужно указать алгоритму, сколько оттенков или шагов мы хотим получить в этом наборе цвета. В каждом из наборов цветов Lyft есть 11 шагов, что означает, что есть цвет 0, цвет 10, цвет 20… вплоть до цвета 100.
После того, как мы установили количество шагов, нам нужно было указать диапазон тонов, поэтому нам нужно указать начальное значение 0–359 и конечное значение 0–359. В зависимости от тона, это может быть маленький диапазон, например, для красного, или большой диапазон для желтого. Диапазоны тонов могут изменяться в зависимости от предпочтений.
Как только мы получим оттенки и шаги, нам нужно сообщить алгоритму о диапазоне насыщенности. Значение насыщенности идет от 0 до 1. Мы добавили в наш алгоритм возможность манипулировать диапазоном насыщенности. Это позволяет быстрее достичь полной насыщенности для фирменных цветов или уменьшить насыщенность для достижения оттенков серого.
Последний набор входных данных – это значения светимости. Яркость работает аналогично насыщенности в том смысле, что это значение от 0 до 1. Вы можете заметить, что, когда мы настраиваем яркость, точки на других осях также перемещаются. Это потому, что цвет находится в трехмерной среде, поэтому все цветовые каналы тесно связаны.
Как только мы собрали все входные данные, алгоритм формирует набор цветов.
Этот алгоритм позволяет нам удалить все зависимости выбора цвета, которые у нас были ранее, поэтому, если в команде появится новый дизайнер или мы поменяем инструменты, или мониторы, мы все равно получим тот же результат. Этот алгоритм также позволяет нам, по мере необходимости, быстро изменять или масштабировать цвет.
Доступность
Мы сделали доступность краеугольным камнем нашей новой цветовой системы. Мы хотели избавить от необходимости вручную проверять цветовой контраст с помощью сторонних инструментов, и нам нужно было максимально упростить создание доступных продуктов.
Чтобы решить эту проблему, мы использовали то, что уже сделали с именованием и выделением цветов. Используя наш алгоритм, мы сделали цветовой переход от светлого к темному последовательным во всех тонах, чтобы каждый цвет 0–50 был доступен (4.5: 1) на черном, а каждый цвет 60–100 был доступен (4.5: 1) на белом.
Теперь, увидев цвет в коде или назвав цвет можно получить достаточно информации, чтобы определить уровень доступности цвета. Например, дизайнер или разработчик может прочитать «Красный 50» и знать, что он не обладает достаточным уровнем доступности, а «Красный 60» обладает.
Инструменты
Наконец, мы изменили способ поддержки цвета. В наших предыдущих цветовых системах было очень мало инструментов для предотвращения отклонений и поддержания системы как для разработчиков, так и для дизайнеров.
Для разработчиков мы создали инструмент переноса, который прошел через нашу базу кода и перенес все существующие цвета в нашу новую цветовую систему. Мы также создали линтеры для предотвращения введения новых цветов в кодовую базу.
Мы создали плагин Sketch для дизайнеров, который переопределяет инспектор цвета. Это помещает наши новые цвета прямо в рабочий процесс дизайнера.
Теперь ваш черед
В Lyft мы верим в инклюзивное будущее, где каждый может выбрать продукт и добиться успеха. Мы считаем, что для того, чтобы достичь инклюзивного будущего, нам всем нужно создавать доступные продукты.
Поэтому сегодня мы поделились своими знаниями о работе с цветом, и открываем наш алгоритм цвета. Для упрощения использования этого цветового алгоритма мы объединили его как веб-инструмент, который мы называем ColorBox.
Удачи! 3D графика от Han Han Xue, логотип Colorbox от Nick Slater.
Отдельное спасибо Linda Dong, Sam Soffes, Kathy Ma, Katie Dill и всей команде Core Design!
Перевод статьи Kevyn Arnott
Топ коментарі (0)