Враховуючи те, що я самоучка в сфері дизайну інтерфейсів, мене завжди дивувало, чому в багатьох статтях та книгах пишуть про теорію кольору та палітру. З власного досвіду, використання “роздільно-компліментарного поєднання” дає приблизно 0% вірогідності симпатичного результату.
Я б назвав це марною тратою часу.
Тож якщо теорія кольору не допоможе підібрати палітру для інтерфейсу, то що ж тоді допоможе?
Моя пропозиція: варіації кольору. Це налаштування параметрів відтінку за визначеною схемою, а не вибір із колірного кола.
Або, скажімо, ключовою здібністю в підборі палітри інтерфейсів є вміння перетворення одного основного кольору в безліч варіацій.
Я розумію, це звучить трохи дивно, але почуйте мене. Я покажу вам схему, за якою ви зможете підібрати кольори для вашого дизайну.
Ця схема:
- Дозволить використовувати всього один основний колір для, будь-яких цілей (це надзвичайно корисно, і, як ми згодом побачимо, у таких додатках як facebook це вже застосовується)
- Допоможе зрозуміти, як правильно змінити колір, щоб він добре виглядав.
- Зробить підбір палітри менш “інтуїтивним” (“інтуїтивний”, часто означає “я не зрозумів, як це працює” — саме так уявляють собі цей процес сторонні люди).
Ми круті? Круті?
Прекрасно.
Світлі й темні варіації
Порівнюючи інтерфейси, які я вважаю красивими, я помітив одну річ: в багатьох із них використовуються темні і світлі варіації одного основного кольору.
Ви ж не думали що пошуковий рядок це просто напівпрозорий чорний прямокутник поверх синього тла шапки? Правильна відповідь: ні. При жодному відсоткові прозорості чорного шару не вийде такий колір пошукового рядка. Тут потрібне щось інше.
Погляньте-но на інтерфейс Swell Grid, дивовижного додатку прогнозу погоди для серферів.
Та-дам. Перед нами маса варіацій. Скільки їх там? Зайдіть на вебсайт і порахуйте самі. Практично всі кольори на цій сторінці є варіаціями основного синього кольору.
А ось ще один простий приклад:
Тут колірними варіаціями позначені навіть стани елементів. І було б неправильно назвати їх «трьома відтінками блакитного». Це один і той же блакитний в різних варіаціях.
Але тоді виникає питання: що саме потрібно зробити з кольором, щоб отримати такі варіації?
Що ж, ми до цього дійдемо, але я хочу, щоб ви розуміли основи. Отже, ось наші 2 базових принципи, які допоможуть нам зрозуміти:
- Ми будемо звертатися до реального світу. І хоча інтерфейс — лише імітація реальності, ми завзято продовжуємо копіювати звичні нашому оку закономірності, очікуємо, що світло та колір завжди будуть працювати певним чином.
- Ми будемо використовувати систему HSB. В принципі, це найбільш зрозуміла система із популярних систем. Вона доступна у Sketch та Photoshop. Якщо ви не знаєте, що таке колірний тон (hue), насиченість (saturation), та яксравість (brightness), давайте візьмемо перерву і зустрінемось за 10 хвилин.
Колірні варіації в реальному світі
Озирніться навколо. Які “колірні варіації” нам зустрічаються на кожному кроці?
Саме так, тіні.
Можете вважати тіні темною варіацією основного кольору.
Ви ще тут?
Тепер відкриємо Sketch, підготуємо піпетку і з’ясуємо, що саме відбувається, коли на коралову стіну падає тінь.
Як я вже казав, ми будемо з’ясовувати це в системі HSB.
Отже, яскравість зменшилась, що достатньо передбачувано. Але не будемо поспішати із висновками і поглянемо на інший приклад.
Цікаво, чи так само працюють тіні на зображенні з Кубою? Зараз ми це з’ясуємо.
Добре, порівняймо результати. Помітили схожість?
Якщо на стіну падає тінь, то її яскравість зменшується, а насиченість збільшується. Ми розглянули всього два приклади. але за спостереженнями це правило універсальне.
З колірним тоном трохи складніше — його значення зменшується для тіні на кораловій стіні і збільшується для тіні на синьо-зеленій стіні. Цьому є пояснення, але воно не таке важливе і не таке легке для розуміння, як у випадку з яскравістю та насиченістю. Тож до колірного тону повернемося трохи згодом.
Правила
Розгляньмо ж ці концепти більш детально.
Темна варіація кольору = насиченість вище + яскравість менше
Якщо ви ще раз поглянете, наприклад, на пошуковий рядок Facebook, ви точно збагнете що саме відбувається:
Насиченість збільшується, яскравість зменшується. Причина, за якою пошуковий рядок не може бути чорним напівпрозорим шаром на базовому синьому, полягає в наступному. В HSB додавання чорного рівнозначно зменшенню яскравості. Але ми хочемо зменшити яскравість одночасно зі збільшенням насиченості. А чорний колір ніякої насиченості не додає.
Чому в реальному світі затемнення кольору супроводжується збільшенням насиченості? А пес його знає. Але можу припустити: інтенсивність світла (яскравість) приглушує інтенсивність кольору (насиченість), в результаті колір стає більш розмитим — і навпаки.
Це, здавалося б повна маячня, але схоже що у ній є сенс, вірно?
Світла варіація кольору = насиченість нижче + яскравість вище
Як спостережливий та досвідчений читач, ви, ймовірно, вже здогадались, що зворотні дії дадуть зворотній результат — світлу варіацію.
Схоплює на льоту!
Звичайно ж, ми можемо піти ще далі. Якщо до нескінченності зменшувати насиченість і збільшувати яскравість, то що в нас вийде?
А от що:
Ми отримаємо білий.
Порівняйте світлу варіацію з кольором, отриманим за рахунок додавання білого. Є два дуже простих способи зробити це у Sketch:
- Зменшіть непрозорість елемента, якщо він на білому фоні.
- Розмістіть напівпрозорий білий шар поверх елемента.
Найважливіша річ
Якщо ви запам’ятаєте тільки одну думку із цієї статті, нехай це буде наступне:
Щоб створити темну варіацію кольору, зменшіть яскравість і збільште насиченість. Щоб створити світлу варіацію, збільште яскравість і зменшіть насиченість.
За цією схемою, маючи всього один колір, створювати вражаючі речі.
Правда у тому, що для більшості елементів та їх станів ви будете використовувати не різні кольори, а різні варіації одного і того ж кольору.
Це Harvest, додаток для планування. Я сам ним користуюсь і дуже його люблю.
Подивіться на меню в шапці. При наведенні пункти світлішають. В активному стані темніють.
Або погляньте на зелену кнопку “New Entry”.
При наведенні ми бачимо темну варіацію кольору — з більшою насиченістю, меншою яскравістю.
Ви будете користуватись цим знову і знову.
Чесно кажучи, не в кожному дизайні цього правила дотримуються на 100%. У шапці Harvest на попередньому зображенні активний стан пункту меню задається тільки зменшенням яскравості, без зміни насиченості. А стан наведення — тільки зменшенням насиченості, без зміни яскравості. Але в порівнянні з властивостями кольору в реальному світі, ми розуміємо, що робить цей дизайн таким привабливим. Він прагне до викладених принципів, хоча і не повністю їх дотримується.
А як щодо колірного тону?
Говорячи про порівняння з реальним світом, ми мусимо торкнутися теми колірного тону. Нагадаю, що колірний тон — річ другорядна. Його можна взагалі не враховувати, коли ви налаштовуєте зміщення яскравості й насиченості.
Це, так би мовити, лаконічне пояснення.
Перш за все, кожен колір має свою «сприймаючу яскравість». Це називається світність.
Незважаючи на те, що і цей блакитний, і цей жовтий кольори мають яскравість 100%, який із них здається яскравішим?
Маю на увазі, якщо б ви запитали у когось на вулиці: який колір яскравіший?
«Гм… Жовтий?»
Дякую, друже. Щойно ти відкрив для нас світність.
«Тож я правий?»
Так, так правий. Навіть не торкаючись яскравості та насиченості, а змінювати тільки колірний тон, ви отримаєте різні рівні світності, або «сприймаючу яскравість». Це значення варіюється від 0 до 100.
На зображенні ми бачимо кола з інтервалом колірного тону в 30°, насиченість і яскравість у всіх однакова — 100%.
А тут ми бачимо ті ж кола в режимі Luminosity (якщо ви хочете повторити експеримент у Sketch, обов’язково робіть це на білому фоні). Цифри на колах — це яскравість сірого який вийшов. Так ми отримуємо значення світності початкових кольорових кіл.
В режимі Luminosity світло-сірий означає високу світність, темно-сірий — низьку. Над цим варто замислитись.
Але, щоб стало зрозуміліше, давайте розмістимо наші кола на графік.
Погляньте но, Шерлок, закономірність.
І ця закономірність — відповідь на наші запитання про колірний тон. Пам’ятаєте, як на одному зображенні значення колірного тону для тіні зменшувалось, а на іншому збільшувалось? Чому так відбувається?
Що ж, по перше, зауважте, що цей графік має 3 точки максимума і 3 точки мінімума. Точки мінімума: червоний (red), зелений (green) та блакитний (blue). Точки максимума: синьо-зелений (cyan), пурпуровий (magenta) та жовтий (yellow).
Нічого не нагадує? Так, це популярні колірні системи RGB та CMY. Але не приділяйте цьому надто багато уваги, це тільки заплутає.
Важливо те, що зміщення колірного тону в бік червоного (0°), зеленого (120°) чи синього (240°) зменшує освітленість. Зміщення в бік жовтого (60°), блакитного (180°) чи пурпурного (300°) збільшує освітленість.
Секрет у тому, щоб поєднати зміну колірного тону зі зміною насиченості та яскравості. Якщо вам потрібна темніша варіація, потрібно змістити колірний тон у бік червоного, зеленого або синього, в залежності від того який із них знаходиться ближче. В той же час яскравість зменшити, а насиченість збільшити. І навпаки, для світлої варіації потрібно змістити колірний тон у бік жовтого, блакитного чи пурпурового.
Ось чому колірний тон тіні на кораловій стіні зменшився — він змістився у бік червоного, до 0°, це найближча точка мінімуму для 21°.
І з цієї ж причини колірний тон тіні на синьо-зеленій стіні збільшився — він змістився у бік синього, до 240°, це найближча точка мінімуму для 194°.
Мозок ще не вибухнув?
Шлях кольору
Підбираючи палітру для інтерфейса, запитайте себе: а якщо просто взяти темні і світлі варіації одного і того ж кольору?
І якщо ви прагнете чогось чистого й простого, то у більшості випадків це буде правильне рішення.
Темна варіація:
- Яскравість (brightness) зменшується
- Насиченість (saturation) збільшується
- Колірний тон (hue) зміщується в бік мінімальної світності (червоний, зелений, блакитний)
Світла варіація:
- Яскравість збільшується
- Насиченість зменшується
- Відтінок (частіше) зсувається в бік максимальної освітленості
Це дозволить вам один відтінок, але модифікувати його для усіх потреб вашого інтерфейсу, використовуючи темніші та світліші варіації там, де це доречно.
Я тут підготував приклад. Увесь інтерфейс побудований із єдиного кольору. Скажіть… цей відтінок синьо-зеленого (teal) вигладає знайомим?
Я був дуже лаконічний з усім цим. Досі залишається багато неохоплених тем:
- Яким чинов відтінок навіть більш важливий у градієнтах та візуалізації даних?
- Яким чином ви робите темніші варіації у Sketch (і т.д.)?
- Ви більше змінюєте насиченість та яскравість?
- Як ви підбираєте сірий, який пасуватиме вашій колірній схемі?
- Як ви визначаєте цілком непов’язані кольори, які виглядають разом дуже гарно?
- Як ви виправляєте конфліктні кольори?
- Ну і звичайно ж,чому низькі/високі точки RGB та CMY є на графіку освітленості?
Я радий що ви запитали.
Автор статті: Erik D. Kennedy “Color in UI Design: A (Practical) Framework”
Переклад: UIUXUA
