Pull to refresh

Проектирование интерактивных продуктов в Fireworks

Reading time 12 min
Views 9.4K
Original author: Nick Myers
Эта статья была опубликована еще в 2008 году на официальном сайте Adobe. В ней Nick Myers (ведущий визуальный дизайнер компании Cooper) рассказывает о преимуществах Fireworks в проектировании интерактивных продуктов.

Мне часто задают вопрос: «Какие инструменты вы используете при проектировании ваших продуктов?». Мой ответ «Fireworks» часто встречали с недоумением. Я провожу много времени чтобы объяснить наше предпочтение и это помогает, но я чувствую себя несколько защищающимся, так как Adobe Fireworks не является стандартным инструментом в нашей отрасли.

Когда я впервые пришел в консалтинговую компанию Cooper, я понял, что мне придется расстаться с всемогущим Adobe Photoshop (моим союзником с тех времен, когда слоёв в нем еще не было), и я немного беспокоился и был настроен скептически, но спустя несколько недель я изменил свой подход к проектированию свободный от опасностей Marquee Tool. Правда в том, что Fireworks имеет много преимуществ для разработки интерактивного дизайна, и это превосходно поддерживает наш рабочий процесс. В этой статье описывается, как Fireworks помогает нам в разработке интерактивных продуктов.

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

Как мы работаем в Cooper


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

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

Где используется Fireworks


После генерации большого количества идей дизайнер взаимодействия переносит наработки в Fireworks. Другие компании используют инструменты, такие как Visio или OmniGraffle для дизайна взаимодействия и Photoshop для визуального дизайна. Но за эти годы мы научились использовать Fireworks так, чтобы извлечь из него массу преимуществ.

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

image
Рисунок 1. Первоначальные прототипы созданы дизайнером взаимодействия, а затем доработаны визуальным дизайнером

Использование состояний для воспроизведения сценариев


Дизайнер взаимодействия начинает проектирование сценария с отображения основных элементов (при помощи стандартных стилей существующих в Fireworks) которые выглядят схематично. Мы намерено не применяем визуальные эффекты для того, чтобы сосредоточиться на поведении продукта. Дизайнер взаимодействия проектирует не только один экран. Он может сделать 20-30 экранов раскадровки поведения интерфейса и несколько сценариев использования. Fireworks совмещает все эти экраны в одном файле при помощи состояний (ранее кадров).

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

image
Рисунок 2. Финальные экраны распределены между несколькими состояниями в одном файле Fireworks

Организация структуры интерфейса при помощи общих слоев

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

image
Рисунок 3. Элементы навигации распределены между несколькими состояниями. Достаточно изменить их один раз, чтобы они обновились во всех состояниях

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

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

Часто приходится работать с обычными слоями (не общими) или несколькими специфичными элементами. К примеру фотографии и подписи на рабочем пространстве, которые постоянно меняются в течении сценария (рисунок 4). Как правило вы поймете, что всё, что встречается более чем в двух состояниях, лучше разместить в общем слое.

image
Рисунок 4. Уникальные объекты размещаются в обычных (не общих) слоях

Настройка символов общих элементов управления и иконок

Другая основная задача дизайнера взаимодействия до передачи завершенного файла визуальному дизайнеру — это преобразование объектов в символы. Символы работают так же, как и в Adobe Flash. Символ находится в палитре Document Library и может быть там же отредактирован, в то время как «экземпляры» символа находятся на холсте. Любые изменения внесенные в символ мгновенно отображаются в экземплярах. Двойное нажатие на любой из экземпляров, размещенных на холсте, открывает символ и позволяет внести в него изменения.

Лучшие кандидаты в символы — те элементы, которые часто используются и меняют положение на холсте. По этой причине иконки и элементы управления являются идеальными кандидатами на эту роль. Обычно дизайнер взаимодействия знает, где место тому или иному контролу или иконке, и помещает символ «заполнитель» из Document Library. Визуальному дизайнеру останется внести в него корректировки.

Символы легко создать: выделите объект, затем выберите Modify>Symbol>Create Symbol или нажмите F8. Откроется диалоговое окно в котором лучше выбрать «Graphic», если вы планируете более сложный экспорт изображения. Для элементов, которые могут растягиваться (такие как текстовые поля), лучше включить 9-фрагментное масштабирование (рисунок 5). Для иконок этого можно не делать, поскольку в этом нет необходимости.

image
Рисунок 5. Создайте символ, выбрав один или несколько объектов, и нажмите F8

Переход к визуальному дизайну


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

Создание сетки

Оформление начинается с создания сетки. Панель Guide (рисунок 6) можно установить как расширение, оно очень помогает в процессе построения сетки. Для получения дополнительной информации о панели Guide читайте статью Using the Guides panel in Fireworks CS3, написанную Eugene M. Jude (дизайнер пользовательского интерфейса команды Fireworks).

image
Рисунок 6. Панель Guide упрощает построение основной сетки

В последствии визуальный дизайнер добавляет стили основным элементам интерфейса. Обычно этот процесс начинается с крупных объектов, таких как фон интерфейса, и постепенно смещается в сторону более мелких объектов, которые могут стать символами. Визуальный дизайнер может создать стиль глобальной навигации (как в примере выше), и эти изменения вступят в силу сразу же во всех состояниях.

Общие элементы стиля

Одним из моих любимых инструментов в Fireworks является команда Paste Attributes. Эта команда может быть использована для быстрого обмена между стилями объектов (рисунок 7).

image
Рисунок 7. Быстро создавайте градиентные заливки и тени для всех кнопок в интерфейсе путем копирования свойств одной кнопки и вставки во все остальные

Допустим, вы создали стиль для кнопки и хотите чтобы этот стиль применялся ко всем кнопкам в файле. Вы просто копируете стиль донора (Ctrl+C) и назначаете его всем реципиентам (Ctrl+Shift+Alt+V). Это молниеносная операция.

Эта команда копирует не только размер и цвет текста, но и другие свойства, такие как гарнитура, интерлиньяж, фильтры, которые были применены к объекту. Это может быть полезно, если ваш текст имеет тень. Команда Paste Attributes может быть применена к любым объектам, в частности к векторным формам, линиям, тексту и фотографиям.

Вы также можете создавать свои собственные наборы стилей и управлять ими на палитре Styles (рисунок 8). Можно добавить стиль в палитру, а затем применять его к другим объектам.

image
Рисунок 8. Используйте палитру Styles для просмотра и управления стилями (используя стандартный набор или работая с оригинальными стилями открытого документа)

Если вы решили изменить стиль этих объектов, просто измените один объект и выберите пункт «переопределить стиль», в результате чего объекты с этим стилем обновятся (рисунок 9). Вы даже можете назначить стиль объектам из других открытых файлов. Непросто отличить аналогичные стили в палитре с маленькими значками, но метки в нижней части палитры должны немного вам помочь.

image
Рисунок 9. Изменение объекта и переопределение стиля для обновления всех объектов в документе

Редактирование символов

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

image
Рисунок 10. Двойной щелчок по прямоугольному символу переводит в режим редактирования

Вектор с пиксельной точностью и палитры Path


Несмотря на то, что Fireworks является векторной программой, он отлично подходит для дизайна иконок всех видов, будь то очень простые или наоборот очень детализированные. Но впервые при переходе из Photoshop вам может быть неудобно, если вы пытаетесь работать на уровне пикселей без помощи палитры Path. Эта палитра — один самых важных инструментов в Fireworks для пиксельного позиционирования (рисунок 11).

image
Рисунок 11. Палитра Path

Чтобы проиллюстрировать выше сказанное, давайте рассмотрим иконку папки на рисунке 12. Я сделал стандартные 32-пиксельные иконки и теперь мне надо сделать 16-пиксельную версию. Если значок повторно масштабировать, то очертания станут нечеткими. Это происходит потому, что линии имеют свойство алиасинга и сместились относительно пиксельной решетки. Когда вы выделяете сдвинутую относительно пиксельной решетки точку объекта и выбираете пункт «Round points to pixels» в палитре Path, эта точка выравнивается относительно центра, в котором пересекаются пиксельные границы, в связи с чем эта область становится резкой, при этом объект не лишается свойства алиасинга.

image
Рисунок 12. Используйте «Round points to pixel» в палите Path, чтобы получить четкие линии

Инструменты выделения панели Path также очень полезны. Когда округлые части нужно привязать к пикселям, ими просто выделить все точки. При расширении такого объекта как округлая кнопка можно легко выбрать все точки на правой стороне кнопки. Для этого достаточно выбрать контрольную точку на панели (рисунок 13). Ширина кнопки может быстро продлена, если использовать клавиатурные стрелки или дополнительную клавишу Shift, которая позволяет перемещать сразу на 10 пикселей.

image
Рисунок 13. При частом выборе точек на объекте инструменты выделения точек помогут вам справиться с этой операцией. Эти команды могут быть улучшены путем добавления их на горячие клавиши (например, Ctrl+6 для выбора правых точек).

Наконец вы можете упростить сложные формы и сделать линии более гладкими. Есть еще несколько полезных команд у панели Path, но их я использую гораздо реже.

Используем мощь контролов Common Library и 9-фрагментного масштабирования


Еще одна интересная деталь в Fireworks это палитра Common Library. Это дополнение к Document Library, в которой содержатся различные элементы управления с подписями и управляемыми состояниями, которые можно разместить на холсте.

Примечание: Fireworks CS3 содержит ограниченный набор контролов Vista, но для XP элементы управления можно скачать с Fireworks Exchange или senocular.com.

image
Рисунок 14. Палитра Common Library содержит многие стандартные элементы управления пользовательского интерфейса, которые вы можете быстро перенести на ваш холст

Вы можете выбрать чекбокс из папки WinXP и поместить его на холст, где он отобразится как чекбокс с подписью «label». Открыв палитру Symbol Properties вы можете быстро изменить состояния с истинного на ложный, тем самым отключив чекбокс. Нажав на Label, вы можете изменить подпись. Также вы можете изменить состояние чекбокса с активного на неактивный (рисунок 15).

image
Рисунок 15. Быстрое редактирование свойств символа, таких как подпись, стиль, цвет текста и состояние контрола

Дизайнеры взаимодействия могут легко манипулировать UI-контролами не беспокоясь об их внешнем виде. Символы имеют свойство 9-фрагментного масштабирования, поэтому вы можете изменять ширину текстового поля без необходимости модифицировать исходный объект.

Вы можете модифицировать символы в Common Library под собственный стиль и даже можете свою библиотеку символов в Common Library,. Только нужно помнить, что каждый общий символ содержит специально названные объекты, на которые ссылается код, и их нельзя менять. Для получения дополнительной информации о создании общих символов читайте статью Using rich symbols in Fireworks написанную Aaron Beall.

Быстрая и нерушимая обработка


Элементы оформления, такие как цвет или текстуры, вероятно будут меняться несколько раз в ходе работы. К счастью, Fireworks поддерживает такое поведение с фильтрами без их разрушения. Одни из последних задач в проекте обычно включают в себя создание различных состояний для кнопок (нормальное, по умолчанию, наведению, нажатию и так далее). Вместо того чтобы делать дизайн с нуля часто можно взять готовую кнопку и удалить или добавить новые фильтры (рисунок 16). В этом примере белая кнопка с тенью. Чтобы настроить отключенную кнопку, нужно просто удалить фильтр, отвечающий за тень, и снизить прозрачность.

image
Рисунок 16. Быстрая настройка и удаление визуальных свойств (таких как тени, тон цвета/насыщенность, уровни, кривые и т.п.) используя неразрушающие фильтры

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

Документирование внешнего вида и поведения


Как только наш дизайн начинает приобретать форму, мы разрабатываем документ, в котором описывается, как продукт должен работать. Этот документ, известный также как «Спецификация», завершает дизайнер коммуникаций, который участвовал в обсуждении поведения интерфейса и сценариев (рисунок 17).

image
Рисунок 17. Описание элементов управления интерфейса и их поведения, а также сценариев использования в спецификации

Этот документ мы создаем в Adobe InDesign, с которым Fireworks прекрасно ладит. Мы просто экспортируем все состояния дизайна, описывая их, и получается объемная книга восхитительной информации.

Показать финальный результат в документе или презентации просто с помощью команды Export (Ctrl+X). Вы можете экспортировать все состояния выбрав File>Export и выделив States to Files в меню Export (рисунок 18). Также вы можете экспортировать через Image Preview (Ctrl+Shift+X), чтобы быть уверенным в качестве экспортируемого изображения.

image
Рисунок 18. Экспорт состояний в отдельные файлы для размещения их в InDesign

Документирование руководства по стилю


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

image
Рисунок 19. Описание визуальных элементов, таких как расположение, брэнд, типографика, иконки и контролы в руководстве визуального стиля

Создание графики


Fireworks наиболее популярен за свою эффективную работу с графической продукцией. Обычно мы экспортируем все экраны в документацию, но также часто используем его для экспорта готовой графики. Если вы дисциплинированно ассоциировали графику с символами то будущую графику легко экспортировать из Document Library. Особенно это полезно для иконок, где обрезать графику часто не нужно. Просто зайдите в Document Library и воспользуйтесь опцией Export Symbols (рисунок 20).

image
Рисунок 20. Быстрый экспорт символов при помощи опции в меню Document Library

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

Преимущества и недостатки Fireworks


То что мы проводим большую часть времени работая в Adobe Fireworks еще не значит, что мы прекратили использовать Adobe Photoshop и Adobe Illustrator. Fireworks предназначен для экранной графики, так как Photoshop и Illustrator более уместны в полиграфическом дизайне. Photoshop также предпочтителен в ретуши фотографий при помощи инструментов Stamp. Но я считаю, что большинство функций для редактирования фото, таких как уровни, кривые и маски легко настраиваются в Fireworks и их легко отменить с помощью фильтров.

Исторически Fireworks имел слабый движок, но новая версия теперь использует движок от Adobe у которого есть все возможности исправить недостатки программы.

Что прочитать еще


За эти годы мы в Cooper провели оценку и переоценку конкурентных программ и можем гарантировать, что мы используем самые лучшие инструменты. Разработка интерфейсов в Fireworks минимизирует рабочий процесс и позволяет нам сосредоточиться на продукте наших клиентов.

Смотрите следующие ресурсы чтобы узнать больше о рабочем процессе Cooper, использования панели Guides и обогащенных символов:


P.S.
Если вы решитесь попробовать совладать с новой средой и у вас появятся вопросы, то вы сможете получить на них ответ на форуме fireworks.co.ua.
Tags:
Hubs:
+59
Comments 19
Comments Comments 19

Articles