Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

3 Сен

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

Начало работы и интерфейс

Все начинается с создания нового проекта. На этом этапе вы можете выбрать, какого типа SketchFlow-приложение вы хотите создать. У вас два варианта: Silverlight и WPF-приложение.

image

Тут может показаться, что SketchFlow позволяет разрабатывать только прототипы Silverlight или WPF-приложений, но это не так, равно как не верно, что на бумаге можно делать только прототипы «бумажных» приложений.

Фактически, вы выбираете контейнер или, если хотите, способ доставки вашего прототипа. Silverlight-контейнер работает в браузере и может быть выложен на сайт. WPF-контейнер представляет собой отдельное Windows-приложение. Это основная разница, тем не менее не стоит забывать, что по собственной функциональности Silverlight != WPF, то есть какие-то нюансы все же могут быть, особенно, если вы выходите за пределы базовых идей SketchFlow и начинаете активно использовать возможности той или иной платформы. (См. также Типы проектов в Expression Blend + SketchFlow)
vs. 

В остальном, все зависит от вашей фантазии и ваших задач. Со SketchFlow вы получаете контейнер — проигрыватель интерактивных прототипов. В этом смысле ничто не мешает разрабатывать прототипы обычных приложений, сайтов или мобильных приложений для любой платформы. По существу, для придания контекста достаточно добавить подходящую подложку и, если нужно, подходящие стили контролов (Expression Blend умеет импортировать psd-файлы). То есть ответ на вопрос “могу ли я с помощью этой штуки сделать прототип iPhone-приложения?” положительный. Хотя, лучше, конечно, если вы сделаете приложение под Windows Phone 7 😉

Я буду придерживаться пути Silverlight-контейнера. Давайте посмотрим на интерфейс Expression Blend для SketchFlow-проекта:

Помимо меню и панели инструментов, в интерфейсе можно выделить 6 основных блоков:

  1. Рабочая область, где разворачивается основное действие,
  2. SketchFlow Map — карта вашего приложения, показывающая, какие есть экраны и компоненты и как они связаны между собой.
  3. Projects — дерево вашего проекта, Assets — заготовки, контролы и т.п., которые можно использовать в прототипе.
  4. Дерево элементов текущего экрана, компонента или контрола + панель для записи анимаций.
  5. SketchFlow Animations — специальная панель для упрощенной записи анимаций для прототипов.
  6. Свойства выделенных элементов — цвет, положение, шрифты и пр.

Прежде, чем двигаться дальше, нужно сделать одну важную настройку, которая впоследствии сильно облегчит жизнь: через меню Tools⇒Options⇒SketchFlow нужно установить размер по умолчанию для новых экранов и компонентов. Например, если вы используете подложку телефона или браузера, то разумно установить размером по умолчанию для экранов именно размер подложки.

Двигаемся дальше: впереди основные концепции: карта, экраны, компоненты, связи и в конце немного поговорим об импорте.

SketchFlow Map

SketchFlow Map — это карта ваших экранов и компонент, показывающая, как они связаны между собой. (Математически, это направленный граф и где-то в служебных файлах проекта можно даже найти его описание в xml-формате.)

На какие экраны пользователь может попасть из текущего? Какие переходы ему доступны?  Что он должен сделать, чтобы добраться до нужного экрана? Как различные компоненты вставляются друг в друга и в различные экраны? Все вместе это формирует поток вашего приложения, то есть иллюстрирует вожможные пути для работы пользователя с вашим приложением.

Наверное, можно даже сказать, что SketchFlow Map позволяет увидеть картинку целиком, то, что называется big picture. Карта позволяет сконцентрироваться не на деталях экранов, а на связях между ними.

Например, на картинке выше видно, что есть стартовый экран Login, и есть несколько основных экранов, в каждый из которых вставлено меню в виде компоненты MenuComponent, через который можно попасть на любой из экранов. Во все экраны вставлена подложка WindowComponent, в основные экраны вставлены лента твитов TweersComponent и панель для обновления статуса UpdateComponent.

Схема может быть и более сложной:

или более простой:

.

В конечном счете все зависит от сложности прототипа и того, на каком уровне вы делаете дробление на экраны, т.к. часть переходов между различными состояниями может быть “зашита” внутри экрана в виде выделенных состояний (States), переходы между которыми можно задавать, к примеру, с помощью поведений (Behaviours).

Еще один интересный момент: с точки зрения взгляда на прототипирование как инструмент мышления и анализа, SketchFlow Map сам по себе является инструментом проектирования “потока” приложения и изучения возможных вариантов, в чем-то напоминающим MindMap.

Несколько простых правил по SketchFlow Map:

  1. Прототип всегда имеет стартовый экран, который обозначается зеленым треугольником (см. на картинках выше). Через контекстное меню стартовым можно сделать любой экран.
  2. Экраны обозначаются прямоугольниками, по умолчанию они синего цвета (Navigation).
  3. Компоненты обозначаются скругленными прямоугольниками, по умолчанию они зеленого цвета (Component).
  4. Переходы обозначаются сплошными линиями. Композиция обозначается пунктирными линиями.

Кстати, вы можете задавать свои цвета всем элементам карты (экраны, компоненты, связи) — у вас есть пул из восьми цветов (цветовых тегов), которые вы можете определить через меню Project⇒SketchFlow Project Settings…

Дальше назначит цвет можно через выпадающее или контекстное меню:

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

Сравните:

и .

Двигаемся дальше: экраны и компоненты.

Экраны и компоненты

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

Технически, и те и другие являются обычными UserControl.

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

можно перейти к схеме

.

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

Создавать новые экраны и компоненты можно различными способами:

  1. В панели управления SketchFlow Map есть необходимые кнопки:
  2. Эти же опции доступны из контекстного меню карты.
  3. Экраны и компоненты, находящиеся на карте имеют выпадающее меню, из которого можно вытянуть новый связанный экран или компонент:

  4. Если выделить в рабочей области или дереве объектов один или несколько элементов, то из контенкстного меню их можно превратить в новые компоненты (Make into Component Screen…).

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

Связи и переходы

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

В данном случае с экрана C можно напрямую перейти на экран X и через вставленную компоненту Navigation на экраны A, B, C (да, формально получается, что на себя тоже можно перейти).

В проигрывателе прототипа (компиляция и запуск — F5) эта совокупность связей напрямую отображается на доступные варианты навигации (переходов):

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

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

  1. Когда вы вытягиваете новый экран или компонент из существующего, автоматически появляется связь (см. выше).
  2. Из выпадающего меню компонента или экрана можно выбрать опцию Connect an Existing Screen или Insert Component Screen и перетащить связь на нужный объект.
  3. Можно просто мышкой выделить объект и перетащить его на другой — между ними автоматически создастся связь (навигация или композиция).

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

Для переходов даже добавлен специальный пункт в контекстном меню — NavigateTo, через который можно навесить переход по клику на любой из имеющихся экранов или вперед/назад в истории перемещений пользователя по экранам. Если между экранами еще нет связи, она автоматически будет добавлена и в карту.

Поведения мы рассмотрим отдельно в одной из следующих статей.

Импорт

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

В этом контексте становится интересным вопрос быстрого обозначения того, что будет на каждом из экранов. Эту задачу можно решать различными способами: от самого простого в виде текстового пояснения “тут будет список контактов” до импорта готовых зарисовок (скетчей).

В случае импорта Expression Blend + SketchFlow предоставляет вам несколько интересных возможностей, каждая из которых обладает своими плюсами и минусами

  • Графические наброски (скетчи). Продумывая наброски, вы сразу выделяете ключевые состояния (экраны) и готовите зарисовки под каждое из них. Состояние = набросок. Далее каждый под из набросков создаете отдельный экран и переносите туда изображение. Потом связываете экраны между собой и получаете первичную версию прототипа. Это также может быть удобным, если вы начинаете с бумажных прототипов или зарисовок интерфейса на бумаге.
  • Графические редакторы. Можно открыть Adobe Illustrator или Photoshop и нарисивать весь набросок в едином файле (или нескольких файлах), разнося разные компоненты и состояния по слоям. Состояние = набор слоев. Дальше можно импортировать этот файл в Expression Blend вместе со слоями.
  • Microsoft PowerPoint. Если вы делаете прототип в PowerPoint в виде последовательностей слайдов, то вы можете импортировать презентацию в Expression Blend. Для каждого слайда SketchFlow создаст отдельный экран и установит связи между ними. Состояние = слайд.
  • Expression Blend. И, наконец, можно создавать все сразу в Expression Blend + SketchFlow. Этот вариант мы рассмотрим в следующей статье.

В качестве примера, см. видео о создании прототипа интерактивного баннера.

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: