13 з 31 уроку UX-інтенсиву від Джоеля Марша (Joel Marsh)

Share Button

13from31

(Якщо ви тільки-но почали читати наш інтенсив, почніть звідси!)

Існує декілька речей стосовно кольору, які ми здатні вивчити завдяки нашим старим добрим каченятам.

Як UX-дизайнери, ми зазвичай лабаємо вайрфрейми у чорно-білому варіанті. І це правильно! Ми фокусуємося на функціоналі, в той час як UI-дизайнери можуть сфокусуватися на стилі. 

Як би там не було, інколи колір – це і є функція. Як у випадку дорожніх вогнів, або коли колір ескімо відповідає його смаку. Ну, ви знаєте, важлива фігня.

Значення:

colour-meaning

На цій картинці ми бачимо трьох каченят: синє, жовте і червоне. Вони такі симпатичні. Ці каченята одразу здаються різної тональності, і легко уявити, як колір може змінити “значення” кожного каченяти.

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

Ви зрозуміли ідею? Каченята ідентичні, але колір змінює смислове навантаження.

Якщо вам немає потреби вказувати на речі такого порядку, хай вибором кольору займеться UI-дизайнер. Але якщо така необхідність є, хай про неї повідомлять ваші вайрфрейми.

Наблизити чи віддалити:

Також необхідно пам’ятати і про те, що колір може бути “голосним” або “тихим”.

colour-meaning1

На цій картинці показано одне червоне каченя і два блакитних. Червоне каченя виглядає так, неначе воно трішки ближче, чи не так? Хоча таким не є. Елементи на зразок кнопки “купити” повинні мати колір, завдяки якому вони наче вистрибують з монітора. Більше людей клікнуть на колір, який “наближає” (виводить на передній план).

З іншого боку, інколи нам необхідно, щоб деякі речі відступили на задній план, будучи помітними, проте не нав’язливими, подібно до двох синіх каченят. Вони “віддаляються” (відходять на задній план). Це добре для речей на зразок меню, яке знаходиться на екрані постійно. Коли воно постійно волає до вас, це не є потребою, тож краде увагу від важливіших речей.

Робіть ваші вайрфрейми простими:

Кольорові вайрфрейми стоять на дорозі у функціональних деталей. Використовуйте колір тоді, коли він має значення, але не робіть ваші вайрфрейми синіми тільки тому, що так вони будуть схожі на креслення, або щоб прикрасити їх перед клієнтами. Це переведе усі дискусії на тему кольору: “Ні, вебсайт не повинен бути синім…”

Комбінуйте візуальні принципи:

Колір може справді гарно працювати із принципом візуальної ваги з попереднього уроку. Щось велике буде помітним, проте щось велике і червоне не можливо пропустити! Зробіть повідомлення про помилки і попередження червоними та висококонтрастними. Або ж, якщо ви просто підтверджуєте дію користувача, щось менше, пофарбоване у “відступаючий” зелений було б ідеальним рішенням.

***

Наступного разу ми дізнаємося про третій візуальний принцип дизайну: Повторення і ламання патернів!

Взято звідси.

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

fourteen − one =