Разработка дизайна страницы поиска сайта
Страница поиска — индикатор того, что пользователь не нашёл нужное через навигацию. Это не провал, это нормально: поиском пользуются даже на хорошо структурированных сайтах. Задача дизайна — сделать результаты читаемыми и помочь уточнить запрос.
Два состояния страницы
Страница поиска существует в нескольких состояниях, каждое требует отдельного макета:
Состояние 1: пустой поиск — пользователь открыл /search без запроса. Показываем строку поиска крупно, опционально — популярные запросы или категории для быстрого старта.
Состояние 2: результаты найдены — основной вид. Строка с запросом вверху, количество результатов, фильтры/фасеты, список результатов, пагинация.
Состояние 3: результаты не найдены — отдельный дизайн (см. empty states). Предлагаем похожие запросы, проверку опечатки, популярные разделы.
Компоновка результатов
Для большинства сайтов подходит двухколоночный layout:
- Левая колонка (~280px): фильтры и фасеты
- Правая колонка: список результатов
На мобиле фильтры убираются в drawer или аккордеон над результатами.
Каждый результат — карточка с предсказуемой структурой:
- Тип контента (badge): статья, услуга, товар, страница
- Заголовок (ссылка, с подсветкой совпадения)
- URL или breadcrumb — где живёт страница
- Сниппет — 2–3 строки текста с подсветкой ключевых слов
- Мета (опционально): дата, автор, категория
Подсветка совпадений — <mark> тег с фоновым цветом из палитры (обычно жёлтый или primary-light). Критически важна для восприятия релевантности.
Фильтры и сортировка
Набор фильтров зависит от типа контента на сайте:
- По типу страницы (статья, кейс, услуга)
- По дате (за месяц, за год, диапазон)
- По категории/тегу
- По языку — для мультиязычных сайтов
Сортировка: «По релевантности» (по умолчанию), «По дате», «По популярности». Активные фильтры показываем chips/тегами над результатами — с кнопкой удаления каждого и «Сбросить всё».
Поисковая строка
Строка на странице результатов — не та же, что в хедере. Она крупнее, содержит текущий запрос, кнопку очистки и иногда автодополнение. Шаблонное решение: Input с иконкой поиска слева, кнопкой × справа, submit по Enter и по клику кнопки.
Если на сайте есть Algolia, Elasticsearch или TypeSense — строка поиска поддерживает instant search: результаты обновляются по мере набора с debounce ~300ms.
Пагинация и бесконечная прокрутка
Для поиска пагинация (numbered pages) предпочтительнее infinite scroll: пользователь видит, сколько результатов всего, и может перейти на конкретную страницу. Бесконечный скролл сложнее для возврата к результату.
Минимальный дизайн пагинации: «Назад», номера страниц (3–5 вокруг текущей), «Вперёд», информация «Показано 1–20 из 348».
Сроки
Дизайн страницы поиска со всеми состояниями и адаптивом — 3–5 дней: проектирование всех состояний и компонентов, финальные макеты desktop + mobile, подготовка к передаче разработчикам.