May 3, 2007

Wireframes для презентации и документации, 2 часть — Решение

Проблемы при подготовке многоцелевых wireframes (читайте первую часть статьи “Wireframes для презентации и документации“) можно решить несколькими способами.

Макросы для MS Visio

Первое решение — как раз в рамках самого инструмента проектирования. Это старые добрые макросы, создание которых дешево и практично. Для начала нужно подготовить wireframes (а еще лучше — сделать эту подготовку стандартной).

Wireframe как документация, страница 1 Во-первых, вся информацию, касающуюся только документации, необходимо отделить от всего остального. В Visio как раз на этот случай есть отличная штука — слои (меню View -> Layer Properties), на одном из которых и должна быть отрисовано все, что не нужно для презентации. В моем случае это комментарии в правой колонке и сноски на них в основной части страницы (смотрите пример документационного wireframe). Так мы убираем лишнюю детализацию.

Во-вторых, понадобится дополнительный фон страницы для ее презентационной версии. Из него нужно убрать правую колонку, а также задать параметры страницы и печатного листа (меню File -> Page Setup -> Print Setup и там же Page Size). В моем случае это A3 с книжной ориентацией. Так мы определяем верный формат (хотя часть этой работы доделает макрос).

Осталось записать макросы, чтобы сделать переключение версий быстрым (меню Tools -> Marcos -> Record New Macro). Один будет переключать wireframe в состояние презентации, другой — возвращать его в вид документации. Я называю их, соответственно, preparePresentation и prepareDocumentation. Первый делает следующее: делает слой с комментариями невидимым, устанавливает специальный фон страницы, после чего устанавливает настройки самой страницы для печати (меню File -> Page Setup -> Print Setup). Второй макрос возвращает страницу в исходное состояние. Потратив немного бумаги на тестовую печать версий и подгонку мелочей вы получите то что надо.

* Есть тут, правда, момент, который можно было бы еще улучшить. Макрос проходит по всем страницам, но есть загвоздка — первой идет страница с содержанием документа и формат у нее отличается от остальных. Так что применяя макрос можно испортить ее. Можно просто не сохранять документ при преобразованиях, но хочется чтобы все работало красиво. Уверен, что способы исключить неформатные страницы есть, — правда, не владея языком макросов VBScript я это сделать не смог. Будет здорово, если кто-то из читающих этот пост подскажет решение.

В идеале, конечно, хотелось бы чтобы эти макросы применялись автоматически при печати. И это, похоже, тоже реально — при печати можно сохранить набор настроек (File -> Print -> Properties). И скорее всего, при выборе нужного набора настроек можно применять макрос к тем страницам, которые отправляются на печать. Тогда этот способ заработает на полную мощь.

Пакетная обработка в графическом редакторе

Второй вариант попроще, но и результаты у него не такие красивые. Это те же макросы, но работающие не с исходным документом, а с его экспортированной в обычные картинки версией. Экспорт, например, в PNG делается часто — отправить wireframes клиенту или участнику команды разработки для обсуждения. Да и, наверное, в любом пакете, пригодном для проектирования интерфейсов, эта возможность есть.

Суть способа — создать в графическом редакторе макрос, который вырезал бы из документационной версии максимум ненужного. А после этого пакетным способом обработать экспортированные изображения. Это легко делается, например, в Adobe Photoshop. С помощью actions (аналог макросов) можно вырезать правую колонку. А пакетной обработкой (File -> Automate -> Batch) убрать ее у всех изображений. От сносок в основной части страницы избавиться не удастся, но правая колонка — это уже полдела.

Еще один минус этого способа — растровую версию красиво не помасштабируешь в любую сторону. Но если экспортировать wireframe в максимальном качестве, все будет не так уж плохо. Да и работает этот способ быстро и просто.

Нерешенные вопросы

Оба способа, правда, не решают еще одной проблемы — что делать с длинными страницами? В первой части материала описано, как такие страницы отражаются в документации — разбиваются на несколько. Но вот склеивать их автоматически уже сложно. Тут спасает только то, что длинных страниц обычно не так много. Хотя и от этой лишней работы хочется найти способ избавления.

В предыдущих сериях:

4 Comments

Leave a comment

Руководитель отдела проектирования и дизайна интерфейсов Mail.Ru. Работаю над коммуникационными и мобильными сервисами компании, а также общепортальными задачами.

Вакансии в интерфейсной команде Mail.Ru

  • Дизайнер Почты Mail.Ru
    Приоритетное направление со множеством интересных и сложных задач. Пользователи Почты Mail.Ru — это десятки миллионов людей.
  • Дизайнер мобильных сайтов и приложений
    iOS, Android, Windows Phone, Symbian, J2ME, Bada.
  • Дизайнер для Futubra, нового продукта
    Создавать совершенно новый проект. Такой дизайнер сделает 665 концепций и будет полон сил для 666-й. Он делает работу быстро, просто, эффектно. В его голове полно идей, он постоянно ими делится, но знает, что цена идеи самой по себе стремится к нулю и ни за одну не держится на смерть. У него есть в кармане пачка решений необычных задач. А если и нет, он знает, где такие решения найти.
  • Дизайнер стратегических продуктов
    Работа над Почтой, главной страницей и другими продуктами.