Колористика в інтерфейсі

Хочу розглянути цікаву для мене тему створення інтерфейсу користувача. Певно, це буде серія статей.

Отже: інтерфейс користувача…. Що це таке? Думаю, важлива складова успішного продукту. Саме те, наскільки користувачам буде комфортно працювати з тим чи іншим додатком, визначає подальшу долю, власне, програми та, ймовірно, фінансового (або не фінансового) стану розробника.

Мені зручно класифікувати інтерфейс користувача по кінцевому його застосуванню:

Інтерфейс програмного забезпечення (включаючи операційні системи та різного роду додатки);
Інтерфейс ігровий;
Інтерфейс веб-сайтів.

Можливо, моя класифікація надто узагальнена, або неповна. Якщо хочете, виправте.

З першим найменуванням списку все ясно. При створенні інтерфейсу максимальний акцент робиться на функціонал. Тому, як правило, в інтерфейс самої програми не вкладають занадто багато зусиль, дотримуючись правил мінімалізму та лаконічності. Наприклад хочеться розглянути наш «улюблений» Windows. Тільки останні версії розробники почали вкладати якийсь раціоналізм. В цілому ж, інтерфейс для користувача не тільки не продуманий, а й багато в чому суперечить основним аспектам психології сприйняття людини.

У другому випадку все з точністю навпаки. Інтерфейс ігровий іноді буває складно назвати інтерфейсом, тому що він впроваджений у суть гри та максимально адаптований під користувача. Для того, щоб знайти те чи інше рішення, як правило, не доводиться занадто замислюватися. Все інтуїтивно. Ідеальний варіант для користувача. Моя мрія – операційна система з графічною оболонкою WoT.

Із сайтами все набагато складніше. Якщо звернути увагу на інтерфейси сайтів, томожна натрапити на неймовірну різноманітність рішень. І, як правило, хтось у ліс, хтось по дрова. Якісь розробники дотримуються строгості та мінімалізму, якісь навпаки перевантажують інтерфейсом. Досить багато оптимальних рішень. Але, так само часто доводиться натикатися на абсолютно неопрацьовані сайти, де начебто старалися, але, мабуть, перестаралися.

Неможливо в одній статті розглянути всі тонкощі. Зараз хочу зупинитися на кольорі. Чомусь, мені здається, починати треба саме з нього. Так, можливо, багато вже було сказано про вплив кольору на людину, пристрасть, апетит тощо особливості людського організму… Але я зупинюся не на кольоротерапії, а на трохи практичніших речах.

Як ви вибираєте колір на свій сайт? Зазвичай, це питання відповідають або «замовник вибрав», або «концепція і стиль компанії», або «інтуїтивно підбираю».

Не сперечаюся, у багатьох розробників «набито» око і віртуозна інтуїція. Однак, знання азів суттєво спрощує вибір колірного рішення та економить час. Є багато концепцій вибору колірної гармонії. Я опишу, на мій погляд, найпростішу та найефективнішу.

Є таке поняття, як колірне коло Іттена. Виглядає він приблизно отак:

До його складу входять 12 кольорів. Саме ці кольори вважаються найбільш звичними та легкими для сприйняття людиною.

Першотворними прийнято вважати три основні кольори: жовтий (ffff00), синій (0000ff) та червоний (ff0000). На основі цих кольорів створено все колірне коло. Першотворні вони тому, що за наявності цих трьох чистих кольорів шляхом їх змішування, можна створити всю палітру. Будь-який колір.

Кольори другого порядку одержують шляхом змішування основних кольорів: мандариновий (ff8000), пурпуровий (ff00ff), зелений (00ff00).

Кольори третього порядку виходять змішування основних кольорів і кольорів другого порядку. Їх виходить шість:

Бурштиновий (ffc000)
Кіновар (ff4000)
Світло-вишневий (ff0080)
Фіолетовий (8000ff)
Блакитний (0080ff)
Отруйно-зелений (80ff00)

Це коло, можна сказати, панацея від усіх бід. Саме за допомогою нього можна підбирати найбільш вдалі поєднання кольорів. І тому існує шість принципів колірної гармонії. Так звані кольорові моделі.

За основу береться один колір та різна його насиченість та прозорість. Монохромні поєднання дуже прості у використанні та досить м'які на сприйняття. Але їм часто не вистачає виразності. Близькі кольори

Кольори, які знаходяться поряд на колірному колі. Ці кольори мають схожі характеристики світлових хвиль, тому поєднуються дуже просто. Комплементарні.

Це кольори, розташовані строго один навпроти одного. Найбільший контраст дають саме вони. Це все помітне, живе, зухвале. Близькі та комплементарний.

Тут все просто! Беруться протилежні кольори, наприклад, А і Б. У Б виділяються сусіди Б(л) зліва і Б(п) праворуч. Власне, поєднання А, Б(п) та Б(л) і є шукана величина! При грі з яскравістю можна отримати цікаві варіанти. Здвоєні комплементарні.

Тут також все просто. Беремо Б(п) та Б(л) і шукаємо для них комплементарні (протилежні) кольори. Все те ж яскраве, живе, зухвале тільки в квадраті. Тріадні кольори.

Розташовані через три сектори. Зазвичай контрастні кольори складно поєднуються, хоча, чистому вигляді, зморяться дуже ефектно в кардинально різних пропорціях. Проте, що менше яскравість кольору, то більшеможливостей. Тріади первинних кольорів надто різкі. Вторинні та третинні тріади м'якіші.

Принцип роботи з кольором по колу Іттена простий: підбираєте 2-4 кольори через принципи колірних гармоній та експериментуєте з яскравістю-контрастністю, площею заповнення.

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

І, наостанок, невеликі нюанси та тонкощі:

Наявність чистого білого чи чистого чорного у кольоровому рішенні основних шести гармоній, посилює контраст, відповідно, інтерфейс буде дуже «живим», якщо не переборщити з площею покриття кольорів. В іншому випадку, надмірна активність кольору дратуватиме. Хочете привернути увагу до кольору та зробити сайт максимально яскравим та виразним? Беріть контрастні кольори. Додайте трохи чистого білого або оксамитового чорного. Зробіть велике меню та об'ємний шрифт. Цього буде досить.

Потрібен спокійний ненав'язливий інтерфейс для серйозного проекту-монохромні комбінації Вам на допомогу.

І, важливе правило у кольоропідборі інтерфейсу: мінімалізм. П'ять кольорів – це максимальна межа. Не перевантажуйте свій сайт усіма кольорами веселки. Не треба тут пэчворківської ковдри. Ваше завдання-донести інформацію, а не лякати людей строкатістю.

Використані матеріали: Адамс Моріока та Террі Стоун. "Дизайн кольору. Практикум". Яндекс Колір

Хардкорна конфа за С++. Ми запрошуємо лише профі.