Адаптивный дизайн. Как собирать макеты девайсов в несколько кликов

Отрисовка адаптивов — тяжелая ноша для любого продуктового дизайнера. Вроде бы все “фишки”, которые хотелось применить, уже реализованы. Все незаурядные вопросы решены и ваш интерфейс уже отшлифован до блеска. Но тут наступает момент, когда нужно забыть про креатив и вспомнить, что дизайн — такая же работа, как и все остальные. В этой статье методичка — о том, как за минимальное время создать адаптивный интерфейс, не жертвуя качеством.

Методология

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

Полагаю, что на этапе прочтения этой статьи вы уже знакомы с понятием атомарного подхода в дизайне ^{[ссылка уд. мод.]}. Секрет нашего метода в работе с шаблонами страниц.

Какие инструменты нам предстоит применять:

• Компоненты шаблонов страниц;

• Auto-layout (конечно);

• Библиотека переменных;

• Сетка;

• Секции.

Процесс работы будет строиться на создании вариативных компонентов шаблонов страниц и привязке переменных ко всему, чему только возможно. Если у компонентов-молекул варианты отражают различные состояния, в случае компонентов-шаблонов они возьмут на себя роль адаптивов (тоже, суть, состояний).

Наша задача:

1. Подготовить библиотеку переменных и настроить режимы для различных брейкпоинтов;

2. Разметить макет для основного разрешения;

3. Повесить на компонент этого шаблона все свойства, которые нам необходимы;

4. Отрисовать все требуемые состояния;

5. Разнести отрисованные состояния по секциям с настроенным сетом переменных;

6. Доработать компонент в соответствии с адативами;

7. Произвести смену варианта используемого в секции компонента;

8. Навести красоту в файле (настроить отступы между макетами, опционально)

Пошаговая демонстрация

Шаг 1. Подготовка библиотеки.

Коллекция переменных размеров

В первую очередь мы создадим несколько переменных для дальнейшей работы:

• breakpoint — для определения размеров наших адаптивов;

• grid-margin — боковые отступы от края экрана для контента;

• grid-gutter — внутренние отступы между колонками сетки;

• grid-columns — количество колонок в сетке.

Области применения

Сразу настроим область применения (Scope) для наших переменных.
Для breakpoint это будет Width and height, поскольку мы планируем применять его к ширине фрейма.

Для всех же остальных, так как мы не планируем использовать их нигде, кроме сетки, Scope можно вовсе отключить, чтобы они не мешались нам при настройке макетов.

Для дальнейшего удобства объединим все переменные в группу Layout

Режимы для адаптивов

В фигме сеты переменных задаются через режимы (Mode). Например, если мы хотим добавить несколько коллекций цветов — для темной и светлой темы, мы создадим 2 режима — Dark и Light, соответственно. В нашем же случае мы будем использовать их в качестве переключателей девайсов. Возьмем за основу desktop, и добавим к нему mobile для наглядности. Сразу запишем релевантные значения.

Шаг 2. Разметка основного макета.

Сетка

Теперь создадим сетку и настроим ее, используя переменные из нашей библиотеки.

Создадим стиль для нашей сетки, для более удобного доступа.

Шаблон

Создадим первый фрейм и применим к нему сетку и переменную breakpoint.

Обернем фрейм в компонент комбинацией 🪟Ctrl+Alt+K (🍎Cmd+Option+K) и мы имеем основу для нашего шаблона.

Теперь наполним его контентом, чтобы получить страницу для демонстрации. У меня это будет страница продуктов, собранная на дизайн-системе Figma Simple.

Шаг 3-4. Свойства компонента шаблона и состояния страницы.

В продуктовом дизайне разработка интерфейса обычно (правильнее сказать, “желательно”) сопровождается функциональными требованиями, техническим заданием, документацией или, хотя бы, устным повествованием продукт-менеджера. В этом сценарии я рекомендую заранее продумать, какие блоки будут отображаться, какие компоненты менять свои состояния и т.п., чтобы обеспечить легкий доступ к основным настройкам сразу из компонента, без необходимости лезть в слои и настраивать все изнутри. Хотя тут надо быть осторожным и не плодить “динозавров”, которые можно изменить настолько, что страница потеряет изначальную логику, ради которой создавалась. В нашем же случае я объединю эти 2 пункта, так как собираю макет для демонстрации другого функционала.

Свойства компонента шаблона

Скажем, у нас будет страница с каталожной выдачей и пустая страница, не давшая результатов. В свойствах компонента я задаю 2 булиновских (boolean) переключателя на отображение контента и блока нулевого результата.

Состояния страницы

Теперь осталось только применить нужные свойства к экземплярам страниц и состояния для демонстрации готовы.

Шаг 5. Секции и настройка режимов.

В нашем примере мы размечаем макеты для desktop и mobile устройств. Создадим секции и применим к ним соответствующие режимы переменных. Для этого сразу разместим в эти секции отрисованные ранее состояния.

ВАЖНО!!! Режим переменных для секции начнет работать только тогда, когда внутри нее появится хотя бы один элемент, который эти переменные использует.

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

Шаг 6. Доработка компонента-шаблона в соответствие с адаптивами.

ВАЖНО!!! Перед тем как перейти к этому шагу, все компоненты, используемые в шаблоне, должны быть адаптированы под разные разрешения в UI-ките.
Для простых элементов, таких как списки, достаточно настроить адаптивность с помощью Auto Layout прямо в шаблоне. Но для более сложных блоков, таких как Header или Footer, где нужно менять структуру размещения информации, необходимо создавать отдельные варианты компонентов для каждого разрешения.

Возвращаемся к нашему шаблону и создаем для него вариант. Свойство назовем Device — desktop для дефолтного состояние и mobile для нового.

Далее применим следующие шаги:

1. Для каждого состояния задаем соответствующие режимы переменных;

2. Все внутренние компоненты шаблонов-адаптивов переключаем на соответствующий режим (Mobile, в нашем случае);

3. Выставляем требуемые значение ширины статичных объектов;

4. Настраиваем зависимости размеров (constraints).

Для чего выставлять зависимости, если мы настраиваем компоненты под конкретные адаптивы? Чтобы минимизировать работу при адаптации под все экраны. Если мы пропустим этот этап, нам придется повторять одни и те же действия, а мы нацелены на оптимизацию энергозатрат.

В общем, приводим наш интерфейс к каждому из требуемых адаптивов.

Кстати, заметьте, наша сетка тоже автоматически подстроилась, потому что использует переменные размеров grid- которые мы задавали в начале.

Шаг 7. Замена экземпляров.

Основная работа завершена! Теперь остается только заменить экземпляры шаблона в ранее созданных состояниях на те, которые соответствуют выбранному адаптиву для секции.

Вот несколько лайфхаков, как сделать это быстрее:

1. Выделение всех блоков внутри секции

   • Сначала выделяем секцию и нажимаем Enter — это автоматически выделяет все внутренние блоки.

   • Если внутри есть группировки, нажимаем Enter повторно, чтобы добраться до нужных элементов. Этот способ удобен для простых структур без дополнительных слоев.

2. Множественный выбор компонентов

   • Если внутри секции есть элементы, такие как текстовые подписи, которые мешают выделению, мы используем 🪟Ctrl+Alt+A (🍎Cmd+Option+A) для множественного выбора.

   • При этом важно, чтобы слои и секции были правильно названы.

3. Поиск по слоям

   • Открываем окно поиска с помощью 🪟Ctrl+F (🍎Cmd+F) и вводим название экземпляра, который хотим заменить.

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

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

ПОЛЕЗНО!!! Не забываем в фильтре поиска выбирать Instance, чтобы случайно не выделить основной компонент или текстовый слой, который содержит поисковый запрос.

За внутренние слои компонентов можно не переживать — Figma не выделяет одновременно родительский и дочерний элементы, так что, можно смело пользоваться.

Теперь просто меняем наше свойство Device на нужный вариант и готово!

Шаг 8. Наводим красоту.

Теперь, когда наши макеты разнесены по адаптивам, нам нужно прибрать файл, чтобы разница размеров не влияла на структуру документа. Ведь, если мы отрисуем много состояний, разместим блоки друг под другом, то возможно, что некоторые фреймы будут перекрывать другие.

Для решения этой задачи используем три полезные комбинации горячих клавиш:

1. Выделить всё

   • 🪟 Ctrl+A (🍎 Cmd+A) — выделяет все элементы на выбранном уровне.

2. Подогнать размер

   • 🪟 Ctrl+Alt+Shift+R (🍎 Cmd+Option+Shift+R) — автоматически подгоняет размер выбранных элементов под их содержимое.

3. Упорядочить элементы

   • 🪟 Ctrl+Alt+Shift+T (🍎 Cmd+Option+Shift+T) — равномерно распределяет элементы.

   • После этого переходим во вкладку Layout и задаем нужные отступы между секциями.

Вот и все! Теперь наш макет выглядит собранным и аккуратным, мы собрали адаптивы для других разрешений, и потратили на это 30 минут времени.

Зачем нужен этот метод

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

С момента внедрения этой методики мы заметно сократили время на разработку адаптивов. Сначала мы утверждаем основной макет и его состояния, а потом на ревью выносим только шаблон адаптивного макета. Остальная работа с адаптивами автоматизирована, что практически исключает ошибки из-за человеческого фактора.

Может возникнуть вопрос: “А насколько это удобно для крупных проектов с множеством страниц и состояний?” Наш ответ: еще удобнее. Чем больше состояний, тем больше времени дизайнер тратит на их копирование вручную, а значит, методика экономит еще больше ресурсов.

Для чего подходит

Хотя данный метод по своей направленности универсален, ориентировался он в первую очередь на подход desktop-first (в котором первостепенны настольные девайсы), так как он следует принципу упрощения. Сначала мы делаем самый наполненный и сложный по функционалу интерфейс с деталями, анимациями и прочим. После чего, как от мраморного блока отсекаем все лишнее, что в конечном счете приводит нас к мобильной адаптации.

В команде User10 мы исходим из принципа, что все веб-приложения должны в первую очередь ориентироваться на десктопного пользователя (за исключением нишевых таплинков и прочих сайтов-визиток) и уже во вторую очередь на тач-устройства, в особенности смартфоны.

Что же касается mobile-first приложений — принцип работы схожий, но где-то обратный. В этом случае придется добавлять в шаблоны недостающие элементы навигации, размещать блоки по сетке, а не единой колонкой, избавляться от мобильных функций, типа бургера и т.д.

Послесловие

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

Конечно, важно учитывать особенности тач-устройств при адаптации сложного интерфейса. Тем не менее, мы помним, что интернет изначально создавался для настольных компьютеров, как и первые интерфейсы. Многие правила и подходы, сформированные тогда, перекочевали к нам и до сих пор используются по сей день.

Можно считать, это дань уважения уходящей эпохе ПКшного интернета.