Вы читаете перевод статьи "Modern Design Tools: Adaptive Layouts". Над переводом работали: Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Сегодня у дизайнеров программных продуктов есть более чем достаточно инструментов для проектирования прекрасного софта и глубоких взаимодействий. Тем не менее, я считаю, что инструменты дизайна пока находятся на стадии младенчества, и у меня есть несколько идей, в какую сторону они должны “взрослеть” и развиваться, чтобы эффективнее помогать нам создавать цифровой опыт взаимодействия.
Надеюсь, что эти идеи (если они действительно стоящие) лягут в основу наших будущих инструментов дизайна. Мне бы хотелось, чтобы мои задумки использовали, улучшали и применяли в проектировании продуктов, при помощи которых мы, дизайнеры, сможем создавать более удобный софт.
В этой статье я рассмотрю возможные способы улучшения одного из фундаментальных аспектов дизайнерских инструментов: а именно лейаутов.
Мы живем в динамичном мире, а программы, которые мы проектируем, “живут” на постоянно изменяющихся и развивающихся устройствах. У этих устройств разные размеры экранов, разная плотность пикселей и разные ориентации. Наш пользовательский опыт тоже существует в этой среде и адаптируется к постоянно изменяющимся условиям. Отсюда рождается один важный принцип:
Инструменты дизайна должны обладать теми же свойствами, какими обладает среда, под которую мы проектируем.
Современные инструменты далеки от этого. В основе Photoshop — один растровый документ фиксированного размера: формат, заточенный под те времена, когда дизайны в основном существовали в печатном виде. В Sketch с его веркторными артбордами положение вещей немного лучше: можно проектировать под несколько типов устройств и размеров экранов в рамках страницы при помощи нескольких артбордов. Тем не менее, каждый артборд — это по-прежнему одна область с фиксированным размером. Более того, у объектов в этих инструментах тоже фиксированные размеры и местоположение. Текстовые поля, картинки, кнопки: все статично. Из-за того, что инструменты статичны, мы начинаем мыслить и проектировать под какой-то определенный размер экрана, не задумаваясь о том, как продукт будет адаптироваться к различным условиям. Короче говоря, у нас неправильный фундамент.
Адаптивный холст
Давайте рассмотрим, как мог бы работать современный инструмент для проектирования приложения под iPhone. Этот инструмент — просто воображаемый прототип, который должен передать суть идеи и пробудить дальнейшие мысли.
Для начала определимся с базовыми функциями. Векторный холст должен быть адаптивным — а это значит, что его размер не фиксирован, чтобы мы могли проектировать под все размеры экранов и ориентации, на которых будет работать наше приложение. Примерно вот так:
Теперь начнем проектировать не только внешний вид лейаута и всех его объектов, но и то, как они будут адаптироваться к изменяющимся условиям. И у Android, и у iOS богатые системы лейаутов, и в инструментах дизайна должно быть такое же разнообразие. Когда дизайнер осознанно принимает во внимание ограничения различных лейаутов, ему приходится тратить больше времени на полировку множества небольших деталей, но в итоге получается более качественный пользовательский опыт. А самое главное, это позволяет еще на этапе дизайна задумываться о реализации, что делает последующее взаимодействие с разработчиком быстрее, проще и лучше.
Заметьте, что при работе на адаптивном холсте сразу возникает масса вопросов, на которые нам предстоит ответить: как этот интерфейс будет работать на разных размерах экранов? Что будет с объектами? Как они будут адаптироваться? Не пора ли уже внести какие-то изменения?
Объекты адаптивного лейаута
У нас адаптивный холст, поэтому и объекты лейаута должны быть адаптивными. Возьмем за основу концепцию систему авто-лейаута и будем продумывать, как элементы должны себя вести и как будут адаптироваться к изменениям. При помощи нескольких параметров (таких как размер, выравнивание и отступы от краев) мы получим лейаут-систему, в которой объекты адаптивны по отношению к холсту и друг к другу.
Визуализация привязки объектов к ограничениям лейаута.
На примере ниже видно, насколько быстро можно сделать объекты лейаута адаптивными. Логотип всегда должен быть отцентрован. Поле ввода должно расширяться по мере увеличения размера экрана, но отступы должны быть фиксированными — 16pts от правого и левого края. Карточка с погодой всегда должна находиться за нижним краем экрана (-90pts) в виде небольшого превью.
Еще немного работы, и у нас полностью адаптивный лейаут. Поскольку дизайн софта — это, как правило, командный спорт, в современном инструменте дизайна должна быть возможность легко показать коллегам, как адаптируется лейаут. Это особенно пригодится при работе с инженерами. Когда есть возможность в режиме реального времени посмотреть особенности отображения объекта в разных лейаутах, можно избежать множества статичных макетов и массы спецификаций и сделать процесс реализации интерфейса быстрее и проще.
Когда такой инструмент может быть особенно полезен, так это при принятии решений относительно того, как лейаут должен выглядеть в альбомной ориентации. Многие приложения не поддерживают альбомную ориентацию, так как экономят на дизайне и разработке. Адаптивная система позволяет быстро оптимизировать дизайн и под портретную, и под альбомную ориентацию, обеспечивая пользователю прекрасный опыт взаимодействия независимо от того, как он повернет устройство.
На следующем примере мы видим, что после оптимизации под альбомную ориентацию было принято несколько важных решений:
- Нужна ли нам здесь строка состояния? Давайте ее удалим.
- Теперь гораздо больше горизонтального места, так что давайте разместим пункты отправления и назначения в одну строку.
- Теперь верхняя и нижняя панели занимают меньше места, а значит осталось больше места для карты.
Адаптивное мышление
Поскольку инструменты формируют наше мышление, очень важно, чтобы они позволяли нам выходить за рамки статичного подхода к дизайну. Хотя сегодня проектирование под разные лейауты и ориентации является технически возможным, на практике это превращается в достаточно нужный и сложный процесс, которого мы зачастую стараемся избегать.
Прошел век идеальных до последнего пикселя дизайнов под фиксированный размер. Появляется и будет появляться все больше устройств разного размера, на которых будут “жить” наши дизайны — и наши инструменты должны адаптироваться к новому порядку вещей.
Что еще почитать
Одна из сложностей создания такого современного инструмента дизайна в том, что нужен необычных подход к правилам и поведению лейаута. Ниже приведена подборка ресурсов на эту тему, с которыми стоит ознакомиться:
- Cassowary Constraint Solving Toolkit (используется в системе авто лейаут OSX)
- Grid Style Sheets
- Flexbox
- Constraint Programming
- iOS Auto Layout
- Bind: A GSS based design tool
Только в фильмах идеи рождаются как гром среди ясного неба или как зажегшаяся лампочка после долгих часов одиноких размышлений в гараже. Многие из этих идей не родились бы, если бы не долгие часы обсуждений, рассуждений и споров с ребятами. Особое заслуженное спасибо Коэну Боку, Джастину Эдмунду, Солейо Куэрво, Расмусу Андерсону, Нейтану Боррору, Брендону Уолкину, Ною Левину, Тишо Георгиеву, Колину Данну и Уилсону Майнеру за те роли, которые они сыграли сохранении стоящех идей и уничтожении бестолковых.