# UX ПАТТЕРНЫ И ПОЛЬЗОВАТЕЛЬСКИЕ СЦЕНАРИИ SFERA ## 🎯 ФИЛОСОФИЯ UX SFERA использует **user-centered design** подход с акцентом на **интуитивность**, **эффективность** и **accessibility**. Система построена для 4 типов пользователей с разными потребностями и workflow. ### Основные принципы UX: - **Minimal Cognitive Load** - минимум усилий для выполнения задач - **Progressive Disclosure** - поэтапное раскрытие функциональности - **Contextual Actions** - действия в контексте текущей задачи - **Visual Hierarchy** - четкая иерархия важности элементов - **Feedback Systems** - мгновенная обратная связь на действия ## 👥 ТИПЫ ПОЛЬЗОВАТЕЛЕЙ И ИХ ПОТРЕБНОСТИ ### 1. FULFILLMENT (Фулфилмент-центр) **Основные задачи:** - Управление сотрудниками и расписанием - Контроль расходных материалов - Обработка входящих поставок - Статистика производительности **Ключевые UX потребности:** - Быстрый доступ к табелю сотрудников - Мгновенные уведомления о новых поставках - Визуальный контроль остатков расходников - Дашборд с ключевыми метриками ### 2. SELLER (Селлер/Продавец) **Основные задачи:** - Поиск и заказ товаров поставщиков - Управление корзиной и избранным - Создание рецептур с расходниками - Отслеживание статусов заказов **Ключевые UX потребности:** - Быстрый поиск товаров по каталогу - Интуитивная корзина с автосохранением - Простое создание рецептур - Четкий tracking заказов ### 3. WHOLESALE (Поставщик) **Основные задачи:** - Управление каталогом товаров - Обработка входящих заказов - Контроль остатков и резервов - Коммуникация с покупателями **Ключевые UX потребности:** - Быстрое добавление и редактирование товаров - Batch операции для больших каталогов - Уведомления о новых заказах - Простое управление остатками ### 4. LOGIST (Логистическая компания) **Основные задачи:** - Управление маршрутами доставки - Подтверждение логистических заказов - Контроль грузоперевозок - Ценообразование по объему **Ключевые UX потребности:** - Карта маршрутов и адресов - Быстрое подтверждение заказов - Калькулятор стоимости доставки - Tracking статусов доставок ## 🔄 ОСНОВНЫЕ ПОЛЬЗОВАТЕЛЬСКИЕ СЦЕНАРИИ ### 📋 СЦЕНАРИЙ 1: Создание заказа поставки (Селлер) #### Шаг 1: Поиск товаров ``` Пользователь: Селлер Цель: Найти нужные товары для заказа ``` **UX Flow:** 1. **Вход в каталог** → Главная → "Каталог товаров" 2. **Поиск товаров** → Строка поиска + фильтры 3. **Просмотр карточек** → Grid с товарами + основная информация 4. **Детали товара** → Клик → модальное окно с полной информацией **UX Паттерны:** - **Faceted Search** - фильтры по категориям, ценам, поставщикам - **Infinite Scroll** - подгрузка товаров при прокрутке - **Quick Preview** - hover для быстрого просмотра - **Breadcrumbs** - навигация по категориям **UI Компоненты:** ```typescript {products.map(product => ( ))} ``` #### Шаг 2: Добавление в корзину ``` Пользователь: Селлер Цель: Собрать корзину товаров для заказа ``` **UX Flow:** 1. **Выбор количества** → Input с валидацией доступных остатков 2. **Добавление в корзину** → Кнопка "Добавить" + анимация 3. **Toast уведомление** → "Товар добавлен в корзину" 4. **Обновление счетчика** → Badge на иконке корзины **UX Паттерны:** - **Progressive Enhancement** - количество товара без перезагрузки - **Micro-interactions** - анимация добавления в корзину - **Real-time Validation** - проверка доступного количества - **Persistent State** - корзина сохраняется между сессиями #### Шаг 3: Оформление заказа ``` Пользователь: Селлер Цель: Создать заказ поставки с рецептурой ``` **UX Flow:** 1. **Переход в корзину** → Кнопка "Корзина" в header 2. **Проверка товаров** → Список с возможностью редактирования 3. **Выбор поставщика** → Dropdown с фильтрацией 4. **Создание рецептуры** → Выбор услуг фулфилмента 5. **Подтверждение заказа** → Финальная проверка + отправка **UX Паттерны:** - **Multi-step Form** - пошаговое оформление заказа - **Form Validation** - валидация каждого шага - **Summary Review** - финальная проверка перед отправкой - **Progress Indicator** - показ текущего шага ### 📦 СЦЕНАРИЙ 2: Обработка поставки (Фулфилмент) #### Шаг 1: Получение уведомления ``` Пользователь: Фулфилмент-центр Цель: Узнать о новой входящей поставке ``` **UX Flow:** 1. **Push уведомление** → "Новая поставка от ООО Поставщик" 2. **Badge на навигации** → Счетчик непрочитанных поставок 3. **Переход к поставкам** → Клик на уведомление/меню **UX Паттерны:** - **Real-time Notifications** - мгновенные уведомления - **Attention Management** - badges для привлечения внимания - **Context Switching** - быстрый переход к релевантной задаче #### Шаг 2: Назначение ответственного ``` Пользователь: Фулфилмент-центр Цель: Назначить сотрудника для обработки поставки ``` **UX Flow:** 1. **Просмотр деталей поставки** → Карточка с полной информацией 2. **Выбор сотрудника** → Dropdown с доступными сотрудниками 3. **Подтверждение назначения** → Кнопка "Назначить" 4. **Обновление статуса** → Автоматическое изменение статуса **UX Паттерны:** - **Smart Defaults** - предложение подходящих сотрудников - **Contextual Information** - показ загрузки сотрудников - **Immediate Feedback** - мгновенное подтверждение действия ### 💬 СЦЕНАРИЙ 3: Коммуникация между организациями #### Шаг 1: Отправка сообщения ``` Пользователь: Любой тип организации Цель: Связаться с контрагентом ``` **UX Flow:** 1. **Выбор получателя** → Список контрагентов 2. **Создание сообщения** → Текст + вложения 3. **Отправка** → Кнопка отправки + статус доставки **UX Паттерны:** - **Rich Communication** - текст, голос, файлы, изображения - **Real-time Status** - статусы отправки и прочтения - **Message Threading** - группировка сообщений по диалогам ## 🎨 UX ПАТТЕРНЫ ПО КАТЕГОРИЯМ ### 📊 1. DATA DISPLAY PATTERNS #### Table with Actions ```typescript // Таблица с действиями в каждой строке Товар Количество Действия {items.map(item => ( {item.name} {item.quantity} ⋮ Редактировать Удалить ))}
``` #### Многоуровневые таблицы поставок (Раздел "Мои поставки") ```typescript // Паттерн многоуровневой таблицы с раскрытием деталей {/* Уровень 1: Поставка */} #{supply.number} {formatDate(supply.deliveryDate)} {formatCurrency(supply.totalAmount)} toggleSupply(supply.id)}> {expanded ? : } {/* Уровень 2: Маршруты (раскрывается) */} {expanded && supply.routes.map(route => ( {route.fromLocation} → {route.toLocation} {formatCurrency(route.price)} toggleRoute(route.id)}> {expanded ? : } ))} {/* Уровень 3: Товары (раскрывается) */} {expandedRoutes[route.id] && route.items.map(item => ( {item.product.name} {item.product.article} План: {item.plannedQty} Факт: {item.actualQty} {item.defectQty > 0 && ( Брак: {item.defectQty} )} {formatCurrency(item.totalPrice)} ))} ``` **UX особенности многоуровневых таблиц:** 1. **Прогрессивное раскрытие** - показываем детали только по запросу 2. **Визуальная иерархия** - отступы и цвета для разных уровней 3. **Сохранение контекста** - видны все родительские уровни 4. **Быстрая навигация** - клик по уровню раскрывает/скрывает детали 5. **Информативные индикаторы** - иконки и цвета для быстрого понимания #### Card-based Layout ```typescript // Карточки для визуального представления данных
{orders.map(order => ( Заказ #{order.id} {order.status}

{order.description}

 ))}
``` #### Master-Detail Pattern ```typescript // Список + детальная информация
{selectedOrderId ? ( ) : ( Выберите заказ для просмотра )}
``` ### 🔄 2. NAVIGATION PATTERNS #### Breadcrumb Navigation ```typescript Каталог Электроника Смартфоны ``` #### Tab Navigation ```typescript Поставки Заказы Статистика ``` #### Sidebar Navigation ```typescript
Главная Каталог
``` ### 📝 3. FORM PATTERNS #### Multi-step Form ```typescript const steps = [ { id: 'basic', title: 'Основная информация' }, { id: 'details', title: 'Детали товара' }, { id: 'review', title: 'Проверка' } ] {currentStep === 'basic' && } {currentStep === 'details' && } {currentStep === 'review' && } ``` #### Inline Editing ```typescript const [editing, setEditing] = useState(false) const [value, setValue] = useState(initialValue) {editing ? (
setValue(e.target.value)} autoFocus />
) : (
{value}
)} ``` #### Smart Defaults ```typescript // Автозаполнение на основе контекста ``` ### ⚡ 4. FEEDBACK PATTERNS #### Loading States ```typescript // Скелетоны для лучшего UX {loading ? (
) : ( )} ``` #### Toast Notifications ```typescript import { toast } from 'sonner' // Различные типы уведомлений const handleSuccess = () => { toast.success('Товар успешно добавлен', { description: 'Товар появится в каталоге через несколько минут', action: { label: 'Посмотреть', onClick: () => navigate('/catalog'), }, }) } const handleError = () => { toast.error('Ошибка при сохранении', { description: 'Проверьте подключение к интернету', action: { label: 'Повторить', onClick: retryAction, }, }) } const handleInfo = () => { toast.info('Обновление системы', { description: 'Система будет недоступна с 23:00 до 01:00', }) } ``` #### Progress Indicators ```typescript // Для длительных операций
Загрузка товаров... {progress}%
{currentItem} из {totalItems} товаров
``` ### 🔍 5. SEARCH PATTERNS #### Faceted Search ```typescript
``` #### Autocomplete Search ```typescript { setSearchTerm(e.target.value) setIsOpen(e.target.value.length > 2) }} placeholder="Начните вводить название товара..." />
{suggestions.map(suggestion => (
selectSuggestion(suggestion)} >
{suggestion.name}
{suggestion.category} • {suggestion.price} ₽
))}
``` ## 🎯 ACCESSIBILITY PATTERNS ### 1. Keyboard Navigation ```typescript // Обработка клавиатуры для кастомных компонентов const handleKeyDown = (e: KeyboardEvent) => { switch (e.key) { case 'Enter': case ' ': e.preventDefault() handleClick() break case 'Escape': handleClose() break case 'ArrowDown': focusNext() break case 'ArrowUp': focusPrevious() break } }
Добавить в корзину
``` ### 2. Screen Reader Support ```typescript // Правильные ARIA атрибуты

Создание нового товара

{hasNameError && ( )}
Нажмите Enter или кликните для создания
``` ### 3. Focus Management ```typescript // Управление фокусом в модальных окнах const DialogContent = ({ children, ...props }) => { const focusRef = useRef(null) useEffect(() => { // Фокус на контент при открытии focusRef.current?.focus() // Возврат фокуса при закрытии return () => { document.getElementById('trigger-button')?.focus() } }, []) return (
{children}
) } ``` ## 📱 RESPONSIVE PATTERNS ### Mobile-First Design ```typescript // Компоненты адаптируются под размер экрана
{/* Мобильный: 1 колонка, Планшет: 2 колонки, Десктоп: 3 колонки */}
// Навигация адаптируется {/* Мобильное выдвижное меню */} ``` ### Touch-Friendly Interfaces ```typescript // Увеличенные области касания на мобильных // Swipe жесты для карточек
``` ## 🔄 ERROR HANDLING PATTERNS ### Form Validation ```typescript const [errors, setErrors] = useState>({}) const validateForm = (data: FormData) => { const newErrors: Record = {} if (!data.name) { newErrors.name = 'Название обязательно' } if (data.price <= 0) { newErrors.price = 'Цена должна быть больше 0' } setErrors(newErrors) return Object.keys(newErrors).length === 0 } // В форме setFormData({...formData, name: e.target.value})} aria-invalid={!!errors.name} className={errors.name ? 'border-destructive' : ''} /> {errors.name && (
{errors.name}
)} ``` ### Network Error Handling ```typescript const { data, error, isLoading, refetch } = useQuery(GET_PRODUCTS) if (error) { return (

Не удалось загрузить данные

Проверьте подключение к интернету и попробуйте снова

) } ``` ## 🚀 PERFORMANCE PATTERNS ### Lazy Loading ```typescript // Ленивая загрузка тяжелых компонентов const HeavyChart = lazy(() => import('./heavy-chart')) }> ``` ### Virtual Scrolling ```typescript // Для больших списков import { FixedSizeList as List } from 'react-window' const ItemRenderer = ({ index, style }) => (
) {ItemRenderer} ``` --- _UX паттерны основаны на анализе пользовательских сценариев и UI компонентов системы SFERA_ _Версия документа: 2025-08-21_ _Основа: User-Centered Design + Accessibility + Mobile-First + Performance_