(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Наша жизнь наполнена солнечным светом, искусственным светом, теплом, холодом, одеждой, брендами, модой и миллионом других вещей, которые влияют на наше восприятие цвета. Вас, как UX-дизайнера, может и не интересует модель Пантон и всякие профессиональные руководства. Но основы вы знать обязаны. Итак,
Цвет
Какая уточка теплая? А какая как-бы предупреждает о чем-то? Цвет имеет значение!
Какая уточка кажется немного ближе? При помощи цвета можно создавать эффект близости и удаленности.
Винтажные фотографии наших уточек, размещенные выше, иллюстрируют сразу несколько принципов.
Как UX-дизайнеры, мы обычно делаем wireframe-ы черно-белыми. И правильно! Мы концентрируемся на функционале, в то время как UI-дизайнеры концентрируются на стиле.
Однако, иногда цвет является функцией. Как, например, в светофоре. Или в леденцах, когда цвет подсказывает нам, каким будет вкус. Ну и другие важные вещи.
Что это значит?
На картинке сверху мы видим трех уточек: голубую, желтую и красную. Они таким симпатичные! Все уточки на фотографии выполнены в разных тональностях, и очень просто представить как цвет влияет на “роль” каждой из них.
Если бы утки были кнопками, то они бы означали: подтвердить, отменить и удалить. Если бы они были засечками на топливном баке, то гласили бы: полный, полупустой, пустой. Или если бы они располагались на духовке, то означали бы холодно, тепло и горячо.
Идея вам понятна: уточки одинаковые, но значение каждой зависит от цвета. Если вы не собираетесь использовать цвет как функцию, то пусть цвета выбирает UI-дизайнер. В противном случае, пусть за вас говорит ваш wireframe.
Позади или впереди:
Еще нужно помнить, что цвета могут быть “громкими” и “тихими”. На второй картинке мы видим красную уточку и двух синеватых. И красная, казалось бы, даже стоит ближе, не так ли? Не так. Что-то вроде кнопки “Купить” должно быть окрашено в цвет, который прямо-таки “выпрыгивает” из экрана. На кнопку, которая “выпирает” (кажется ближе), нажмут больше людей.
С другой стороны, иногда нам нужно создать отдаленные элементы, которые видны пользователю, но не отвлекают его (как эти синеватые уточки). Они находятся “позади” (другими словами, утоплены). Это хорошее решение для меню, которое всегда находится на экране. “Кричащее” меню нам ни к чему. Оно отвлекает внимание от более важных вещей.
Будьте попроще с wireframe-ами:
Цветные wireframe-ы только мешают восприятию технических деталей. Используйте цвета только там, где они имеют значение. И не стоит красить wireframe синим в стиле светокопии. А также не стоит “приодевать” wireframe в какой-нибудь цвет для клиента. Это приведет к неправильному понимаю цвета: “Нет, сам сайт синим не будет…”
Комбинируйте визуальные принципы!
Цвет очень хорошо помогает при создании визуального веса (из вчерашнего урока). Что-то большое привлекает внимание пользователя, а что-то большое и красное он точно не пропустит! Поэтому убедитесь, что ошибки и предупреждения красные и контрастные. Или, если вы просто подтверждаете какое-либо действие пользователя, используйте небольшие размеры и спокойные цвета, вроде зеленого.
Завтра мы изучим третий визуальный принцип:
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле