РУС
ENG
УКР

web/design/developments

Роль цветовых сочетаний в веб интерфейсе

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

Цвет — метод создания баланса элементов

Важно помнить, что пользователь всегда видит экран как рабочие области.

f132029e154549d597d93b0fa33f9c75

Как правило, последовательность восприятия у пользователей, будет несколько отлична от нумерации рабочих областей, а именно: workspace 2 → workspace 1 → workspace 3. При этом workspace 2 и 3, очевидно, будут восприниматься как основная и второстепенная часть одного сценария.

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

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

631b5a0a7ca642f0901788dc17a059e6

В первом варианте сбивается изначально заданный баланс: элементы списка справа конфликтуют с горизонтальной шапкой. Во втором варианте он сохранен: внимание в первую очередь направленно на заголовок Workspace 1

Важно: сперва найти глобальный элемент, потом в нем найти конкретную функцию.

Используй только сознательно подобранные цвета

Создавая дизайн интерфейса, многие специалисты повторяют одинаковую ошибку -  они используют цвета для элементов, основываясь на абстрактных представлениях о том, какими они должны быть. Например, «подтвердить» всегда должно быть зеленым, а «отменить» — красным.

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

Важно: случайных цветов не бывает вообще. Человеческий глаз способен улавливать малейшие отличия и подсознательно всегда воспринимает цветовой диссонанс.

Пара примеров и правок подобного отношения:

6a8053c897f54d88826b31135d3e1b47

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

Есть несколько табу, которые нужно всегда держать в голове:

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

491b4b90a0b84e339ce82fb610b5d69b

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

Всегда используйте Kuler!

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

По сути дела, после выбора основного цвета пространство для маневра сразу ограничивается вот этими правилами цветовых отношений:

 

 

5cc6b31c64854c869662388fcca3afff

 

Можно выделить несколько рекомендаций для работы с кулером:

  1. Наилучший второй цвет к уже подобранному основному находится либо по Complementary, либо по правой стороне Triad
  2. «Серые» оттенки к основному цвету следует подбирать в Monochromatic, контрастный блеклый фон находится слева от основного цвета, хотя обычно ему приходится либо понижать opacity, либо делать еще более серым вручную (по умолчанию он слишком активный)
  3. Акценты находятся по левую сторону Triad
  4. Сухой, темный оттенок для контрастного текста обычно находится слева в Compound

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

Делай контраст тоньше

Человеческое зрение очень хорошо умеет адаптироваться к условиям различного контраста, например, его статический контраст равен примерно 100:1, а динамический может достигать 1.000.000:1, поэтому не следует бояться его понижения внутри элементов. При этом восприятие контрастности повышается с уменьшением циклов (грубо говоря, разноцветных элементов). В отличие от реального мира, компьютерный интерфейс имеет весьма примитивную структуру контрастов, небольшое количество цветов и типов элементов. Хороший пример грамотно выстроенного контраста — текущая версия Facebook:

639bb45eeec74a388734ac2d91b1db52

Делай естественно

Хорошим показателем того, что палитра в интерфейсе удалась, если он создает «на вкус» ощущение единого освещения. Это достигается путем использования естественных контрастов, насыщенных оттенком теней. Например, не рекомендуется использовать холодное на теплом в качестве акцента. Это противоестественно, в природе такого не бывает. Даже подобранные по цветовым отношениям синий в красном смотрится хуже, чем красный в синем:

58c79728c28b469f899ae8fecec92bb6

 

Один акцент

Эта рекомендация пересекается так же с рекомендациями из общего маркетинга: следует давать пользователю ясный фокус на одном первостепенном сценарии и делать остальные сценариии явно второстепенными. Отсюда следует хрестоматийное call-to-action. Однако следует понимать, что в 90% случаев call-to-action является кнопкой и предваряется какой-то информативной частью. Это означает что она должна быть легко находима, но не бросаться в глаза первой. Это достигается, например, при помощи яркого, активного цвета в элементе небольшого размера.

b7f8782bcf6046cc9c6ce22a89c54541

Call-to-action как часть сценария workspace 2

c33cd29179684463875a12daee49f223

Call-to-action как часть сценария workspace 3

a616aa89eee94ed098287a089203934f (1)

Call-to-action как отдельный сценарий. Его можно было, также, сделать одинакового цвета с шапкой.

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

Пример от Webcreator - дизайн страницы входа на сайт Brelion

Мы обладаем большим позитивным опытом в создании граммотных интерфейсов.  Обращайтесь к нам.

Взято с http://habrahabr.ru/post/240693/


© 1999—2017 Webcreator. Создание сайтов. Киев. Украина
телефон: +38 044 222-88-70, эл. почта: in@webcreator.kiev.ua