Понимание визуальной иерархии веб-интерфейса

Понимание визуальной иерархии веб-интерфейса

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

Создание визуальной организации 

В своей работе Общаясь с визуальной иерархией, Люк Врублевский, автором и старшим Принципалом дизайна продукта в Yahoo! , объясняет, что визуальное представление веб-интерфейса имеет важное значение для:

Информирование пользователей.

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

Коммуникация отношений контента.

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

Создание эмоционального воздействия

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

Конечной целью вашего дизайна пользовательского интерфейса является ответить на три вопроса:

1. Что это? (Полезность)

2. Как его использовать? (Удобство использования)

3. Почему меня это должно волновать?  (Желательности)

1. Сканирующие шаблоны: предсказуемость человеческого глаза

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

II. Z-шаблон

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

2. Контраст: формирование интереса

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

3. Инструменты торговли: цвет, размер и пространство

Когда вы рисуете «веб-интерфейс», не забудьте использовать самые мощные визуальные инструменты: цвет, размер и пространство. Алекс Бигмен считает, что цвет и размер управляют вниманием, а расстояние помогает управлять визуальными отношениями.

I. Цвет

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

II. Размер

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

III. Космос

Как обсуждалось в Web UI Best Practices, одним из наиболее важных трюков в создании чего-то красивого является абсолютное отсутствие чего-то красивого. Загрязнение слишком многих привлекательных изображений - это быстрый способ уничтожить их всех. Важно, чтобы ваш веб-интерфейс имел комнату для передышки и что вы все убираете. Уменьшение количества «визуального шума» сделает точки, которые вы хотите сохранить еще сильнее.

4. Проверьте свою визуальную иерархию: техника размытия

Дизайнер Ли Манро предлагает отличный метод, который мы будем называть Blurring Technique.

В основном, посмотрите на размытую версию вашего сайта и посмотрите, какие элементы выделяются. Если это не, то что вы хотите выделиться, пришло время вернуться и внести некоторые изменения. В размытой версии будет представлено представление о вашей визуальной иерархии в виде голых костей, что позволит вам оценить ваш интерфейс без каких-либо отвлекающих факторов. Чтобы избавить свое зрение (или поездку к бару), сделайте снимок экрана вашего сайта и добавьте размытие Gaussian 5-10 px в Photoshop.