Дизайнер 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
About the author
