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

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

Note: Это четвертый пост в серии, посвященной принципам проектирования.Вы можете найти первые три сообщения в серии здесь:

• “ Принципы проектирования: визуальное восприятие и Принципы Gestalt ² ”
• “ Принципы проектирования: пространство и фигура-фон Relationship ³ ”
• “ Принципы проектирования: соединения и разделения элементов через контрастности и Similarity ⁴ ”

Видео Weight

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

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

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

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

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

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

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

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

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

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

• SizeБольшие элементы имеют более визуальный вес, чем мелкие элементы .
• ColorТеплые цвета продвинуться в плане и склонны весить больше, чем холодных цветов, которые отступают на второй план.Красный считается тяжелый color ⁶ и желтый легкий .
• Value Темные элементы имеют более визуально weight ⁷ чем свет элементы .
• PositionЭлементы, расположенные выше в композиции воспринимаются весить более элементов, расположенных ниже по составу.Чем дальше от центра или доминирующей области композиции, тем больше визуальный вес элемент будет носить с собой.Элементы на переднем плане имеют больший вес, чем элементов в фоновом режиме .
• TextureТекстурированные элементы появляются тяжелее, чем нетекстурированных объектов.Текстура делает элемент появляется трехмерное, которая дает появление массы и физического веса .
• ShapeОбъекты с правильной формы появляются тяжелее объектов с неправильной формы.Неравномерность создается впечатление, что масса была удалена из правильной формы .
• OrientationВертикальные объекты появляются тяжелеечем горизонтальные объектов.Диагональные элементы нести больший вес .

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

• DensityУпаковка более элементов в заданном пространстве увеличивает визуальный вес пространстве.Зритель воспринимает большую или темнее Комбинированный элемент, в отличие от нескольких небольших и легких элементов .
• Местного белого spaceБелое пространство, кажется, нет никакого визуального вес, потому что он видел, как пуста.Любой объект, находящийся в этом пространстве будет казаться тяжелее, потому что пространства вокруг него .
• Внутренняя interestНекоторые вещи более интересными, чем другие.Более сложным или запутанным элемент, больший интерес она привлечет и она будет все больше привлекать внимание.Ваши собственные интересы, также играют свою роль.Если вы больше заинтересованы в автомобилях, чем в плоскостях, то изображение автомобиля будет захватить ваше внимание больше, чем изображение плоскости .
• DepthБольше глубина field ⁸ дает элемент в фокусе увеличилось визуальный вес, скорее всего, из-за контраста между фокусом и нечеткости областях .
• SaturationНасыщенные цвета выглядят тяжелее, чем ненасыщенный цветов .
• Восприятие физической weightМы знаем, что дом весит больше, чем обувь.Изображение дома будет весить более визуально, чем изображение ботинка, потому что мы ожидаем дом, весят больше, .

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

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

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

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

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

• Рисунок-groundВизуальные веса могут быть использованы для разделения двух, давая рисунок больший вес, чем фон .
• ProximityПространство между элементами приводит к различным количеством местного белого пространства и различных плотностей объектов в пространстве .
• Сходство и contrastВы можете использовать визуальный вес, чтобы сигнализировать либо.Контраст приведет к большей визуальной веса в контрастный элемент.Элементы с подобными визуальными веса, естественно, проявляют сходство .
• Фокусное point (Следующая тема из серии)Точки притяжения в композиции являются координационные центры, и они несут больше визуальный вес по сравнению с другими элементами .
• Прошлое experienceОпыт зрителя будет способствовать тому, сколько самостоятельный интерес они думают, что элемент содержит .

Видео Direction

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

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

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

• Форма elementElement’ с форма может создать оси, проходящей через него, и это ось может предложить направление.Премьер-ось, как правило, рассматривается как параллельно с визуальным руководством была элемента .
• Расположение elementsВизуальный вес сила, которая может появиться, чтобы привлечь или оттолкнуть соседние элементы.Эта сила будет двигаться в направлении, которое соединяет оба элемента .
• Предмет elementСтрелка, указывая пальцем, или взгляд глаза все предлагаю смотреть в определенном направлении .
• MovementЭлемент может буквально пройти через вашу конструкцию, и его движение будет иметь направление .
• Структурная skeletonКаждая композиция имеет структурный скелет, с силами, которые, естественно, бегут вдоль и с помощью различных осей.Это, вероятно, нужно немного больше объяснений .

Структурная Skeletons

В своей книге Искусство и визуальное восприятие: Психология творческого Eye ⁹ , Рудольф Arnheim ¹⁰ предложил идею структурного скелета за каждым холсте .

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

¹¹

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

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

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

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

Визуальные направления и Gestalt

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

• Единый connectednessЛинии, соединяющие элементы имеют направление.Глаз взгляд создает воображаемую линию между глазом и то, что глаз и смотрел на .
• ContinuationЭтот принцип относится к элементов, расположенных вдоль линии или кривой, так, как будто они движутся в направлении линии или кривой .
• Общие fateЭлементы рассматриваются как имеющие общую судьбу являются те, которые появляются или перемещения для перемещения в одном направлении .
• ParallelismДля того, чтобы элементы …
  
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  
  Главная → Вебдизайн → 12.12.2014 by design.smashingmagazine.com