Меню

+380979398298

Как использовать визуальную иерархию в веб-дизайне

  • 26
  • 04
  • 2012

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

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

Принципы

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

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

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

Положение

Позиция является одним из основных путей установления иерархии. Рассмотрим следующий пример:


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

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

Это не должно шокировать вас, очевидно, что мы читаем слева направо. Тем не менее, осознавая эту тенденцию поможно структурировать содержание надлежащим образом. Помните, что этот принцип выходит за рамки слов в графических элементах на странице. Если вы представите ваших пользователей с сеткой объектов, довольно похожих по размеру, форме и цвету, они будут иметь тенденцию читать слева направо, если иное не будет предложено.
Разве это не скучно?
Вы можете быть удивлены, каким будет ваш дизайн, если вы сильно привяжетесь к принципу Z-чтения, описанного выше. Ответ: невероятно скучным и неоригинальным.

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

Размер

В мире дизайна, размер безусловно, имеет значение : ). Изменяя размер элементов на странице, можно легко сломать Z-модель восприятия.

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


Это чрезвычайно простая страница, которая использует четкую визуальную иерархию. Цитата в центре страницы достаточно велика, чтобы быть первым объектом, который привлекает ваше внимание. После этого, логотип в левом верхнем углу не только естественное место для разрушения привычки чтения, но и является вторым по величине пунктом контраста на странице. Дизайнер структурировал сайт таким образом, что если вы тратите несколько секунд на страницу, вы читаете «Think Big. Be Nimble. «, Затем» Hobson Dungog + Davis «.
Это классическая манипуляция визуальной иерархии в работе (обратите внимание, что пробелы в значительной степени тоже работают). Было бы легко установить такой порядок: цитаты появляются в верхнем левом углу затем логотип, но расположение не было бы столь же интересным или гибким.

Цвет

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

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

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

Визуальная сложность

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

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

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

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

Выводы

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

 

Перевел Карапузов Олег специально для Usabilist
Оригинал:  http://designshack.net/articles/graphics/how-to-use-visual-hierarchy-in-web-design

 

Оставьте комментарий

Ваш e-mail не будет опубликован.