Визуальная иерархия для начинающих

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

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

Неправильное использование или отсутствие визуальной иерархии может привести посетителей веб-сайта в замешательство и растерянность.

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

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

Визуальная иерархия разбита

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

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

Размер

Изменение размера объектов может либо помочь привлечь к ним внимание, либо отвлечь от них.

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

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

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

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

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

Цвет и контраст — две части визуальной иерархии, но они безупречно работают вместе, чтобы привлечь внимание.

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

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

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

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

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

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

Паттерны F и Z

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

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

Образец F

Шаблон F — идеальный выбор для дизайнов, содержащих объемный текст. Дизайн следует за буквой, названной в ее честь, начиная с верхнего левого угла и двигаясь вправо.

После этого зритель просматривает корешки в поисках подзаголовков или заголовков.

Шаблон поочередно называют E-образным, хотя F-образный является более знаковым.

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

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

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

Шаблон Z

В то время как F-шаблон подходит для веб-сайтов с большим количеством текста, Z-шаблон отличается.

Z-шаблон идеально подходит для веб-сайтов или объявлений, не содержащих несколько абзацев текста.

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

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

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

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

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

Понимание типографики

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

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

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

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

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

Важность интервала

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

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

Окружение контента пространством обеспечивает простой и понятный UX-дизайн.

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

Использование выравнивания

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

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

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

Для строго визуального дизайна с упрощенным фокусом выравнивание всех элементов по центру создает привлекательный дизайн.

Использование сеток

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

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

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

Близость и отношение

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

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

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

Шрифты и визуальная иерархия

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

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

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

Советы по визуальной иерархии

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

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

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

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

Заворачивать

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

Использование контраста может создать яркие цвета и стать первым, что читатели заметят в дизайне.

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