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

 
                  Так и при разработке программного обеспечения. Прежде чем реализовывать сам программный продукт, стоит подумать о его концепции, о его главных функциях, о его особенностях. Разработка по принципу программирования и параллельного додумывания, исправления, изменения и отладки, совсем не подходит для серьезных и больших проектов. Значит, прежде всего, необходимо создать такое приближение, которое сможет отобразить базовый функционал и сформированный пользовательский интерфейс. Какой же способ выбирает большинство? Бумажки, нескончаемые бумажки набросков. Ластики, карандаши, ручки, маркеры. Переход между страницами осуществляется перемешиванием листков. Откуда возникают, множественные черкания, перерисовки, потеря общего видения. И естественно, отнес в одно место, что-то забыл или потерял, взял обратно, и пытаешься разобраться. Согласитесь, процесс не из приятных. Кроме того, при таком раскладе собираются весьма неприятные и неудобные факторы.

                                          

                  Как же упростить весь этот процесс, используя программное решение? Ответ на этот вопрос дает нам SketchFlow (дополнительный инструмент продукта Expression Blend). Он открывает перед нами возможность удобной и наглядной работы с интерактивными прототипами. Он дает нам возможность создать такое видение приложения, в котором помимо простых переходов, можно реализовать некоторые базовые функции. Кроме того, заказчику совсем не нужно уметь работать со средой разработки прототипов, ему достаточно запустить проект, и оставить свои замечания в виде комментариев, или пометок на той или иной страничке проекта. Кроме того, создатель прототипа может быстро увидеть и исправить замечания, а также автоматически сгенерировать некую документацию в виде отчета.
Но обо всем поподробнее!
                 Рассмотрим процесс создания рабочего прототипа на платформе Silverlight (порядок работа для создания прототипа приложения на платформе WPF оказывается по большей части таким же). Прежде всего, стоит обратить внимания, что каждый элемент для прототипа представлен в виде карандашного наброска. Это позволяет не забывать о том, что это всего лишь набросок, всего лишь эскиз, который можно и нужно править. Что позволяет смотреть на проект с точки зрения критика, для достижения наиболее качественного результата.
Приятный фактор, что прототипы SketchFlow – это не просто рисунки, а приложения, полностью функционирующие на платформе WPF/Silverlight. Внеся необходимые коррективы в прототип, можете преобразовать его в рабочий проект и продолжить работу над окончательным вариантом приложения. Несколько слов также хочется сказать об организации создаваемого проекта.

                                          

                 Проект содержит в себе два связанных вместе проекта. Первый проект Prototype содержит общую логику приложения в файлах разметки App.xaml и исходного года App.xaml.cs. Во втором проекте PrototypeScreens размещается каждый экран (страница приложения). SketchStyles.xaml файл содержащий стили для оформления элементов пользовательского интерфейса прототипа приложения SketchFlow. Файл Sketch.Flow содержит данные, считываемые для отображения на панели SketchFlow Map узлов и линий, которые их соединяют. А также папка со шрифтами, которые используются для оформления.
                 Панель SketchFlow Map представляет собой некую структуру эскизного проекта. Здесь наглядно представлена взаимосвязь между страницами приложения. Стрелки показывают, с какого элемента, на какой может быть осуществлен переход. На SketchFlow Map в каждый момент времени подсвечен именно тот элемент, который является на данный момент активным или редактируемым. Зеленая стрелочка, указывающая на элемент, обозначает, что он стартовый. Для переопределения стартового элемента нужно выбрать Set as start из его всплывающего контекстного меню (которые вызывается с помощью правого клика на элементе). Чтобы создать новый объект в структуре, нужно навести на элемент, от которого будет осуществлен переход. Снизу сразу же появляются несколько вариантов действий. Create a connected screen позволяет создать новую страничку. Connect an existing screen позволяет добавить дополнительные переходы. Insert a Component Screen позволяет создать компонент, на котором определяются фрагменты повторяющегося содержимого пользовательского интерфейса, например навигационное меню которое отображается на многих экранах навигации. Тут же представлена цветовая панель, которая позволяет разукрасить элементы в разные цвета. Это позволит визуально разделить их на задачи, последовательности или отразить ту или иную логику.

                      

                  Рассмотрим компонент поближе. Этот элемент позволяет определить схему навигации, чтобы связать ее с любым экраном, которому требуется соответствующий пользовательский интерфейс. Таким образом, если потребуется изменить внешний вид навигации достаточно внести коррективы только на компоненте. В качестве примера создадим меню, с помощью трех геометрических форм кругов и элементов управления типа TextBox. Они позволят нам переходить к трем разным экранам, щелчком по кружку. Здесь же мы также можем немного поиграться со свойствами объектов: с формой или цветом тех или иных элементов. Таким образом, мы можем еще больше визуализировать те или иные части интерфейса.

                          
                  Также создадим три странички, на которые будет осуществляться переход. Для наглядности перехода рекомендуется заполнить странички любым контекстом. Связывание страниц с компонентом происходит путем добавление стрелочек на SketchFlow Map. Стоит обратить внимание, что образец компонента уже находится на каждой странице.
                  Теперь нам необходимо осуществить переход к нужному экрану по щелчку на выбранном кружке. А сделать это достаточно просто. Достаточно щелкнуть правой кнопкой по кружку и выбрать из всплывающего меню Navigate to -> Screen (Перейти -> «название экрана»).
                 Рассмотрим, что же было сгенерировано автоматически на все наши действия.

<pc:SketchCircleSL Margin="0,0,111,0" 
   St yle="{StaticResource Circle-Sketch}" 
   HorizontalAlignment="Right" Width="93" Height="94"     
   VerticalAlignment="Top">
      <i:Interaction.Triggers>
	 <i:EventTrigger EventName="MouseLeftButtonDown">
            <pi:NavigateToScreenAction 
	     TargetScreen="PrototypeScreens.Screen_1"/>
	  </i:EventTrigger>
      </i:Interaction.Triggers>
      <pc:SketchCircleSL.Background>
	 <LinearGradientBrush EndPoint="0.5,1"  
         StartPoint="0.5,0">
	    <GradientStop Color="White" Offset="0"/>
	    <GradientStop Color="Black" Offset="1"/>
	    <GradientStop Color="#FF63FF44" Offset="0.33"/>
	    <GradientStop Color="#FF05451D" Offset="0.722"/>
	 </LinearGradientBrush>
      </pc:SketchCircleSL.Background>
</pc:SketchCircleSL>

                 Здесь описаны основные параметры кружка: размеры, расположение, описывание цвета в виде градиента. Само действие перехода описано всего в нескольких строчках, что позволяет прописывать такие элементы вручную.
                 Проверить работоспособность проект можно путем его запуска. Запуск проекта осуществляется с помощью меню Project -> Run project или F5. Левая часть интерфейса позволяет увидеть полную карту проекта SketchFlow Map. Также в Navigate отображаются только те элементы, на который может быть совершен переход. Домик позволить перейти на стартовый экран.
                 Expression Blend также не ограничивает возможность использования анимаций в SketchFlow. Перейдем к редактированию нашего компонента и на страницу какой-либо элемент, например, еще один круг. Перейдем к панели SketchFlow Animation, которая по умолчанию располагается в верхней части визуального конструктора. Анимация организуется по принципу изменения свойств элементов интерфейса в промежутках между ключевыми кадрами. Для добавления нового кадра, выберем + в углу появившегося экрана, затем Add Frame. Чтобы убрать лишний кадр, достаточно щелкнуть на кнопке со знаком минус.

        

                 Самое главное, что можно выбрать любой кадр и внести изменения в раскодировку по своему усмотрению. В данном случае, для ознакомления, мы просто изменим положение элемента на каждом кадре. Значок fx позволяет добавлять эффект перехода в отдельный кадр (отскакивание, и др.). После запуска проекта в Navigate добавляется новый пункт с именем нашей анимацией, стрелочка возле названия указывает на возможность воспроизведения.
Теперь стоит перейти к одной из самых приятных и важных возможностей, возможность получать и оставлять отзывы (они же feedback). На панели My Feedback нам даются различные варианты выделения. Это ластик, маркер и ручка с возможностью выбора цвета, а также текстовые комментарии. При сохранении отзыва (Export FeedBack) все изменения сохранятся в формате *.feedback, в котором также указывается информация об авторе, для того, чтобы было проще ориентироваться в полученных отзывах.

                                          
                 Для просмотра отзывов клиентов необходимо сначала перейти к панели SketchFlow Feedback (Windows -> SketchFlow Feedback). Затем необходимо добавить сохраненный/переданный отзыв. На страницах, где был оставлен отзыв, сразу появятся все исправления, выделения, а также текстовые комментарии, включая время написания. Причем цветовые выделение, будут бледнее, по сравнению с остальными элементами. Это позволяет визуально отделять то, что уже есть, с теми моментами, которые надо исправить.
                 После оформления прототипа в том или ином виде будет полезно оформить документацию в формате Microsoft Word. Для этого требуется всего перейти к его созданию с помощью File -> Export to Microsoft Word. При формировании нового документа можно также указать специальный шаблон, и включить отзывы в документацию. Таким образом, в документ войдут все элементы проекта, включая его структуру, отзывы, а также автоматически сгенерированное содержание.

                                            
                  Таким образом, SketchFlow позволяет создавать интерактивные прототипы приложений на платформах WPF и Silverlight, которые легко видоизменяются и расширятся в процессе разработки, при непосредственном участии клиентов и заказчиков. Что позволяет делать новые продукты ещё лучше, оперативно учитывая все замечания.