WPF设计师：您的设计流程是什么？

Question

我将完全重新提出这个问题。所以这是一个很大的编辑

我正在寻找WPF专业人士关于他们设计过程的一些反馈。例如，当我设计一个网站时，在我编写任何HTML，CSS，JavaScript之前，我在Photoshop中设计界面，这样我就可以向客户展示他们网站的外观。在我编写任何代码之前，我选择样式，配色方案，大多数（如果不是全部）第三方图形（股票摄影）一旦客户批准设计，我就开始构建它。

我想知道设计WPF桌面应用程序的等价物是什么。在设计界面时，选择颜色方案，选择按钮样式，选择可能进入的任何图像，首先创建样机是否常见？您是否只需动态创建所有图形，就像构建它一样。或者在网上简单地找到主题/皮肤并在你的应用中使用它更常见？

而且，我知道没有正确的答案，我只是想听听你们所做的一切。

由于

P.S。 - 我有Expression Blend 4，我可以手工编写XAML（不仅仅是在Blend中使用Design View）。我的问题不是关于我应该使用什么工具来构建WPF应用程序，而是关于设计过程。

Answer 1

对于WPF应用程序，使用Blend设计界面是最好的方法，因为您可以直接将Blend中的xaml重用到VS中，而不需要返工。虽然，你没有找到太多设计师在Blend方面拥有专业知识（与photoshop等相比）;所以，到目前为止，WPF世界中的设计过程并没有那么多（如在Web中）。

如果您擅长使用其他设计工具并想要使用它们（如photoshop），那么您可以评估这些工具以便从其他格式创建XAML -

  

Visio Export to XAML Visio 2007的加载项以创建XAML   直接

     

XAML Tune – Convert SVG# to XAML 允许您使用的免费工具   将SVG文件转换为XAML文件。它自动化XAML转换   为了改进设计和代码集成。

     

Adobe Illustrator Export to XAML 免费提供的插件   使Adobe Illustrator能够导出WPF和Silverlight   兼容的XAML

     

Adobe Illustrator to XAML Export C# Script 一个脚本   以WPF / XAML格式导出Adobe Illustrator图稿。剧本   使用Illustrator CS2 COM类型库用C＃/ .Net 2.0编写。   虽然它在Illustrator中被视为脚本，但它也是一个   独立应用。

     

Adobe Fireworks Export to XAML Infragistics Fireworks to   XAML Exporter是一个Fireworks扩展，可以让您轻松实现   将Adobe Fireworks中创建的图稿转换为新的XAML格式   与Windows Presentation Foundation（WPF）一起介绍。对于那些人   你在Fireworks中创建的艺术作品库（比如   Infragistics Visual Design Group），这应该是欢迎新闻！您   现在可以在新的WPF中重用先前的图稿，填充和布局   应用

     

Adobe Photoshop Export to XAML 简单，免费的开源工具   用于将Photoshop .PSD文件转换为XAML。还支持有限的SWF   转换为XAML。

     

Adobe Flash Export to XAML 免费转换工具   Adobe / Macromedia Flash文件到XAML

     

SVG Export to XAML 另一种允许您使用的免费工具   将SVG文件转换为XAML文件。

取自 - http://www.realsoftwaredevelopment.com/the-complete-list-of-xaml-tools/

Answer 2

在进行任何Xaml编码之前，我们已经使用Microsoft Visio进行布局并获得UI的批准。如果你真的擅长Photoshop，我认为这不比Photoshop好太多。对于我们这些不擅长Photoshop的人来说，Visio有很多工具可以对齐事物，应用颜色样式等。一个人制作了大量的库存对象，我们打开他的文件进行复制，以便我们所有的UI模型看起来一致。

现在有趣的是我擅长使用Xaml编辑器，在很多情况下我发现它比使用Visio更快。 ： - ）

Answer 3

样机不仅仅是一个好主意：我认为如果你有任何中等复杂的东西并且你希望你的顾客满意，那么它们是强制性的。我见过两种方法都是成功的：

1）使用Sketchflow（现在是Expression Blend的一部分）创建交互演示。您拥有Blend的所有功能，但它处于快速原型设计环境中。然后，您可以构建整个项目并将其发送给您的客户进行审核。如果您的项目非常重要，这是一个很好的方法。 Check out these videos有关Sketchflow的速成课程。

2）拿下你的Photoshop comps并将它们直接导入Blend。我没有将它与akjoshi提到的一些工具进行比较，但它确实有效。关键是将每个屏幕切成碎片然后导入它们。然后，您可以调整每个部分，将它们转换为资源等等。

Answer 4

我建议您在Illustrator中使用屏幕和资源，因为您可以稍后导入矢量资源。然而，没有奇迹，Blend肯定是做视觉材料的工具（尤其是动画和屏幕行为）。

到目前为止，这是我的方法：

• FreeMind上的功能要求和信息架构（如果您愿意，可以使用Visio）
• Illustrator上的线框和复合材料
• Illustrator上的“资产板”（您要导入的所有内容：画笔（颜色和渐变），图标，复杂形状）
• 创建图像库（类似于网页，带有PNG的pref）
• 创建资源词典（如CSS）：样式（特别是字体），模板，画笔和图像等。

还可以使用Sketchflow在Blend中模拟概念证明或基本交互式模拟。我对此并不熟悉，但我听说它很方便。

Illustrator可以替换为Photoshop当然，我只是认为Illustrator与创建XAML时应该考虑的内容更接近：有图形样式和符号工具可以作为等效的XAML资产。然后，您会更好地了解如何组织您的作品。