Лого vc.ru

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

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

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

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

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Дельные идеи, ждем апдейт Sketch :) Тогда уж можно будет уже белыми нитками пришить его к Xcode ))

0

Дельная мысль! Действительно, ничего похожего на AutoLayout в дизайнерских инструментах нет

0

Матерый кэп очевидность ...

По описанию похоже на Edge Reflow, нет?

0

Забавно, что все вышеописанное достаточно легко реализуется с помощью html+css. Если добавить в любой WYSIWIG-редактор нормальные функции рисования, то получится описываемый автором инструмент.

Все перечисленное есть в Antetype: antetype.com

Оооо, буржуи пришли к концепции "резиновости". Этой идее 100 лет, со времен резиновых сайтов Тёмы.
Так ведь и до адаптивного PPI додумаются скоро.

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

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

0

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

0

Супер статья по дизайну, целая одна картинка - так держать!)😉

0

Может, стоит просто научиться писать сразу в HTML? Есть же зачем-то developer tools в браузерах, всякий там inspect и прочие js консоли.

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

Помните, предназначенное всегда лучше приспособленного.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Yus Teryukalov

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

«В кризис банк никто не купил, пришлось развивать самому»
0
Philip Salnikov

Суммы инвестиций и заработков тоже удивляют. Кому нужны любительские фото в таких количествах?

«Я потратил $10 млн и два года на то, что мог выяснить за 4 недели»: основатель Twenty20 об ошибках проекта
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
John Smith

А Саванна?

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Показать еще