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

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

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

01Одна стрічка Класичний скрол, але порядок під роботу: гроші → склад → поля. Липкий низ з головною дією. 02Нижні вкладки Панелі винесені в таб-бар унизу, як у застосунку. Свій скрол у кожній вкладці. 03Шухляда знизу Перший екран лише гроші і склад. Решта відкривається шухлядами з двома точками зупинки. 04Акордеон Кожен блок згорнутий у рядок із головним значенням. Уся карта замовлення на одному екрані. 05Липкий рахунок Сума і стан оплати прибиті під шапкою на весь час скролу. Тап розкриває повний підсумок. 06Свайп-панелі Панелі гортаються пальцем вліво-вправо, вкладки вгорі показують, де ти зараз. 07Зона великого пальця Верх лише читається, усе керування в нижній панелі: статус, оплата, товар, ще. 08Компакт-рядки Поля не інпутами, а рядками «лейбл … значення ›». Редактор розкривається на місці. 09Спершу склад Товари і гроші на першому екрані. Каталог відкривається на весь екран з пошуком. 10Робочий день Зверху смуга наступного кроку: написати, подзвонити, взяти оплату, створити ТТН. 11Палець + свайп Зведення 06 і 07: розділи стоять найвище і гортаються свайпом, керування зібране в нижню смугу — статус і «Ще» зверху, під ними товар, оплата, відміна і чорна «Зберегти».
Що спільного в усіх версіях

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

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

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

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