Поиск и состояния каталога
Курс «Макет учебного портала в Figma»
Каталог из трёх карточек показывает удачный случай, когда человеку подходит одна из видимых тем. Добавим строку поиска и состояния, которые возникают после запроса. Даже если макет не подключён к настоящим данным, он должен объяснять, что произойдёт при совпадении, отсутствии результатов и ожидании ответа. Иначе разработчику придётся самостоятельно изобретать существенную часть сценария.
Будем использовать запрос «сетка». Он находит курс «Сетка каталога». Запрос «анимация» не находит ничего в нашем небольшом наборе. Это собственные контрольные данные, а не результаты реального поиска ProfessorWeb. Разница между двумя запросами помогает проверить смысл интерфейса, не имитируя большую библиотеку.
Поле и сохранённое содержание
Создайте компонент SearchField с видимой подписью «Найти курс», областью текста и значком поиска. Пустая подсказка внутри поля может содержать «Например, сетка», но не заменяет подпись. Когда человек введёт запрос, подсказка исчезнет, а назначение поля должно оставаться понятным. На мобильном размере подпись располагается над областью ввода.
В основной версии ширина поля ограничена 560, высота области ввода — 48, внутренние боковые отступы — 16. В мобильном экземпляре поле занимает всю рабочую ширину. Это выбранные параметры учебного проекта, которые предстоит оценить в реализации. Не считайте число 48 само по себе подтверждением доступности всех взаимодействий.
Добавьте рядом или ниже действие «Найти». В макете оно явно запускает поиск и помогает прототипировать переход без ввода настоящего текста. Для веб-реализации можно будет поддержать также отправку с Enter. Важно записать оба условия в спецификации, если они предусмотрены: кнопка и клавиатура должны вести к одному результату, а не к разным сценариям.
Для состояния с запросом «сетка» оставьте введённое значение в поле. Не очищайте его после успешной выдачи, иначе человеку будет трудно понять, на какое условие отвечает список. Под полем поместите строку «Найден 1 курс по запросу «сетка»». Эта фраза связывает результаты с текущими данными и помогает заметить, если экран оказался не тем.
Проверьте ситуацию, когда человек меняет «сетка» на «анимация» после удачного результата. Во время ожидания важно не представлять старую карточку как ответ на новый запрос. Можно оставить предыдущую выдачу с явным статусом обновления либо заменить её ожиданием, как в нашем макете. В обоих вариантах сообщение должно связать видимый список с актуальным условием. Это решение станет особенно существенным при медленном ответе; его следует объяснить заранее, даже если прототип показывает только заранее подготовленные экраны.
Выдача и отсутствие результатов
Создайте копию экрана Desktop/Catalog и назовите её Desktop/Catalog Results. Оставьте одну карточку «Сетка каталога», сохранив её содержание и действие. Пустое место после одной карточки нормально: мы не должны показывать неподходящие курсы только ради заполнения сетки. При необходимости можно добавить отдельно подписанный блок других тем, но он не входит в результаты поиска.
Для Desktop/Catalog Empty используйте запрос «анимация». Вместо списка покажите заголовок «Курсы не найдены», объяснение «Попробуйте другое слово или откройте весь каталог» и действие «Сбросить поиск». Сообщение объясняет состояние и ближайший способ продолжить. Фраза «Ошибка» была бы неточной: поиск успешно завершён, просто совпадений нет.
| Состояние | Что произошло | Что остаётся доступным |
|---|---|---|
| Default | Условие поиска не задано | Все три курса |
| Results | Найдено совпадение | Запрос и подходящий курс |
| Empty | Совпадений нет | Изменение запроса и сброс |
| Loading | Результат ещё не получен | Запрос и понятное ожидание |
Кнопка «Сбросить поиск» возвращает пустое поле и полный список. Она не должна вести на внешнюю страницу или закрывать портал. Запишите ожидаемый переход рядом с компонентом. В следующем уроке свяжем его в прототипе, поэтому имя целевого фрейма должно быть определено заранее, без ссылки на несуществующий экран.
Загрузка и ошибка запроса
Для Catalog Loading сохраните запрос «сетка» и добавьте статус «Ищем курсы…». Можно использовать нейтральные заготовки карточек, но они не должны выглядеть как действительные результаты. Если рядом остаётся старый список, подпишите, что он относится к предыдущему состоянию. В нашем простом прототипе заменяем его блоком ожидания, чтобы не смешивать данные.
Ошибка соединения отличается от пустой выдачи. Для неё создайте отдельный образец с текстом «Не удалось получить курсы. Повторите поиск». Запрос сохраняется, рядом доступно действие «Повторить». Человеку не нужно вводить условие заново из-за технической проблемы. Такое поведение выражает заботу о непрерывности задачи, а не требует сложной графики.
Не размещайте только красный крест без пояснения. Значок может помочь заметить сообщение, но не объяснит, нужно ли исправить слово, подождать или обратиться за помощью. Цвет feedback/error используйте для ошибки получения данных; отсутствие совпадений оставьте нейтральным. Разные причины должны иметь различимые объяснения и действия.
В реальном интерфейсе потребуется передать обновление результата вспомогательным технологиям и управлять фокусом. Макет лишь резервирует место и описывает смысл сообщения. Автоматически считать его прошедшим проверку доступности нельзя. Добавьте в спецификацию необходимость объявлять завершение поиска и сохранять удобный доступ к полю.
Компонент и сценарий
Состояния поля можно хранить в component set, а состояния целой выдачи — отдельными экранами. Не создавайте один гигантский компонент, где варианты кодируют каждую возможную фразу и число результатов. Компонент отвечает за устройство элемента, данные и переходы описывают сценарий. Для нашего учебного прототипа достаточно нескольких заранее заданных запросов.
Figma позволяет связывать взаимодействия с действиями и целевыми фреймами. Однако обычное поле, нарисованное в макете, не становится HTML-input и не отправляет запрос само. В руководстве прототипирования Figma показан принцип интерактивных потоков; наш поиск будет демонстрацией выбранных состояний, а не полноценной работающей службой.
Повторите Results и Empty для мобильного экрана, сохраняя формулировки. На узком размере сообщение переносится, действие занимает доступную ширину, а поле остаётся рядом по смыслу. Убирать объяснение ошибки только потому, что места меньше, нельзя: именно оно говорит, как продолжить работу.
Ожидаемый результат — набор согласованных состояний для одних данных и двух запросов. Ни серверный поиск, ни взаимодействия при подготовке текста не выполнялись. Теперь у прототипа есть не только успешный путь к уроку, но и понятный возврат из пустой выдачи; на следующем шаге эти экраны соединим.