Blog

Our Latest News

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

Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

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

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

Разработчики веб-интерфейса должны делать то же самое. Веб-сайт создан в Виннице является формой визуального искусства в своем собственном праве и следует многим тем же правилам, что и более традиционные арт формы. Это наука об эстетике, смешанная с принципами бизнеса, а необычный интерфейс должен чувствовать себя легко, но соблазнительно, такой веб-сайт лудеше заказать в студии "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.