27、SketchFlow 原型设计与开发全流程指南

SketchFlow 原型设计与开发全流程指南

在软件开发过程中，原型设计是收集用户需求的重要环节。SketchFlow 为 WPF 和 Silverlight 应用程序提供了构建交互式原型的强大功能，下面将详细介绍使用 SketchFlow 进行原型设计、打包以及转化为生产应用的全过程。

1. 复制导航 GUI

当 ViewCart 和 Checkout 屏幕搭建完成后，我们可以为每个布局管理器添加导航 GUI。具体操作如下：
- 利用 Map 面板，将 Component 屏幕节点拖到要使用它的屏幕上。操作完成后，原型地图会呈现出更新后的样子。
- 由于每个屏幕都包含了导航系统，此时可能需要调整 Checkout 和 ViewCart 屏幕上现有组件的大小和布局。

2. 使用 NavigateToScreenAction 行为

为了确保用户点击特定星星图形时能正确打开相应屏幕，可按以下步骤操作：
- 打开 NavSystem 组件的画板，右键点击能将用户带到主屏幕的星星图形，使用“Navigate to”菜单选择 MainScreen 选项。
- 重复此过程，将其余星星图形映射到各自对应的屏幕。

查看 NavSystem 组件的 XAML 代码，会发现导航逻辑由名为 NavigateToScreenAction 的 SketchFlow 行为对象处理。以下是第一个星星图形的标记示例：

<ed:RegularPolygon ed:GeometryEffect.GeometryEffect="Sketch"  
    InnerRadius="0.47211" PointCount="5" Stretch="Fill"  
    Stroke="{StaticResource BaseBorder-Sketch}"  
    StrokeThickness="2"  
    UseLayoutRounding="False" Height="120" Fill="#FFCE8585"> 
  <i:Interaction.Triggers> 
    <i:EventTrigger EventName="MouseLeftButtonDown"> 
      <pi:NavigateToScreenAction  
          TargetScreen="OnlineStoreAppScreens.Screen_1"/> 
    </i:EventTrigger> 
  </i:Interaction.Triggers> 
</ed:RegularPolygon>

此外，也可以从 Assets 库（位于 SketchFlow 类别下的 Behaviors 部分）手动添加 SketchFlow 行为，然后使用 Blend Properties 窗口进行配置。同时，可在 Objects and Timeline 面板中找到这些行为并更改其设置。

完成上述操作后，Map 面板不仅会显示每个屏幕正在使用 Component 屏幕，还会显示导航连接线。此时，按下 F5 键启动原型，就可以通过 SketchFlow Player Navigate 面板和点击星星图形在各个屏幕之间进行导航。

3. 融入原型交互性

SketchFlow IDE 提供了轻量级的 Blend 动画编辑器，可用于为原型添加交互性。以下以向 Checkout 屏幕添加交互性为例：
- 打开 Checkout 画板，在现有布局中添加一个 Block Arrow Up - Sketch 形状，用于代表用户的鼠标光标。
- 找到默认位于设计器顶部的 SketchFlow Animation 面板，点击“+”按钮创建一个新的 SketchFlow 动画故事板，并可通过面板底部的下拉列表将其重命名为更合适的名称，如“AnimateArrow”。
- 轻量级的 SketchFlow Animation 面板通过逐关键帧更改 UI 元素的属性来实现动画效果。在 SketchFlow Animation 面板中选择一个关键帧，点击右上角的“+”按钮添加新的关键帧，或使用“-”按钮删除所选关键帧。
- 为当前故事板添加三个关键帧：
- 第一个关键帧捕获默认屏幕状态，模拟鼠标光标处于默认位置。
- 选择第二个关键帧，将模拟鼠标光标移动到 Button 控件上方。
- 选择第三个也是最后一个关键帧，更改 Button 的背景颜色，以表示点击按钮的效果。

如果想让动画更加丰富，还可以为关键帧配置动画缓动效果（如弹跳、弹簧等）和过渡效果（如淡入、波浪等）。点击相应按钮即可添加这些效果。

运行原型并导航到 Checkout 屏幕，可通过 Navigate 面板播放动画。若想通过用户输入启动动画，可使用 Assets 库中 SketchFlow ➤ Behaviors 部分的 PlaySketchFlowAnimationAction 行为。具体操作如下：
- 选择该元素并将其拖到 Objects and Timeline 面板中 Checkout 屏幕的 [UserControl] 树节点上。
- 选择该元素，使用 Properties 面板为 Loaded 事件配置一个触发器，以启动相应动画。再次运行原型并导航到 Checkout 屏幕，动画将自动启动。

4. 原型打包

在开发过程中，使用 Blend IDE 运行 SketchFlow 原型时，SketchFlow Player 会自动启动。但当需要将原型发送给没有 Expression Blend 的利益相关者时，可按以下步骤创建独立播放器：
- 选择“File ➤ Package SketchFlow Project”。
- 指定生成播放器的位置和名称。由于创建的是 Silverlight SketchFlow 原型，生成的文件集包括一个 HTML 文件、一个 XAP 二进制文件以及一个 ASP.NET 网页。客户只需双击 HTML 文件，即可在浏览器中查看原型。

若打包的是 WPF SketchFlow 原型，最终会得到一个可执行文件（*.exe）。

以下是整个原型设计与打包流程的 mermaid 流程图：

graph LR
    A[搭建 ViewCart 和 Checkout 屏幕] --> B[添加导航 GUI]
    B --> C[配置 NavigateToScreenAction 行为]
    C --> D[添加原型交互性]
    D --> E[运行并测试原型]
    E --> F[打包原型]

综上所述，通过 SketchFlow 可以方便地完成原型设计、收集用户反馈、导出反馈到 Word 文档以及管理 SketchFlow Map 面板等一系列操作。同时，还可以将 SketchFlow 原型作为生产应用的起点，经过一系列修改后转化为正式的项目。

SketchFlow 原型设计与开发全流程指南

5. 将原型转化为生产应用

在收集并记录客户反馈、相应修改原型并获得必要的批准后，可将 SketchFlow 原型转换为实际的 Silverlight 或 WPF 项目。具体步骤如下：

5.1 修改 *csproj 文件

• 打开包含 App.xaml 和 App.xaml.cs 文件的项目的 *.csproj 文件（例如 OnlineStoreApp.csproj），使用简单的文本编辑器将以下 XML 元素完全删除：

<ExpressionBlendPrototypingEnabled>
  False
</ExpressionBlendPrototypingEnabled>
<ExpressionBlendPrototypeHarness>
  True
</ExpressionBlendPrototypeHarness>

保存并关闭文件。
- 打开包含原型屏幕的二级项目的 *.csproj 文件（例如 OnlineStoreAppScreens.csproj），找到并删除相同的两行 XML，完成后保存文件。

5.2 更新根项目程序集引用

• 打开修改后的解决方案到 Blend IDE 中，使用 Projects 选项卡删除 Microsoft.Expression.Prototyping.Runtime.dll 程序集。
• 使用 Blend IDE 的“Project ➤ Add Reference”菜单选项，添加对 Silverlight 4.0 System.Windows.Controls.Navigation.dll 程序集的引用，该程序集默认位于 C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client 文件夹。如果使用的是 64 位版本的 Windows，路径中应使用 Program Files(x86) 而非 Program Files。
• 对二级项目（如 OnlineStoreAppScreens.csproj）也执行同样的操作，即删除 Microsoft.Expression.Prototyping.Runtime.dll 程序集并添加 System.Windows.Controls.Navigation.dll 程序集。

5.3 修改 App.xaml.cs 文件

• 打开 App.xaml.cs 文件进行编辑，在代码文件顶部、App 类类型声明之前，有一个程序集级别的属性，将这一行完全注释掉：

[assembly: Microsoft.Expression.Prototyping.Services.SketchFlowLibraries 
  ("OnlineStoreApp.Screens")]

• 找到当前的 Startup 事件处理程序的实现，删除（或注释掉）当前的代码行，并替换为以下代码，将 XAML 文件的名称（Screen_1.xaml）替换为你希望在启动时显示的 XAML 资源，同时将项目名称 (/OnlineStoreApp.Screens) 替换为包含各个屏幕的项目名称。

private void Application_Startup(object sender, StartupEventArgs e) 
{ 
  // Comment out the current line!  
  // this.RootVisual = new  
  // Microsoft.Expression.Prototyping.Workspace.PlayerWindow(); 

  // Add this code statement, but update the XAML file name! 
  this.RootVisual = new Frame() 
  { 
  Source = new 
    Uri("/OnlineStoreApp.Screens;component/Screen_1.xaml", 
        UriKind.Relative) 
  }; 
}

完成上述步骤后，项目将不再使用 SketchFlow Player。运行 Silverlight 应用程序时，它将像典型的 XAP 文件一样加载到浏览器中。你可能还需要将 SketchFlow 样式替换为自己的样式。

以下是将原型转化为生产应用的步骤表格：
|步骤|操作内容|
| ---- | ---- |
|修改 *csproj 文件|删除特定 XML 元素|
|更新根项目程序集引用|删除旧程序集，添加新程序集|
|修改 App.xaml.cs 文件|注释特定属性，更新启动代码|

以下是从原型到生产应用转化过程的 mermaid 流程图：

graph LR
    A[收集反馈并修改原型] --> B[保存项目副本]
    B --> C[修改 *csproj 文件]
    C --> D[更新程序集引用]
    D --> E[修改 App.xaml.cs 文件]
    E --> F[完成转化为生产应用]

总结

SketchFlow 在软件开发生命周期中扮演着重要角色。它允许开发者为 WPF 和 Silverlight 应用程序构建交互式原型，方便在收集用户需求阶段与利益相关者直接合作。通过本文介绍的步骤，你可以完成原型设计、打包以及将原型转化为生产应用的全过程。虽然示例原型相对简单，但你应该已经熟悉了使用 SketchFlow 生成原型、收集用户评论、导出评论到 Word 文档以及管理 SketchFlow Map 面板的整体流程。希望这些内容能帮助你在软件开发中更好地利用 SketchFlow 进行原型设计和开发。