Дизайн рядка пошуку повинен бути узгоджується із загальним брендингом вашого веб-сайту. Крім того, панель повинна мати чіткі візуальні ознаки (наприклад, піктограму збільшувального скла), щоб вказувати на її призначення. Деякі панелі розширеного пошуку мають функції автозаповнення, фільтри, які можуть використовувати користувачі, і повідомлення про помилки.
Завантажте файли інтерфейсу пошуку.
- Виконайте таку команду, щоб створити тимчасовий каталог. mkdir tmp.
- Скопіюйте локальний каталог інтерфейсу користувача пошуку до тимчасового каталогу: cp -R searchbox/packages/react-searchbox/examples/by-usecases/facet-filters tmp.
Нам потрібно створіть новий компонент для цієї панелі пошуку та створіть новий файл під назвою `AutocompleteSearchBar. jsx` в папці компонентів. Компонент `AutocompleteSearchBar` призначений для забезпечення інтерактивного пошуку з функцією автопропозицій за допомогою компонента Autocomplete Material-UI.
Користувачі веб-сайтів сканують веб-сайти за допомогою шаблону F, і важливо розмістити панель пошуку в цьому шаблоні F, щоб користувачі могли його бачити. Це є у верхньому центральному або верхньому правому куті веб-сайту. Крім того, користувачі насправді очікують знайти рядки пошуку веб-сайтів у верхній частині сторінки.
Інші важливі аспекти розумного вікна пошуку: вибір типографіки та кольорів. Люди повинні мати можливість прочитати те, що вони написали у вікні пошуку, чи не так? Щоб забезпечити їх читабельність, переконайтеся, що текст у вікні розумного пошуку добре контрастує з фоном.