Material Design на русском. Часть 13 — Поиск

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Поиск позволяет пользователям быстро находить контент в приложении.

Как используется поиск

Поиск позволяет пользователям быстро находить контент в приложении. Базовый поиск позволяет пользователям ввести запрос в текстовое поле поиска для просмотра результатов.

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

Поиск, как основной сценарий приложения

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

Использование данного паттерна

  1. Когда пользователь нажал на поле, то оно переходит в состояние «в фокусе». Затем поиск расширяется и заполняет весь экран. После, при необходимости, под текстовым полем может отображаться список из последних запросов.
  2. Пользователь может ввести запрос или выбрать из элемент из списка недавних запросов (если таковой имеется). После нажатия на клавишу «Найти» поиск начинается.
  3. Результаты поиска отображаются под строкой поиска.
  4. Чтобы убрать фокус с поля поиска и закрыть поиск, пользователь нажимает стрелку «Назад», которая является кнопкой.
Пример работы поиска
Поле поиска без фокуса (так он выглядит по умолчанию)
Поиск в фокусе, а ниже карточки, со списком запросов, которые могут помочь пользователю.

Раскрывающийся поиск

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



Использование данного паттерна

  1. Пользователь нажимает на иконку поиска (на панели приложения), чтобы открыть его в виде строки поиска в состоянии «в фокусе».
  2. По мере того как пользователь вводит запрос, под строкой поиска могут отображаться недавние запросы пользователя.
  3. При вводе запроса или выборе элемента из списка ниже, нажатие на клавишу «Найти» запускает поиск.
  4. Результаты отображаются под строкой поиска и их можно скролить.

Когда отобразились результаты, тогда текстовое поле поиска остается видимым, но уже без фокуса. Нажатие на стрелку «Назад» возвращает экран в исходное состояние: убираются результаты запроса, убирается клавиатура, исчезает поле поиска, а панель приложения возвращается в исходное состояние.

Пример работы раскрывающегося поиска.
Так выглядит раскрывающийся поиск по умолчанию в панели приложения
Так выглядит поиск после нажатия на иконку поиска.

Как следить за обновлениями гайдлайна и переводом?

Смотрите последние обновления на странице what’s new


Material Design на русском. Часть 13 — Поиск was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

©



You may also like