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


Многие специалисты отмечают, что при разработке интерфейса, в первую очередь, необходимо проработать сценарии взаимодействия пусть даже на сером, но зато, не отвлекающем от основных задач, прототипе. И только потом его «раскрашивать» в графических редакторах. Так проектировщик создает среду, а красоту наводит дизайнер.

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

Ниже приведен обзор продуктов для создания пользовательского интерфейса в графической среде.

 

Создания  пользовательского интерфейса в графическом редакторе

 

Инструмент: Adobe Fireworks

Назначение: Предназначен для создания сложных интерактивных прототипов. Имеет возможность экспортирования в PDF и HTML форматы.

Стоимость: $ 299

Преимущества: Возможность множественной стилизации. Позволяет хранить  графические файлы с редактируемыми данными в PNG формате. Экспорт в html. Наличие Master Page и множества состояний (States). Имеется библиотека символов и возможность создания своих символов. Хорошая работа с объектами в векторе и растре.

Недостатки: Изолированность от других продуктов Adobe. Плохие средства типографики.
Неудобство в работе с более чем тремя эффектами стиля, цветами, кривыми и паттернами.

 

Инструмент: Adobe Flash

Назначение: Позволяет быстро генерировать анимацию и простые интерактивные прототипы. Со знаниями ActionScript возможно создание более сложных взаимодействий.

Стоимость: $ 699

Преимущества: Многофункциональная визуальная компоновка. Высокое качество графики и визуализации данных. Сменные оболочки и стили. Интегрирован с серией продуктов Adobe Creative Suite. Высокий уровень интерактивности.

Недостатки: Чрезмерная требовательность к ресурсам процессора. Необходимость в установке специальных плагинов для просмотра.

 

Инструмент: Adobe Illustrator

Назначение: Инструмент имеет широкий набор средств для рисования и возможностей управления ими.  Позволяет создавать качественные векторные изображения различного уровня сложности.

Стоимость: $ 599

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

Недостатки: Сложность в освоении. Большая ресурсоемкость. Неудобство работы с растровыми изображениями.

 

Инструмент: Adobe InDesign

Назначение: Крупный пакет, который поддерживает Unicode для обработки текстов и шрифтов OpenType. Позволяет  экспортировать документы в формат PDF с многоязычной поддержкой.

Стоимость: $ 699

Преимущества: Высокая детализация, хорошая работа с типографикой. Наличие модульной сетки. Нет необходимости в повторной отрисовке.
Доступность всем участникам проекта. Возможность внесения изменений без ограничений.

Недостатки: Отсутствие текстурных заливок, неудобная (медленная) работа с цветами и градиентами. Ресурсоемкость. Сохранение файлов и работа с гиперссылками реализована неудобно. Проблема с масштабом прототипа. Скорость создания прототипа средняя. Интерактивность низкая.

 

Инструмент: Adobe Photoshop

Назначение: Графический редактор, основное направление - работа с растровыми изображениями. Широко используется в веб-дизайне.

Стоимость: $ 699

Преимущества: Универсальность и адекватность цветопередачи. Ретушь и фотомонтаж. Развитые средства для цветокоррекции сканированных изображений. Поиск по слоям.

Недостатки: Невозможность применения одного фильтра к группе слоев. Отсутствие основных заготовок для создания интерфейсов. Требует много оперативной и дисковой памяти.

 

Инструмент: Xara Xtreme Pro

Назначение: Универсальный графический редактор. Позволяет корректировать фотографии, создавать различные иллюстрации для печати. Содержит много инструментов, предназначенных для работы с векторной и растровой графикой.

Стоимость: $ 299

Преимущества: Наличие удобных инструментов для обработки иллюстраций, фотографий и web-графики. Несложен в освоении. Высокая скорость обработки данных. Возможность работы с многостраничными документами, создание PDF. Экспорт анимации во Flash. Импорт и экспорт многослойных PSD-изображений.

Недостатки: Имеет лишь простые заливки - отсутствует заливка по сетке. Проблемы в работе со специфическими кистями и большим количеством объектов.

 

Вывод: Инструмент Fireworks в большей мере предназначен для создания интерфейсов веб-сайтов и программ. Photoshop и Illustrator будут уместны в полиграфическом дизайне. Photoshop предпочтителен в ретуши фотографий. Тем не менее, даже в иллюстраторе создается серия страниц, между которыми возможно осуществлять переходы при нажатии. Однако, это не полноценный HTML-прототип и его нельзя генерировать в word для дальнейшего редактирования.

Xara Xtreme Pro отличается универсальностью, простотой и не высокой стоимостью в сравнении с продуктами Adobe. Но также имеет существенные недостатки — статичность создаваемых макетов, следовательно, нет возможности проработки сценариев взаимодействия.

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

От прототипа к продукту

Для превращения прототипа в конечный продукт можно пойти двумя путями.
Первый – это отбросить прототип и использовать необходимые привычные инструменты и догадки того, как это должно быть, что чаще всего и происходит. Дизайнер создает макет (представление интерфейса в графическом редакторе), затем отдает в таком виде для дальнейшей разработки. Как правило, это приводит к разногласиям в интерпретации того, что имел в виду дизайнер и то, что реализовали разработчики. А после этого оказалось вовсе не то, чего хотел заказчик.
Второй – взять от прототипа как можно больше для дальнейшего создания пользовательского интерфейса. Так, используя интерактивный прототип программисту будет проще и удобнее работать с построением структуры и пониманием логики поведения отдельных составляющих. Как правило, нюансов, которые могут ввести в заблуждение — немало.
Таким образом, инструменты, для создания интерактивных прототипов позволяют получить наглядную модель будущей системы, а вместе с тем, выполнить ключевую роль в переходе от технического задания к реализации готового продукта.

 

Читайте также:

 

Инструменты проектирования (часть I)

Инструменты проектирования (часть II)