Автоматичне визначення кольору
Різні сервіси «Яндекса» працюють з кольором для вирішення інтерфейсних завдань: виділення інформаційних блоків і об'єктних відповідей, управління увагою і створення візуальної ієрархії.
Залежно від завдань підбір кольору може вимагати складних обчислень. Але буває, що отримати необхідний результат набагато простіше.
У нас в Yandex Launcher є промо-картки додатків: рейтинг, опис і кнопка «Встановити». Це контекстні рекомендації - вони відкриваються поверх списку додатків або в папці на робочому столі.
первісна реалізація
Колір для фону картки підбирався автоматично на основі іконки, кнопка була напівпрозора біла. Алгоритм намагався визначити основний колір іконки, розбираючи пікселі по колірному тону. Такий підхід не завжди давав гарний результат, у нього були недоліки:
- неправильне визначення кольору;
- «Брудні» кольору через усереднення;
- тьмяні кнопки, нудні картки.
Чого насправді хотілося
Картка повинна була стати справжнім продовженням іконки, а кольори - соковитими і яскравими. Хотілося створити відчуття, що картку дбайливо робили вручну, а не підсунули щось недбало сгенерированное автоматично.
Найкрасивіше хочеться зробити завжди, але ресурси не безмежні. Виділяти команду на написання чудо-бібліотеки за визначенням квітів не планувалося. Так що завдання - мінімальними силами поліпшити алгоритм визначення кольорів, придумати, як пофарбувати картку красиво, не вигадуючи при цьому космічний корабель.
Новий алгоритм визначення квітів
Крок 1. Беремо іконку. Викидаємо білі, чорні і прозорі пікселі.
Крок 2. Зменшуємо отримане зображення до розміру 2 × 2 пікселя (з відключеним антиалиасинг). В результаті отримаємо чотири кольори іконки. Якщо вихідна картинка однорідна, вони можуть повторюватися - нічого страшного.
У нас відключений антиалиасинг, щоб кольори не змішувалися, що не ставали «брудними».
На ділі виходить так: квадрат ділиться на чотири частини, ми беремо середній піксель з верхнього ряду кожної чверті. У реалізації все просто: нам навіть не потрібен реальний downsample зображення і взагалі робота з графікою. Пікселі з потрібною позицією беремо з одновимірного масиву, отриманого після першого кроку.
Крок 3. Майже все готово. Залишилося зовсім трохи: дістаємо отримані кольору, переводимо в HSL. сортуємо по світлин (L). Фарбуємо картку.
- фон - найсвітліший колір;
- кнопка - найближчий до світлого;
- текст - найтемніший.
Темна схема (якщо два і більше кольорів темні):
- фон - найтемніший колір;
- кнопка - найближчий до темного;
- текст - найсвітліший.
Застосовуючи кольору, перевіряємо контрастність: різниця Lightness між фоном і кнопкою ≥ 20; між фоном і текстом ≥ 60. Якщо не відповідає, коригуємо.
І ще трохи карток для прикладу:
У нас вийшли барвисті картки, зі справжніх квітів іконки, без «брудних» домішок. За рахунок використання декількох кольорів картка виглядає набагато жвавіше. Особливо приємно, що при однорідному тлі іконки картка стає її прямим продовженням: межа між ними зовсім не помітна.
І найголовніше: через два дні після пропозиції нового алгоритму перша реалізація вже була доступна в dev-збірці. Випробували всередині команди, налаштували пороги для фільтра на першому кроці, передбачили особливі випадки:
- іконка з одного кольору - робимо фон трохи темніше, щоб не зливалася;
- іконка з фоном - дивимося пікселі по краях; якщо всі однакові, ставимо такої ж фон картки.
Доопрацьований алгоритм увійшов в найближчий реліз. Окреме спасибі керівнику групи розробки Yandex Launcher Дімі Овчарова - за інтерес, бажання і терпіння. Наостанок - більше прикладів.
