Много данных. Ясный следующий шаг.
В торговой системе важен не только товар, но и то, сколько его доступно, кому он зарезервирован и на каких условиях его можно продать. Я связала эти данные в рабочий интерфейс: от обзора предложений до подробностей сделки.
Сделканачинаетсязадолгодо резерва.
Компания работает с предложениями поставщиков, доступными остатками, закупочными и отпускными ценами. В одной операции пересекаются товар, доставка, сотрудник и клиент. Если собрать все в плоский список, важные различия теряются среди полей.
Моя задача состоит в том, чтобы придать этой сложности ясную форму. Я разделила обзор и подробную работу: таблица помогает выбрать предложение, а карточка раскрывает условия, связанные резервы и историю действий.
Одинаковый набор столбцов не подходит для каждого рабочего вопроса. Одному пользователю нужно сравнить цены, другому - проверить доступный остаток или найти предложение. Я разделила настройку состава таблицы и отбор записей: человек управляет и объемом данных, и способом их просмотра.
Выбрать, что сравнивать
Вынесла настройку столбцов в отдельное окно. Выбранные поля отмечены одновременно фоном и галочкой, а применение и сброс настроек разделены. Сама таблица остаётся видна за окном — понятно, что именно меняется.
Сузить список по условиям
Собрала фильтры в самостоятельную панель. Параметры не конкурируют со строками таблицы, а явное применение отделяет настройку условий от просмотра результата.
Сохранить условия перед глазами
В строке поиска показала выбранные параметры отдельными элементами. Пользователь видит, почему список выглядит именно так, и может убрать условие без повторного заполнения всей формы.
У предложения много характеристик, но они отвечают на разные вопросы. Что за товар? Сколько можно зарезервировать? Как его доставят? Что уже происходило с этой записью?
Я объединила поля в смысловые группы, а историю вынесла в соседнюю область. Карточка стала рабочим пространством, где сведения можно сопоставлять, не теряя контекст.
Остатки не смешиваются с описанием
Предложенное, зарезервированное, выкупленное и доступное количество собраны в одной группе. Так разные состояния товара можно прочитать рядом, а не искать в длинной анкете.
История остаётся рядом
Комментарии и системные события образуют отдельную ленту. Название действия, автор и время помогают восстановить контекст, пока основные параметры остаются перед глазами.
Следующий шаг имеет свой приоритет
Резервирование расположено в верхней панели, а сохранение в завершении формы. Разные по смыслу действия получили разные места: перейти к резерву и сохранить правки не выглядят одной операцией.
Отмена резерва и выход из незавершенной формы - это разные ситуации. Универсальное "Вы уверены?" не объясняет, что произойдет дальше.
Я предусмотрела отдельные состояния: при отмене появляется поле причины, при выходе есть выбор между сохранением и уходом. Диалог помогает завершить конкретную задачу, а не просто добавляет еще один клик.
В ТЗ были заданы четыре роли: поставщик, менеджер, руководитель отдела продаж и администратор. Я использовала эти ограничения как основу интерфейсных сценариев: доступность данных и действий должна соответствовать ответственности человека.
Особенно важно было развести коммерческие сведения и данные поставщика. Права здесь определяют не только состав меню, но и то, какие поля и действия нужны внутри карточки.
Поставщик
Работает со своими предложениями и связанными резервами. Внутренние цены продажи, маржинальность и клиентские данные не относятся к его рабочему контексту.
Менеджер
Выбирает предложение и работает с резервом в пределах своих полномочий. Сведения о поставщике и действия с чужими резервами ограничены бизнес-правилами.
Руководитель и администратор
Управляют сотрудниками, справочниками и операциями. Общая структура интерфейса сохраняется, но набор доступных действий шире.
Я не стала уменьшать широкую таблицу до размера телефона. В мобильной версии предложение превращается в карточку: название и статус задают контекст, остаток, срок поставки и цены собираются ниже в короткую сводку.
Подробности раскрываются на отдельном экране, а основная навигация расположена внизу. Меняется композиция, но сохраняются знакомые сущности и логика работы.
В сервисе много таблиц, форм и состояний. Я собрала их общий визуальный язык в компоненты: поля, кнопки, метки, подсказки и элементы навигации. Это основа последовательного интерфейса, в котором новый раздел не требует заново осваивать привычные действия.
Основные и второстепенные действия, варианты кнопок и текстовые статусы. Акцент выделяет действие, а подпись сохраняет его смысл.
Сотрудники, поставщики, резервы, товары и города - это разные сущности, но их не нужно изучать как пять отдельных продуктов. Я сохранила общий принцип: обзор и поиск в списке, подробности и действия в карточке.
Различается содержание, а способ ориентироваться остается знакомым. Это решение связывает отдельные экраны в цельную торговую систему.
Дизайн системы не заканчивается на заполненной таблице. Я подготовила состояния входа, ошибок, загрузки и отсутствия данных, чтобы между основными экранами не оставалось неопределенных переходов.
Вход и сообщение об ошибке показывают этот принцип на простом примере: пользователь понимает, на каком этапе находится и какое действие доступно дальше.
Я перевела требования торговой площадки в систему взаимосвязанных экранов: настраиваемые списки, подробные карточки, мобильную версию и состояния действий. Компоненты поддерживают общую логику на уровне отдельных элементов.
Этот проект показывает мой подход к B2B-продуктам: сначала разобраться, какие решения принимает человек, затем выстроить вокруг них данные, приоритеты и переходы.
