Основы дизайна: руководство по визуальной иерархии (с инфографикой)

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

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

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

Почему визуальная иерархия важна

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

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

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

Компоненты визуальной иерархии для интерактивных интерфейсов

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

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

Цвет в визуальной иерархии

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

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

Стоит также отметить, что выбор цвета влияет на доступность. Например, WCAG 2.2 устанавливает минимальные стандарты контрастности для цветов текста и фона и предостерегает от использования цвета в качестве единственного средства передачи информации или иерархии.

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

Хорошим примером осмысленного и структурного использования цвета в веб-дизайне является сайт «The Names for Change». С помощью цвета сайт сразу же передает свою структуру: по умолчанию информация представлена в разрозненном виде, но ее можно перегруппировать по темам и/или цветам.

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

Размер в визуальной иерархии

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

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

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

Выравнивание в визуальной иерархии

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

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

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

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

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

Фигуры в визуальной иерархии

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

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

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

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

Отходя от традиционных веб-макетов, сайт «Signes du Quotidien» тонко использовал простые фигуры – квадраты и круги – для создания уникальной визуальной иерархии, которая помогает посетителям ориентироваться в контенте. Меню располагалось в центре страницы, и при нажатии на него появлялись четыре цветные точки, обозначающие четыре раздела сайта. Затем посетители перетаскивали одну из точек в квадрат, чтобы перейти в соответствующий раздел.

Движение в визуальной иерархии

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

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

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

Звук в иерархии информации

Звук – еще один инструмент, который невозможно использовать в печатных СМИ, но который ещё предстоит освоить в рамках принципов иерархии. Поскольку звук является полностью невизуальным, не существует никаких правил, на которые можно было бы опираться. Однако звук также может служить инструментом дизайна, эффективно передающим не только содержание, но и настроение или смысл. Дизайнерские элементы, сопровождаемые определенными звуками, можно группировать относительно друг друга, причем те из них, которые звучат наиболее ярко, могут восприниматься как самые важные.

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

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

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

Неизменная важность визуальной иерархии

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

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

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