Адаптация кабинета селлера маркетплейса под мобильные устройства
Контекст
«Тандем» — маркетплейс товаров и услуг для конного спорта. У селлеров есть веб-кабинет: товары, услуги, заказы, финансы, магазины, чаты и отзывы.
Постановка задачи
Заказчик поставил задачу: кабинет должен полноценно работать с телефона. Не урезанная версия, а те же сценарии, что на десктопе, — от создания товара до обработки возврата. Сложнее всего пришлось с таблицами, длинными формами и навигацией.
Моя роль
Адаптировал десктопные сценарии кабинета под мобильные паттерны под руководством сеньор-дизайнера Валерии.
Результат
Мобильная версия кабинета в продакшене. Все сценарии десктопа доступны с телефона без урезанных функций: селлер добавляет товары, обрабатывает заказы и возвраты, следит за выплатами.
290+
Мобильных экранов
41
Сценарий кабинета
200+
Десктопных экранов
2. Правила адаптации
Таблица → карточка
Строка становится карточкой: статус и сумма — в шапке, объект — в центре, даты — в подвале.
Фильтры → шторка
Ряд выпадающих списков заменяет одна кнопка. Все фильтры открываются полноэкранной шторкой с кнопками «Сбросить» и «Применить».
Ховер → тап
Подсказки, которые на десктопе появлялись при наведении, открываются по тапу.
Главные действия — внизу
Кнопки из шапки страницы переезжают в закреплённую нижнюю панель, под большой палец.
Боковое меню → таб-бар
Самые частые разделы — в таб-баре внизу экрана.
Вкладки листаются
Вкладки не переносятся и не сжимаются, а прокручиваются по горизонтали.
3. Навигация
Как сайдбар стал таб-баром
Сайдбар делит кабинет по тому, что продаёшь: у товаров и услуг свои списки и свои заказы, у объявлений — отдельный раздел. Одиннадцать пунктов в таб-бар не помещаются, поэтому на телефоне ось перевернули. Вкладка отвечает на вопрос «что сделать» — посмотреть каталог, обработать заказы, ответить в чате, — а товары, услуги и объявления стали вкладками внутри раздела. Всё частое — под большим пальцем, и чтобы перейти от товаров к услугам, не нужно возвращаться в меню.
Каталог и заказы
«Мои товары», «Мои услуги» и «Мои объявления» собраны в «Каталог», заказы на товары и услуги — в «Заказы». У обоих разделов одинаковые вкладки, поиск и фильтры: разобрался с одним экраном — знаешь и второй.
Чаты — в таб-баре
На десктопе чаты — один пункт из одиннадцати. С телефона на сообщения покупателей отвечают на ходу, поэтому чаты получили свою вкладку, а счётчик непрочитанных виден с любого экрана.
Редкое — в профиле
Отзывы, финансы, настройки безопасности и магазины открывают не каждый день. Они переехали в «Профиль» — список из четырёх строк в одном касании от таб-бара. Там же, отдельно внизу экрана, — «Выйти».
Шапка магазина
Переключатель магазинов и QR-код из шапки сайдбара ушли в «Мои магазины»: если магазинов больше одного, раздел открывается списком, а QR-код показывается на странице магазина.
4. Таблицы в карточки
Как таблица превращается в карточки
Строка таблицы становится карточкой: статус и сумма поднимаются в шапку, категория — в тег под названием, даты — в подвал. Ряд фильтров сворачивается в одну кнопку, а боковое меню — в таб-бар.
Мои товары
У товара на десктопе шесть колонок. На телефоне карточка сначала отвечает на два главных вопроса: в каком статусе товар и сколько он стоит. Категория становится тегом под названием, даты уходят в подвал, действия — в меню «три точки», а фильтры — в шторку.
Причина отклонения
На десктопе причина отклонения всплывает при наведении на статус. На телефоне наведения нет, поэтому статус стал нажимаемым: тап — и видно, что нужно исправить.
Финансы
Самая тяжёлая таблица кабинета: отчётный период и восемь колонок с суммами. Если просто сложить их столбиком, одна карточка займёт весь экран.
Два варианта отображения
Проработали два варианта. Первый — карточка с сеткой сумм, где итог «К выплате» выделен крупно. Второй — транспонированная таблица: колонки становятся строками, а периоды листаются по горизонтали. Карточки проще читать на ходу, таблица удобнее, когда нужно сверить несколько периодов. Внутри периода операции снова карточками — с кнопкой выгрузки в Excel.
Заказы
Тот же принцип: статус оплаты и сумма — в шапке, номер и покупатель — в центре. Новый заказ приходит всплывающим уведомлением, а из меню карточки можно сразу подтвердить, отменить или написать покупателю.
5. Формы
Создание товара
На десктопе форма — длинная страница с кнопками в шапке. На телефоне это полноэкранное окно: заголовок и кнопка закрытия остаются на месте, а форма прокручивается под ними.
От плюса до заполненной формы
Плюс в шапке каталога открывает шторку с выбором, что добавить. По первым буквам названия подсказываются варианты, а характеристики выбираются из справочника на отдельном экране — с поиском, переключателем «Только выбранные» и закреплёнными кнопками.
6. Детальная страница заказа
Заказ
Вкладки десктопа сохранились, но листаются по горизонтали. Кнопки «Подтвердить» и «Отменить» закреплены внизу, а редкие действия спрятаны в меню.
Вкладки и действия
Состав заказа, данные покупателя с историей его заказов, меню с переходом в чат и история изменений заказа.
7. Магазины и адреса
Добавление магазина
Вкладки «Информация о магазине» и «Адреса самовывоза» остаются, форма складывается в одну колонку, а кнопки закреплены внизу.
Несколько магазинов и адресов
Если магазинов больше одного, раздел открывается списком. Адреса самовывоза переключаются вкладками, и у каждого — свой график работы и недоступные даты.
8. Итог
Что вынес
Адаптация — это не сжатие экрана, а пересборка иерархии: на каждом экране заново решаешь, что главное. Больше всего времени сэкономили общие правила — сценарии собирались из одних и тех же решений.