Создание интерактивного прототипа с Fireworks и TAP (touch application prototyping)

Кажется Хабр не заслуженно обошло стороной повальное увлечение проектирования интерфейсов с помощью Fireworks, (по крайней мере Smashingmagazine ^[1] и Cooper ^[2] усиленно пропагандируют его как стандарт де-факто в отрасли).

Статья не является переводом iOS Prototyping With TAP And Adobe Fireworks ^[3] товарища Shlomo Goltz ^[4], однако идея разобраться в этом вопросе наконец то, появилась именно после этой статьи, да и картинку я «стырил» оттуда.

В нашей лаборатории мы часто размышляли над тем какие инструменты лучше всего подходят для прототипирования приложений. На тот момент был популярен Expression Blend + SketchFlow, но его привязанность к Silverlight не давала нам ни малейшего шанса, на то что он будет популярен в мобильной разработке.

И хотя инструментов для прототипирования существует довольно много ^[5] я расскажу про преимущества которые нам дает Fireworks:

• Весь документ, со всеми экранами интерфейса и слоями, храниться одним файлом с расширением «имя_файла.fw.png» И в отличии от Photoshop, FW эффективно сжимает документ, так что редко когда даже многостраничный документ весит больше 5 мб. К тому же формат документа доступен для просмотра в любом Image Viewer.

• Слои в документе могут быть общими для разных страниц. Благодаря этому в случае если вы захотите изменить стиль одной кнопки, вам не потребуется делать это на каждой странице, достаточно будет сделать для одной и изменения тут-же отобразятся везде.

Больше не хочется останавливаться на функционале FW, так как тема достаточно популярна, и вы с легкостью сможете найти много интересных статей.

TAP

И так нам потребуется версия Fireworks не ниже CS5 и Windows 7 или OS X 10.8. На самом деле я проделывал все это, и там и там, и могу сказать что принципиального различия нет. Разве что в Windows я использовал в качестве сервера Denwer, а для mac MAMP ^[6]

Подробно тоже не буду на этом останавливаться. И так, поехали!

Сначала нам необходимо скачать на странице Touch Application Prototypes (TAP) ^[7] сам архив с компонентами.

И поместить содержимое в корневую директорию на нашем сервере. Затем качаем png исходник, для каждого типа устройства свой (пока только есть поддержка iphone и ipad устройств, и хотя я тестировал все с помощью iphone 4, уверен что и на Android девайсах все должно быть тип-топ)

Открыв исходник в Fireworks мы увидем что то в таком духе. Это png файл содержит более десятка окон программы.

Экспортируем в папку Library c параметрами указанными на картинке ниже. Да, это формат файла использующийся в Dreamweaver, но он сам нам не понадобиться.

Важно: Не забудьте поставить галочку «Put Images in Subfolder» иначе TAP откажется собирать наш прототип.

Запускаем TAP и выставляем необходимые настройки, необходимо указать имя документа который будет стартовой страницей и жмем Build!

Если все получилось правильно, то имея настройки для доступа к серверу извне, мы можем просмотреть что получилось на девайсе. Для этого мы откроем ссылку в safari и добавим страничку на рабочий стол (поддерживается при этом размещение собственной иконки размером 114x114 px).

При каждом запуске прототип обновляется до вашего нового билда. Таким образом после настройки, всего в несколько кликов (экспорт из FW и Build в браузере) можно получать и просматривать изменения уже на девайсе. Более подробно о возможностях TAP можно подсмотреть в этой памятке (pdf) ^[8].

И так, что мы получаем?

Быстро настраиваемую систему позволяющую создавать интерактивный и анимированный прототип приложения, используя привычный инструментарий с поддержкой анимации и жестов. На этом все, приятного вам прототипирования!

Полезные статьи: Проектирование интерактивных продуктов в Fireworks ^[9]
Прототипирование на чистовую в Adobe Fireworks ^[10]
Interactive Prototypes And Time-Savers With Adobe Fireworks (анг.) ^[11]
Create Interactive Prototypes With Adobe Fireworks (анг.) ^[12].

Автор: ffffffffff

Источник ^[13]