Картка замовлення · 11 мобільних версій + 5 юзабіліті-варіантів

Один дизайн-код, одинадцять способів розкласти його під великий палець. Дані зняті з живого A00867. Усі дії локальні, прод не змінюється.

Відкривай на телефоні. У кожній версії можна клікати, додавати товари з каталогу на 117 позицій, міняти кількість і ціну, ставити знижку, перемикати оплату і статус.

Картка замовлення
01Одна стрічка Класичний скрол, але порядок під роботу: гроші → склад → поля. Липкий низ з головною дією. 02Нижні вкладки Панелі винесені в таб-бар унизу, як у застосунку. Свій скрол у кожній вкладці. 03Шухляда знизу Перший екран лише гроші і склад. Решта відкривається шухлядами з двома точками зупинки. 04Акордеон Кожен блок згорнутий у рядок із головним значенням. Уся карта замовлення на одному екрані. 05Липкий рахунок Сума і стан оплати прибиті під шапкою на весь час скролу. Тап розкриває повний підсумок. 06Свайп-панелі Панелі гортаються пальцем вліво-вправо, вкладки вгорі показують, де ти зараз. 07Зона великого пальця Верх лише читається, усе керування в нижній панелі: статус, оплата, товар, ще. 08Компакт-рядки Поля не інпутами, а рядками «лейбл … значення ›». Редактор розкривається на місці. 09Спершу склад Товари і гроші на першому екрані. Каталог відкривається на весь екран з пошуком. 10Робочий день Зверху смуга наступного кроку: написати, подзвонити, взяти оплату, створити ТТН. 11Палець + свайп Зведення 06 і 07: розділи стоять найвище і гортаються свайпом, керування зібране в нижню смугу — статус і «Ще» зверху, під ними товар, оплата, відміна і чорна «Зберегти».
Юзабіліті-партія по 11-й версії
01Одна рука Часті дії в нижній третині екрана, цілі не менші 44px, вибір розкривається списком у потоці. 02Ритм Одна шкала відступів кроком 4px на весь файл, суми вирівняні в одну колонку, щільніші блоки цифр. 03Нуль поп-апів Жодного оверлея: оплата, доставка, теги і каталог на 117 позицій розкриваються прямо в потоці. 04Швидке додавання Каталог з пошуком і степером у потоці, коментар підряд без повторного тапу, швидкі суми оплати, скасування помилкового тапу. 05Три секунди Зведена стрічка «До сплати · Оплачено · Маржа» першим екраном, рідкісні поля згорнуті, найкоротший розділ.
Список замовлень
01Щільний рядок Максимум замовлень на екран. Шапка стискається при скролі, статуси одним рядом. 02Черга дня День головна одиниця: липкий заголовок з підсумком, дні згортаються. 03Свайп по рядку Свайп вліво міняє статус і оплату, вправо дзвонить і пише. Без відкриття картки. 04Виділення і масова дія Розібрати 44 «Нових» за один захід. Обрано 7 · 22 400 грн, одна дія на всіх. 05Канбан статусів Кожен статус окрема сторінка, гортається пальцем. Робота купкою. 06Фільтр-шухляда Шапка в один ряд, фільтри в шухляді, активні повертаються знімними чіпами. 07Гроші вперед Смуга періоду: скільки замовлень, скільки грошей, скільки ще чекає оплати. 08Пошук перший Клієнт дзвонить, замовлення за 3 секунди. Телефон у будь-якому форматі. 09Дві лінії без зайвого Найспокійніший. Про ритм, вирівнювання і читабельність. 10Робоча черга Порядок не за часом, а за тим, що горить. Зверху «Треба зробити N». 11Збірка за правками Рядок з 10-го, канбан зі свайпом з 5-го, верх з 8-го. Пошук прямо в шапці без окремого екрана, фільтр і по статусу, і по сайту, період до 30 днів, зліва круглий чекбокс для виділення пачкою. 12Повітря Рядок за новою композицією: імʼя, оплата, ціна одним рядом, під ним телефон, номер, сайт і статус справа. Тримається на просторі й ритмі, майже без ліній. 13Права вісь Та сама композиція, але ціна і статус стоять у строгій спільній вертикалі справа: список сканується одним рухом ока по правому краю. 14Окрема картка Замовлення відділені простором, а не лініями: кожне сидить у власній картці з внутрішнім полем, статус усередині виглядає кнопкою. 15Тиха сітка Крок 4px, вирівнювання по бейслайну, колір лишився тільки в смузі та селекторі статусу. Решта на трьох рівнях сірого. 16Під великий палець Статус це головна дія рядка: велика зона тапу, крупні імʼя і ціна, службове свідомо дрібне.
Що спільного в усіх версіях

Ті самі токени, той самий шрифт, ті самі компоненти, що на десктопі. Усі попапи перероблені в нижні шухляди. Закриті типові баги мобільних збірок: 100dvh замість 100vh, safe-area під нотч і смугу «дому», тап-таргети від 44px, поля 16px (щоб iOS не зумив), скрол не стрибає після дії, нуль горизонтального скролу на 320-430px. Списки додатково тримають гейт: щонайменше 5 замовлень на першому екрані, рядок не вищий за 96px, не більше двох рядів контролів.

Десктопний першоджерел

Бойовий дизайн-код картки → — те саме замовлення на широкому екрані. З нього знято всі мобільні версії.

Десять десктопних композицій усередині живої панелі: w01 · w02 · w03 · w04 · w05 · w06 · w07 · w08 · w09 · w10