Все культуры читаются сверху вниз, а большинство культур читается слева направо. Но хотя эти знания важны для дизайна страницы, дизайнеры знают, что задача намного сложнее.
Недавние исследования показали, что люди сначала просматривают страницу, чтобы понять, заинтересованы ли они в ней, прежде чем читать ее. Шаблоны сканирования имеют тенденцию принимать одну из двух форм, «F» и «Z», и вы можете воспользоваться этим в своем дизайне.
F-Patterns. Принципы визуальной иерархии
F-шаблоны применяются к традиционным текстовым страницам, таким как статьи или сообщения в блоге. Читатель просматривает левую часть страницы в поисках интересных ключевых слов в выровненных по левому краю заголовках или исходных тематических предложениях, затем останавливается и читает (справа), когда он или она сталкивается с чем-то интересным. Результат выглядит как F (или E, или что-то с еще большим количеством горизонтальных полос; но термин «F» застрял).
Как вы можете использовать это? Выровняйте важную информацию слева и используйте короткие жирные заголовки, маркеры и другие подобные элементы, привлекающие внимание, чтобы разбить блоки абзаца.
Z-модель. Принципы визуальной иерархии .
Z-шаблоны применяются к другим видам страниц, таким как реклама или веб-сайты, где информация не обязательно представлена в абзацах блока. Сначала читатель сканирует верхнюю часть страницы, где, вероятно, будет найдена важная информация, затем переходит в противоположный угол по диагонали и делает то же самое в нижней части страницы.
Веб-дизайнеры обычно конструируют свои страницы, чтобы явно соответствовать этому поведению, размещая наиболее важную информацию в углах и ориентируя другую важную информацию вдоль верхней и нижней полос и соединяя диагональ.
В приведенном ниже дизайне конференции важными элементами являются логотип (вверху слева), кнопка «зарегистрироваться сейчас» (вверху справа) и список ораторов (внизу), которые стратегически расположены в приятных местах Z-образец.
2. Размер имеет значение. Принципы визуальной иерархии.
Это достаточно просто: люди сначала читают большие вещи. Если ваш взгляд устремляется к «представлению» перед тем, как «расколоться» в приведенной ниже рекламе для театра « Молодой Вик» , вам следует немедленно связаться с психологом-перцептивом: вы, вероятно, сможете заработать хорошие деньги, проходя тестирование как редкая аномалия.
Что интересно, эта тенденция на самом деле достаточно сильна, чтобы отвергнуть правило сверху вниз. На приведенном выше изображении «взлом» переопределяет «время действовать», потому что оно больше и слева (поэтому правило слева направо помогает).
Но на следующей странице « Годового отчета: кампания за права человека 2012» (разработано в пятой колонке СМИ ) мы читаем крупным шрифтом «Борьба за равенство на следе кампании» перед текстом прямо над ним «Выборы 2012». Принципы визуальной иерархии
«Выборы 2012» – это порядок информации самого высокого уровня: он рассказывает нам общую тему, к которой относится информация, представленная ниже. Но дизайнер решил, что заголовок статьи был более интересным для читателей, и поэтому оценил его так, чтобы его читали первыми.
3. Пространство и текстура. Принципы визуальной иерархии
Еще один способ привлечь внимание – дать контенту достаточно места для дыхания . Если вокруг кнопки остается значительное отрицательное пространство или строки в текстовом блоке широко отслеживаются, эти элементы будут более легко видны читателям. Как вы видите на изображении ниже (часть DrawtoClick сайта «s), интервал может быть элегантной альтернативой или дополнением к использованию размера. Здесь, точка продажи, «Notre agence vouscompagne…», написана очень мелким шрифтом, но она окружена избытком пустого пространства, что свидетельствует о ее важности. Ниже фразы «Le Compendre», «Le Réaliser» и «Le Partager» получают дополнительный акцент, будучи оторванными от окружающего пространства.
Когда люди говорят о «текстуре» в отношении визуальной иерархии, они не имеют в виду графические эффекты текстуры. Скорее, этот вид «текстуры» относится к общему расположению или структуре пространства, текста и других деталей на странице. Этот пример от Bright Pink хорошо иллюстрирует концепцию:
На первом изображении слово «Спорт» выше в иерархии, чем «бадминтон», потому что оно выше, крупнее и смелее. 2 изображение два слова примерно эквивалентны, благодаря черному прямоугольнику, который выделяет «бадминтон» и помещает его в свое собственное пространство.
На третьем изображении фоновая каракули прерывает пространство «Спорт», но не «бадминтон», и, следовательно, приводит к развороту, где «бадминтон» является самым высоким в иерархии. Такое развитие трудно предсказать, поэтому дизайнеры часто связывают его с целостным ощущением «текстуры».
4. Вес шрифта и сопряжение. Принципы визуальной иерархии
Выбор шрифта имеет решающее значение для установления визуальной иерархии. Среди наиболее важных атрибутов шрифта – вес, ширина штрихов, составляющих его буквы, и стиль, например, с засечками и без засечек. Другие модификации, такие как курсив, также могут сыграть свою роль. Обратите внимание, как гарнитура влияет на порядок иерархии слов в приведенном ниже веб-дизайне для The Tea Factory : «идеальные чаи, которые помогут вам согреться» – это главное, но различия в весе шрифта и курсиве, в дополнение к размещению слов, создают более динамичный, менее линейный, опыт чтения. «://azbyka.com.ua/foto/tea-factory.jpg” /> В некоторых случаях цель состоит в том, чтобы представить разнообразную информацию как столь же срочную. Установка всех одинаковых размеров и веса обеспечит эквивалентность, но также сделает ее однообразной. Дифференциация шрифтов – это один из способов избежать этого, как на приведенной ниже обложке журнала Trendi . Принципы визуальной иерархии Здесь пять тизеров по периферии страницы одинаковы по иерархии, но достигают разнообразия, меняя два хорошо спаренных шрифта – один с засечками среднего веса, а другой – с легким, но высоким без засечек.
5. Цвет и оттенок.
Вот еще одна легкая задача: яркие цвета выделяются из приглушенных цветов или оттенков серого , в то время как более светлые оттенки кажутся более «отдаленными» и, таким образом, падают ниже в иерархии, чем более богатые, более темные. Веб-сайт « Где они» противопоставляет яркий свет и цветную подсветку черно-белой сетке эффекту яркости:
Веб- сайт Гуггенхайма использует цвет для акцентирования важной информации, такой как выбор местоположения, список выставок, которые в настоящее время просматриваются, и ссылки на специальные выставки. Принципы визуальной иерархии
Веб-сайт Музея Уитни, с другой стороны, устанавливает иерархию в рамках одного шрифта, веса и тона (черного) с использованием оттенка (что означает добавление белого к базовому тону, делая его светлее). «Кори Архангел о поп-культуре» явно находится под «Новым о рассказах Уитни» в визуальной иерархии не только потому, что он расположен ниже, но и потому, что его оттенок светлее, что делает его менее бросающимся в глаза на белом фоне. Принципы визуальной иерархии
Цвет имеет особое значение в дизайне мобильных приложений, где небольшой размер экрана ограничивает вашу способность использовать другие стратегии, такие как различие в размерах и широкий интервал. В приложении Grainger Industrial Supply кнопка «Перейти к оформлению заказа» окрашена в красный цвет, выделяя ее на любой странице, где она появляется. Панель «Сузить результаты поиска», напротив, является серой, что делает ее примерно эквивалентной в иерархии с другими элементами, такими как панель поиска и ссылки на товары.
Дизайн приложения для Grainger
6. Направление для дизайнеров.
Макеты страниц обычно разрабатываются в соответствии с сеткой вертикальных и горизонтальных линий, как по соглашению, так и потому, что это наиболее разборчивый формат. В такой системе появляется новый способ установить иерархию: сломать сетку. Текст, который расположен по кривой или диагонали, автоматически выделяется на фоне окруженного текста, заблокированного сеткой, занимая центральное место. Долгое время это была эффективная стратегия в рекламе, например, постер на автобусной остановке от Frost Design .Часто задаваемые вопросы. Принципы визуальной иерархии для дизайнеров.
1. Что такое визуальная иерархия?
Визуальная иерархия – это принцип дизайна, который направлен на упорядочивание элементов на странице таким образом, чтобы подчеркнуть их значимость и направить внимание пользователя. Она помогает пользователям быстро понять иерархию информации и эффективно взаимодействовать с контентом.2. Почему важна визуальная иерархия в дизайне?
Важность визуальной иерархии заключается в:- Повышении удобства использования. Помогает пользователям быстрее находить нужную информацию.
- Улучшении восприятия. Делает контент более понятным и привлекательным.
- Стимулировании взаимодействия. Привлекает внимание к ключевым элементам и побуждает к действию.
- Упрощении навигации. Облегчает ориентацию и передвижение по странице.
3. Какие основные принципы визуальной иерархии существуют?
Основные принципы включают:- Размер и масштаб. Более крупные элементы привлекают больше внимания и считаются более важными.
- Цвет и контраст. Яркие и контрастные элементы выделяются и привлекают внимание.
- Расположение и размещение. Элементы, находящиеся выше на странице или ближе к центру, воспринимаются как более значимые.
- Пространство и пустота. Оставление пространства вокруг элементов помогает им выделяться.
- Типографика. Использование различных шрифтов, размеров и стилей текста для подчеркивания важности информации.
- Формы и линии. Использование форм и линий для создания направляющих и акцентов.
4. Как использовать размер и масштаб для создания визуальной иерархии?
Применение размера и масштаба:- Заголовки и подзаголовки: Используйте большие размеры для заголовков и меньшие для подзаголовков, чтобы создать ясную структуру.
- Ключевые элементы: Увеличивайте размер важных кнопок или ссылок, чтобы они выделялись на фоне других элементов.
- Изображения и графика: Используйте крупные изображения для привлечения внимания к ключевым частям контента.
5. Как цвет и контраст влияют на визуальную иерархию?
Влияние цвета и контраста:- Цветовые акценты: Используйте яркие или насыщенные цвета для выделения ключевых элементов.
- Контрастные сочетания: Применяйте контрастные цвета для текста и фона, чтобы улучшить читаемость.
- Цветовая гармония: Убедитесь, что выбранные цвета гармонируют друг с другом и не отвлекают от основной информации.
6. Как правильно использовать расположение и размещение элементов?
Принципы размещения:- Важные элементы сверху: Размещайте ключевую информацию в верхней части страницы, где она сразу заметна.
- Центральное расположение: Элементы, размещенные ближе к центру, обычно привлекают больше внимания.
- Последовательность размещения: Располагая элементы в логическом порядке, можно улучшить восприятие информации.
7. Как пустое пространство помогает в создании визуальной иерархии?
Роль пустого пространства:- Разделение элементов: Создание пустого пространства между элементами помогает четко разделять их и улучшать восприятие.
- Фокусировка внимания: Оставление пространства вокруг важного элемента выделяет его и привлекает внимание.
- Чистота и порядок: Использование пустого пространства делает дизайн более аккуратным и организованным.
8. Как использовать типографику для создания визуальной иерархии?
Применение типографики:- Шрифты и стили: Используйте различные шрифты и стили для заголовков, подзаголовков и основного текста.
- Размер и вес текста: Увеличивайте размер и вес текста для важной информации.
- Выделение: Используйте курсив, полужирный шрифт или подчеркивание для акцентирования ключевых слов или фраз.
9. Как формы и линии могут влиять на визуальную иерархию?
Влияние форм и линий:- Направляющие линии: Используйте линии для создания направляющих, которые помогут пользователю следовать по странице.
- Формы как акценты: Геометрические формы могут выделять важные элементы или создавать акценты.
- Разделение контента: Линии могут использоваться для разделения разных частей контента, создавая четкую структуру.
10. Какие инструменты и методы можно использовать для проверки визуальной иерархии?
Методы проверки:- Тестирование с пользователями: Проведение тестирования с реальными пользователями для получения обратной связи.
- Анализ поведения: Использование аналитических инструментов для изучения поведения пользователей на странице.
- Обратная связь от коллег: Просьба о проверке дизайна коллегами для получения дополнительных мнений и рекомендаций.
- Heatmaps (тепловые карты): Анализ тепловых карт для определения, какие элементы привлекают больше всего внимания.
- A/B тестирование: Сравнение различных версий дизайна для определения наилучшего варианта.
Leave A Comment
You must be logged in to post a comment.