Многие уже успели оценить, насколько живой и динамичный интерфейс у нового 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* реализовывали ее в самом приложении.
Готовые рецепты смузи - это, конечно, замечательно. Если же вы любите экспериментировать, тогда вам наверняка будут интересны основные принципы собирания рецептов этих питательных напитков. И тогда вы сможете готовить вкусный смузи из того, что у вас есть под рукой на данный момент.
Шаг 1. Добавьте фрукты
Выберите не менее двух типов фруктов или ягод (свежих или замороженных).И для того, чтобы сделать их еще более полезными, добавьте туда немного зелени или овощей, таких как салат, шпинат или руккола.
Ягоды и фрукты: бананы, ягоды, яблоки, груши, ананас, персик, киви, арбуз, манго, вишни.
Овощи и зелень: шпинат, авокадо, зелень свеклы, листья салата, листья одуванчика, руккола.
Шаг 2. Выберите основу
Добавьте 1 или 2 чашки жидкости. Чем сочнее выбранные вами фрукты и ягоды, тем меньше жидкости вам нужно будет добавлять.
Основа: молоко (коровье, козье, рисовое, соевое, миндальное), фруктовый сок, холодный кофе, холодный зеленый чай, кокосовое молоко или вода, вода.
Шаг 3. Сделайте его более сытным
Добавьте ингредиенты, которые сделают его более кремовым по консистенции и более питательным.
Питательные добавки: ореховое масло, мороженое, замороженный йогурт, лед, мякоть кокоса, овсяные хлопья/
Шаг 4. Добавьте аромата
Дополнительный аромат смузи можно придать не только с помощью пряностей, но и с помощью сухофруктов.
Ароматические добавки: коричневый сахар, ванильный или миндальный экстракт, корица, кленовый сироп, мускатный орех, инжир, травы (мята, базилик), финики.
Шаг 5. Добавьте в смузи энергию
Если вы хотите сделать из своего смузи не только питательный, но и очень полезный напиток, воспользуйтесь полезными добавками (витамины, масла и тому подобное).
Полезные добавки: протеиновая пудра, рыбий жир, молотые семена льна, ростки, спирулина, пробиотики, ягоды Годжи (волчьи ягоды), какао, пыльца, витаминная пудра.
Не бойтесь экспериментировать. Просто пробуйте разные ингредиенты в смеси в небольших количествах, чтобы в случае ошибки не было жалко выбрасывать результаты неудачного опыта. Летом мы пробовали смеси из самых различных ягод и фруктов и всегда получалось очень вкусно (клубника + дыня, апельсин + яблоко и тому подобное).
Впрочем, 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 запрещена на территории РФ.