Все просто. В качестве базиса берем модель «iPhone SE» с разрешением 320×568. Данные величины делятся на 8. Работать с таким лэйаутом будет легко и приятно.

Структурная сетка состоит из 8-и колонок шириной 20dp. Отступы между колонок равны 16dp. Отступы от края — 24dp.

Работая над дизайном и адаптивом Айфона мы учитываем три разрешения 320×568, 375×667 и 414×736.

Часть элементов, например витрины с ассетами сохраняют свои размеры, их ширина кратна модулю (8dp), и они укладываются в интерфейсную сетку. Пользователь просто сможет увидеть больше.

Ширина экрана Айфонов семейства «X» не отличается от озвученных выше. «iPhone X» = 375, «iPhone XS» и «XR» = 414. Отличаются они высотой. Дополнительных усилий при разработке дизайна и адаптива не требуется.

Другие элементы, например, бары (статус-бар, нав-бар, таб-бар), занимают 100% ширины экрана, а такие как постер на карточке, масштабируются в рамках структурной сетки, пропорционально меняя размеры в зависимости от разрешения экрана.

Аналогично масштабируется содержимое каталога.

Таблицы в профиле также занимают 100% ширины экрана.

Для работы над Айпадом берем классическую модель с диагональю 9.7" и альбомную оринтацию разрешением 1024×768.

Структурная сетка состоит из 24-и колонок шириной 24dp. Отступы между колонок равны 16dp. Отступы от края — 40dp.

Однако кроме альбомной, нужно учесть и портретную ориентацию экрана, с разрешением 768×1024.

Понятно, что часть экранов будут легко адаптироваться, но некоторые, со сложной структурой, например, карточку, нужно проектировать вручную.

Структурная сетка в портретной ориентации состоит из 16-и колонок шириной 28dp. Отступы между колонок равны 16dp. Отступы от края — 40dp.

Правила такие же, что и в случае с Айфоном. Однако, адаптив Айпада нужно рассматривать в двух плоскостях:

1. В рамках одной модели учесть альбомную и портретную ориентацию, о чем уже говорилось выше;

2. В рамках нескольких устройств, так как моделей Айпада с разными разрешениями экрана на рынке теперь много. Мы учитываем 3 разрешения:

- iPad, 9.7" — 1024×768;
- iPad Pro, 10.5" — 1112×834;
- iPad Pro, 12.9" — 1366×1024.

Далее рассмотрим 4 принципиально отличных по структуре и построению лэйаута:

- Стартовый экран;
- Каталог;
- Профиль;
- Карточка контента.

Этот экран как и другие экраны данного типа (содержащие витрины) адаптивен и правила очень просты.

1. Все витрины сохраняют свои изначальные размеры — пользователь увидит больше или меньше, в зависимости от ширины экрана.

2. Бары и заголовки (как и везде) масштабируются по ширине, занимая 100% экрана.

Содержимое каталогов подчиняется структурной сетке. Контент отображается плиткой, размеры ассета динамические, отступы фиксированные.

Айпад ПРО с диагональю 12.9" разительно отличается от младших моделей, на нем можно показывать больше контента, добавив пару колонок.

Если экран делится на две колонки, они меняют свои ширины пропорционально. Расстояние между колонками фиксировано = 56dp.

Карточка контента состоит из двух или трех колонок. Минимальная ширина карточки 768dp, максимальная 1024.

Если ширина экрана меньше 1024dp, используется лэйаут с двумя колонками.

Если равен 1024dp — лэйаут с тремя колонками.

Если больше 1024dp — по краям карточки появляются поля.