Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

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

  • 3 мая 2007

Проблемы при подготовке многоцелевых 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 в максимальном качестве, все будет не так уж плохо. Да и работает этот способ быстро и просто.

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

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

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

  • Wireframes для презентации и документации. 1 часть — Проблема

Юрий Ветров

Директор по бренду и дизайну (ex-Muse Group (Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банк и Mail.ru Group). Я руковожу командами, которые отвечают за дизайн, исследования и редактуру бренда и интерфейсов, а также дизайн-систему в коде. Автор книги и курса «Паттерны дизайн-менеджмента» и «Дайджеста продуктового дизайна». Со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, а также Russian Design Cup. Читал лекции в Британке, курировал курс Future London Academy в Лондоне. Мои публикации есть на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
View Post
  • Дизайн-системы

Тёмная тема оформления

  • Юрий Ветров
  • 17 мая 2020
View Post
  • Дизайн-менеджмент
  • Статьи
  • Тренды

DesignOps, стремительно ворвавшийся в тренд

  • Юрий Ветров
  • 23 июля 2018
View Post
  • Дизайн-системы
  • Рецензии

Книги о дизайн-системах

  • Юрий Ветров
  • 26 апреля 2018
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 6 — Внедрение

  • Юрий Ветров
  • 30 мая 2017
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 5 — Дизайн с выхлопом

  • Юрий Ветров
  • 12 апреля 2017
View Post
  • Статьи
  • Тренды

Куда идёт UX в 2016 году

  • Юрий Ветров
  • 14 сентября 2016
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия на практике. Часть 4 —
От дизайн-команды к дизайн-культуре

  • Юрий Ветров
  • 12 сентября 2016
View Post
  • Методы и практики
  • Статьи
  • Тренды

Алгоритмический дизайн

  • Юрий Ветров
  • 27 июня 2016
4 comments
  1. Уведомление: Создание презентаций » Wireframes (прототипирование) и подготовка проектов Ð
  2. Уведомление: Создание презентаций » Wireframes (прототипирование) и подготовка проектов Ð
  3. Уведомление: Wireframes для презентации и документации, 1 часть — Проблема | Juras Vetrau. Блог о веб-рÐ
  4. Уведомление: Wireframes для презентации и документации, 1 часть — Проблема | Juras Vetrau. Блог о веб-рÐ

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.