![](https://habrastorage.org/storage2/fe7/fe6/606/fe7fe660648c0fe692e3cf563671139c.jpg)
Статья не является переводом iOS Prototyping With TAP And Adobe Fireworks товарища Shlomo Goltz, однако идея разобраться в этом вопросе, наконец-то, появилась именно после этой статьи, да и картинку я «стырил» оттуда.
В нашей лаборатории мы часто размышляли над тем какие инструменты лучше всего подходят для прототипирования приложений. На тот момент был популярен Expression Blend + SketchFlow, но его привязанность к Silverlight, не давала нам ни малейшего шанса на то, что он будет популярен в мобильной разработке.
И хотя инструментов для прототипирования существует довольно много, я расскажу про преимущества которые нам дает Fireworks:
- Весь документ, со всеми экранами интерфейса и слоями, храниться одним файлом с расширением «имя_файла.fw.png». И в отличии от Photoshop, FW эффективно сжимает документ, так что редко когда даже многостраничный документ весит больше 5 мб. К тому же формат документа доступен для просмотра в любом Image Viewer.
- Слои в документе могут быть общими для разных страниц. Благодаря этому в случае если вы захотите изменить стиль одной кнопки, вам не потребуется делать это на каждой странице, достаточно будет сделать для одной и изменения тут-же отобразятся везде.
Больше не хочется останавливаться на функционале FW, так как тема достаточно популярна, и вы с легкостью сможете найти много интересных статей.
TAP
И так нам потребуется версия Fireworks не ниже CS5 и Windows 7 или OS X 10.8. На самом деле я проделывал все это, и там и там, и могу сказать что принципиального различия нет. Разве что в Windows я использовал в качестве сервера Denwer, а для mac MAMP
![](https://habrastorage.org/storage2/245/96d/8e2/24596d8e27a652f69d3868046a9c5d8d.png)
Подробно тоже не буду на этом останавливаться. И так, поехали!
Сначала нам необходимо скачать на странице Touch Application Prototypes (TAP) сам архив с компонентами.
![](https://habrastorage.org/storage2/023/6d8/e54/0236d8e54cff24d7582ca4ec1a4c7a73.png)
И поместить содержимое в корневую директорию на нашем сервере. Затем качаем png исходник, для каждого типа устройства свой (пока только есть поддержка iphone и ipad устройств, и хотя я тестировал все с помощью iphone 4, уверен что и на Android девайсах все должно быть тип-топ)
Открыв исходник в Fireworks мы увидем что то в таком духе. Этот png файл содержит более десятка окон программы.
![](https://habrastorage.org/storage2/7c5/2d6/87a/7c52d687a54c31d33f55426f030e2627.png)
Экспортируем в папку Library c параметрами указанными на картинке ниже. Да, это формат файла использующийся в Dreamweaver, но он сам нам не понадобиться.
![](https://habrastorage.org/storage2/cd2/bef/a39/cd2befa398bf2dc04479074d0eac4395.png)
Важно: Не забудьте поставить галочку «Put Images in Subfolder» иначе TAP откажется собирать наш прототип.
Запускаем TAP и выставляем необходимые настройки, необходимо указать имя документа который будет стартовой страницей и жмем Build!
![](https://habrastorage.org/storage2/ef9/e7e/a4b/ef9e7ea4b2c5feaf1dc2743823bad769.png)
Если все получилось правильно, то имея настройки для доступа к серверу извне, мы можем просмотреть что получилось на девайсе. Для этого мы откроем ссылку в safari и добавим страничку на рабочий стол (поддерживается при этом размещение собственной иконки размером 114x114 px).
![](https://habrastorage.org/storage2/d68/2f3/ed5/d682f3ed524e5b793cdf89df89ea9a92.png)
При каждом запуске прототип обновляется до вашего нового билда. Таким образом после настройки, всего в несколько кликов (экспорт из FW и Build в браузере) можно получать и просматривать изменения уже на девайсе. Более подробно о возможностях TAP можно подсмотреть в этой памятке (pdf).
И так, что мы получаем?
Быстро настраиваемую систему позволяющую создавать интерактивный и анимированный прототип приложения, используя привычный инструментарий с поддержкой анимации и жестов. На этом все, приятного вам прототипирования!
Полезные статьи: Проектирование интерактивных продуктов в Fireworks
Прототипирование на чистовую в Adobe Fireworks
Interactive Prototypes And Time-Savers With Adobe Fireworks (анг.)
Create Interactive Prototypes With Adobe Fireworks (анг.).