Инструменты разработки интерфейсов должны быть адаптивными — дизайнер Dropbox | Цифровой журнал

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

Digital-агентство
Red Collar подготовило для рубрики «Интерфейсы» перевод заметки.

Как у дизайнеров различного программного обеспечения, у нас в доступе есть больше инструментов для создания красивого софта и интересного взаимодействия с ним, чем когда-либо. Однако я убеждён, что имеющийся набор инструментов дизайна по прежнему инфантилен. И я хотел бы предложить несколько идей того, как эти инструменты могли бы развить и сделать его «зрелым». Так у нас будет куда лучшая возможность создавать digital-продукты эффективнее.

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

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

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

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

Современные инструменты далеки от этого. Базовый компонент в Photoshop — это растровый документ фиксированного размера, который возвращает нас во времена, когда дизайн в основном существовал на распечатанной странице.

Sketch немного усовершенствовался до векторных холстов, позволяющих вам работать над дизайном нескольких размеров экранов на одной и той же странице, используя несколько холстов. Однако, каждый холст — он один и фиксированного размера. Более того, объекты в этих инструментах тоже фиксированного размера и закреплены в одной позиции. Заголовки, изображения, кнопки — всё статично. Из-за того, что инструменты статичны, мы склонны задумывать дизайн тоже статично для одного размера экрана. При этом мы не учитываем, как он адаптируется к различным ограничениям. Проще говоря, наши базовые инструменты неправильные.

Адаптивный холст

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

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

И теперь мы можем управлять тем, как макету и каждому объекту стоит адаптироваться к изменяющимся ограничениям. Вдобавок мы будем управлять тем, как они должны выглядеть. И у Android, и у iOS богатые системы макетов; такими же должны быть и наши инструменты дизайна. Создание определённого замысла и его воплощение уже в условиях конкретных макетных ограничений станет частью работы дизайнера. Это позволит нам потратить больше времени, чтобы смастерить эти, казалось бы, незначительные детали, которые обычно игнорируются.

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

Обратите внимание на то, как быстро идея с адаптивным холстом поднимает вопросы, на которые нам ещё только предстоит ответить: как всё это должно работать на разных размерах экранов? Что происходит с объектами на них? Как они приводятся в порядок? Заставит ли нас это поменять своё отношение ко всему процессу работы над проектом?

Адаптивные объекты макета

Если холст адаптивен, то такими же должны быть объекты макета. Допустим, мы возьмём из UIKit несколько новых функций и соберем их вместе. Тогда мы можем начать думать о поведении объектов и их адаптации в макетах. Имея даже несколько простых функций, таких как размер, выравнивание, закрепление, мы получаем систему макетов, которая позволяет объектам быть адаптивными относительно друг друга и холста.

Визуальное представление макетных ограничений, добавленных объектам

На примере ниже обратите внимание, как можно легко и быстро задать определённый сценарий поведения объектам на макете. Логотип должен всегда быть центрирован. Строка поиска должна расти в ширину, но при этом всегда прикреплена в 16 пикселях от левого и правого краёв холста. Карточка прогноза погоды должна всегда быть прикреплена на 90 пикселей ниже нижнего края холста, всегда показывая только часть себя.

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

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

В этом примере, мы можем принять несколько интересных и при этом важных решений во время оптимизации для альбомной ориентации:

Нужна ли нам здесь статусная панель? Давайте её уберём.
Теперь у нас намного больше пространства в горизонтальной плоскости, поэтому давайте поставим пункты «откуда» и «куда», ожидаемое время прибытия и маршрут в нужное соответствие.
Как только мы это сделаем, тогда мы можем сильно уменьшить пространство шапки и заполнить подвал, что позволит нам увидеть больше карты.

Адаптивное мышление

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

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