GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Краткий обзор бесплатных "движков" (CMS) для сайта(26831)
Бизнес-планирование для Интернет-проекта(20677)
Обзор решений для тестирования сайтов(18666)
Составление сметы на сайт(17864)
Конструкторы сайтов: дешево и сердито(11031)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Управление проектами » Прототипирование интерфейсов в Adobe InDesign

Прототипирование интерфейсов в Adobe InDesign


Владислав Головач
http://www.usethics.ru/

Стандартным инструментом прототипирования интерфейсов в настоящее время является Microsoft Visio. Сам будучи большим ценителем Visio, я обнаружил, что Adobe InDesign лучше подходит для этой работы.

Более пяти лет основным содержанием моей работы является дизайн и одновременное прототипирование пользовательских интерфейсов. За эти годы я перепробовал множество инструментов прототипирования, например MS PowerPoint, Macromedia Authorware и FreeHand, Norpath Studio. В конце-концов, как и большинство моих коллег, я остановился на Microsoft Visio.

Я пользуюсь Visio с первой ее версии и все эти годы был крайне доволен ее работой. Полагаю, что лучшего средства построения блок-диаграмм не существует. В то же время, прототипирование интерфейсов в Visio сталкивается с тремя фундаментальными трудностями:

  • Результат работы, т.е. собственно прототип, трудно передать заказчику. Visio не является стандартной программой, так что просмотреть прототип заказчик чаще всего не может. Год назад появилась бесплатная программа просмотра, но ее интерфейс не очень удобен (достаточно сказать, что прототип открывается внутри браузера). Можно также экспортировать прототип в другой формат (так что из прототипа получается нечто вроде сайта), но формат этот очень плох, фактически неработоспособен
  • В Visio практически невозможно разрабатывать длинные (т.е. высокие) формы. При переходе на такую форму масштаб отображения прототипа изменяется так, чтобы форма вся помещалась на экране; как следствие, масштаб становится слишком мелок и его приходится менять вручную. Из-за этого на прототипе почти невозможно проводить никакое юзабилити-тестирование
  • В Visio присутствуют шаблонные страницы, но гиперссылки на этих страницах не работают. Это значит, что любое навигационное меню приходится размещать на всех страницах, на которых оно используется; при необходимости же изменить один элемент приходится менять его вручную на всех страницах

Эти проблемы не фатальны; прототипировать в Visio все-таки возможно. Мне, однако, они досаждали настолько, что я не упускал ни одного случая проверить, отсутствуют ли они где-либо еще. Когда я столкнулся с InDesign и обнаружил, что там они отсутствуют, я ни на минуту не задумался о том, какой программой делать следующий прототип.

Преимущества InDesign перед Visio
Перед описанием преимуществ InDesign необходимо рассказать, как в нем обстоит дело с вышеописанными проблемами. Во-первых, проблема выходного формата. В InDesign таким форматом является надежный и общедоступный PDF с гипертекстовыми ссылками. Во-вторых, проблема длинных форм. В InDesign проблема решается благодаря тому, что при установке ссылки можно указать масштаб целевой страницы. Третьей проблемы также не существует – гиперссылки на шаблонных страницах работают. Теперь о других достоинствах InDesign.

  • Интерфейс Visio проектировался для спорадической работы неспециалистов – в самом деле, много ли людей, которых нанимают специально под работу с Visio? InDesign, напротив, спроектирован в расчете на то, что с ним будут работать по восемь часов в день пять дней в неделю. В результате интерфейс InDesign позволяет работать гораздо быстрее – одним только использованием горячих клавиш обеспечивается значительное ускорение работы
  • Работа со слоями в Visio доступна, на мой взгляд, только существу калибра херувима. За все годы работы я так и не научился пользоваться окном слоев. А если бы и научился, что с того – окно настолько велико и неуклюже, что использовать его все равно почти бесполезно. В InDesign, напротив, работа со слоями реализована прекрасно – так, только теперь у меня появилась возможность готовить два разных прототипа – один специально для разработчиков, а другой, урезанный, – для тестов
  • Visio обладает странной, трудноуловимой и плохо описываемой проблемой – в Visio трудно делать эстетически привлекательные прототипы. Подобно PowerPoint, который подталкивает своим интерфейсом делать уродливые презентации, Visio имеет загадочный дефект, препятствующий появлению красоты. Разумеется, привлекательный прототип в Visio сделать можно, но на это придется выделить некоторое время. С моей точки зрения, красота – необходимое свойство прототипа (за него заказчик платит деньги), однако потери времени на её создание совершенно недопустимы (главное достоинство прототипа – быстрота). С этой точки зрения InDesign предпочтительней – инвестировав некоторое время в создание эстетически привлекательных шаблонов, можно автоматически получать красивые прототипы; при работе же в Visio одной такой инвестицией отделаться не получится
  • Как известно, тени – лучшие друзья веб-дизайнера. В прототипах их использовать тоже очень полезно – они прекрасно отделяют примечания к интерфейсу (если они есть) от самого интерфейса. Сделать прототип без примечаний практически невозможно, проблема в том, что эти примечания в прототипе теряются. Использование теней эффективно эту проблему решает, но в Visio они настолько рудиментарны, что пользоваться ими нельзя

Ложное преимущество Visio
Главным преимуществом Visio является, на мой взгляд, наличие в нем библиотеки объектов (stensil) со стандартными элементами управления. Можно не рисовать интерфейс с нуля, а просто расположить элементы управления в правильном порядке, тем самым на порядок увеличив скорость своей работы. Печальная правда в том, что эта библиотека на практике бесполезна. Разберем это подробнее.


Фрагмент экрана созданного в InDesign прототипа

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

Кроме того, стандартная библиотека не вполне универсальна. Если вы делаете интерфейс не для толстого клиента, а для браузера (веб-интерфейс), из всего разнообразия элементов управления остаются жалкие крохи – вид элементов управления в этом случае нужен совсем другой. Опять можно сделать свои элементы – но зачем?

Кроме того, в шаблонах Visio есть и более глобальная проблема. Готовые элементы управления выглядят очень реалистично. Я же уверен в том, что прототип должен выглядеть условно. Логика здесь простая– прототип не более чем макет. Если этот макет выглядит реалистично, будут проблемы у участников тестирования – им постоянно будет казаться, что они видят нечто готовое, что неправильно; участники, к примеру, будут упорно пытаться пользоваться раскрывающимися списками, а поскольку в прототипе это невозможно, бедняги будут ужасно раздражаться. Кроме того, каков бы не был прототип, он неизбежно будет отличаться от реальной системы. Если прототип выглядит реалистично, его облик будет форсировать программиста реализовывать интерфейс возможно близко к оригиналу – а на самом деле прототип должен побуждать программиста реализовывать интерфейс вдумчиво.

На мой взгляд, в прототипе должны быть фиксированы только сами интерфейсные объекты, их взаимное расположение и размер – и ничего больше. Разумеется, кнопка должна выглядеть кнопкой, а вкладка – вкладкой, но не нужно и вредно делать их похожими на элементы управления ОС. В результате опять оказывается, что стандартными элементами управления из Visio пользоваться нельзя.

Разумеется, иногда (очень редко) нужно конкретизировать интерфейс с точностью до пикселя, но для таких ситуаций и Visio и InDesign, будучи векторными, подходят плохо. Приходится рисовать нужные элементы управления в Photoshop и вставлять их в прототип как картинку. И тут InDesign оказывается несколько лучше – Visio неправильно считывает разрешение растровых файлов, так что изображения по умолчанию вставляются неправильно.

Главное же, сделать свои стенсили можно и в InDesign, что проще простого. Разумеется, никакой автоматизации в них не будет (не получится сделать чекбокс заблокированным через его контекстное меню), но, на мой взгляд, в данном случае можно и нужно жертвовать скоростью ради качества.

Недостатки InDesign
Справедливости ради надо отметить, что InDesign обладает некоторыми недостатками, как абсолютными, так и относительными:

  • InDesign изначально заточен под полиграфию. В частности, это проявляется в том, что он не умеет нормально растеризовать шрифты, основанные на формате TrueType (см. иллюстрацию) включая и добрую половину шрифтов OpenType. Проблема в том, что все принадлежащие Microsoft шрифты, использующиеся в интерфейсе, именно что основаны на TrueType (включая Tahoma, Arial, Verdana). Приходится либо мириться с некачественной отрисовкой текста, либо использовать шрифты, основанные на формате PostScript – но у них другие ширины литер, так что прототип не будет соответствовать результирующему интерфейсу. Обратите внимание, что та же проблема есть и в формате PDF, так что текст плохо выглядит всегда. Но, по крайней мере, размеры литер InDesign не изменяет.


    Слева растеризация TrueType-шрифта Tahoma в InDesign, справа – растеризация того же шрифта средствами Windows XP


    • InDesign весьма ресурсоемок: работает он медленно, требуя при этом прорвы оперативной памяти и мощного процессора. Правда, экспорт очень быстрый, гораздо быстрее, чем в Visio
    • Сохранение файлов в InDesign сделано из рук вон плохо. Работая с InDesign, будьте постоянно готовы к тому, что рабочий файл перестанет открываться после зависания программы (да и без зависания тоже; похоже, что это родовая беда всех систем верстки). Решение, впрочем, несложно – просто напросто нужно регулярно сохранять прототип под новым названием, то же самое нужно делать после любого изменения библиотеки. В Visio, однако, таких проблем нет
    • В Visio любому объекту можно назначить стиль; после этого массово менять облик элементов управления становится легко и просто. В InDesign же есть только стили цветов
    • Работа с гиперссылками в InDesign реализована довольно неудобно. Существуют стили ссылок, т.е. определяемые пользователем точки их назначения, но встроенная в InDesign палитра ссылок почему-то показывает не эти стили, а список уже установленных ссылок. В результате установка ссылки и, в особенности, поддержание стройной системы наименований страниц, превращается в весьма неочевидную задачу. Кроме того, в Visio страницы имеют самостоятельные названия, а в InDesign – только номер. Правда, навигация в документе с большим количеством страниц в InDesign гораздо быстрее, чем Visio (в InDesign переход требует трех простых действий, а в Visio – неизвестного заранее количества действий сложных)
    • Определенная проблема существует с масштабом прототипа. В Visio масштаб вывода на экран в 100% соответствует 96 пикселей на дюйм. В результате при установке стандартного коэффициента увеличения (для чего есть горячая клавиша) объекты на экране точно соответствуют по размерам бумажной распечатке прототипа. Иная ситуация в InDesign – там при установке такого масштаба все объекты получаются слишком мелкими. Можно либо увеличивать стандартную страницу, печатая ее с уменьшением, либо каждый раз выбирать нужную степень увеличения (после долгих экспериментов я обнаружил, что нужный масштаб – 133%)

    InDesign в сравнении с прототипированием на бумаге
    В последнее время много внимание уделяется полностью бумажным прототипам. Несмотря на то, что 80% прототипов я сначала рисую на бумаге, я категорически против утверждения их заказчиком и тем более не использую их при тестировании. Причины просты:

    • Бумажный прототип быстро рисуется, но медленно перерисовывается. В случае более-менее сложного экрана вам придется полностью его перерисовывать не менее трех раз. Прототип же, нарисованный в компьютере, изменять легко и просто – а раз это просто, вы непроизвольно будете делать это чаще, что самым положительным образом сказывается на качестве интерфейса
    • Бумажный прототип либо быстро рисуется, либо хорошо выглядит. Показывать его заказчику, кроме как в начале проекта, просто неприлично. Разумеется, обсуждая интерфейс с клиентом, рисовать экраны на бумаге можно и нужно – но на следующую встречу лучше приносить уже перерисованную в компьютере версию
    • Бумажный прототип врет. Можно нарисовать на бумаге прекрасный интерфейс, а потом обнаружить, что он не вмещается в отведенное для него пространство. Это свойство бумажных интерфейсов имманентно, так что всякий раз, как вы рисуете на бумаге интерфейс, прототип вам врет. В компьютерном прототипе таких проблем нет – его без труда можно нарисовать совпадающим по размером с реальностью
    • Тестирование на бумажном прототипе – проявление неуважения к участнику тестирования. На перекладывание бумажек уходит уйма времени; участник при этом ужасно скучает. От скучающего же участника ожидать сотрудничества не приходится

    Таким образом, бумажные прототипы, на мой взгляд, не могут заменить прототипы экранные. При разработке же экранных прототипов предпочтителен InDesign.

    InDesign против кода, Flash и Norpath Studio
    Помимо бумаги, альтернативой Visio/InDesign является прототипирование в какой-либо среде разработки программ (например, Delphi) или сайтов (например, Dreamweaver). Кроме того, существуют специализированные средства создания интерактивного контента, например Macromedia Flash или Norpath Studio. Они имеют множество достоинств, главным из которых является то, что с их помощью можно создавать значительно более интерактивные прототипы, чем позволяют Visio и InDesign. Тем не менее, в общем и целом, они менее эффективны, поскольку прототипировать в них получается медленнее.

    Например, системы программирования подталкивают дизайнера слишком сильно полировать интерфейс (например, делая его все более и более интерактивным), а системы веб-дизайна просто неудобны при более-менее сложных проектах (они слишком уж сильно заточены для другой работы).

    Кроме того, они, как правило, не универсальны. Так, Delphi нельзя использовать для проектирования веб-интерфейсов, а Dreamweaver – для интерфейсов ПО. Встроенные элементы управления Flash не совпадают по размерам с такими же элементами из Windows или MacOS.

    В то же время сбрасывать системы программирования со счетов нельзя. К примеру, они являются единственным вариантом, позволяющим протестировать работу прототипа в режиме Large Fonts.

    Суммируя, если вы хорошо знаете какой-либо продукт, будь то среда разработки программ или тот же Flash, изучать InDesign я не рекомендую – вы и так сможете сделать всё, что хотите. В противном случае InDesign более предпочтителен: в нем сравнимый по качеству результат вы сможете получить быстрее (если же прототипируемый интерфейс несложен – гораздо быстрее).

    Выводы
    Я убежден, что InDesign по сумме показателей является сейчас лучшим средством прототипирования. Разумеется, в нем есть свои недостатки, но они менее велики, чем недостатки его основного конкурента, Visio. Norpath Studio со временем обещает стать достаточно удачным инструментом, однако пока этого не произошло, лучше инвестировать в InDesign.

 
21.02.2005
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.