Принципы веб-дизайна: визуальный вес и визуальное направление

Posted on by riasevastopol

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

Данное явление принято обозначать термином «визуальный вес» (visual weight), а направление, которое задает эта сила, — «визуальное направление» (visual direction). Познание данных концепций крайне важно в том случае, если вы желаете, дабы в дизайне вашего лендинга находилась иерархия, плавность, ритм, баланс и конено конверсия.

Визуальный вес

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

К примеру, возможно создать контраст, сделав один элемент громадным, а второй — весьма мелким. Данный прием превосходно покажет их важность и неравенство элементов для визитёра.

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

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

  • применение принципов и Визуальное восприятие гештальта в веб-дизайне

Как измерить визуальный вес?

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

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

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

Размер
Большие элементы владеют громадным визуальным весом, чем небольшие.

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

Оттенок
Чёрные элементы владеют громадным визуальным весом, чем яркие.

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

Текстура
Объекты, владеющие текстурой, кажутся «тяжелее» ровных. Текстура формирует иллюзию трехмерности объекта, как бы придавая ему физический вес и массу.

Форма
Объекты верной формы кажутся «серьёзнее» элементов неправильной формы, т. к. последние подсознательно воспринимаются как верные, но лишенные части собственной массы.

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

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

Плотность размещения
Размещение множества элементов во забранном пространстве дает этому пространству больше «веса». Пользователь будет принимать пара маленьких, «легких» элементов как один «тяжелый».

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

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

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

Насыщенность
Насыщенные цвета кажутся «тяжелее».

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

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

  • подобия и Принципы контраста как средства ясности в веб-дизайне

целостность восприятия и Визуальный вес

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

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

различие и Сходство
Управление визуальным весом разрешает достигать и того и другого: отличие визуального веса объектов формирует контраст, а объекты с родным весом будут зрительно казаться схожими.

Фокус
Объекты, находящиеся в фокусе, имеют больше «веса», чем остальные элементы композиции.

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

Визуальное направление

Тогда как визуальный вес притягивает взор к какой-то конкретной области, визуальное направление показывает взору наблюдателя, куда двигаться дальше.

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

Так же как и при с «весом», вы имеете возможность поменять визуальное направление, изменяя параметры элементов, черт которых тут, к сожалению, в десять раз меньше.

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

Положение элемента
Визуальный вес формирует иллюзию притяжения или отторжения находящихся рядом объектов. Линия притяжения двух объектов может задавать визуальное направление.

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

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

Структурная база
Любая композиция владеет собственной структурной базой, на протяжении которой, по разным ее осям, движутся силы, управляющие вниманием наблюдателя.

Разглядим эту чёрта чуть подробнее.

Структурная база

В собственной книге «визуальное восприятие и Искусство» Рудольф Арнхейм (Art and Visual Perception: A Psychology of the Creative Eye, Rudolf Arnheim) высказал идею о том, что любая композиция имеет собственную структурную базу, так что, даже в том случае, если холст безлюден, отечественный взор под действием комплекса сил, как это представлено на изображении ниже, будет притягиваться к определенным его частям.

«Структурная сеть» Рудольфа Арнхейма

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

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

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

  • Эмоциональный дизайн как оптимизация продаж

целостность восприятия и Визуальное направление

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

Равномерная связанность
Линии, объединяющие элементы, имеют направление. Взор формирует мнимую линию между объектом наблюдения и глазом наблюдателя.

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

Единое назначение
Элементы, каковые движутся в одном направлении, воспринимаются как имеющие единое назначение.

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

Неспециализированная ориентация композиции

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

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

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

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

  • Муха на писсуаре, либо 5 правил убеждающего веб-дизайна

Примеры

В качестве примеров заберём пара реально существующих веб-страниц и проанализируем распределения «веса» на них.

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

В качестве главного инструмента оценки будет употребляться так называемый squint test — для этого нужно прищурить глаза так, дабы кое-какие из элементов композиции провалились сквозь землю из территории внимания. Те, каковые останутся, возможно назвать самые «тяжёлыми».

Текст в центре внимания

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

Страница статьи на сайте bureau.tsailly.net

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

Ссылки в некоей степени покупают «вес» за счет контраста с фоном, но это частично умаляется их холодным оттенком.

Элемент, владеющий мельчайшим визуальным весом — это текст в правой колонке. И это обосновано: главный текст статьи по определению обязан завлекать больше внимания, чем что-либо на сайдбаре.

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

В случае если применить squint test, вся правая колонка исчезает, и перед вами остается только текст и заголовок статьи.

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

  • Психология текста: шрифт, цвет, форматирование

броская домашняя страница

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

Примечание. К моменту публикации этого материала компания Create Digital Media остановила собственную работу.

Домашняя страница компании Create Digital Media

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

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

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

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

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

  • Теория цвета — как руководить вниманием пользователя?

Обман зрения

На лендинге, посвященном свадьбе Марты-дизайнеров и веб Хавьера, в «весе» соревнуются три элемента: изображения, зеленые элементы и разделительные линии меню — все они требуют к себе первостепенного внимания.

Марты Графика и Сайт

Хавьера
Большие изображения чёрного оттенка, окруженные безлюдным пространством. Каждое изображение наделено смыслом и приводит к интересу.

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

Элементы меню
Чёрные, большие и также окружены безлюдным пространством.

Логотип на первый взгляд думается «тяжелее» главного текста, но в действительности он «легче», чем элементы меню, не смотря на то, что все же и достаточно заметен. Тут не следует забывать о субъективности восприятия — вы имеете возможность посчитать в противном случае.

В случае если совершить squint test и опять прищуриться, элементы меню и логотип сливаются в один объект. Графика и разделительные линии остаются видны, а текст представляется большими блоками. Другими словами все элементы остаются видимы, пускай вы и не имеете возможность разобрать текст.

Что касается ориентации, то в то время, когда на экране виден только верхний раздел — El evento — разделительная линия придает странице горизонтальный вид. Но всего представлено 4 раздела, и в случае если наблюдать на всю страницу полностью, то, уже выстроенные в колонку, эти горизонтальные линии придают композиции вертикальное направление.

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

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

  • Как применять психологию цвета для повышения конверсии?

Мастерство в Стэнфорде

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

Сайт Stanforfd не

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

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

В случае если совершить squint test, то все элементы остаются видимыми продолжительнее, чем возможно было бы предположить. Это связано с присутствием громадного контраста ярких и чёрных тонов в каждом из элементов.

В итоге видимыми остается легко размытое верхнее изображение и уже совсем размытые треугольники под ними.

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

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

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

  • 5 секретов создания действенного футера для вашего сайта либо лендинга

Заключение

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

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

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

Высоких вам конверсий!

По данным smashingmagazine.com, image source: aaronstump

Случайные статьи:

Тренды и тенденции современного веб-дизайна


Подборка похожих статей:

riasevastopol

More Posts