Крупные продукты-сервисы часто представлены на большом количестве платформ: мобильные, веб, приставки, телевизоры — каждая со своими уникальными особенностями. Чем их больше, тем больше и проблем: растет нагрузка на отдел дизайна, а кроссплатформенные юзеры страдают от несинхронных релизов и разного UI. Чтобы обеспечить плавный и приятный опыт использования сервиса, можно прибегнуть к одному простому в своей идее подходу — унифицировать дизайн для всех платформ, ввести единый визуальный язык, иными словами — внедрить кросс-платформенную дизайн-систему. Но как быть с размерами элементов и шрифтов на таких разных платформах?

Мы вводим модульную сетку, которая разбивает весь экран на несколько колонок. Чем больше экран устройства, тем больше колонок. Таким образом задача дизайна сводится к тому, чтобы предоставить макет в вариантах со всеми возможными количествами колонок (обычно от 4 до 6). С помощью такого подхода элегантно решается задача адаптивности интерфейса.

Но все становится не так просто, когда мы начинаем копать в техническую реализацию. И если на вебе сетки уже давно не новость, то для мобильных платформ эта вещь не нативна и малоизвестна.

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