Волшебная технология смешивания цветов в Paper для iPad

Как при помощи года разработки и статьи 1931 года команда приложения Paper решила вопрос со смешиванием цветов, которое происходит как в реальной жизни?

Цвета могут влиять на настроение, выражать точку зрения или мгновенно создавать ассоциации в умах людей, поэтому являются мощным инструментом для брендинга. Но FiftyThree, команда, создавшая Paper для iPad, увидела здесь большую проблему для бизнеса: традиционные инструменты работают с цветами понятным для машин, но далеким от людей способом. Они подумали, что корпорации могли бы создавать более качественное цифровое искусство с помощью ориентированных все-таки на человека инструментов, и в Paper 1.2.1. они попытались создать такой инструмент.

Насколько крута кривая обучения для создания красивой графики? Ответьте на этот вопрос сами при помощи любой графической программы. Откройте панель выбора цвета и выберите цвет между желтым и синим. Любой ребенок ответит вам, что это должен быть зеленый — но в программе вы получите серый. Ваша работа уже не логична.

Эндрю Аллен, сооснователь и дизайнер в FiftyThree, сказал: «Не существует плохих цветов, только плохие палитры. Традиционный подбор цвета в Photoshop или Illustrator не помогает вам. Они говорят: вот вам 16 миллионов вариантов — выбирайте сами».

В кроличью нору по радуге

Чтобы исправить цвет, FiftyThree нужно было забросить инструмент выбора цвета и отправиться на годовую креативную охоту, чтобы создать интуитивную, сенсорную и дико простую замену. Результатом стала демонстрация, занявшая главное место в выступлении Фила Шиллера на презентации iPad Mini. Почему переизобретение чего-то настолько простого получило столько наград?

Во-первых, обратимся к истории: подбор цветов существовал в компьютерных программах в той или иной форме с 1973 года. Изобретение нового интерфейса означало бы противоречие парадигме, разделяемой почти каждым инструментом дизайна — от Adobe до Zoho. Подбор цветов может быть и плох, но мы привыкли к нему.

Сначала команда сосредоточилась на наиболее очевидной проблеме: взаимодействии. Они создали микшер для замены пикера. «Идея Эндрю заключалась в том, что микшер может быть гораздо более дружелюбным инструментом, чем выбор, и столь же гибким, если он будет выполнен правильно», — говорит Мэтью Чен, инженер iOS и иногда студийный художник, который возглавлял разработку Paper Mixer.

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

«В поисках хорошего алгоритма смешивания мы сначала попытались интерполировать различные цветовые пространства: RGB, HSV и HSL, затем CieLAB и CieLUV. Результаты были разочаровывающими», — говорит Чэнь. «Мы знаем, что красный и желтый должны давать оранжевый цвет, или красный и синий должны быть фиолетовыми, но нет никакого способа достичь этих цветов независимо от того, какое цветовое пространство вы используете. Есть техническая аксиома: делайте простейшую вещь, которая могла бы работать. Ну мы попробовали самые простые подходы, и они совсем не работали».

Если ошибаются все, зачем вводить инновации?

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

«Мы вложили много усилий в создание каркаса нашего продукта», — говорит Аллен. Целью было упрощение или исчезновение взаимодействий. «Чтобы это сделать, ваши команды разработчиков и дизайнеров должны работать в гармонии: одни не могут быть важнее других». Команда знает,что достигнет цели, когда средний пользователь сможет создавать работу на уровне эксперта за меньшее время, чем того можно ожидать.

Концептуальный прорыв из прошлого

От кучи математических проблем FiftyThree спасло крупное прозрение немецких ученых по имени Пол Кубелка и Франц Мюнк. В 1931 они опубликовали статью под названием “Вклад в оптику красок”, которая опередила решение вопроса с компьютерными цветами на несколько десятилетий. В документе изложена «теория отражения» с уравнением, которое могло бы моделировать физическое смешение цветов, которое вы можете видеть невооруженным глазом. Оно определяет то, как как свет отражается или поглощается различными цветами.

Сегодня компьютеры хранят цвет как три значения: одно для красного, зеленого и синего, они также известны как каналы RGB. Модель Кубелки-Мюнка имела по меньшей мере шесть значений для каждого цвета, включая значения отражения и поглощения для каждого из цветов RGB. «Хотя появление цвета на экране можно описать в трех измерениях, смешение цвета происходит фактически в шестимерном пространстве», — объясняет Георг Петшнигг, соучредитель и исполнительный директор FiftyThree. Статья Кубелки и Мюнка позволила команде перенести эстетическую проблему в математическую плоскость.

Переход от трехмерного цветового пространства к шести измерениям заключался в различии между старым цветным смешиванием и абсолютным реализмом. «Взаимодействие поглощения и отражения создает оттенки, которые вы видите», — говорит Петшнигг. «Сравните красный лак для ногтей с красными чернилами: оба красные, но лак для ногтей будет виден на черной бумаге, потому что он отражает свет. Чернила не будут, потому что они поглощают свет».

Могут ли приложения для iPad стать слишком реальными?

Подражание цветовому пространству в шести измерениях создало результаты, слишком похожие на реальную жизнь. «Мы воспроизвели все особенности смешивания цветов в реальном мире», говорит Чен, «а смешивание цветов — это хитрый процесс, который художники осваивают с практикой. Мы перешли от недостаточно реалистичного смешивания к слишком реалистичному».

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

Здравый смысл против кучи математики

Петшнигг и его команда вручную отобрали 100 пар популярных цветов и посмотрели, как они должны смешиваться. Чен создал приложение для iPad, чтобы представить разные варианты смешивания для одних и тех же цветов, позволив пользователям выбрать переход, который выглядел бы для них правильно. При тестах внутри команды, они в конечном итоге остановились на ста наборах математически произвольных, но приятных для глаза цветовых переходах. Они использовали эти сто наборов данных, чтобы создать инфраструктуру, которая позволила бы iPad принимать обоснованные догадки, когда приходило время смешать цвета, которые не были в пределах пар, настроенных вручную.

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

«Мы заставляем подобные цвета смешиваться подобными способами, что не соответствует действительности, где пигменты с различным химическим составом могут казаться похожими, но смешиваются по-разному», — объясняет Чен. «Мы хотели строго контролировать то, какие оттенки цвета появляются при переходе от одного цвета к другому, так что смешивание не будет проходить некоторые оттенки». Обратная связь от пользователей, тестировавших прототип, показала, что шестой вариант стал самым естественным видом перехода.

После того, как команда выяснила пути смешивания для своих ста пар, Чен добавил ряд последующих шагов обработки, чтобы обеспечить равномерное смешение оттенков, насыщенности и яркости. «В конце концов, смешивание цветов в микшере должно быть себя простым и естественным», — говорит он. «В идеале, никто не должен видеть все обручи, через которые мы прыгнули, чтобы сделать это».

Математическая загадка в иллюстрациях

Почему компьютеры видят цвета совсем не так, как люди? Ниже Петшвигг проиллюстрировал очень простое смешение цветов в пространстве RGB. Формула ниже описывает цвет на переднем плане Ca, фоновый цвет Cb, коэффициент смешивания “альфа” в диапазоне от 0 до 1 и итоговый цвет Co.

«Многие цвета выражаются как триплеты RGB. В начальной школе нас учили, что желтый и синий дают зеленый. Но, когда вы подставляете значения в это уравнение, вы получите другой результат — серый. То есть, желтый (1,1,0) и синий (0,0,1) смешиваются в триплет (0.5,0.5,0.5), то есть, серый. Так происходит, потому что RGB описывает точку в спектре цветов, а не то, как цвета ведут себя при смешивании».

Создание микшера, управляемого пальцами

Совершенствование взаимодействия потребовало больших усилий, даже после того, как команда обнаружила решение для смешивания. «Никто раньше не делал ничего подобного нашему микшеру, — говорит Аллен, — поэтому нам пришлось делать больше прототипов, чем для любого предыдущего инструмента, чтобы проверить дизайн и улучшить взаимодействие».

Целью была последовательность восприятия. «Один полный оборот производит одинаковое изменение, независимо от того, были ли цвета на противоположных концах спектра или соседними», — говорит Аллен. «Настоящий гений микшера заключается в том, что он помогает вам создать правильный цвет. Если у вас есть палитра с синим и красным цветом, и вы смешиваете их, чтобы создать фиолетовый, этот фиолетовый будет гармонично работать с исходными ингредиентами, потому что он происходит от этих цветов».

Аллен определял взаимодействия с помощью серии из четырех прототипов, сделанных на HTML, и запускаемых в браузере, как показано ниже. Каждый прототип Аллена помог Чену, iOS-разработчику, уточнить программный подход следующими способами:

Для первого прототипа команда хотела знать, работал ли основной жест смешивания как взаимодействие. «Он работал чудесно!», — говорит Аллен. «Но контроль цвета с помощью традиционных значений оттенка-насыщенности-яркости не работал. Поэтому мы начали экспериментировать с путями смешивания двух цветов».

Во втором прототипе они исследовали смешивание между цветами. Команда рассматривала различия между цветовыми пространствами, такими как RGB, и более интуитивными цветовыми пространствами, в которых изменения оттенка, насыщенности и оттенка воспринимаются даже невооруженным глазом. «Очевидно, что интуитивный цвет был правильным подходом, но для создания и совершенствования нашей собственной модели смешивания потребовалось гораздо более глубокое погружение инженеров», — говорит Аллен.

Третий прототип заключался в предоставлении обратной связи пользователям. Этот прототип исследовал, как как пользователи понимали процессе смешивания.

В четвертом прототипе были добавлены вторичные функции. В финальной версии команда собрала весь свой опыт и начала исследовать, как модель выбора работала с палитрой при сохранении и перемещении цветов.

Когда цветовое решение было закончено, команда опубликовала новый билд Paper в App Store. Публикация совпадал с появлением урагана, так что команда FiftyThree отпраздновала победу над цветом почти в темноте — со свечами в офисе.