Кейс · продуктовый дизайн
Tabrara iOS
Приложение продавца Tabrara было только на Android. Я перенёс его на iPhone по правилам iOS
Работал один, от требований до передачи в разработку
Задача
Перенести приложение продавца с Android на iPhone с теми же функциями
Решение
Навигация, компоненты и жесты iOS, вход через Apple, подписка через App Store и удаление аккаунта
Результат
52 экрана в двух темах, дизайн‑система и спецификации для разработчиков
44
функции Android перенесены на iOS
15
решений с записанной причиной
69
исправлений по ревью из 80 замечаний
8
изученных приложений для продавцов
52
экрана в пяти разделах
Почему iPhone
В Tabrara продавцы ведут интернет-магазин с телефона: каталог, заказы, отчёты и команду. Приложение было только на Android, поэтому с iPhone работать было нельзя. А растёт сервис за счёт рекомендаций продавцов друг другу, и каждый продавец с iPhone выпадал из этой цепочки
Остаётся как на Android
- Все функции продавца
- Цвета, иллюстрации и состав экранов
- Данные и сервер
Меняется под iOS
- Навигация и жесты по Human Interface Guidelines
- Системные компоненты в стиле Liquid Glass
- Иконки SF Symbols и шрифт SF Pro
Без этого не пройти ревью App Store
- Вход через Apple
- Подписка через покупки Apple
- Удаление аккаунта в приложении
В работу не входили веб-витрина покупателя, iPad и новые функции из стратегии роста
Как шла работа
После ревью работа возвращается туда, где найдена проблема: в дизайн-систему, экраны, тексты или состояния
Исследование
- Требования
- Аудитория и данные
- Аналоги
Результат
Бриф и вопросы команде
Проектирование
- Сценарии
- Навигация
- Карта экранов
Результат
15 сценариев, 52 экрана
Визуальный дизайн
- Дизайн-система
- Экраны
- Тексты
- Состояния
Результат
598 кадров в двух темах
Проверка и передача
- Ревью разделов
- Спецификации
Результат
6 документов
Что я изучил
До экранов разобрал исходный Android, приложения для продавцов и требования Apple
Макеты Android
Все пять разделов последней версии. Где вариантов было несколько, например список товаров и онбординг, выбирал сам и записывал причину
8 приложений для продавцов
Ecwid, Shopify, Ozon Seller, Etsy Seller, Square и другие. Кнопки действия в строке заказа нет ни у кого: статус меняют на экране заказа
Apple и iOS 26
Что меняет Liquid Glass в навигации и какие пункты ревью App Store влияют на экраны: вход, подписка и удаление аккаунта
Главная находка
Телефон и адрес в карточке заказа
Ни одно из 8 приложений не показывает их в списке заказов. А в опросе продавцов Tabrara телефон, имя и адрес выбирали чаще всего. Поэтому в карточке iOS они стоят первыми, а номер заказа и время ушли на второй план
Заказы, товары, отчёты и магазин
Заказы стоят первыми, потому что с ними продавец работает каждый день. В списках заказов и товаров таб-бар сворачивается при прокрутке
Заказы
Чипы статусов со счётчиками показывают, что ждёт внимания
Товары
Один список, категории сворачиваются. Поиск и фильтры сверху
Отчёты
Выручка, прибыль и число заказов за период
Магазин
Настройки списком, как в iOS. Опасные действия внизу
Решение 1
Что поменялось при переходе на iOS
Функции те же, что на Android, а путь к ним другой. Каждое отличие я записал с причиной
| Android | iOS |
|---|---|
| Плавающая кнопка «+» | Кнопка «+» в навбаре |
| Меню «⋮» у строки | Свайпы и контекстное меню |
| Своя шторка «Поделиться» | Системное меню «Поделиться» |
| «Выйти» и «Удалить» в меню «⋮» | Внизу настроек, где их ищут на iOS |
| Диалоги Material | Алерты, шторки и листы действий |
| Roboto и Material Symbols | SF Pro и SF Symbols |
Действия внизу
Главные кнопки заказа под большим пальцем
Свайп
Новый заказ принимается одним движением
Решение 2
Как продавцу с Android найти свой магазин на iPhone
На Android продавец входил по номеру телефона, а на iPhone первой стоит кнопка «Войти с Apple». Без связки способов входа он получил бы пустой аккаунт и решил, что заказы пропали
Вход
Apple, Google, телефон или почта
Развилка
Новому аккаунту сначала предлагают найти свой магазин
Почта совпала
Приложение само находит магазин и просит код из письма
Один аккаунт
Все способы входа в одном списке, их можно добавлять
Решение 3
Вес до грамма
Продавец написал в поддержку, что двух знаков после запятой мало. На дорогом товаре каждый недовес стоит денег
«Для весового товара сделать ещё одну цифру для граммовки. У вас стоит после запятой две цифры, а надо 3, а то когда товар достаточно дорогой, существенный минус идёт при постоянном недоборе»
Минимум и шаг
Продавец сам задаёт минимальный заказ и шаг для покупателя
Три знака
Вес вводится с точностью до грамма, степпер стал шире
Правка состава
Точный вес после взвешивания. Если заказ оплачен, приложение предупредит о новой сумме
Сумма считается от точного веса
1 200 ₽ × 0,485 кг
582 ₽
Решение 4
Tabrara PRO на iPhone
Экраны подписки нельзя перенести с Android как есть. Покупка идёт через Apple, и у Apple свои требования к условиям, восстановлению покупок и удалению аккаунта
Пейвол
Цена, автопродление и «Восстановить покупки»
PRO с Android
Подписка, купленная на Android, работает и на iPhone. Покупать второй раз не нужно
Удаление аккаунта
Прямо в приложении. Подписку Apple оно не отменяет, об этом предупреждает баннер
Уведомления
Разрешение спрашиваем после первой отправки ссылки на магазин, когда польза понятна
Пункты App Store Review Guidelines: 3.1.1 (покупки в приложении), 3.1.2 (подписки) и 5.1.1(v) (удаление аккаунта)
Цвета и темы
Цвета и иллюстрации пришли из Android. Типографика, иконки и системные компоненты следуют iOS. Светлая и тёмная темы: два режима одних переменных
| Токен | Светлая | Тёмная |
|---|---|---|
| bg/grouped | #F1EDEB | #141313 |
| surface/card | #FFFFFF | #201F1F |
| text/primary | #1C1B1B | #E5E2E0 |
| accent/tint | #005E1B | #9FD49B |
| accent/fill | #CCFF77 | #A8E735 |
1,1 : 1
Салатовый на светлом фоне не читается как текст. Он остался только заливкой кнопок и чипов с тёмной подписью
7,6 : 1
Тёмно-зелёный стал акцентом: ссылки, активная вкладка, иконки
- Новый
- Подтверждён
- Собран
- Завершён
- Отменён
Статус заказа всегда подписан словом. Цвет только помогает
Светлая тема
Тёплый белый фон, тёмно-зелёный акцент
Тёмная тема
Салатовый работает и как акцент
Что нашло ревью и что я исправил
Каждый раздел проверен по Human Interface Guidelines, WCAG, дизайн-системе, текстам, состояниям и паритету с Android. Три примера из раздела «Заказы»
WCAG 1.4.11
Кружок выбора не был виден
2,71 → 5,09
Обводка на серой группе не дотягивала до контраста 3:1. Поднял тон токена и проверил обе темы
Паритет с Android
В поиске пропал фильтр по статусам
На Android выдачу можно сузить до новых заказов. Вернул ряд чипов со счётчиками
HIG
Меню расходилось с системным
В iOS 26 иконки в меню стоят слева. Перестроил компонент по киту Apple и вернул пункт «Добавить в контакты»
Что получают разработчики
Пиксели и отступы видны в Dev Mode. Спецификация отвечает на то, чего там нет: переходы, поведение, состояния, данные, тексты и допущения
Библиотека дизайн-системы
Переменные двух тем, текстовые стили, компоненты
Макеты
598 кадров: каждый экран в светлой и тёмной теме, со всеми состояниями
Спецификации разделов
Заказы, товары, отчёты, вход, магазин и подписка
Тексты и состояния
Глоссарий, подписи VoiceOver, 232 пронумерованных состояния
Компонент → SwiftUI
| tab-bar | TabView |
|---|---|
| nav-bar | navigationTitle + toolbar |
| sheet | .sheet + presentationDetents |
| alert | .alert |
| action-sheet | .confirmationDialog |
| list-row | List(.insetGrouped) |
| bar-chart | Swift Charts |
| toast | свой оверлей |
Каждый экран со всеми состояниями
Загрузка, пусто, нет сети, ошибка действия и изменения с другого устройства. Всего описано 232 состояния и крайних случая
Загрузка
Пусто
Нет сети
Действие выполняется
Ошибка действия
Изменили на другом устройстве
