2012.05.22, Автор: Алексей Клецель6559 прочтений

23 секрета Adobe DPS

Теги: Рабочий цех Publish

Полезные советы по разработке интерактивных изданий для планшетов.

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

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

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

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

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

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

Страница из книги

Страница из журнала Israel Defense. Внизу справа пример начала обратной нумерации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. Пропадающие объекты на интерактивных элементах

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

На иллюстрациях к совету 3 видна горизонтальная прокрутка страницы, в то время как ряд элементов внизу и вверху не сдвигаются и не пропадают, но остаются на месте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.

Страница из журнала Israel Defense с показанными слоями и поименованными интерактивными элементами в InDesign10. Именование интерактивных объектов

Имеет смысл использовать описательный подход к именованию интерактивных объектов, поскольку в ряде ситуаций их надо опознавать по имени. Например, увеличенный вариант некой иллюстрации мы сохраняем в 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.


Об авторе: Алексей Клецель (publishing.kletsel.com; alexey@kletsel.com), сертифицированный эксперт и инструктор по Adobe DPS. Примеры указанных изданий есть в свободно распространяемой через App Store программе KDP Sampler.

Архив журналов в свободном доступе.

Купить номер с этой статьей в pdf

На ту же тему:
  • Управление цветом в Adobe Creative Cloud без секретов

     

     

    Подробное руководство по настройке параметров управления цветом в программах Adobe.

    Без модуля управления цветом — Color Management Module (CMM) — и цветовых профилей ICC предсказать на экране монитора результат печати невозможно. Даже при выборе опции Don`t color manage (Не управлять цветом, Отменить управление цветом) * CMM и цветовые профили всегда задействуются в Adobe Photoshop, хотя и не оптимальным образом.

     

  • Фигурный текст и CorelDRAW (ч. 2) *

    Всё, что вы хотели знать о фигурном тексте, но боялись спросить.

    Импорт–экспорт текста

    Редактировать и корректировать фигурный текст можно непосредственно на рабочем листе документа или в специальном окне редактирования. Добавить фрагмент текста в активный текстовый блок или вставить текст в документ легко, импортировав текст из офисных приложений. Для этого есть команды «Импортировать текст» окна редактирования или «Специальная вставка» меню «Правка», либо можно просто вставить текст из буфера обмена.

     

  • Фигурный текст и CorelDRAW

    Всё, что вы хотели знать о фигурном тексте, но боялись спросить.

    Как невозможно познать всю Вселенную (она же всё время расширяется), так в каждой новой версии CorelDRAW каждый раз ты открываешь для себя новые возможности, приёмы и хитрости. Конечно, эта программа не для вёрстки больших, насыщенных текстами книг, брошюр, журналов, но возможности CorelDRAW для работы с текстами позволяют сверстать и подготовить к печати многостраничный промышленный каталог, с чертежами, схемами, векторными рисунками, фотографиями. И, конечно, текстовые фрагменты обязательно есть и в визитке, и в банере, и в рекламном проспекте. А если применять к тексту кое-какие трюки и эффекты, то можно создать настоящие шедевры дизайна и типографики… Конечно, многим пользователям хорошо известны инструменты и методы работы с фигурным текстом. Этот цикл статей — попытка систематизировать основные приёмы.

     

  • Раскрывая возможности белых чернил *
     

    Как дополнительные белые чернила помогают создавать новые применения широкоформатной печати.

    Сегодня ряд моделей широкоформатных и сверхширокоформатных принтеров могут печатать чернилами дополнительного цвета — белого, что создаёт новые возможности применения этих устройств. Но в принтерах могут быть реализованы различные технологии печати белыми чернилами, и у разных технологий — свои возможности и ограничения.

     

  • Маленькие хитрости большого Corel
    Полезные советы для пользователей CorelDRAW и Corel Photo-Paint.
  • InDesign осваивает ePub

    Приёмы построения ePub в Adobe InDesign CC. Советы издательствам, как без лишних хлопот готовить книги для LitRes или Bookmate.

    Девятый вал

    Старый мир огромных издательств и одиозных акул книжного бизнеса, бросающих крохи авторам, уходит в историю. Люди перестают читать книги. Тиражи падают, бумажная книга испытывает конкуренцию за внимание аудитории со стороны других многочисленных источников. Теперь не человек ищет, что почитать, а различные медиа-источники борются за его внимание. Цунами информации обесценивает её для потребителя. В борьбе за внимание аудитории авторы и правообладатели часто готовы раздавать свой материал бесплатно. В такой ситуации читатель часто не хочет платить, читает по вершкам, предпочитает дайджесты многостраничным описаниям парижских крыш. Как следствие, качество материала падает, объём книг и статей сокращается, снижаются продажи, а издатели лишаются доходов.

     


comments powered by Disqus
301 Moved Permanently

301 Moved Permanently


nginx/1.4.1