Пользователи открывают веб-сервисы на устройствах самых разных размеров. Утром — со смартфона в транспорте, днём — с рабочего ноутбука, вечером — с планшета на диване. Сотрудник склада сканирует товар на ручном терминале, а аналитик в офисе смотрит ту же систему на широком мониторе. Если интерфейс хорошо работает только на одном типе экрана, часть аудитории получает неудобный, а иногда и вовсе нерабочий продукт.
Адаптивный интерфейс — это не косметическая доработка в конце проекта, а принцип проектирования. В этой статье разберём, чем адаптивность отличается от простого «уменьшения», какие подходы существуют, как работать с разными классами устройств и каких ошибок стоит избегать.
Адаптивность — это не масштабирование
Самое распространённое заблуждение: адаптивная версия — это та же страница, только уже. Блоки встают друг под друга, шрифт чуть уменьшается, и готово. На практике такой подход даёт интерфейс, который формально помещается на экран, но пользоваться им неудобно.
Настоящая адаптивность учитывает разницу в контексте использования:
- способ ввода — палец на сенсорном экране, мышь, клавиатура, стилус;
- ситуация — на ходу одной рукой или за столом с полным вниманием;
- качество связи — нестабильный мобильный интернет или офисный канал;
- задачи — на смартфоне чаще проверяют и быстро действуют, на большом экране анализируют и работают с большими объёмами данных.
Поэтому на разных экранах может меняться не только расположение элементов, но и их состав, порядок, способ взаимодействия.
Подходы к адаптации
Mobile first
Проектирование начинается с самого маленького экрана, а затем интерфейс расширяется для больших. Этот подход заставляет с самого начала определить приоритеты: на маленьком экране помещается только самое важное. Дальше, при увеличении экрана, добавляется дополнительная информация и удобства.
Mobile first хорошо подходит для клиентских сервисов, интернет-магазинов, сервисов записи — там, где основная аудитория приходит со смартфонов.
Desktop first
Обратный порядок: сначала полная версия для компьютера, затем адаптация под меньшие экраны. Оправдан для сложных рабочих систем — CRM, ERP, аналитических панелей, — где основная работа идёт за компьютером, а мобильная версия нужна для отдельных сценариев.
Риск подхода — мобильная версия получается «урезанной» и неудобной, потому что о ней думали в последнюю очередь.
Адаптация по сценариям
Для сложных сервисов часто разумнее не адаптировать каждую страницу, а определить, какие сценарии нужны на каком устройстве. Например, в системе управления заказами руководитель на смартфоне смотрит сводку и согласовывает документы, а полноценное редактирование справочников остаётся на компьютере. Для мобильного сценария проектируется отдельный удобный интерфейс, а не сжатая копия десктопного.
Контрольные точки и классы устройств
Контрольные точки — это ширины экрана, при которых меняется раскладка интерфейса. Привязывать их стоит не к конкретным моделям устройств, а к тому, когда контенту становится тесно или слишком просторно.
Условно можно выделить классы:
- Смартфоны — одна колонка, крупные элементы управления, навигация внизу или в выпадающем меню.
- Большие смартфоны и маленькие планшеты — можно показывать две колонки карточек, увеличивать отступы.
- Планшеты и небольшие ноутбуки — появляется боковое меню, таблицы получают больше колонок.
- Стандартные мониторы — полноценная раскладка с панелями, фильтрами, детальной информацией.
- Широкие и большие мониторы — дополнительные панели, режим «список плюс детали», ограничение ширины текста для читаемости.
Последний класс часто упускают. Интерфейс, растянутый на всю ширину монитора с диагональю тридцать дюймов, выглядит так же плохо, как втиснутый в смартфон: строки текста становятся бесконечными, элементы разлетаются по краям.
Сложные элементы: таблицы, формы, навигация
Таблицы
Самая трудная задача адаптивного дизайна в бизнес-системах. Широкая таблица с десятью колонками не помещается на смартфон. Варианты решения:
- показывать на маленьком экране только ключевые колонки, остальное — по нажатию на строку;
- превращать строки таблицы в карточки;
- закреплять первую колонку и разрешать горизонтальную прокрутку остальных;
- давать пользователю возможность выбрать, какие колонки отображать.
Выбор зависит от задачи: если пользователю нужно сравнивать значения между строками, карточки неудобны; если нужно найти конкретную запись и действовать с ней — карточки подходят идеально.
Формы
На смартфоне формы должны быть короткими. Длинную форму стоит разбить на шаги. Обязательно используйте правильные типы полей, чтобы открывалась нужная клавиатура: цифровая для телефона и сумм, с символом «@» для почты. Подписи полей должны оставаться видимыми во время ввода, а сообщения об ошибках — появляться рядом с полем.
Навигация
На большом экране меню может быть развёрнутым и постоянно видимым. На смартфоне — нижняя панель с четырьмя–пятью главными разделами работает лучше, чем «гамбургер», который скрывает всю навигацию. Для глубоких структур полезны «хлебные крошки» и понятная кнопка «назад».
Сенсорный ввод и мышь
Интерфейс для пальца и для курсора различается не только размером.
- Размер области нажатия. Для пальца элементы должны быть не меньше примерно сорока четырёх пикселей по меньшей стороне, с достаточными отступами между ними.
- Наведение. На сенсорном экране нет состояния «навёл курсор». Если важная информация показывается только при наведении, мобильный пользователь её не увидит.
- Жесты. Свайпы удобны на смартфоне, но не должны быть единственным способом выполнить действие.
- Клавиатура. На компьютере опытные пользователи рабочих систем ценят горячие клавиши и навигацию по полям с клавиатуры.
Устройства с гибридным вводом — ноутбуки с сенсорным экраном, планшеты с клавиатурой — делают эту задачу ещё интереснее: интерфейс должен работать хорошо при любом способе ввода.
Производительность на мобильных устройствах
Адаптивность касается не только раскладки, но и того, сколько ресурсов загружается. Мобильному пользователю не нужно скачивать изображения для большого монитора.
- Отдавайте изображения подходящего размера для каждого экрана.
- Загружайте тяжёлые блоки только тогда, когда они понадобятся.
- Учитывайте, что процессоры недорогих смартфонов значительно слабее компьютерных, и тяжёлый JavaScript будет выполняться дольше.
- Тестируйте на реальных устройствах среднего и бюджетного класса, а не только на флагманах.
Типичные ошибки
- Скрытие функций на мобильных. «На телефоне это не нужно» — а пользователь как раз в дороге и ему срочно нужно именно это.
- Мелкие элементы управления и кнопки, стоящие вплотную друг к другу.
- Горизонтальная прокрутка всей страницы из-за одного широкого элемента.
- Всплывающие окна, которые на смартфоне закрывают весь экран и не имеют видимой кнопки закрытия.
- Фиксированные шапки и панели, которые на маленьком экране съедают треть полезного пространства.
- Тестирование только в эмуляторе браузера на компьютере, без проверки на реальных устройствах.
- Игнорирование альбомной ориентации и больших мониторов.
Как организовать процесс
- Изучите аналитику. Какая доля пользователей приходит с каких устройств, какие сценарии они выполняют.
- Определите приоритетные сценарии для каждого класса устройств.
- Проектируйте в дизайн-системе. Компоненты сразу создаются с вариантами для разных экранов — это экономит время дизайнеров и разработчиков.
- Делайте прототипы для ключевых размеров и проверяйте их на реальных устройствах.
- Включите проверку на разных экранах в тестирование каждой новой функции.
- Отслеживайте метрики по устройствам после запуска: если конверсия на смартфонах заметно ниже, чем на компьютерах, это сигнал к доработке.
Хороший адаптивный интерфейс незаметен: пользователь просто решает свою задачу на том устройстве, которое у него в руках, и не задумывается, что где-то существует другая версия.
Вывод
Адаптивный интерфейс — это проектирование сервиса под реальный контекст использования на каждом классе устройств: от смартфона в руке до широкого монитора в офисе. Выбор подхода — mobile first, desktop first или адаптация по сценариям — зависит от аудитории и задач. Особого внимания требуют таблицы, формы и навигация, а также различия между сенсорным вводом и мышью. Закладывать адаптивность нужно с самого начала проектирования, а проверять — на реальных устройствах.
Если вы хотите сделать интерфейс своего сервиса удобным на любом экране, посмотрите, как мы работаем над UI/UX-дизайном и веб-приложениями.