Лого vc.ru

Дизайнер Facebook об обновлении Origami — инструмента для прототипирования приложений

Дизайнер Facebook об обновлении Origami — инструмента для прототипирования приложений

Дизайнер Facebook Брэндон Уолкин в своем блоге на Medium рассказал об обновлении программ для прототипирования интерфейсов — Origami 2.0 и Origami Live, с помощью которых соцсеть разрабатывает собственные приложения.

В рубрике «Интерфейсы» — перевод заметки Уолкина.

Поделиться

Год назад мы запустили Origami — программу для создания современных пользовательских интерфейсов. Она использовалась во время разработки многих наших продуктов, например, Instagram, Messenger для Facebook, Paper. С момента запуска мы получили много обратной связи от дизайнеров, которые просили добавить возможность тестировать прототипы на iPhone и iPad.

Сегодня я хочу рассказать вам об Origami Live для iOS и про новую версию Origami для Mac

Origami Live — это совершенно новое приложение, которое дает возможность запускать макеты из основной программы на iPhone и iPad. Также появилась новая Origami 2.0, в которую добавили целую кучу новых функций: например, возможность объединения со Sketch или режим презентации. 

Origami Live

Origami Live изменила подход к разработке продуктов в Facebook. Появилась возможность оценивать макеты на iPhone и iPad прямо во время написания кода. Теперь можно молниеносно пробовать что-то новое — использование мультитач или, например, исследовать возможности различных сенсоров устройства и, что самое главное, — появилась возможность с легкостью всё это настраивать без написания лишнего кода. 

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

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

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

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

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

Origami позволяет не только создавать прототипы будущих сервисов — мы, например, использовали программу, чтобы создать продуманную до мелочей логику приложения, которая служит «шумовым» фильтром и делает перелистывание фотографий гладким. Некоторые из придуманных тогда вещей и сегодня используются в приложении Paper. Origami позволяет дизайнерам выполнять работу инженеров. Возможно, некоторых функций не было, если бы у нас не было Origami Live. 

Origami 2.0

Экспорт кода

Во время разработки прототипов в Origami вы создаете высококачественную копию вашего будущего продукта. Если однажды увидеть желаемое, то потом будет легче руководить программистами во время создания конечного продукта. 

Первое, что нам предстояло сделать — это создать единый графический движок для Origami и приложений на каждой операционной системе. Открыв исходные коды, мы использовали Pop для iOS, Rebound для Android и Rebound JS для веб-версии. Это действительно позволило сделать наши продукты настолько хорошими, насколько были замечательны их прототипы, а всё потому, что нам удалось создать абсолютную идентичность анимации. 

Мы до сих пор считаем, что решение проблем, связанных с «подгонкой» разрабатываемой версии к макету, очень скучны. Для этого нужно тратить много времени, сверяя начальные и конечные значения, добиваться совпадения анимации. Поэтому мы придумали другой способ это сделать.

В Origami 2.0 такая проблема решилась с появлением функции «Экспорт кода». Эта команда создает специальный файл для iOS, Android и веб-версии с кодом, который использовался в исходном файле Origami. Ваши инженеры могут скопировать и вставить в код целую часть оригинального файла для достижения наибольшего сходства с прототипом. 

Режим презентации

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

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

В Origami 2.0 такая технология доступна каждому. Появилась возможность развернуть изображение на полный экран, показать, как будет выглядеть ваш прототип на смартфоне. Технология позволяет показывать прототипы, управляя ими с iPhone, iPad, Origami Live или используя трекпад. 

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

Интеграция Sketch

Наш новый плагин дает возможность объединять ваши прототипы из Origami и визуальные эффекты из Sketch. Origami 2.0 связывает слои прототипа со слоями из Sketch. Одним нажатием кнопки вы можете дополнить ваш макет визуальными эффектами из Sketch-документа. Плагин также позволяет работать с запущенным прототипом. 

Если же вы пользуетесь Photoshop — не беспокойтесь, Origami может и такое. 

Обучающие материалы

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
Статьи по теме
Почему UI-специалисты отказываются от Photoshop и переходят на Sketch19 февраля 2015, 17:28
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

"получили много обратной связи" может быть много отзывов?

0

"Она использовалась во время разработки многих наших продуктов, например, Instagram, Messenger для Facebook, Paper." -- я что-то пропустил в истории с Instagram?

0

Да, его купил Фейсбук. 3 года назад.

0

Спасибо, кэп. Но разрабатывали-то его не в Фейсбуке. Тут непонятно заявление об использовании Origami при разработке IG

0

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

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

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

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

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

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

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

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

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

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

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

А Саванна?

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