Как люди обрабатывают визуальную информацию в веб-дизайне

За последние несколько лет разработка веб-сайтов и пользовательских интерфейсов стала намного проще. Существует так много инструментов, которые вы можете использовать, что делает бессмысленным начинать с нуля при разработке пользовательского интерфейса (ознакомьтесь с нашей новой компиляцией пользовательского интерфейса). Но я здесь не для того, чтобы спорить о смерти веб-дизайна..

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

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

Принципы перцептивной организации

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

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

Закон Сходства

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

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

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

Закон близости

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

Этот принцип в последнее время широко используется в Интернете, особенно при работе с петли контента, например в блогах и интернет-магазинах.

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

Для вашего удобства я процитирую также Википедию, в которой говорится:

Закон Доброй Формы

Этот закон, также известный как Закон Прагнанца или Гештальт, гласит, что мы склонны группировать объекты вместе, если они сформировать шаблон, который является простым, регулярным и упорядоченным. Наш ум пытается разделить сложные и воспринимаемые сложные формы на множество групп просто понятных форм; это привело к важность краткости.

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

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

Теория цвета, восприятие и использование

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

Цветовые свойства

Еще есть три объективных свойства цвета; оттенок, значение а также интенсивность.

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

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

Значение это свет или темнота цвета, называемого высокое значение для светлых тонов или малоценная для темных цветов.

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

Самая высокая интенсивность каждого цвета - это оттенок, который они показывают на цветовом круге (см. Ниже), а самая низкая - серый цвет..

Цветовые контрасты

Ссылаясь на вышеупомянутые законы сходства, умы воспринимающих создают группы маленьких объектов, которые они видят, основываясь на сходных и разных свойствах - часто цветах..

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

Согласно Иоганнесу Иттену, существует 7 цветовых контрастов, хотя я упомяну только 3.

1. Контрастность оттенка

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

2. Дополнительный контраст

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

3. Светло-темный контраст

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

Если вы хотите добиться оставшихся 4 цветовых контрастов, вы можете найти их здесь.

Создание палитр и проверка контрастов

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

Для веб-целей вы можете проверить контрасты, которые вы выбрали для использования в webAIM, на сайте Джонатана Снука, или загрузить экземпляр анализатора цветового контраста группы Paciello здесь..

Заключение

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

Примечание редактора: Этот гостевой пост написан для Hongkiat.com Мартон Фекете. Мартон - венгерский разработчик сайтов, недавно подключившийся к WordPress. Он энтузиаст редизайна и независимый автор контента, который любит играть в ролевые игры в свое свободное время.