Дизайнер 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
0
5 комментариев
Популярные
По порядку

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

0

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

0

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

0

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

1

Комментарий удален

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

0

Комментарий удален

Комментарий удален

Читать все 5 комментариев
Что на самом деле приводит мир в движение: история инструментов бухгалтерского учёта

От засечек на палках до специальных программ

UNIVAC I.
Как мы организовали коллективное обучение в айти и почему оно лучше обычных курсов

Мы уже обучили и трудоустроили 47 отличных frontend-специалистов и не собираемся на этом останавливаться.

Пользователь купил «мемную» криптовалюту Shiba Inu на $8 тысяч в августе 2020 года и стал миллиардером Статьи редакции

За месяц криптовалюта выросла на 1000%.

Как сотрудники Tele2 стали лицами бренда

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

Созданная «Яндексом» компания ClickHouse привлекла $250 млн при оценке в $2 млрд Статьи редакции

Инвестиции направят на расширение штата и развитие международного бизнеса.

Спасти еду: экологичное ИТ-решение помогает ресторанам справляться с перепроизводством блюд

Каждый год в России выбрасывают около 17 млн тонн продуктов на 1,6 трлн рублей.

Топ-5 EdTech стартапов, которые сделают ваше обучение проще и интереснее

Осенью в нашей стране традиционно начинается учебный год. Тысячи школьников и студентов отныне делятся на два лагеря: одни ищут пути быстрее и с наименьшими потерями покончить с учёбой, другие — с радостью спешат на лекции и уроки. Есть ещё и родители, и преподаватели с собственными проблемами и потребностями. Мы отобрали 5 образовательных…

Ozon скинул ответственность за свои ошибки в сборке и доставке на продавца FBO. Кто прав?
«Альфа-банк» отключил части клиентов бесплатные push-уведомления о покупках Статьи редакции

Бесплатные push-уведомления останутся только для подтверждения операций.

Оплата уставного капитала и оплата долей – почему это важно?

В ходе проведения юридических проверок (due diligence) мы всё чаще сталкиваемся с ситуациями, когда клиенты не хранят документы об оплате уставного капитала/доли (акции) и не считают отсутствие подтверждения критичным фактом — «Налоговая всё зарегистрировала, зачем хранить ненужные бумажки?!».

null