23 секрета Adobe DPS

Мы присутствуем при редком моменте смены носителя информации. Каждый раз, когда происходит такой переход, многим сложно привыкнуть к новому: читателю приходиться ломать старые привычки, прежние подходы не годятся и для издателя. Наши советы помогут дизайнеру, работающему с Adobe DPS, по-новому разрабатывать интерактивные издания для планшетов.

1. Проектирование эргономичной публикации

С точки зрения способа использования, интерактивные публикации, сделанные методом Adobe DPS или подобными, стоят между печатным изданием и сайтом или программой. Это печатная по духу дизайна публикация с интерактивным функционалом и скрытым, ожидающим вызова контентом.

Первое правило: наличие и метод использования интерактивных элементов должны быть очевидны. Либо мы опираемся на представления пользователя (вид и функционал кнопок и линеек прокрутки, например), либо ставится значок типа интерактивности, жеста, какой-либо другой намёк. Без этого публикация превращается в игру по поиску скрытых дверей, доставляя неудобство и раздражая читателя.

2. Навигация в издании

Навигация должна быть простой. Не должно возникать ситуаций, когда читатель куда-то нажал, потом — ещё куда-то и уже не понимает, где, в какой части издания он находится. Поможет в ориентировке дублирующая навигация, подсказки (в т. ч. всплывающие), нумерация страниц и колонтитулы с пометкой почти на каждом экране, где сейчас находится пользователь. Подсказки должны быть ненавязчивыми, но заметными. Для указания, что здесь у текста есть прокрутка, можно использовать рамку, линии-ограничители по краям либо эффект затухания (fade), как в примере ниже. Появление и исчезновение через несколько секунд сделает значок интерактивности заметным, но ненавязчивым.

3. Обратная нумерация страниц

Если перед читателем только одна страница (экран), объёмом информации сопоставимая с умещающейся на листе A5, а оценить масштаб по толщине стопки страниц невозможно, хорошим индикатором является колонтитул с рубрикой и названием статьи плюс нумерация страниц. Чтобы читатель не приглядывался к линейке прокрутки в попытке оценить объём материала, я стал применять обратную нумерацию. На первом титульном экране выводится общее число страниц в форме «Total pages in the article: 8» и далее нумерация уменьшается на каждой странице, последняя получает номер 1. Поскольку в InDesign нет функции обратной нумерации, можно написать простой скрипт, переворачивающий нумерацию в документе за счёт назначения каждой странице отдельной секции нумерации.

4. Настройка макета

В интерфейсе программы-просмотрщика Adobe DPS есть три мёртвых зоны. При нажатии на любое неинтерактивное место на странице сверху и снизу появляются встроенные линейки инструментов для навигации. Высота обеих 44 пикселя (в журнальном киоске снизу — 88 пикселей). В эти области нежелательно ставить интерактивные элементы. Также справа есть область в 6 пикселей шириной по высоте всей страницы для линейки прокрутки. Эта область дизайна останется скрытой (что стоит учитывать в композиции), пока читатель не пролистнёт статью к следующей или предыдущей. Чтобы было легче учитывать эти области, имеет смысл сделать шаблон (template), где эти области помечены направляющими.

5. Дизайн в одном файле

Сейчас каждую статью (stack в терминах Adobe), нужно делать отдельным файлом InDesign. Проект получается «порубленным» на множество файлов. Для новой публикации, дизайна которой ещё не существует, такой метод проблематичен, поскольку не позволяет увидеть весь проект целиком прямо в InDesign.

На иллюстрации виден подход, до какой-то степени решающий эту проблему. Как минимум, на начальном этапе дизайна. Для этого в меню палитры Pages нужно отменить функцию Allow Document Pages to Shuffle, что позволит свободно объединять страницы в блоки до 10-ти в ряд. Впоследствии можно разобрать такой комбинированный проект на документы, состоящие из отдельных страниц с помощью скрипта.

6. Невидимые кнопки

В дизайне, рассчитанном на сенсорный экран и нажатия пальцами, кнопки должны быть достаточно большими, чтобы читатель не слишком прицеливался и мог попасть в них с первой попытки в любом состоянии духа. Однако большая кнопка смотрится хорошо не всегда, в таком случае можно сделать маленькую кнопку, а поверх неё наложить невидимую кнопку — прямоугольник без дизайна (я предпочитаю графические из-за их обозначения крестом) с функцией кнопки. Рекомендуемый размер кнопки — не менее 50×50 пикселей для iPad 1 и 2.

Снимок проекта журнала «Махар». В центре справа псевдокнопка закрытия и более крупная настоящая (выделена зелёным). На этом примере также виден подход к оформлению «тизеров», налагаемых на текст

7. Пропадающие объекты на интерактивных элементах

При активации интерактивных элементов неинтерактивный контент, находящийся над ними, уходит под них, т. е. пропадает. Это свойство можно использовать для расположения обозначения типа действия или жеста с интерактивным объектом на нём самом. Например, указание, что данная картинка может быть увеличена, или псевдокнопка запуска видео на самом ролике (он будет запускаться при нажатии на любом месте в его области).

8. «Непропадающие» объекты на интерактивных элементах

Кнопка или объект с несколькими состояниями (MSO) могут перекрывать интерактивные элементы, не пропадая. Так можно, например, создавать эффект выдвигающегося текста, когда полоса не возникает и не исчезает внезапно. Можно имитировать эффект затухания или держать «непропадающие» заголовки с прокручивающимся или видеоконтентом под ними. Обязательное условие — идентичный контент в двух состояниях MSO. Достигается это очень просто: нужно выделить объект (или группу, если элемент будет состоять из нескольких) и нажать на кнопку создания нового MSO в палитре Object States. На его основе будут автоматически созданы два состояния. Настройки такого MSO показаны на иллюстрации.

9. Уникальные идентификаторы

Важно использовать уникальные идентификаторы (ID) для кнопок на каждой странице, иначе InDesign выдаст сообщение об ошибке при экспорте folio-файла. Мало того, MSO-объекты (с несколькими состояниями) должны иметь уникальные идентификаторы на уровне всего файла, а не отдельной страницы. В случае использования MSO-объектов с одинаковыми ID программа проигнорирует проблему и «лишние» объекты с тем же идентификатором просто пропадут в folio.

Именно с этими особенностями связана практическая невозможность держать кнопки и MSO на мастере. Появляясь на страницах, они будут иметь один на всех ID. В таком случае можно их вытаскивать из библиотеки объектов (Library), которая полностью сохраняет функционал интерактивных элементов. Либо отрывать объекты от мастера командой Detach Selected/All Objects from Master из меню палитры Pages.

10. Именование интерактивных объектов

Имеет смысл использовать описательный подход к именованию интерактивных объектов, поскольку в ряде ситуаций их надо опознавать по имени. Например, увеличенный вариант некой иллюстрации мы сохраняем в MSO-объект, где первое состояние — это пустая графическая рамка без дизайна, а второе — собственно картинка. Назовём его mso-fig1, открывающая его кнопка — btn-fig1-open, закрывающая — btn-fig1-close. Чем сложнее взаимосвязи интерактивного функционала, тем важнее давать логичные имена компонентам.

11. Масштаб отображения

Разрешение первого и второго iPad приблизительно на 30% выше разрешения мониторов, т. е. на iPad всё выглядит несколько меньше. Чтобы получить представление о реальном размере публикации в InDesign, можно установить масштаб отображения около 75% (точное значение зависит от монитора).

12. Цвет

Adobe не рекомендует использовать CMYK-цвет — это может привести к цветовым искажениям. Поэкспериментировав с профилями, я пришёл к выводу, что наиболее близкий к iPad — sRGB-профиль. Это тоже не идеал, но специальный профиль iPad, сделанный Кристианом Альбрехтом (есть в интернете), да и рекомендованный InDesign Secrets, даёт результаты хуже, чем обычный sRGB.

13. Номер выпуска

В поле номера выпуска, заполняемом в Folio Producer, может быть не только номер, но и любой текст. Поле важно и применяется, даже если это single-folio проект. Он будет показан строчными буквами в верхней панели навигации.

14. Внешняя библиотека элементов

Файлы AI и INDD могут использоваться для сохранения наборов повторяющихся элементов, например знаков жестов или разнообразных стандартизированных подсказок. Это аналог символов (Symbols) в Illustrator, которого нет в InDesign. Находясь внутри интерактивных элементов, векторные файлы будут растрированы автоматически.

15. Снижение разрешения интерактивных элементов

В прошлом DPS не мог снижать разрешение «линкованных» картинок внутри интерактивных элементов. Сейчас это не совсем так. В 19-й версии инструментов DPS не снижается разрешение только следующих типов интерактивных компонентов: video, image sequence, panorama, pan & zoom. Внутри кнопок, MSO и scrollable frames разрешение снижается автоматически.

Фактически InDesign не снижает разрешение внутри интерактивных элементов, а генерирует их заново. Причём вложенный файл будет в формате PNG, даже если это двигающаяся внутри рамки фотография. Поэтому с целью экономии размера публикации имеет смысл, где это возможно для фото, использовать не scrollable frame, а функцию pan & zoom, которая сохраняет оригинальный, сохранённый пользователем JPEG.

На старых версиях инструментов DPS для принудительного растрирования интерактивных элементов подойдёт простой приём. Достаточно картинке или группе, в которой она состоит, назначить параметр непрозрачности (Opacity) на 99% либо применить какой-то эффект. Это приведёт к тому, что InDesign уже не сможет поставить в folio оригинальную картинку, — файл будет растрирован на основании текущего визуального размера и с экранным разрешением.

16. Размер картинок

Лучше не использовать внутри интерактивных элементов файлы размером более чем 2000×2000 пикселей. Это приведёт к торможению и «падению» программы-просмотрщика на iPad.

17. Статичные элементы

Картинки, не участвующие в интерактивных элементах, могут быть любого разрешения больше 72 ppi, они будут растрированы InDesign самостоятельно. Если стэк был создан в формате PNG или JPEG, программа сама решит, какой формат использовать (как правило, это будет PNG). Хорошей практикой, начиная с версии 18, является создание стэков в формате PDF. Раньше PDF-стэк мог быть только неинтерактивным, но теперь это уже не так. У стэков в формате PDF есть преимущества и недостатки.

Преимущества PDF-стэков:

• Размер стэков становится на 30% меньше, чем в PNG, за счёт того, что статичные элементы не растрируются, а остаются векторными.
• Страницы можно увеличивать обычным щипковым жестом.
• Выглядит в максимальном качестве на iPad 3.
• Тексты, особенно мелкие, выглядят лучше, поскольку механизм рендеринга PDF в iOS лучше, чем алгоритм растрирования InDesign.

Недостатки PDF-стэков:

• Неприменимы в режиме Smooth scrolling.
• Не поддерживаются на Android.
• На iPad 3 статичный контент будет выглядеть красиво, но интерактивный контент, сделанный с расчётом на старые iPad, будет пикселизованным.

18. Renditions

Предлагаемое сейчас Adobe решение (renditions) — под разные разрешения делать отдельные версии. Это добавляет немало чёрной работы: две версии под iPad, несколько — под Android. Renditions — решение временное. Рыцарь на белом коне, который должен кардинально изменить положение с подготовкой материала для экранов разного разрешения, называется InDesign CS6 (и новые версии инструментов DPS), который уже не за горами.

19. Редактирование метаданных статей в Folio Producer

Когда статей много, их метаданные не очень удобно редактировать в Properties из меню палитры Folio Builder, поскольку нужно последовательно переходить от одной статьи к другой. Для этого удобнее использовать веб-интерфейс Folio Producer, ссылка на который находится в том же меню.

20. Интегрирование кнопок социальных сетей и видеостриминга

В 19-й версии инструментов DPS наконец появились закладки и встроенная интеграция с «Фейсбук». Для пока неподдерживаемых социальных сетей можно использовать следующую технику.

Прежде всего нужно иметь в интернете страницу, которой будет сделан «лайк». iPad-издание не является сайтом, поэтому «залайкать» его пока нельзя. Скажем, у интерактивного журнала есть сайт с выложенными статьями. Можно создать кнопки для них (или использовать существующие) методами, предоставляемыми социальными сетями для веб-разработчиков, код кнопки скопировать в HTML-файл, отдельный для каждой статьи, и определить его показ в InDesign-проекте в небольшом прямоугольнике с помощью функции Web Content палитры Overlay Creator.

Аналогичным образом можно поставить видео из Youtube, т. е. не внедрять его. Видео сильно увеличивает размер файлов, а при скачивании номеров журнала в киоске оплата зачисляется на счёт издателя только после окончания скачивания, а не по факту нажатия на кнопку Buy пользователем. Поэтому имеет смысл использовать видеостриминг и PDF-стэки везде, где это возможно.

21. Посылки извещения или комментария по электронной почте

Это делается кнопкой с действием Go to URL. В поле адреса нужно вбить следущее: mailto:?subject=Тема письма&body=Текст письма.

Все специальные знаки (а к ним относится весь русский алфавит) надо кодировать: http://meyerweb.com/eric/tools/dencoder/.

22. Нововведения этого года

Интеграция почти всех типов интерактивных объектов в MSO, кроме других MSO, а также интерактивных элементов — в зоны прокрутки, кроме других зон прокрутки. Значительно улучшен функционал Scrollable Frames, добавлены упомянутые функции закладок и интеграция с «Фейсбук» Кнопки теперь поддерживают управление видео и аудио, им допустимо присваивать несколько действий. Можно создавать свой Adobe Content Viewer, не ожидая разрешения от Apple, и в нём просматривать публикации с InDesign без загрузки проекта через облако. Можно создавать renditions и для iOS-публикаций. Наконец, если оригинальные файлы были перемещены, в Folio Builder можно указать их новое местоположение. И многое другое… Не обошлось без багов, но кто обещал, что будет легко?

23. Быть в курсе

Известный дизайнер интерактивных публикаций Йоханнес Ханслер в марте открыл сайт http://www.caniupdateadobedps.com/ — отличный источник информации по обновлениям инструментов DPS.