Главная » Статьи » Дополнения

Разработка адаптивных форм поиска: советы и тенденции для веб-дизайнеров.

50

0



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

 

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

 

Давайте посмотрим на некоторые примеры вариантов формы поиска в Интернете. Все рассмотренные виды поисковых форм помогут вам в дальнейшем создать свои уникальные и интересные варианты.

Выпадающая навигация поиска

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

 

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

 

 

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

 

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

 

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

 

 

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

 

Еще один сайт по этой же технологии - Skinny Ties.

 

 

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

Полноэкранный модальный

Если вам не нравится эффект выпадающего меню, вы можете попробовать использовать модальное окно. 

 

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

 

Вы можете увидеть чистый пример этого на Full Home Living.

 

 

Это привлекает внимание пользователя к форме. Он продуман так, чтобы быть полностью отзывчивым и простым в использовании, поскольку модальное окно можно так же быстро закрыть одним касанием.

 

Единственным недостатком является то, что это может показаться немного «слишком» объемным для формы поиска.

 

Если вы достаточно смелы, чтобы добавить больше контента на страницу, то можете легко попробовать создать поисковый модал, как Comedy Central на своем сайте.

 

 

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

 

Если у вас есть новые сообщения, горячие категории или последние новости, это будет отличным способом показать дополнительные ссылки на странице.

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

Встроенные адаптивные формы

Динамические встроенные формы предлагают гибрид скрытых полей поиска вместе с выпадающими меню. 

 

С помощью встроенной формы поиска вы можете поместить поисковый переключатель в вашу навигацию.

 

К примеру посмотрите дизайн Cartoon Brew с их встроенным полем поиска. 

 

 

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

 

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

Полноразмерные растягиваемые формы

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

 

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

 

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

 

 

Поисковые формы являются основным элементом для многих веб-сайтов, и если вам требуется гибкая форма поиска, попробуйте выполнить эту технику.

 

Push SquarePush Square использует этот эффект, так как их форма поиска закреплена прямо вверху страницы. 

 

 

Нажатие на лупу переключает форму поиска, и по умолчанию она занимает 100% ширины страницы. Не имеет значения, используете ли вы рабочий стол с разрешением 1920px или смартфон с разрешением 320px, это поле поиска корректно приспосабливается к вашему экрану.

Разработка поисковых форм

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

 

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

 

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

Оцените материал:
Не забудьте поделиться с друзьями:
Комментарии
Войдите: