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