Базовый Курс UX: Цвет

Урок 13 из 31:

Nancy Pong
Sep 10, 2014 · 4 min read

← Предыдущий урок

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)


Наша жизнь наполнена солнечным светом, искусственным светом, теплом, холодом, одеждой, брендами, модой и миллионом других вещей, которые влияют на наше восприятие цвета. Вас, как UX-дизайнера, может и не интересует модель Пантон и всякие профессиональные руководства. Но основы вы знать обязаны. Итак,


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.


Цвет


Винтажные фотографии наших уточек, размещенные выше, иллюстрируют сразу несколько принципов.

Как UX-дизайнеры, мы обычно делаем wireframe-ы черно-белыми. И правильно! Мы концентрируемся на функционале, в то время как UI-дизайнеры концентрируются на стиле.

Однако, иногда цвет является функцией. Как, например, в светофоре. Или в леденцах, когда цвет подсказывает нам, каким будет вкус. Ну и другие важные вещи.

Что это значит?

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

Если бы утки были кнопками, то они бы означали: подтвердить, отменить и удалить. Если бы они были засечками на топливном баке, то гласили бы: полный, полупустой, пустой. Или если бы они располагались на духовке, то означали бы холодно, тепло и горячо.

Идея вам понятна: уточки одинаковые, но значение каждой зависит от цвета. Если вы не собираетесь использовать цвет как функцию, то пусть цвета выбирает UI-дизайнер. В противном случае, пусть за вас говорит ваш wireframe.

Позади или впереди:

Еще нужно помнить, что цвета могут быть “громкими” и “тихими”. На второй картинке мы видим красную уточку и двух синеватых. И красная, казалось бы, даже стоит ближе, не так ли? Не так. Что-то вроде кнопки “Купить” должно быть окрашено в цвет, который прямо-таки “выпрыгивает” из экрана. На кнопку, которая “выпирает” (кажется ближе), нажмут больше людей.

С другой стороны, иногда нам нужно создать отдаленные элементы, которые видны пользователю, но не отвлекают его (как эти синеватые уточки). Они находятся “позади” (другими словами, утоплены). Это хорошее решение для меню, которое всегда находится на экране. “Кричащее” меню нам ни к чему. Оно отвлекает внимание от более важных вещей.

Будьте попроще с wireframe-ами:

Цветные wireframe-ы только мешают восприятию технических деталей. Используйте цвета только там, где они имеют значение. И не стоит красить wireframe синим в стиле светокопии. А также не стоит “приодевать” wireframe в какой-нибудь цвет для клиента. Это приведет к неправильному понимаю цвета: “Нет, сам сайт синим не будет…”

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

Цвет очень хорошо помогает при создании визуального веса (из вчерашнего урока). Что-то большое привлекает внимание пользователя, а что-то большое и красное он точно не пропустит! Поэтому убедитесь, что ошибки и предупреждения красные и контрастные. Или, если вы просто подтверждаете какое-либо действие пользователя, используйте небольшие размеры и спокойные цвета, вроде зеленого.


Завтра мы изучим третий визуальный принцип:

Повторение и разрыв паттерна→


Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле


Мобильное приложение «Заметки о психике» | Mental Notes

Полезный инструмент для встряхивания мозгов. Подкидывает идей как привлечь, удержать и направить внимание пользователя

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore

UX Crash Course: Fundamentals

«Основы UX» в формате кратких конспектов.

    Nancy Pong

    Written by

    Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

    UX Crash Course: Fundamentals

    «Основы UX» в формате кратких конспектов.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade