# Кейс: адаптация кабинета селлера маркетплейса — Игорь Тростянский > Кейс: как веб-кабинет селлера маркетплейса с таблицами, фильтрами и длинными формами превратился в полноценную мобильную версию. 290+ мобильных экранов, 41 сценарий. > Source: https://troydesigns.vercel.app/ru/case-seller.html Tags: B2B, WEB, 2025 # Адаптация кабинета селлера маркетплейса под мобильные устройства ![Каталог товаров селлера](https://troydesigns.vercel.app/assets/case-seller/hero-1.webp) ![Отчётный период и финансы](https://troydesigns.vercel.app/assets/case-seller/hero-2.webp) ![Список заказов](https://troydesigns.vercel.app/assets/case-seller/hero-3.webp) ## Контекст «Тандем» — маркетплейс товаров и услуг для конного спорта. У селлеров есть веб-кабинет: товары, услуги, заказы, финансы, магазины, чаты и отзывы. ## Постановка задачи Заказчик поставил задачу: кабинет должен полноценно работать с телефона. Не урезанная версия, а те же сценарии, что на десктопе, — от создания товара до обработки возврата. Сложнее всего пришлось с таблицами, длинными формами и навигацией. ## Моя роль Адаптировал десктопные сценарии кабинета под мобильные паттерны под руководством сеньор-дизайнера Валерии. ## Результат Мобильная версия кабинета в продакшене. Все сценарии десктопа доступны с телефона без урезанных функций: селлер добавляет товары, обрабатывает заказы и возвраты, следит за выплатами. 290+ — Мобильных экранов 41 — Сценарий кабинета 200+ — Десктопных экранов ## 2. Правила адаптации ### Таблица → карточка Строка становится карточкой: статус и сумма — в шапке, объект — в центре, даты — в подвале. ### Фильтры → шторка Ряд выпадающих списков заменяет одна кнопка. Все фильтры открываются полноэкранной шторкой с кнопками «Сбросить» и «Применить». ### Ховер → тап Подсказки, которые на десктопе появлялись при наведении, открываются по тапу. ### Главные действия — внизу Кнопки из шапки страницы переезжают в закреплённую нижнюю панель, под большой палец. ### Боковое меню → таб-бар Самые частые разделы — в таб-баре внизу экрана. ### Вкладки листаются Вкладки не переносятся и не сжимаются, а прокручиваются по горизонтали. ## 3. Навигация ![Сайдбар кабинета на десктопе: одиннадцать пунктов в пяти группах](https://troydesigns.vercel.app/assets/case-seller/nav-sidebar.jpg) ![Каталог: вкладки товаров, услуг и объявлений](https://troydesigns.vercel.app/assets/case-seller/nav-catalog.webp) ![Заказы: те же вкладки, поиск и фильтры](https://troydesigns.vercel.app/assets/case-seller/nav-orders.webp) ![Чаты со счётчиком непрочитанных](https://troydesigns.vercel.app/assets/case-seller/nav-chats.webp) ![Профиль: отзывы, финансы, настройки безопасности, магазины](https://troydesigns.vercel.app/assets/case-seller/nav-profile.webp) ### Как сайдбар стал таб-баром Сайдбар делит кабинет по тому, что продаёшь: у товаров и услуг свои списки и свои заказы, у объявлений — отдельный раздел. Одиннадцать пунктов в таб-бар не помещаются, поэтому на телефоне ось перевернули. Вкладка отвечает на вопрос «что сделать» — посмотреть каталог, обработать заказы, ответить в чате, — а товары, услуги и объявления стали вкладками внутри раздела. Всё частое — под большим пальцем, и чтобы перейти от товаров к услугам, не нужно возвращаться в меню. ### Каталог и заказы «Мои товары», «Мои услуги» и «Мои объявления» собраны в «Каталог», заказы на товары и услуги — в «Заказы». У обоих разделов одинаковые вкладки, поиск и фильтры: разобрался с одним экраном — знаешь и второй. ### Чаты — в таб-баре На десктопе чаты — один пункт из одиннадцати. С телефона на сообщения покупателей отвечают на ходу, поэтому чаты получили свою вкладку, а счётчик непрочитанных виден с любого экрана. ### Редкое — в профиле Отзывы, финансы, настройки безопасности и магазины открывают не каждый день. Они переехали в «Профиль» — список из четырёх строк в одном касании от таб-бара. Там же, отдельно внизу экрана, — «Выйти». ### Шапка магазина Переключатель магазинов и QR-код из шапки сайдбара ушли в «Мои магазины»: если магазинов больше одного, раздел открывается списком, а QR-код показывается на странице магазина. ## 4. Таблицы в карточки ### Как таблица превращается в карточки Строка таблицы становится карточкой: статус и сумма поднимаются в шапку, категория — в тег под названием, даты — в подвал. Ряд фильтров сворачивается в одну кнопку, а боковое меню — в таб-бар. ![Список товаров карточками](https://troydesigns.vercel.app/assets/case-seller/products-mobile-1.webp) ![Меню действий по товару](https://troydesigns.vercel.app/assets/case-seller/products-mobile-2.webp) ![Причина отклонения товара](https://troydesigns.vercel.app/assets/case-seller/products-mobile-3.webp) ![Фильтры товаров шторкой](https://troydesigns.vercel.app/assets/case-seller/products-mobile-4.webp) ### Мои товары У товара на десктопе шесть колонок. На телефоне карточка сначала отвечает на два главных вопроса: в каком статусе товар и сколько он стоит. Категория становится тегом под названием, даты уходят в подвал, действия — в меню «три точки», а фильтры — в шторку. ![Причина отклонения по тапу на статус в мобильном каталоге](https://troydesigns.vercel.app/assets/case-seller/hover-to-tap-mobile.webp) ![Причина отклонения по наведению на статус в десктопном кабинете](https://troydesigns.vercel.app/assets/case-seller/hover-to-tap-desktop.webp) ### Причина отклонения На десктопе причина отклонения всплывает при наведении на статус. На телефоне наведения нет, поэтому статус стал нажимаемым: тап — и видно, что нужно исправить. ![Карточки отчётных периодов в мобильных финансах](https://troydesigns.vercel.app/assets/case-seller/finance-compare-mobile.webp) ![Таблица финансов в десктопном кабинете](https://troydesigns.vercel.app/assets/case-seller/finance-compare-desktop.webp) ### Финансы Самая тяжёлая таблица кабинета: отчётный период и восемь колонок с суммами. Если просто сложить их столбиком, одна карточка займёт весь экран. ![Финансы карточками с сеткой сумм](https://troydesigns.vercel.app/assets/case-seller/finance-variants-1.webp) ![Транспонированная таблица финансов](https://troydesigns.vercel.app/assets/case-seller/finance-variants-2.webp) ![Детальный отчётный период](https://troydesigns.vercel.app/assets/case-seller/finance-variants-3.webp) ### Два варианта отображения Проработали два варианта. Первый — карточка с сеткой сумм, где итог «К выплате» выделен крупно. Второй — транспонированная таблица: колонки становятся строками, а периоды листаются по горизонтали. Карточки проще читать на ходу, таблица удобнее, когда нужно сверить несколько периодов. Внутри периода операции снова карточками — с кнопкой выгрузки в Excel. ![Список заказов](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-1.webp) ![Уведомление о новом заказе](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-2.webp) ![Меню действий по заказу](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-3.webp) ![Фильтры заказов шторкой](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-4.webp) ### Заказы Тот же принцип: статус оплаты и сумма — в шапке, номер и покупатель — в центре. Новый заказ приходит всплывающим уведомлением, а из меню карточки можно сразу подтвердить, отменить или написать покупателю. ## 5. Формы ![Форма создания товара на телефоне](https://troydesigns.vercel.app/assets/case-seller/form-compare-mobile.webp) ![Форма создания товара на десктопе](https://troydesigns.vercel.app/assets/case-seller/form-compare-desktop.webp) ### Создание товара На десктопе форма — длинная страница с кнопками в шапке. На телефоне это полноэкранное окно: заголовок и кнопка закрытия остаются на месте, а форма прокручивается под ними. ![Выбор типа товара](https://troydesigns.vercel.app/assets/case-seller/form-flow-1.webp) ![Подсказки при вводе названия](https://troydesigns.vercel.app/assets/case-seller/form-flow-2.webp) ![Справочник характеристик](https://troydesigns.vercel.app/assets/case-seller/form-flow-3.webp) ![Выбор значения в шторке](https://troydesigns.vercel.app/assets/case-seller/form-flow-4.webp) ![Заполненная форма товара](https://troydesigns.vercel.app/assets/case-seller/form-flow-5.webp) ### От плюса до заполненной формы Плюс в шапке каталога открывает шторку с выбором, что добавить. По первым буквам названия подсказываются варианты, а характеристики выбираются из справочника на отдельном экране — с поиском, переключателем «Только выбранные» и закреплёнными кнопками. ## 6. Детальная страница заказа ![Детальная страница заказа на телефоне](https://troydesigns.vercel.app/assets/case-seller/order-compare-mobile.webp) ![Детальная страница заказа на десктопе](https://troydesigns.vercel.app/assets/case-seller/order-compare-desktop.webp) ### Заказ Вкладки десктопа сохранились, но листаются по горизонтали. Кнопки «Подтвердить» и «Отменить» закреплены внизу, а редкие действия спрятаны в меню. ![Состав заказа](https://troydesigns.vercel.app/assets/case-seller/order-mobile-1.webp) ![Данные покупателя](https://troydesigns.vercel.app/assets/case-seller/order-mobile-2.webp) ![Меню действий по заказу](https://troydesigns.vercel.app/assets/case-seller/order-mobile-3.webp) ![История изменений заказа](https://troydesigns.vercel.app/assets/case-seller/order-mobile-4.webp) ### Вкладки и действия Состав заказа, данные покупателя с историей его заказов, меню с переходом в чат и история изменений заказа. ## 7. Магазины и адреса ![Добавление магазина на телефоне](https://troydesigns.vercel.app/assets/case-seller/nav-compare-mobile.webp) ![Добавление магазина на десктопе](https://troydesigns.vercel.app/assets/case-seller/nav-compare-desktop.webp) ### Добавление магазина Вкладки «Информация о магазине» и «Адреса самовывоза» остаются, форма складывается в одну колонку, а кнопки закреплены внизу. ![Список магазинов](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-1.webp) ![Форма магазина](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-2.webp) ![Адрес самовывоза](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-3.webp) ![Переключение между адресами](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-4.webp) ### Несколько магазинов и адресов Если магазинов больше одного, раздел открывается списком. Адреса самовывоза переключаются вкладками, и у каждого — свой график работы и недоступные даты. ## 8. Итог ### Что вынес Адаптация — это не сжатие экрана, а пересборка иерархии: на каждом экране заново решаешь, что главное. Больше всего времени сэкономили общие правила — сценарии собирались из одних и тех же решений.