Как будешь описывать задачи для Frontend на мобильных приложениях?

Как будешь описывать задачи для Frontend на мобильных приложениях?

Описание задач для мобильного фронтенда требует особого внимания к специфике платформ, производительности и пользовательскому опыту. Вот мой подход.

1. Структура описания задачи (Template)

Каждая задача должна содержать:

Заголовок (Title)

• Ясный, конкретный, одна фича/баг
• Плохо: "Исправить дизайн"
• Хорошо: "Увеличить размер кнопки CTA с 44dp до 56dp на iOS"

Описание (Description)

• Что нужно сделать — конкретный результат
• Где это находится — точное расположение в приложении
• Когда это видно — состояния, условия
• Зачем — бизнес-причина (улучшение UX, увеличение конверсии)

Пример:

Необходимо реализовать экран "Оформление заказа" для iOS и Android.

Экран должен отображаться при нажатии на кнопку "Оформить" в корзине.

Экран содержит:
1. Форма доставки (адрес, выбор типа доставки)
2. Выбор способа оплаты
3. Кнопка "Оплатить" (56dp высота, на весь экран)
4. Обработка ошибок при пустых полях

Дизайн в Figma: [ссылка]

2. Платформо-специфичные требования

iOS:

• Safe Area (notch, Dynamic Island)
• Dark Mode поддержка
• Accessibility (VoiceOver, text scaling)
• Animation (2-3 frames, не более 300ms)
• Screen sizes: iPhone 12 mini до iPhone 15 Pro Max

Android:

• API level 26+ (minimum)
• Navigation bar (bottom/side)
• Разные плотности экрана (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
• Back button обработка
• Material Design 3

Пример описания:

[iOS]
- Использовать SafeArea для отступов
- Поддержка Dark Mode (LightContent, DarkContent)
- Accessibility: кнопки минимум 44x44pt

[Android]
- API 26+
- Поддержка жестов (swipe back на Android 5+)
- Edge-to-edge layout с insets

3. Описание UI компонентов

Не допускай расплывчатости:

Плохо:

"Сделай красивую кнопку"

Хорошо:

"Кнопка (Button Primary):
- Размер: 56dp высота, 100% ширина экрана (минус 16dp отступы)
- Радиус: 8dp
- Текст: "Подтвердить платёж", white, 16sp, bold
- Цвет фона: primary (#007AFF на iOS, #1F51BA на Android)
- Цвет при hover/press: darken(20%)
- Disabled состояние: opacity 50%
- Текст внутри кнопки центрирован
- Padding: 12dp vertical, 16dp horizontal

4. Состояния и переходы

Обязательно описывай все состояния:

Экран регистрации имеет состояния:

1. EMPTY — поля пусты
   - Кнопка "Зарегистрироваться" disabled
   - Ошибок нет

2. FILLING — пользователь заполняет поля
   - Валидация в реальном времени
   - Email: показать ошибку если не валидный
   - Password: показать требования (минимум 8 символов, буква + цифра)

3. LOADING — отправка на сервер
   - Кнопка disabled
   - Показать spinner внутри кнопки
   - Поля disabled

4. SUCCESS — успешная регистрация
   - Показать confirmation сообщение
   - Через 2 секунды перейти на экран входа

5. ERROR — ошибка сервера
   - Показать красный banner: "Ошибка: [текст ошибки]"
   - Кнопка "Повторить" активна
   - Поля остаются заполненными

5. Производительность и ограничения

Для мобильного нужна особая внимательность:

Требования к производительности:
- Экран должен загружаться за < 1 сек (idle idle время)
- Список из 1000 элементов скролится плавно (60 FPS на iOS, 90+ FPS на Android)
- При скролле не должно быть lag (дрожания)
- Изображения: 1x, 2x, 3x размеры (iOS), ldpi-xxxhdpi (Android)
- Кэшировать данные локально (не грузить каждый раз)

Ограничения:
- Battery: минимизировать GPS, Bluetooth, location updates
- Network: работать с медленным интернетом (3G/4G)
- Storage: минимальный размер приложения (< 100 MB установки)

6. Навигация

Опиши flow переходов:

Навигационный flow:
Home -> Product Detail --(tap "В корзину")--> Toast notification
                     --(tap "Купить сейчас")--> Checkout
                     --(back button)--> Home

Checkout -> Payment --(успех)--> Order Confirmation
                   --(ошибка)--> Alert + остаться на Checkout

Order Confirmation --(tap "Спасибо")--> Home

7. Интеграция с API

Опиши endpoints, которые нужны:

Для экрана "Профиль" нужны:

1. GET /api/v1/user/profile
   Response: {
     id, name, email, phone, avatar_url, created_at
   }
   
2. PUT /api/v1/user/profile
   Body: { name, phone }
   Response: 200 OK или 400 Bad Request
   
3. POST /api/v1/user/avatar
   Multipart form-data: image
   Response: { avatar_url }
   
Обработка ошибок:
- 401: Unauthorized -> перейти на Login
- 403: Forbidden -> показать сообщение
- 5xx: Server Error -> показать Retry button

8. Accessibility (a11y)

Не забывай про доступность:

Требования доступности:
- VoiceOver (iOS): все текстовые элементы должны иметь доступный текст
- TalkBack (Android): кнопки, иконки должны иметь описание
- Min text size: 12sp (можно увеличивать на 150%, 200%)
- Color contrast: минимум 4.5:1 для основного текста
- Кнопки: минимум 44x44dp (iOS) / 48x48dp (Android)
- Не используй только цвет для передачи информации (добавь иконки/текст)

Пример:
Кнопка "Добавить"
- Accessibility label: "Добавить в корзину"
- Value: "Товар уже в корзине" (если применимо)
- Hint: "Двойной тап для добавления"

9. Тестирование

Опиши, как тестировать:

Чеклист тестирования:
- [ ] Работает на iOS 14+, Android 8+
- [ ] Экран корректен на всех размерах (mini до max)
- [ ] Dark Mode включён/выключен
- [ ] VoiceOver/TalkBack работает
- [ ] Сетевая ошибка (отключить интернет)
- [ ] Slow network (3G в DevTools)
- [ ] Rotation (поворот экрана) не дублирует данные
- [ ] Кэш работает (offline mode)

10. Дизайн документация

Всегда прикрепи:

• Figma ссылка на макет
• Версия дизайна
• Ссылка на Design System (если есть)
• Цвета из палитры
• Typography (шрифты, размеры, вес)
• Spacing (отступы, paddings)

Инструменты и форматы

Используй:

• Figma — дизайн и прототип
• Jira/Linear — описание задач
• Loom — видео демонстрация (особенно для анимаций)
• Markdown — структурированный текст в описании

Пример полной задачи

Title: Реализовать экран "Избранное" для iOS и Android

Description:
## Обзор
Экран отображает список избранных товаров пользователя.
Доступен через bottom tab "Избранное".

## UI
- Header: "Избранное" + иконка сердца
- List: прокручиваемый список товаров
- Empty state: "У вас нет избранных товаров" + кнопка "Начать покупки"

## Функциональность
1. Загрузить список при открытии экрана
2. Pull-to-refresh для обновления
3. Долгий тап на товар -> контекстное меню (удалить, поделиться)
4. Удаление товара -> анимация свайпа + toast "Удалено"

## API
GET /api/v1/favorites
DELETE /api/v1/favorites/{id}

## Дизайн
https://figma.com/...

## Требования
- iOS 14+, Android 8+
- Поддержка Dark Mode
- VoiceOver/TalkBack работают
- Список из 1000 товаров скролится плавно

Совет System Analyst для мобильного

1. Будь специфичен — мобильный разработчик должен точно понять, что делать
2. Учитывай платформу — iOS и Android разные, требования могут отличаться
3. Думай про performance — мобильные устройства медленнее ПК
4. Не забывай а11y — доступность на мобильном критична
5. Прикрепи дизайн — лучше один раз показать, чем описывать
6. Опиши все состояния — loading, error, empty, success
7. Тестируй на реальных устройствах — симулятор обманывает

Хорошее описание задачи = качественный мобильный продукт + счастливый разработчик.