Готовые размеры и шаблоны для макетов iPhone 17‑серии
Короткий ответ: для макетов используйте логические размеры 402×874 pt (iPhone 17 и 17 Pro), 420×912 pt (17 Air) и 440×956 pt (17 Pro Max); физические пиксели примерно 1206×2622, 1260×2736 и 1320×2868 px соответственно — и учитывайте safe area (status bar ≈48 pt, home bar ≈34 pt).
Основные размеры и соотношения
iPhone 17‑серия сохранила вытянутое соотношение ~1:2,167. Для дизайна важны две системы размеров:
- Логические (points) — используйте в Figma/Sketch, задавайте артборды в pt и работайте в 1×.
- Физические (px) — нужны для растровых экспортов и web‑верстки с учётом плотности Retina.
Краткая сводка по моделям:
- iPhone 17 / 17 Pro: логическое 402×874 pt, физическое ≈1206×2622 px.
- iPhone 17 Air: логическое 420×912 pt, физическое ≈1260×2736 px.
- iPhone 17 Pro Max: логическое 440×956 pt, физическое ≈1320×2868 px.
Для UI‑библиотек в Figma держите базовую сетку в pt и экспортируйте иконки в SVG + 2×/3× PNG для ретины.
Как делать макеты в Figma и Sketch
Практика: создайте 2–3 базовых артборда и адаптируйте дизайн под остальные экраны.
Рекомендуемые шаблоны для макетов (используйте как артборды 1×):
Таблица: базовые размеры для макетов
| Модель | Диагональ дисплея | Логическое разрешение (pt) | Рекомендация для артборда |
|---|---|---|---|
| iPhone 17 | 6,3″ | 402 × 874 | 402×874 pt (1×) |
| iPhone 17 Pro | 6,3″ | 402 × 874 | тот же артборд, отличия в safe area |
| iPhone 17 Air | ≈6,6″ | 420 × 912 | 420×912 pt |
| iPhone 17 Pro Max | 6,9″ | 440 × 956 | 440×956 pt |
Практические шаги:
- Создайте компоненты с авто‑layout и переменными отступами (spacing tokens).
- Используйте символы (components) с масштабируемыми размерами для кнопок/карточек.
- Включите гайд‑линию safe area: status bar ≈48 pt, home indicator ≈34 pt (ориентировочно).
Не делайте один фиксированный макет "на все случаи": разные высоты экранов приведут к обрезам или пустым зонам.
Разрешения, экспорт и верстка
- Экспорт иконок/растров: готовьте 2× и 3×. SVG — для масштабируемых векторных элементов.
- Вёрстка: опирайтесь на логические pt при расчёте размеров, но тестируйте на физическом px (Retina). В CSS используйте адаптивные единицы (vw, %) и медиазапросы по ширине (min/max‑width).
- Шрифты: задавайте базовый размер в rem и масштабируйте через media queries для крупных экранов (Pro Max).
Частые ошибки
- Использование только физического разрешения (px) в макетах вместо pt.
- Игнорирование safe area — важная причина обрезки элементов.
- Экспорт только 1× ресурсов — изображение будет нечетким на ретина‑устройствах.
- Жёсткие пиксельные отступы вместо относительных размеров.
FAQ
-
В: Что важнее для макета — pt или px?
О: Для дизайна — pt (логические точки). Для финального экспорта и тестирования — px с учётом плотности (2×/3×). -
В: Как учесть notch и home indicator?
О: Ориентируйтесь на safe area: верхняя зона ≈48 pt, нижняя ≈34 pt; проверяйте на реальных устройствах. -
В: Нужно ли делать отдельный макет для каждой модели?
О: Хватит 2–3 базовых макетов (402×874, 420×912, 440×956), дальше — адаптация компонентов. -
В: Какие форматы иконок лучше?
О: SVG для интерфейсных иконок; PNG 2×/3× для растровых ассетов.
Если нужно, подготовлю готовые Figma‑артборды (402×874, 420×912, 440×956) с сетками и safe area.