Дизайн

Якорные объекты: баланс в композиции

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

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

rdYo1xe2vTYhttps://dribbble.com/shots/2830781-Giant-Store

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

8Ga3xhW73_Uhttps://dribbble.com/shots/3345010–Made-You-Look-52-Locomotion

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

Расположение якорных объектов

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

«Размещение по точкам»

WVf8qck34KEЯкорные объекты привязаны к одному из углов прямоугольника или его визуальному центру

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

lWub-XDpJk0https://dribbble.com/shots/3299965-Designer-Profiles-Part-3

Элементы расположены во всех якорных местах.

PdoFD9eOOyQhttp://atap.google.com/ara/

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

W4XGJKe_4hMhttps://dribbble.com/shots/2566950-Hello-Dribbble

А тут — верхний левый и нижний правый углы.

Одним из важных моментов размещения якорных объектов — наличие вокруг них «воздуха», то есть визуально отделить от других элементов. Это достигается или контр-пространством (вокруг «якоря» много пустого пространства), или использованием «менее плотных» объектов (которые визуально слабее: меньший кегль, слабее по цвету, тоньше начертание и т. д.). А теперь проанализируйте верхние примеры ещё раз.

Немного примеров, в которых полностью или частично не выполняется правило якорных объектов.

ftRf6bT7Z3YУчебная работа UI-марафона

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

95ydzEwmMg4vk.com/Учебная работа UI-марафона

А это яркий пример, когда размещение элементов выполнено в произвольном порядке. Оцените насколько легко воспринимать информацию в таком формате?

C6XQnQ97im4https://www.behance.net/gallery/28952225/Leading-celebrations-Abramovich-landing-page

В данном примере ошибки более чем очевидны. Главная проблема — автор пытался выделить все элементы экрана, сделать их заметными. И из-за этого между элементами стало мало «личного» пространства.

«Размещение по сторонам»

uhBOez0Ag9oРазмещение элементов по периферийным сторонам прямоугольника

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

AnD8aOhi58Yhttps://dribbble.com/shots/2233029-Narvai-Wellness-Spa

Верхняя и нижняя сторона экрана. Основной фокус на фотографии.

idgTL4XAIRUhttp://macdaily.me/news/краткий-обзор-mac-os-x-lion-developer-preview-install-loading/

Пример использования правила в повседневной жизни. Рабочий стол Mac OS.

9eNzbEsE8mUhttps://dribbble.com/shots/3408507-iine-card-landing-page-concepts

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

Немного практики

X0qgAFGOE5s«Расположение по точкам»

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

TTStz7khLi0«Расположение по точкам»

Центральная композиция и дополнительные «якоря» по углам формата. Отсутствие элемента в нижнем правом углу не мешает визуально дорисовывать прямоугольник.

prMZCDykULQhttps://dribbble.com/shots/2253726-Polar-Creative-Studio

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

ob0AQ0ra0Y8https://dribbble.com/shots/3514360-Minimal-Concept

Тот же комбинированный вариант. Навигация размещена по правой и верхней стороне формата.

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

После освоения основных способов расположения якорных объектов, можно перейти к более интересным комбинациям.

xSOs5sJ-4UE

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

fm2FnAa4-44

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

ZV3tKl4ik7I

vNKMf6OdQdI

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

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

AvexhuLuDUUhttps://dribbble.com/shots/3142179-Apollo-11

e9mNhumGvo4Пример создания внутреннего блока при помощи «якорей»

Улучшение работ при помощи «якорей». Было-стало

BwzH0BjLcFIБыло

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

ZGPPAyjm8TYСтало (учебная работа Александры Карневич)

Какие изменения были внесены: выделили чёткую «доминанту»; добавили контраст между заголовком, подписью (которая стала биркой) и основной информацией; расположили элементы на месте «якорей». Информация на баннере стала простой и понятной для изучения.

9100i-9BcS4Учебная работа Александры Карневич

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

dNe80dgyNjYУчебная работа Варвары Панюковой

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

Было: все элементы одного размера, из-за «случайного» расположения тяжело изучать информацию.

Стало: Первым мы замечаем девушку, вторым — заголовок, затем дополнительную информацию. Последовательность, которая за первых 5 секунд позволяет понять о чём идёт речь на постере.

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

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

Источник: vk.com

  • https://plus.google.com/114610153496982036539 Кирилл Птицын (webkir)

    Супер

  • Д

    Было/стало, особенно первый пример.
    В реальной жизни, вам никто не даст поменять размер макета.