Офтоп
Лена Очкова

Автоматическое определение цвета — опыт команды «Яндекса»

Продуктовый дизайнер «Яндекса» Михаил Аникин в своем блоге на Medium описал новый алгоритм подбора цветов для промо-карточек приложений в Yandex Launcher.

Редакция vc.ru публикует материал с разрешения автора.

Различные сервисы «Яндекса» работают с цветом для решения интерфейсных задач: выделение информационных блоков и объектных ответов, управление вниманием и создание визуальной иерархии.

Примеры использования алгоритмов подбора цветов в поиске и в «Яндекс.Музыке»

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

У нас в Yandex Launcher есть промо-карточки приложений: рейтинг, описание и кнопка «Установить». Это контекстные рекомендации — они открываются поверх списка приложений или в папке на рабочем столе.

Первоначальная реализация

Цвет для фона карточки подбирался автоматически на основе иконки, кнопка была полупрозрачная белая. Алгоритм пытался определить основной цвет иконки, разбирая пиксели по цветовому тону. Такой подход не всегда давал красивый результат, у него были недостатки:

  • неправильное определение цвета;
  • «грязные» цвета из-за усреднения;
  • тусклые кнопки, скучные карточки.

Примеры проблемных карточек

Чего на самом деле хотелось

Карточка должна была стать настоящим продолжением иконки, а цвета — сочными и яркими. Хотелось создать ощущение, что карточку бережно делали вручную, а не подсунули что-то небрежно сгенерированное автоматически.

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

В субботу я сдул пыль с редактора кода, расчехлил HTML5 и Canvas и стал придумывать. В понедельник пришел к команде с предложением.

Новый алгоритм определения цветов

Шаг 1. Берем иконку. Выкидываем белые, черные и прозрачные пиксели.

Исходная иконка → Квадрат из отфильтрованных пикселей

Шаг 2. Уменьшаем полученное изображение до размера 2 × 2 пикселя (с отключенным антиалиасингом). В результате получим четыре цвета иконки. Если исходная картинка однородная, они могут повторяться — ничего страшного.

Результат после второго шага. Исходная иконка → Цвета

У нас отключен антиалиасинг, чтобы цвета не смешивались, не становились «грязными».

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

Шаг 3. Почти все готово. Осталось совсем чуть-чуть: достаем полученные цвета, переводим в HSL, сортируем по светлоте (L). Красим карточку.

Светлая схема:

  • фон — самый светлый цвет;
  • кнопка — ближайший к светлому;
  • текст — самый темный.

Темная схема (если два и более цветов темные):

  • фон — самый темный цвет;
  • кнопка — ближайший к темному;
  • текст — самый светлый.

Применяя цвета, проверяем контрастность: разница Lightness между фоном и кнопкой ≥ 20; между фоном и текстом ≥ 60. Если не соответствует, корректируем.

Получившиеся карточки. Исходная иконка → Цвета → Карточка

И еще немного карточек для примера:

Результат

У нас получились красочные карточки, из настоящих цветов иконки, без «грязных» примесей. За счет использования нескольких цветов карточка выглядит гораздо живее. Особенно приятно, что при однородном фоне иконки карточка становится ее прямым продолжением: граница между ними совсем не заметна.

И самое главное: через два дня после предложения нового алгоритма первая реализация уже была доступна в dev-сборке. Опробовали внутри команды, настроили пороги для фильтра на первом шаге, предусмотрели особые случаи:

  • иконка из одного цвета — делаем фон чуть темнее, чтобы не сливалась;
  • иконка с фоном — смотрим пиксели по краям; если все одинаковы, ставим такой же фон карточки.

Доработанный алгоритм вошел в ближайший релиз. Отдельное спасибо руководителю группы разработки Yandex Launcher Диме Овчарову — за интерес, желание и терпение. Напоследок — больше примеров.

{ "author_name": "Лена Очкова", "author_type": "self", "tags": ["\u044f\u043d\u0434\u0435\u043a\u0441","\u0446\u0432\u0435\u0442","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","yandex_launcher"], "comments": 14, "likes": 15, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 15639, "is_wide": true, "is_ugc": true, "date": "Fri, 20 May 2016 12:54:18 +0300", "is_special": false }
0
14 комментариев
Популярные
По порядку
Написать комментарий...
3

О господи, есть тысяча и один алгоритм для определения доминирующего цвета, а так же создания палитры. В месте, где автор уменьшил иконку до размера 2х2 я засмеялся. Значит цвета будут зависеть от алгоритма nearest neighbour. Результат, где фоном к темно-сиреневой иконке в музыке является нежно-розовый цвет говорит за себя.

Ответить
11

Если результат хорош, всем плевать знаете вы 1001 алгоритм или нет

Ответить
2

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

Ответить
0

// действительно, почему бы и нет
- (float) random {
return 0.123456
}

Ответить
4

В Яндекс.Музыке используют другой подход: на фон ставится цвет, расположенный на противоположной стороне цветового круга.

Ответить
5

Мне нравится как реализовано в новом AppleTV. Они растягивают обложку фильма + размытие и немного ноиза. Очень ок.

Ответить
2
Ответить
2

В первом шаге есть проверка на достаточность отфильтрованных цветов. Если пикселей осталось слишком мало, белый и черный остаются в палитре (выкидываем только прозрачные).

Ответить
0

Это же упрощенный алгоритм. В ней нет необходимости описывать условности при нештатных ситуациях. Если такой логотип попался, Вы всегда можете применить особый алгоритм.

Ответить
2

А лежит где то в открытом доступе это все?
Вот у гугла либа отдельная — https://developer.android.com/reference/android/support/v7/graphics/Palette.html

Ответить
1

Уменьшаем полученное изображение до размера 2 × 2 пикселя

А каким образом? Можно поподробнее?

Ответить
1

Пусть лучше продуктовый дизайнер Яндекса расскажет нам что случилось с Яндекс-браузером )))

Ответить
0

Это же новый интерфейс Калипсо. Теперь с подсветкой активной вкладки.

Ответить
0

Это я понял, но подсветка это просто жесть, то она горит адски аж глаза режет, то её почти не заметно, да и сделана имхо этими квадратами как-то по-уродливому. Если фон тёмный + навести мышку слово пропадает (становится тёмным на тёмном)

Ответить
Читать все 14 комментариев
Как прокачать команду, компанию и экологию: акселератор, который понравился бы Кофи Аннану

Рассказываем о простом и классном проекте, благодаря которому METRO развивает сотрудников и генерирует инициативы по устойчивому развитию.

Умер Джон Макафи, создатель антивируса McAfee — его нашли мёртвым в тюремной камере Статьи редакции

По предварительным данным, он совершил самоубийство.

Учимся подглядывать в портфель Баффета и не только

Наверняка каждый инвестор интересовался, куда инвестируют крупные фонды или известные профессионалы: Билл Гейтс, Уоррен Баффет, Джордж Сорос или Рэй Далио. Узнать все это можно и достаточно просто.

Сервис для быстрой проверки QR-кодов вакцинации

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

HR-сервис Т1 TalentForce повышает эффективность массового найма

Наша компания запустила сайт HR-платформы Т1 TalentForcе, которая повышает эффективность рекрутмента за счет автоматизации найма.

Что внутри у Алены: разбираем чат-бота по косточкам
У Timepad появился раздел «сервисы»: кому и зачем это нужно

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

Alser - майним крипту на вашей технике, с любовью

В филиале магазина по продаже техники занимаются майнингом криптовалюты на продаваемых ноутбуках.

В магазине техники Alser на продаваемых, новых ноутбуках майнят криптовалюту
Часть 2. «СберМегаМаркет» заменил разбитое зеркало

В прошлом посте я написал, как доставка Сберлогистика привезла мне разбитое зеркало.

Основатели южноафриканской криптобиржи Africrypt пропали вместе с биткоинами пользователей на $3,6 млрд Статьи редакции

В апреле они объявили о «взломе» платформы и попросили пользователей не обращаться к юристам.

Московские рестораторы попросили власти перенести введение «бесковидного режима» для ресторанов с 28 июня на 1 августа Статьи редакции

И предложили пускать посетителей на летние веранды без QR-кодов.

Комментарии
null