Многие уже успели оценить, насколько живой и динамичный интерфейс у нового iOS-приложения Facebook*. Чтобы спроектировать всю эту анимацию, статичных картинок-макетов недостаточно. Именно поэтому разработчики Facebook* создали первый в своем роде инструмент для разработки интерактивного дизайна — и поделились им со всем миром. Бесплатно.
Хотя в плане функциональности здесь еще целина непаханная, по части интерактивности фейсбучное приложение Paper в самом деле оказалось, без преувеличения, интерактивным продуктом нового поколения. Здесь лента статусов превратилась в ленту карточек, на которых стильно и удобно размещаются не только текстовые блоки, но и фотографии, и видео, и ссылки на внешние веб-ресурсы. И основной способ взаимодействия со всем этим переосмысленным разнообразием — сенсорные жесты и наклоны устройства из стороны в сторону. Последние в Paper предназначены для просмотра широких фотографий, которые не помещаются на экране Айфона без масштабирования до черных полос сверху и снизу.
Paper является частью новой инициативы, озвученной не так давно Марком Цуккербергом. Ее суть — представить огромную социальную сеть в виде набора самостоятельных приложений, что позволит «Фейсбуку*», не предлагая пользователям корневую службу Facebook*, конкурировать с новыми социальными медиа и новостными проектами.
Но если Paper стала предметом горячих обсуждений в широких массах, а новая инициатива Цуккерберга заинтересовала в большей мере бизнес-аналитиков и техноэкспертов, то о проекте Origami, в процентном соотношении, знают совсем немногие.
Создав этот инструмент, разработчики Facebook* значительно упростили и ускорили процесс проектирования программных интерфейсов, включая их «живую» составляющую — интерактивность. Причем для работы Origami не требует ни единой строчки программного кода.
«До использования Origami мы разрабатывали дизайн в „Фотошопе“ — это были пачки статичных, расположенных друг за другом картинок. В таком виде мы и показывали их руководству и друг другу, — говорит дизайнер продуктов Facebook* Брэндон Уокин. — Думаю, такой подход в работе отражался и на наших продуктах».
В сравнении с Photoshop, Origami настолько же совершеннее, насколько и Paper, если ее сравнивать со стандартным приложением Facebook*.
Origami позволил дизайнерам создать один из сложнейших анимированных элементов Paper, который никогда не ассоциировался с интерфейсом Facebook*, — раскрытие буклета для загрузки ссылки на новость. Важно отметить, что эта анимация не является шаблоном из Origami — она действительно интерактивна, всегда привязана к вашему пальцу, в то время как система трехмерного освещения добавляет картинке глубины. Совсем неплохо для небольшого фрагмента приложения, который был создан всего за полтора часа.
По большей части Origami — детище Уокина и его приятеля, дизайнера Дрю Хамлина. Его создание началось девять месяцев назад, как раз в рамках работы над Paper. По мере того, как проект становился сложнее, больше возможностей появлялось и в Origami. В сущности каждая анимация Paper сперва была спроектирована в Origami, а уж затем программисты Facebook* реализовывали ее в самом приложении.
Впрочем, Origami был создан не с нуля. По сути это специальное расширение для Quartz Composer, бесплатного приложения Apple, которое традиционно использовалось для создания простой анимации. Вся проблема в том, что Quartz Composer никогда не предназначался для разработки интерактивного дизайна, поэтому команда Facebook* постепенно создавала свои надстройки и модификации.
Было внесено множество практичных изменений, таких как создание паттернов, благодаря которым Quartz стал говорить на языке пикселей, что для дизайнеров намного понятнее. Также разработчики постарались сделать сам продукт не таким пугающим и более удобным.
«Вообще мы потратили уйму времени и сил, чтобы сделать терминологию и организацию более удобной и дружественной, так чтобы даже у студентов не возникало ощущения чего-то запутанного и излишне технического, — рассказывает Уокин. Отличный пример того, что они сделали — система прокладывания пути, для которой задаются только две точки, а все остальное вычисляется автоматически. Удобная штука для быстрой анимации перемещения объектов по экрану. На языке Quartz Composer это называется линейной интерполяцией. В Facebook* же это называют переходом — подразумевая, что этот эффект дизайнер будет использовать для перехода между экранами. Интересно, что над термином «переход» разработчики ломали голову целых три недели, но они убеждены, что это время было потрачено не зря.
В Facebook* твердо верят, что Origami можно пользоваться и в обучающем процессе при подготовке молодых дизайнеров, чтобы те изначально учились думать категориями интерактивного, а не статичного дизайна. Да и дизайнеры в самой Facebook* теперь в обязательном порядке осваивают Quartz Composer и Origami.
Скептики могут спросить, стоило ли Facebook* дарить такой инструмент всем желающим? Ведь это, в конце концов, дело бизнеса. Если Origami на самом деле станет следующим шагом в развитии средств быстрой разработки интерфейсов, не стоило ли компании закрыть Origami для внутреннего использования, тем самым обеспечив себе конкурентное преимущество в отношении Twitter и других приложений и платформ социальных медиа?
«Я абсолютно уверен, что если в качестве конкурентного преимущества берется рабочий инструментарий, в конечном счете ты проиграешь, — заметил Хамлин. — Мы хотим, чтобы дизайн Facebook* был крутым, но не хотим, чтобы это достигалось только за счет более крутых инструментов. Лучше пусть дизайн будет отличным за счет решения первоклассных задач и благодаря уверенности, что твоя работа самая лучшая на свете».
*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.