Эффект полутонов или как создать гармоничный интерфейс – советы новичкам, напоминание профессионалам

Веб и интерфейсы

Любому проекту для успеха нужна гармония. Сайты – не исключение из этого правила. Часто плохо продуманная цветовая гамма интерфейса сайта портит впечатление у пользователей. Эта ошибка присуща даже профессиональным дизайнерам интерфейсов, работающих с крупными компаниями.

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

Как видит пользователь, и чем это поможет дизайнеру

Прежде чем садиться за эскиз, надо чётко разделять своё восприятие и пользователя. Для создателя интерфейса, экран делиться на три рабочие области:

— Первая область: заголовок

— Вторая область: блок слева

-Третья область: блок справа

Простые догмы при работе с цветом в интерфейсах_1

Но другой человек, не создававший интерфейс, воспринимает в первую очередь информацию в блоке слева(2 область), потом заголовок(1 область) и только потом блок справа(3 область).

Простые догмы при работе с цветом в интерфейсах_2

Почему так происходит? Мозг пользователя устанавливает свой порядок, чтобы лучше усвоить информацию. Итак, если смотреть глазами пользователя, то получится: беглый взгляд на заголовок, повышенное внимание к блоку слева и только потом взгляд на правый блок. Затем мозг связывает блоки слева и справа в одно.

Теперь к главному. Когда пользователь работает с областью слева, он игнорирует блок справа. Конечно, он в курсе, что там тоже есть информация и набор функций, но мозг блокирует эту информацию и человек первое время «не видит» область справа. Элементы внутри рабочих блоков тоже могут попадать в «слепую» зону.

Что делать?

Интенсивность цветов кнопок и элементов внутри блоков должна гармонировать с основным цветом, но чуть ярче по окраске. Допустим, если основной тон блока нежно — голубой, то элементы (кнопки) внутри должны быть на четверть тона темнее.

Связь цветов и функций

Ещё один капкан, в который часто попадаются дизайнеры – устойчивые ассоциации: когда зелёный цвет может быть только подтверждением, а красный – отменой, запретом действия. Немало интересных задумок было загублено из-за следования данной системе. Главное – идеальное сочетание цветов и их логическое обоснование, а не отложившаяся в голове ассоциация.

Простые догмы при работе с цветом в интерфейсах_3

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

Ещё один важный момент: на экранах разных компьютеров цветовой диссонанс может стать сильнее, в силу их ограниченности по цветовому пространству. Поэтому нужно ориентироваться не только по результату на холсте.

Как видите, нужно быть очень внимательным к контрастам и взаимодействию цветов, начиная от фона и заканчивая шрифтом и обводкой кнопки.

Что ни в коем случае нельзя применять при дизайне интерфейса:

* Чтобы не было «эффекта грязи» не стоит использовать чёрный и серый тона на цветном фоне. Бывают случаи, когда и на белом фоне применять серый и чёрный не рекомендуется.

* Для фоновой окраски не подходит глухой серый тон. Если на холсте есть цветные элементы, то серый должен немного «отразить» их.

* При работе с колорпикером исключите его правый крайний угол для основных тонов.

* О веб-цветах тоже лучше забыть – они неоригинальные и плохо сочетаются друг с другом.

Простые догмы при работе с цветом в интерфейсах_4

Включай Abode Kuler!

При создании палитры интерфейса необходимо обратиться к Kuler или близкой к нему программе с теми же основными характеристиками и уровнем качества. Конечно, среди дизайнеров встречаются люди с идеальным вкусом и зрением, способные самостоятельно, «на глаз», подобрать 4-5 контрастных сочетаний цветов, но в большинстве случаев это умение приходит с опытом, поэтому не стоит игнорировать умные программы.

Простые догмы при работе с цветом в интерфейсах_5

Когда основной цвет выбран, в силу вступают ограничения по подбору. При работе с Abode Kuler подбирать цвета к основному можно по рекомендациям, изложенным ниже:

* Идеальный второй цвет к основному подбирается через Color rule, в графе Complementary. Также можно найти его в правой стороне Triad, в той же вкладке.

* «Серые», нейтральные тона и полутона ищите в Monochromatic, но на этом работа с ними не закончиться: opacity бледного контрастного тона придётся понижать, или выбирать ручную настройку и делать его серее. Если сохранить заданные параметры, то он будет чересчур активным.

* Для работы с акцентами надо открыть вкладку Color rule, войти в Triad и работать с левой стороной.

* Чтобы создать контрастный текст, нужно зайти в Comproud – в его левой стороне найдётся отличный тёмный, « сухой» тон.

Конечно, эти рекомендации нельзя воспринимать прямо – в процессе работы вы поймёте, где и что надо поменять.

Новичкам надо уяснить, что чистые оттенки не всегда подходят для окраски элементов – придётся попотеть, внимательно подбирая нужный тон, выстраивая контрастность и сравнивая сочетаемость.

Тонкая граница между цветами даёт положительное восприятие

Ещё в начале статьи было сказано о том, насколько хорошо человеческий глаз воспринимает оттенки. Если привести это в цифрах, то пользователь способен заметить контраст в 1.000.000.1, поэтому переживать и делать цветовой диссонанс внутренних элементов, слишком заметным не стоит – это произведёт впечатление чего-то грубого и дешёвого.

Простые догмы при работе с цветом в интерфейсах_6

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

Естественность во всём

Не следует использовать оттенки, не встречающиеся в природе – чрезмерно яркие, «стеклянные», ядовитые или неоправданные сочетания холодных и тёплых оттенков. Последнее можно проверить – посмотрите на свой холст ещё раз и прислушайтесь к впечатлениям. Если общая картина создаёт эффект общего освещения, то сочетание подобрано хорошо. Добиться такого можно при использовании естественных холодных и тёплых тонов с оттенками теней.

Простые догмы при работе с цветом в интерфейсах_7

Неправильное впечатление может создаваться, если вы, к примеру, поместили холодный тон на тёплый (синий на красный). Это создаёт конфликт в восприятии и смотрится искусственно.

«Одно пятно на всю картину» — правило одного акцента

Если вы откроете учебник по академической живописи, то легко найдёте одно из главных правил: в картине должна быть, лишь одна точка визуального напряжения. Проще говоря, одно яркое пятно (акцент) на всю картину.

Простые догмы при работе с цветом в интерфейсах_8

Простые догмы при работе с цветом в интерфейсах_9

Простые догмы при работе с цветом в интерфейсах_10

В маркетинге есть похожая рекомендация: поставьте пользователю границу между главным и второстепенным сами – знакомое профессионалам «call-to-action» (призыв к действию). Таким call-to-action оправданно является кнопка внизу блока, перед которой помещается информация. Она и создаёт акцент. Из этого следует, что такая кнопка должна быть заметна, но не навязчива. Выполнить это условие можно благодаря активному контрастирующему цвету в небольшом по размеру элементе.

Простые догмы при работе с цветом в интерфейсах_11

Однако если возникла ситуация, когда нужно сделать акцент не на кнопке или другом мелком элементе, а целом блоке, можно создать две контрастные друг другу рабочие области.

Мы рассмотрели главные моменты в работе с интерфейсом, которые нельзя забывать при разработке палитры. Они помогут вам не ошибиться на первых порах. Удачи!

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