Сегодня поделюсь фундаментальными принципами визуальной иерархии, которые важны при создании любого продукта, например веб-сайтов или мобильных приложений.
1. Манипулирование размером и масштабом дизайнерских элементов
Более крупные элементы дизайна, такие как заголовки, изображения или CTA (призывы к действию), сразу же привлекают внимание зрителя. Дизайнеры часто используют увеличение размера элементов, чтобы сделать их более заметными. Это также помогает зрителям быстро определить, на что они должны сосредоточить свои взгляды на странице.
2. Дизайн с точкой фокуса
Дизайн с точкой фокуса является еще одним способом привлечь внимание зрителей к определенным элементам дизайна. Использование контрастных цветов, линий, стрелок или даже изменения формы объектов могут помочь сделать фокус на нужных элементах. Например, на главной странице сайта CTA-кнопка может иметь яркий цвет окружения с пустым пространством вокруг нее, чтобы зрители привлекли к себе внимание.
3. Схемы чтения
При создании содержимого сайта важно понимать, как зрители будут сканировать страницу. Расположение элементов на странице и их взаимодействие друг с другом также влияют на привлекательность дизайна. Nielsen Norman Group определила три основных схемы чтения:
- F-образный: поиск значимой информации по верхней части страницы, затем переход к содержимому центра страницы и заключительно к левой части страницы;
- Spotted pattern (пятнистый образец): продвижение от одного законченного блока содержимого, к другому;
- Layer-cake pattern (образец "слоеного торта"): каждый новый блок содержимого начинается со своей собственной границы, что делает ясной визуальную структуру страницы.
4. Типографическая иерархия
Типографическая иерархия является организацией текстового содержимого на странице. Она включает в себя использование различных типов шрифтов, размеров шрифта и межстрочных интервалов. Например, для заголовков дизайнеры часто используют более крупный и жирный шрифт, чтобы сделать заголовки более запоминающимися, а также пробелы для улучшения восприятия.
5. Пространство (белые поля)
Пространство или белые поля являются свободным пространством между элементами дизайна и текстом. Они создают сбалансированный и эстетически привлекательный дизайн, делая страницу менее загруженной. Это также может помочь зрителям быстрее воспринимать содержимое.
6. Близость
Близость является группированием элементов на одной странице для создания единой структуры и облегчения восприятия информации. Элементы, расположенные ближе друг к другу, обычно имеют общий смысл или связаны между собой ценной информацией. Это также помогает создать ясную схему чтения.
7. Повторение
Повторение является использованием одних и тех же элементов (цвета, шрифты, текстуры и т.д.) на протяжении всего проекта, чтобы создать последовательное восприятие продукта на разных устройствах. Это также помогает укрепить бренд и легче распознавать его продукты.
Эти принципы не являются исчерпывающими, но они являются основными при проектировании визуальной иерархии. Применение этих принципов может помочь создать продукт, который достигает своих целей и приятен для пользователей.
Эти принципы не являются исчерпывающими, но они являются основными при проектировании визуальной иерархии. Применение этих принципов может помочь создать продукт, который достигает своих целей и приятен для пользователей.
Источник: https://uxplanet.org/7-important-visual-hierarchy-design-principles-2023-6abbe213eda2
Переходите на наш Telegram канал, скоро там будет много интересного!
https://t.me/ux_ui_conversation