26、SketchFlow原型设计全攻略

SketchFlow原型设计全攻略

1. SketchFlow Map面板探索

当加载示例项目后，会发现Blend IDE的一个新特性——SketchFlow Map面板，它位于画板下方。该面板是一个图形编辑器，可用于定义应用程序的结构、流程、导航和组成。与画板专注于特定窗口或用户控件的UI内容不同，SketchFlow Map面板让我们能关注应用程序的整体结构。

面板中的每个节点代表原型中的一个特定“屏幕”，通常对应一个特定的窗口或用户控件。在PCGamingSketch项目中，最左侧的节点分别命名为MouseWheel、Internal Page、Refined和Version Approved，这些节点共同代表了应用程序初始GUI模型的最终批准UI的一组屏幕。

若双击任何节点，会在画板中打开相关屏幕进行查看。而且，节点之间通过方向箭头连接，这些关系代表了UI的基本流程，可使用SketchFlow Player的导航编辑器进行测试。同时，还能使用各种导航行为通过用户交互（如按钮点击、菜单选择等）快速建模此流程，并且这些导航关系可在Blend IDE中即时更改。

2. 起始节点的作用

起始节点在左上角有一个特定的绿色箭头图标，创建新的SketchFlow应用程序时，会自动提供一个以此方式标记的初始屏幕节点，代表原型启动时显示的初始屏幕。若要更改起始节点，只需右键单击任何节点并选择“Set as Start”菜单选项，绿色箭头图标就会移动到所选节点。

3. 节点颜色编码

可以为每个节点分配独特的颜色，这在视觉上识别一组相关节点时很有用。节点颜色对原型的运行时行为没有影响，默认情况下，蓝色代表导航屏幕，绿色代表组件屏幕。组件屏幕可用于定义可在多个导航屏幕上显示的可重复UI内容（如导航菜单）。更改节点颜色的方法是将鼠标光标悬停在节点上以显示节点编辑托盘，然后使用最右侧的集成颜色编辑器。

4. 创建和连接节点

节点编辑器可用于创建新的连接节点（及相关屏幕）、将当前节点连接到现有屏幕以及创建新的组件屏幕。将鼠标光标悬停在任何节点上，会看到每个选项都对应一个特定的按钮。在添加和连接节点时，若需要更改UI流程，只需点击连接线上箭头的任一端并相应地重新定位。同时，可右键单击任何连接线并选择Delete将其完全删除。

5. 分配过渡样式

有了一组连接的节点后，可以为其分配过渡效果，为原型设计增添一些视觉效果。在执行原型之前，右键单击起始节点和Version 1节点之间的连接并选择喜欢的过渡样式，对起始节点的其他三个出站连接重复此过程。

6. 使用SketchFlow Player测试原型

按Ctrl + F5（或F5）使用SketchFlow Player测试原型。由于PCGamingSketch是Silverlight原型，Player将加载到浏览器中，标记为起始的节点将作为活动屏幕出现。

Player UI的左侧有两个关键区域，顶部是导航窗格，可根据在SketchFlow Map面板上创建的连接和过渡显示屏幕。还可以点击Map按钮查看此地图的只读显示。在给定屏幕上，导航面板会显示一些过渡行为或动画序列，点击即可启动，这些效果是使用Blend IDE中的各种SketchFlow行为对象和自定义动画添加到屏幕上的。也可以点击屏幕上使用这些效果的部分来执行动画或行为。

7. 向原型添加反馈

SketchFlow Player的主要目的是为客户提供对原型提供有用反馈的方式。客户可以使用Player左下角的My Feedback面板，在其中输入文本，还可以选择一组绘图工具（墨水、高亮和橡皮擦）来绘制和注释屏幕的部分。选择墨水或高亮工具时，有多种选项可配置视觉注释的大小和颜色。

8. 导出原型反馈

客户反馈会自动记录，可以在原型的每个屏幕上留下文本和墨水反馈。添加完反馈后，可通过My Feedback面板上的Folder按钮保存反馈。将反馈导出为名为MyFeedback的文件，保存到Windows桌面或其他选择的位置，原型反馈文件以*.feedback文件扩展名保存，该文件包含数据的XML描述。

9. 将客户反馈导入Blend

要在Blend IDE中查看反馈，首先必须激活Window菜单下的SketchFlow Feedback选项。激活后，SketchFlow Feedback面板在IDE中变为活动状态。点击加号按钮，点击Add，找到导出的文件，即可将XML数据添加到查看器中，此时会在画板上看到渲染的反馈，SketchFlow Map面板会为包含客户输入的每个屏幕显示一个灯泡图标。

10. 生成Microsoft Word文档

Blend SketchFlow IDE还提供了生成Microsoft Word文档的功能，该文档可捕获原型中的每个屏幕和利益相关者注释，可作为产品文档的起始模板。生成此文档只需选择File ➤ Export to Microsoft Word，SketchFlow附带了自己的Microsoft Word模板，也可以指定自定义模板并配置一些其他选项（最重要的是包括利益相关者反馈）。

11. 创建Silverlight原型

创建一个自定义的SketchFlow原型应用程序，模拟在线销售应用程序中可能看到的一些典型屏幕。从New Project对话框中创建一个名为OnlineStoreApp的新Silverlight SketchFlow应用程序项目，创建后会得到一个名为Screen 1的屏幕作为原型启动屏幕，使用SketchFlow Map面板将其重命名为MainScreen。

12. 检查项目文件

SketchFlow项目的组织方式与典型的WPF或Silverlight应用程序略有不同。激活Projects面板会发现解决方案包含两个相关项目：
- 第一个项目（名为OnlineStoreApp）包含由App.xaml和App.xaml.cs源文件表示的整体应用程序逻辑，并且引用了几个Expression Blend SketchFlow程序集。
- 第二个项目（名为OnlineStoreAppScreens）引用了相同的原型设计程序集，是通过Map面板添加到应用程序的每个屏幕的存储位置。该项目还定义了一些其他有趣的项目：
- SketchStyles.xaml：包含SketchFlow UI元素的样式。
- Sketch.Flow：XML文档，包含Map面板用于显示节点及其连接的数据，通常无需直接编辑此文件，因为在使用SketchFlow IDE时会自动更新。
- Fonts文件夹：存储一些SketchFlow字体类型。

13. 创建组件屏幕

在构建WPF或Silverlight应用程序时，常见做法是创建一个适用于一组相关窗口/用户控件对象的导航系统。SketchFlow组件屏幕可用于定义这样的导航方案，并将其连接到任何需要导航UI的屏幕。组件屏幕内部是一个自定义的用户控件对象，添加到使用它的项目的布局管理器中。这样做的好处是，如果要更改导航系统的外观和感觉，只需更改组件屏幕UI，其余节点将在下一次构建时刷新。

创建组件屏幕的步骤如下：
1. 将鼠标光标悬停在MainScreen节点上以打开节点配置工具，点击“Create and insert a Component screen”按钮。
2. 将新节点重命名为NavSystem并将其从MainScreen节点移开以提高可读性。
3. 查看MainScreen节点的画板，会看到导航系统已显示在设计器上，查看底层XAML会发现代表此导航系统的用户控件已添加到根布局管理器中。

<Grid x:Name="LayoutRoot" Background="White">
  <local:NavSystem HorizontalAlignment="Left" VerticalAlignment="Top"  
       d:IsPrototypingComposition="True" Margin="83,8,0,0"/>
</Grid>

4. 确保NavSystem屏幕的画板在IDE中处于活动状态，使用Assets库，在Styles类别下找到Sketch Styles部分，这里有SketchFlow项目中常用的每个原型设计控件。使用这些SketchFlow样式控件的一个好处是能清楚地告知客户这是一个正在运行的原型，而不是生产就绪的UI。
5. 注意Assets库的Styles类别还提供了一组支持此原型外观和感觉的样式形状（如椭圆、矩形等），由于这些样式已设置为默认值，选择Tools面板上的项目时会自动使用。使用Tools面板（或Assets库）在NavSystem屏幕中构建一个由三个喜欢的彩色几何图形组成的导航系统。

14. 创建其他屏幕

使用Map面板，右键单击任何空白区域并选择“Create a Screen”菜单选项，创建两个新屏幕，完成后将这些屏幕重命名为ViewCart和Checkout。

对于ViewCart屏幕，添加一些描述性文本、一个购物车的占位符图形（如大灰色正方形）和一个按钮控件。Checkout屏幕同样简单。

以下是整个过程的mermaid流程图：

graph LR
    A[创建Silverlight原型项目] --> B[重命名初始屏幕为MainScreen]
    B --> C[检查项目文件]
    C --> D[创建组件屏幕NavSystem]
    D --> E[构建导航系统]
    E --> F[创建其他屏幕ViewCart和Checkout]
    F --> G[添加屏幕内容]
    A --> H[探索SketchFlow Map面板]
    H --> I[设置起始节点]
    I --> J[节点颜色编码]
    J --> K[创建和连接节点]
    K --> L[分配过渡样式]
    L --> M[使用SketchFlow Player测试原型]
    M --> N[添加反馈]
    N --> O[导出反馈]
    O --> P[导入反馈到Blend]
    P --> Q[生成Microsoft Word文档]

通过以上步骤，我们可以完成一个完整的SketchFlow原型设计，并对其进行测试、收集反馈和生成文档。在实际应用中，可根据具体需求对各个步骤进行调整和优化，以创建出更符合要求的原型。

SketchFlow原型设计全攻略

15. 屏幕布局与交互设计

在完成了基本的屏幕创建后，接下来要关注的是各个屏幕的布局和交互设计。

• MainScreen布局优化 ：在之前添加了描述性文本的基础上，可以进一步调整文本的字体、大小、颜色和位置，使其更加美观和突出。同时，可以考虑添加一些背景图片或者装饰元素，增强屏幕的视觉效果。
• ViewCart屏幕交互设计 ：对于ViewCart屏幕，除了已有的描述性文本、占位符图形和按钮控件外，可以为按钮添加交互效果。例如，当鼠标悬停在按钮上时，改变按钮的颜色或者大小，以提示用户可以点击操作。还可以为购物车的占位符图形添加点击事件，当用户点击图形时，弹出一个详细的商品信息窗口。
• Checkout屏幕设计 ：Checkout屏幕可以设计得更加简洁明了，突出关键信息，如商品总价、支付方式等。可以使用表格来展示商品列表和价格，如下表所示：

商品名称	数量	单价	总价
商品1	2	50	100
商品2	1	80	80
总计	-	-	180

16. 导航系统的完善

之前创建的导航系统由三个彩色几何图形组成，现在可以进一步完善它。

• 添加导航链接 ：为每个彩色几何图形添加导航链接，使其能够准确地导航到对应的屏幕。可以使用SketchFlow的导航行为来实现这一功能。具体操作步骤如下：
  1. 选中一个彩色几何图形。
  2. 在Blend IDE的行为面板中，选择SketchFlow的导航行为，如“Navigate to Screen”。
  3. 在弹出的对话框中，选择要导航到的屏幕，如ViewCart或Checkout。
• 导航动画效果 ：为导航系统添加一些动画效果，增强用户体验。例如，当用户点击彩色几何图形时，图形可以有一个缩放或者旋转的动画效果，然后再进行屏幕导航。可以使用Blend IDE的动画编辑器来创建这些动画效果。

17. 原型的性能优化

在原型设计过程中，性能也是一个需要考虑的因素。以下是一些性能优化的建议：

• 减少不必要的元素 ：检查每个屏幕，删除那些不必要的元素，如多余的图形、文本或者控件，以减少原型的加载时间。
• 优化图片资源 ：如果使用了图片，确保图片的大小和格式是最优的。可以使用图片编辑工具对图片进行压缩，以减小文件大小。
• 合理使用动画效果 ：虽然动画效果可以增强用户体验，但过多的动画效果会影响原型的性能。只在必要的地方使用动画效果，并控制动画的复杂度。

18. 多平台兼容性测试

在完成原型设计后，需要对其进行多平台兼容性测试，以确保在不同的设备和浏览器上都能正常显示和使用。

• 设备测试 ：使用不同尺寸的设备，如手机、平板和电脑，打开原型，检查屏幕布局是否合理，交互是否正常。
• 浏览器测试 ：在不同的浏览器，如Chrome、Firefox、Safari等，打开原型，查看是否存在显示问题或者兼容性问题。

19. 团队协作与版本管理

如果是多人团队进行原型设计，团队协作和版本管理就显得尤为重要。

• 使用版本控制工具 ：可以使用Git等版本控制工具来管理原型项目，方便团队成员之间的代码共享和协作。每个成员可以在自己的分支上进行开发，完成后再合并到主分支。
• 定期沟通与评审 ：团队成员之间要定期进行沟通和评审，分享自己的工作进展和遇到的问题。可以通过线上会议或者面对面交流的方式进行。

20. 持续改进与迭代

原型设计并不是一次性的任务，而是一个持续改进和迭代的过程。根据客户的反馈和实际使用情况，对原型进行不断的优化和完善。

以下是持续改进与迭代的mermaid流程图：

graph LR
    A[完成原型设计] --> B[收集反馈]
    B --> C[分析反馈]
    C --> D[确定改进点]
    D --> E[进行优化]
    E --> F[再次测试]
    F --> G{是否满足要求}
    G -- 是 --> H[交付原型]
    G -- 否 --> B

通过以上步骤，我们可以创建一个功能完善、交互良好、性能优化且具有多平台兼容性的SketchFlow原型。同时，通过团队协作和持续改进，能够不断提升原型的质量，满足客户的需求。在实际应用中，要根据具体的项目需求和场景，灵活运用这些方法和技巧。