Кросс-платформенная дизайн-система ivi. Адаптивный лэйаут на сетках Процессы разработки

Доклад принят в программу конференции
Евгений Киреев
ivi.ru

iOS-разработчик c 2017 года, сначала поработал в стартапе, а теперь главный вдохновитель и разработчик дизайн-системы на платформе iOS в ivi.

Тезисы

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

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

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

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

Другие доклады секции Процессы разработки