Цвета В Интерфейсе

Я хотел бы рассмотреть интересующую меня тему создания пользовательского интерфейса.

Вероятно, это будет серия статей.

Итак: пользовательский интерфейс….

Что это такое? Я считаю, что это важная составляющая успешного продукта.

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

Я считаю удобным классифицировать пользовательский интерфейс по его конечному использованию:

  • Программный интерфейс (включая операционные системы и различные приложения);
  • Игровой интерфейс;
  • Интерфейс сайта.

Возможно, моя классификация слишком общая или неполная.

Поправьте, если хотите.

С первым названием списка все понятно.

При создании интерфейса наибольший упор делается на функциональность.

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

В качестве примера хотелось бы рассмотреть нашу «любимую» Windows. Лишь в последних версиях разработчики начали вкладывать некий рационализм.

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

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

Для того чтобы найти то или иное решение, обычно не приходится слишком много думать.

Все интуитивно понятно.

Идеально подходит для пользователя.

Моя мечта — операционная система с графической оболочкой WoT. С сайтами все гораздо сложнее.

Если вы обратите внимание на интерфейсы веб-сайтов, вы столкнетесь с невероятным разнообразием решений.

И, обычно, кто-то идет в лес, кто-то за дровами.

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

Довольно много оптимальных решений.

Но так же часто можно встретить и совершенно непроработанные сайты, где вроде бы старались, но видимо перестарались.

На данный момент я хочу сосредоточиться именно на разработке интерфейсов веб-сайтов.

Хотя эта статья носит обобщенный характер.

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

Но в любом случае основная задача любого сайта – донести информацию.

И чтобы оно дошло до адресата (в прямом и переносном смысле), оно должно быть доступным, читаемым и адаптируемым.

Для достижения этой цели значительное внимание необходимо уделить разработке дизайна.

Невозможно рассмотреть все тонкости в одной статье.

Теперь я хочу сосредоточиться на цвете.

Мне почему-то кажется, что надо начать с него.

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

Но я остановлюсь не на цветотерапии, а на чуть более практических вещах.

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

Я не спорю, что у многих разработчиков «набитый» глаз и виртуозная интуиция.

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

Существует множество концепций выбора цветовой гармонии.

Опишу, на мой взгляд, самый простой и эффективный.

Существует такое понятие, как цветовой круг Иттена.

Это выглядит примерно так:

Цвета в интерфейсе

Содержит 12 цветов.

Это цвета, которые считаются наиболее знакомыми и легкими для восприятия человеком.

Основными считаются три основных цвета: желтый (ffff00), синий (0000ff) и красный (ff0000).

Весь цветовой круг основан на этих цветах.

Они первичны, потому что если у вас есть эти три чистых цвета, то, смешав их, можно создать целую палитру.

Любой цвет. Цвета второго порядка получаются путем смешивания основных цветов: мандаринового (ff8000), пурпурного (ff00ff), зеленого (00ff00).

Цвета третьего порядка получаются путем смешивания основных цветов и цветов второго порядка.

Их шесть:

  • Янтарный (ffc000)
  • Киноварь (ff4000)
  • Светло-вишневый (ff0080)
  • Фиолетовый (8000ff)
  • Лазурный (0080ff)
  • Ядовитый зеленый (80ff00)
Этот круг, можно сказать, является панацеей от всех бед. Именно с его помощью можно подобрать наиболее удачные цветовые сочетания.

Для достижения этой цели существуют шесть принципов цветовой гармонии.

Так называемые цветовые модели.

  1. Монохромные цвета.



    Цвета в интерфейсе

    В основе один цвет и разная его насыщенность и прозрачность.

    Монохромные комбинации очень просты в использовании и достаточно мягки для восприятия.

    Но им часто не хватает выразительности.

  2. Похожие цвета

    Цвета в интерфейсе

    Цвета, соседствующие на цветовом круге.

    Эти цвета имеют схожие характеристики световых волн, поэтому их очень легко комбинировать.

  3. Дополнительный.



    Цвета в интерфейсе

    Это цвета, расположенные строго друг напротив друга.

    Они обеспечивают наибольший контраст. Это все запоминающееся, живое, дерзкое.

  4. Близкие и взаимодополняющие.



    Цвета в интерфейсе

    Здесь все просто! Берутся противоположные цвета, например A и B. Соседи B B(l) слева и B(p) справа подсвечиваются.

    На самом деле, комбинация A, B(p) и B(l) и есть искомое значение! Играя с яркостью, можно получить очень интересные варианты.

  5. Двойное дополнение.



    Цвета в интерфейсе

    Здесь тоже все просто.

    Берем B(p) и B(l) и ищем для них дополнительные (противоположные) цвета.

    Все такое же заводное, живое, дерзкое только в квадрате.

  6. Триадные цвета.



    Цвета в интерфейсе

    Расположен в трёх секторах.

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

    Однако чем ниже яркость цвета, тем больше возможностей.

    Основные цветовые триады слишком резкие.

    Вторичные и третичные триады более мягкие.

Принцип работы с цветом с помощью круга Иттена прост: выберите 2-4 цвета, используя принципы цветовых гармоний, и экспериментируйте с яркостью-контрастом, заполнением области.

Ну и кроме того, отдельно стоит отметить ахроматические цвета.

Никаких цветов, никаких оттенков.

Только градация от черного к белому.

Полный спектр серого.

Огромный выбор.

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

В противном случае излишняя активность цвета будет раздражать.

Хотите привлечь внимание к цвету и сделать свой сайт максимально ярким и выразительным? Возьмите контрастные цвета.

Добавьте немного чистого белого или бархатистого черного.

Сделайте большое меню и объемный шрифт. Этого будет достаточно.

Для серьезного проекта вам нужен спокойный, ненавязчивый интерфейс — монохромные сочетания вам помогут. И важное правило выбора цвета интерфейса: минимализм.

Пять цветов — это максимальный предел.

Не перегружайте свой сайт всеми цветами радуги.

Лоскутное одеяло здесь не понадобится.

Ваша задача – донести информацию, а не напугать людей красочностью.

Использованные материалы: Адамс Мориока и Терри Стоун.

«Цветовой дизайн.

Мастер-класс».

Яндекс Цвет Теги: #интерфейсы #веб-дизайн #интерфейс #цвет #цветовая схема

Вместе с данным постом часто просматривают: