Адаптація дизайну під планшети (iPad, Android-планшети)
Розтягнути телефонний макет на планшетний екран — це не адаптація. Це «letterbox режим»: вузька колонна контенту посередину великого екрана з пустими полями по боках. iOS показує такі додатки в сумісному режимі, але App Store прямо указує на підтримку iPad як окрему метрику якості.
Планшетний UI — інша парадигма
На телефоні 390pt ширини — контент займає все простір. На iPad 11" з 834pt ширини — одноколоночний layout виглядає розрідженим. На iPad Pro 12.9" — 1024pt — це вже ближче до десктопного екрана, ніж до мобільного.
Apple HIG для iPad рекомендує використовувати горизонтальне простір продуктивно: sidebar + content (Split View паттерн), двохколоночні сітки для каталогів та списків, modal dialogs замість full-screen переходів (на великому екрані full-screen presentation для простої дії виглядає перегруженно).
Для Android-планшетів Material Design 3 вводить поняття Adaptive Layouts з трьома breakpoints: Compact (< 600dp), Medium (600–839dp), Expanded (≥ 840dp). При Expanded — NavigationRail замість Bottom Navigation, List-Detail layout для master-detail паттерну.
Що змінюється в дизайні
Навігація. Tab Bar на iPad перетворюється на Sidebar (UISplitViewController на iOS або NavigationSuiteScaffold у Compose). Це не просто стилістика — це інший паттерн взаємодії: користувач бачить навігацію та контент одночасно.
Типографіка та відступи. Мінімальні відступи від країв екрана — не 16pt, а 24–32pt. Ширина текстової колонки — обмежена для читаємості: максимум 680–720pt для body text, навіть якщо екран дозволяє більше.
Зображення та медіа. На телефоні зображення займає всю ширину. На планшеті — воно либо в сітці (2–3 колонки), либо з фіксованим aspect ratio у рамках колонки. Hero-зображення на 1024pt ширині з неправильним масштабуванням — це пікселі на retina-екрані або некрасивий кроп.
Форми та модальні вікна. На iPad форми не відкриваються full-screen — вони показуються як .formSheet (768×960pt) або .pageSheet. Дизайн повинен враховувати це: форма з max-width та центруванням, а не розтягнута на весь екран.
Drag and Drop та Stage Manager. На iPad з iOS 16+ додаток може працювати в Stage Manager — змінюваному вікні, не фіксованому розмірі екрана. Дизайн повинен коректно працювати у діапазоні ширин, а не тільки на фіксованих breakpoints.
Як будуємо в Figma
Окремі фреймы для планшетних розмірів: iPad mini 8.3" (744×1133), iPad 10th gen (820×1180), iPad Pro 11" (834×1194), iPad Pro 12.9" (1024×1366). Для Android: 600×960dp (Medium), 840×1280dp (Expanded).
Компоненти з існуючого UI-кита — переиспользуємо без змін. Меняємо layout: кількість колонок, відступи, навігаційний паттерн. Sidebar — окремий компонент з тими ж даними, що й Tab Bar, але іншим візуальним представленням.
Адаптація не означає «інший дизайн». Ті ж кольори, шрифти, компоненти — інша розстановка у просторі.
Строки
Планшетна адаптація дизайну для додатка середної складності (15–25 ключових екранів) — 2–3 робочих дні. Залежить від числа унікальних layout-паттернів та необхідності підтримки Stage Manager / free-form window.
Вартість — індивідуально.