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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть 7 цветовых контрастов в соответствии с Йоханнес Иттенхотя я упомяну только 3.
1. Контрастность оттенка
Желтый, красный и синий в полной интенсивности являются прямыми и яркими контрастами. Вторичные оттенки дают менее четкое различие, но все же работают, как и третичные оттенки, хотя ни один из них не дает таких потрясающих результатов, как с первичными оттенками.
2. Дополнительный контраст
Два цвета контрастируют друг с другом, если при смешивании они образуют нейтральный серый. Их также называют странными парами. Если они смежные, они повышают яркость и интенсивность, а смешанные вместе они взаимно компенсируют друг друга Каждый цвет имеет один и только один дополнительный; на цветовом круге пары расположены по диагонали напротив друг друга.
3. Светло-темный контраст
Если вы хотите поэкспериментировать с одноцветным веб-сайтом, использование разных значений одного и того же оттенка может привести к потрясающим результатам. Часто используемый в минималистичном веб-дизайне, вы также можете получить отличные результаты на основе светлого и темного контраста, если вы хотите предоставить пользователю варианты цвета темы. Этот контраст также используется для дизайна в оттенках серого.

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

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

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

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

Вывод

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *